vue學習十七(vue-resource使用)
阿新 • • 發佈：2018-12-15
Vue.js是資料驅動的，這使得我們並不需要直接操作DOM，如果我們不需要使用jQuery的DOM選擇器，就沒有必要引入jQuery。vue-resource是Vue.js的一款外掛，它可以通過XMLHttpRequest或JSONP發起請求並處理響應。也就是說，$.ajax能做的事情，vue-resource外掛一樣也能做到，而且vue-resource的API更為簡潔。另外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請求前和請求後附加一些行為，比如使用inteceptor在ajax請求時顯示loading介面
前端程式碼
我們總結2個例子，通過vue-resource實現跨域請求，get和post請求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <!-- 注意：vue-resource 依賴於 Vue，所以先後順序要注意 --> <!-- this.$http.jsonp --> <script src="./lib/vue-resource-1.3.4.js"></script> </head> <body> <div id="app"> <input type="button" value="get請求" @click="getInfo"> <input type="button" value="post請求" @click="postInfo"> </div> <script> // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: '#app', data: { name: "safly", sex: "男" }, methods: { getInfo() { // 發起get請求 this.$http.get('http://localhost:8080/pingg').then(result => { console.log(result.body) }) }, postInfo() { // 發起 post 請求 application/x-wwww-form-urlencoded // 手動發起的 Post 請求，預設沒有表單格式，所以，有的伺服器處理不了 // 通過 post 方法的第三個引數， { emulateJSON: true } 設定 提交的內容型別 為 普通表單資料格式 this.$http.post('http://localhost:8080/pingp', { name: this.name, sex: this.sex }, { emulateJSON: true }).then(result => { console.log(result.body) }) }, } }); </script> </body> </html>
後端程式碼(處理跨域)
package main import ( "fmt" "github.com/gin-gonic/gin" "net/http" "strings" ) func main() { r := gin.Default() r.Use(Cors()) r.GET("/pingg", func(c *gin.Context) { c.JSON(200, gin.H{ "message": "pingg", }) }) r.POST("/pingp", func(c *gin.Context) { name := c.PostForm("name") sex := c.PostForm("sex") fmt.Println("name>>>",name,"sex>>>",sex) c.JSON(200, gin.H{ "message": "pingp", }) }) r.Run() } func Cors() gin.HandlerFunc { return func(c *gin.Context) { method := c.Request.Method //請求方法 origin := c.Request.Header.Get("Origin") //請求頭部 var headerKeys []string // 宣告請求頭keys for k, _ := range c.Request.Header { headerKeys = append(headerKeys, k) } headerStr := strings.Join(headerKeys, ", ") if headerStr != "" { headerStr = fmt.Sprintf("access-control-allow-origin, access-control-allow-headers, %s", headerStr) } else { headerStr = "access-control-allow-origin, access-control-allow-headers" } if origin != "" { c.Writer.Header().Set("Access-Control-Allow-Origin", "*") c.Header("Access-Control-Allow-Origin", "*") // 這是允許訪問所有域 c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE") //伺服器支援的所有跨域請求的方法,為了避免瀏覽次請求的多次'預檢'請求 // header的型別 c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma") // 允許跨域設定 可以返回其他子段 c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar") // 跨域關鍵設定 讓瀏覽器可以解析 c.Header("Access-Control-Max-Age", "172800") // 快取請求資訊 單位為秒 c.Header("Access-Control-Allow-Credentials", "false") // 跨域請求是否需要帶cookie資訊 預設設定為true c.Set("content-type", "application/json") // 設定返回格式是json } //放行所有OPTIONS方法 if method == "OPTIONS" { c.JSON(http.StatusOK, "Options Request!") } // 處理請求 c.Next() // 處理請求 } }
測試效果如下：
get請求：
{message: "pingg"}
post請求
{message: "pingg"}
{message: "pingp"}
後端log輸出如下：
GIN] 2018/10/15 - 11:46:51 | 200 | 155.089µs | ::1 | GET /pingg
name>>> safly sex>>> 男