建筑工程招聘网,seo wordpress主题,2024年新闻时事热点论文,上海装修网站建设vite mockjs
当后端还没准备完成之前#xff0c;前端可以使用 mock 模拟后端响应#xff0c;提高开发效率
1、安装插件
使用 vite-plugin-mock 插件#xff0c;配合mockjs完成项目的 mock 配置
npm install mockjs vite-plugin-mock2、vite配置插件
在 vite.config.js…vite mockjs
当后端还没准备完成之前前端可以使用 mock 模拟后端响应提高开发效率
1、安装插件
使用 vite-plugin-mock 插件配合mockjs完成项目的 mock 配置
npm install mockjs vite-plugin-mock2、vite配置插件
在 vite.config.js 文件中引入对应插件
import { viteMockServe } from vite-plugin-mock...plugins: [vue(),viteMockServe({mockPath: ./mock // mock数据所在的目录 ./mock 代表和vite.config.js同级目录即根目录})
]
3、mock数据编辑
根目录创建mockmock目录下创建index.js
import Mock from mockjs
export default [{url: /login,method: post,response: (res) {return {status:200,code:1,result:res.body // res.body 接口传过来的参数}},}
]4、main.js 引入mock数据
// 模拟接口mockjs
import ../mock/index5、配合axios使用
下载 axios
npm install axios封装axios
src 目录下创建utils目录utils下创建request.js文件命名自定义一般为request或者http
import axios from axios
const service axios.create({baseURL: // mockjs 模拟数据这里必须为空,否则请求报404
})
// 请求拦截器
service.interceptors.request.use(config{// 头部携带tokenreturn config;
})// 响应拦截器
service.interceptors.response.use(res{return res;
},err{return Promise.reject(err)
})export default service;封装api
src 目录下新建 api 文件夹api下创建 api.js
import request from ../utils/request// 登录
export const login (data){return request({method:post,url:/login,data:data})
}使用axios
import {login} from ../../api/apiconst getTest async (){let res await login({name:张三,pwd:123456})
}onMounted((){getTest()
})
