GPS实时定位网站怎么做,建立网站的过程,电商网站首页布局,php开源订单管理系统vue axios mock.js
以下是封装的过程#xff0c;记录一下
1、首先先了解什么是mock.js的用途及特点 官网地址#xff1a;Mock.js (mockjs.com) 作用#xff1a;生成随机数据#xff0c;拦截 Ajax 请求 优势#xff1a;
2、了解axios的原理及使用 官网地址#xff1a…vue axios mock.js
以下是封装的过程记录一下
1、首先先了解什么是mock.js的用途及特点 官网地址Mock.js (mockjs.com) 作用生成随机数据拦截 Ajax 请求 优势
2、了解axios的原理及使用 官网地址Axios中文文档 | Axios中文网 (axios-http.cn) 作用Axios 是一个基于 promise 的网络请求库可以用于浏览器和 node.js ----------------------以上均认为你已了解后接下来开始封装----------------------
1、首先安装依赖包
npm install mockjs --save-dev
npm install axios --save2、添加环境变量以便在后续与后端对接接口时方便更改根据自己的情况更改 开发环境.env.development 生成环境.env.production 在随便一个vue文件中能conlog.log(process.env.VUE_APP_BASE_URL)打印出来就是配置好了
3、在src下面创建一个utils文件夹创建一个request.js文件
import axios from axios;const request axios.create({baseURL: process.env.VUE_APP_BASE_URL, // 设置默认的timeout: 5000, // 设置默认的请求超时时间
});
// 添加请求拦截器
request.interceptors.request.use((config) {// 在发送请求return config;},(error) {// 对请求错误做些什么return Promise.reject(error);}
);
// 添加响应拦截器
request.interceptors.response.use((response) {// 对响应数据做点什么return response.data;},(error) {// 对响应错误做点什么return Promise.reject(error);}
);export default request;
4、在utils中创建一个mock.js的文件 这个文件里可以配置你需要的api的字段以下示例 /api/listget请求
import Mock from mockjs;Mock.mock(/api/list, get, () {return Mock.mock({code:200,data|1-10: [{id: id, //随机生成idname: cname, //随机生成中文名字age|18-60: 1, //随机生成18-60的数字sex|1-2: 1, //随机生成1-2的数字salary|1000-10000: 1, //随机生成1000-10000的数字birthday: date, //随机生成日期time: time, //随机生成时间content: cparagraph, //随机生成中文段落img: image(200x100, #50B347, #FFF, png, Mock.js), //随机生成图片address: county(true), //随机生成地址email: email, //随机生成邮箱ip: ip, //随机生成ipurl: url, //随机生成url},],});
});
5、在main.js中引入utils中的这个mock.js 6、接着在src文件下再创建一个api文件夹并创建一个user.js文件 在user.js文件下引入封装好的request.js文件然后把刚刚在mock.js中创建的/api/list暴露出去
import request from /utils/requestexport function getCase() {return request({url: /api/list,method: get})
}
7、随便创建一个vue文件现在开始测试 打印后得到 404 ! ----------------------报404状态码哈哈哈哈哈哈哈哈哈哈哈哈哈----------------------
----------------------不过没关系接着来---------------------- 我先告诉你哪里的错误吧然后接着再跟你分享原因
问题就在这个 baseURL 解决过程
1、既然我封装的报了错那我就用原生的测试一下有没有数据 a、在main.js中引入axios
import axios from axios
Vue.prototype.$axios axios b、在刚刚的vue文件中用原生的测试一下
mounted() {// 封装的getList().then(res {console.log(res);})// 原生的this.$axios.get(/api/getList).then(function (response) {// 处理成功情况console.log(response);}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行情况debugger });},
c、此时发现封装的404原生的成功了 这时发现封装的请求URL是http://localhost:8080/api/getList 那我们就把这个http://localhost:8080加到原生的地址上面去结果也是404那就晓得了直接找到request.js把baseURL的地址设为空就好了。 至此。
