vue学习十七(vue-resource使用)
Posted 易辰_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue学习十七(vue-resource使用)相关的知识，希望对你有一定的参考价值。
文章目录
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>>> 男
以上是关于vue学习十七(vue-resource使用)的主要内容，如果未能解决你的问题，请参考以下文章