简述vue的axios使用以及模拟数据

数据请求

axios

是一个第三方的数据请求模块

1.下载：npm i -s axios

2.引用:单独引用就import axios from “axios”

全局引用:

1. ​ 1.在main.js文件中import axios from “axios”
2. ​ 2.vue.prototype.axios=axios
3. ​ 把axios注入到vue中
4. ​ 使用就直接this.axios({})

3.语法:s

axios({
url:"路径",
method:"请求方式get",
params:{
	key:val
}
}).then((ok)=>{

})

跨域

vue中的代理跨域 proxy

就是让vue脚手架的当中的这个服务器协助我们来进行后台的数据请求

开启服务代理--配置好了一定要重启服务器
proxy:{
	"/api":{
        target:"代理的路径",
        changeOrign:true,//开启代理
        pathRewrite:{
            "^/api":""
        }
	}
}

mock.js模拟数据

模拟数据:在开发过程中 前后台的接口调用展示是非常重要的,但是如果我们在写项目的时候后台的接口没有写好 或者没有给我们提供的时候 没有接口调用 假数据怎么办?

1.我就把数据写死在data中(只是在后期接口联调的时候就会非常的麻烦)

2.一些模拟数据(mock.js json-server)等这些第三方的模拟数据js来完成假数据的模拟请求.

mock.js : npm i -s mockjs

配置mock的文件与文件夹在src文件夹下创建一个文件夹mock

在文件夹的下面写上数据与模拟数据的请求监听(拦截请求)

拦截请求:正常情况下 ajax发送出去的请求都是去寻找服务器获取相关的数据,当时现在我们使用的是mock来进行模拟数据 所以我们要把每次用户发送的请求使用mock拦截下来给用户使用

在mock下创建一个data文件夹和一个index.js

data(数据文件夹)里面存放json文件储存数据

index.js(拦截配置):

//1.引用mock
var Mock=require("mockjs")
//设置拦截 mock()拦截请求 分发返回数据
//Mock.mock("拦截的地址","post/get",拦截之后的返回数据)
Mock.mock("/mock/user","get",require("./data/one.json"))

配置好了之后在main.js(全局配置文件中引用)

//引用mock
require("./mock/index.js")

什么时候使用impor es6模块封装的.

require comment.js模块