番禺网站建设三杰科技,嵌入式软件开发文档,纷享销客官网,wordpress 头像设置参考来源#xff1a;Vue mock.js模拟数据实现首页导航与左侧菜单功能_vue.js_AB教程网
记录步骤#xff1a;在参考资料来源添加axios步骤
1、安装mock依赖
npm install mock -D //只在开发环境使用
下载完成后#xff0c;项目文件package.json中的devDependencies就会加…参考来源Vue mock.js模拟数据实现首页导航与左侧菜单功能_vue.js_AB教程网
记录步骤在参考资料来源添加axios步骤
1、安装mock依赖
npm install mock -D //只在开发环境使用
下载完成后项目文件package.json中的devDependencies就会加上一个mock依赖 2、添加开发环境及生产环境的配置
我们在config文件夹下的dev.env.js、prod.env.js两个文件里添加配置
dev.env.js
use strict
const merge require(webpack-merge)
const prodEnv require(./prod.env)
module.exports merge(prodEnv, {NODE_ENV: development,MOCK: true
})
prod.env.js
use strict
module.exports {NODE_ENV: production,MOCK: false
}
3、引入到main.js这里引用是本地的地址 import Mock from ./mock/index;
mock/index.js (两种写法都可以选择一种)
//index.js
// 引入: mockjs 模块;
import Mock from mockjs// 设置拦截Ajax请求的响应时间模拟网络延迟Mock.setup({timeout: 200-600})// 写法一
// Mock.mock(/parameter/query, , (opts) {
// debugger
// opts[data] opts.body ? JSON.parse(opts.body) : null
// delete opts.body
// return opts
// })
// 写法二
// Mock.mock(/parameter/query, {
// name: name(),
// city: city()
// })// 数据必须输出
export default Mock4、开始使用 axios 配置 request.js 在每个接口文件前引用这个文件 /**** request.js ****/
import axios from axios
//1. 创建新的axios实例
const request axios.create({// baseURL: /api, // 公共接口-本地 所有接口地址前面加apitimeout: 30 * 1000, // 超时时间单位是msheaders: {Content-Type: application/json,},
})// 2.请求拦截器
request.interceptors.request.use(config {// config.headers.Authorization ; //如果要求携带在请求头中return config;
}, error {console.log(error)return Promise.reject(error);
})
// 3.响应拦截器
request.interceptors.response.use(response {return response;}, error {// console.log(error)return Promise.reject(error);}
)//4.导出文件
export default requestimport request from /http/request//第一步文件的地址//自己写的mock地址后文顺带记录一下mock使用方法
export function mocktest(params) {return request({type: get,url: /parameter/query,data: params});
}到这里就可以在页面直接使用了想要进一步完善或者全局引用接口可以自己封装
templateel-containerel-headerHeaderBar/HeaderBar/el-headerel-mainMainBar/MainBar/el-main/el-container
/templatescript
import HeaderBar from ./Header.vue
import MainBar from ./Main.vue
//引用一下api文件中写好的方法要用哪个就写哪个
import { mocktest } from /http/api;
// 可以按需引入可以全局引用
// import api from /http
export default {name: index,components:{MainBar,HeaderBar},data(){return{}},methods:{},mounted() {//调用封装好的接口mocktest().then(res{console.log(res,res)})this.ce()},
}
/scriptstyle scoped/style
