首先使用axios发送请求到模拟服务器上,再将mock.js模拟服务器数据返回给客户端。打包工具使用的是vite。
1.安装
npm i axios -S
npm i mockjs --save-dev
npm i vite-plugin-mock --save-dev
2.在vite.config.js文件中配置vite-plugin-mock等消息
import { viteMockServe } from 'vite-plugin-mock'plugins: [vue(),viteMockServe({supportTs:true,logger: false,mockPath: "./mock/" // 注意:此时的 mockPath 地址是真正安装的 mock 文件夹的地址;})]
3.在根目录下创建mock文件夹及index.js文件:
4.在index.js文件中进行配置:
import Mock from 'mockjs'const listUser = function() {const a = Mock.mock({'list|1-20':[{'userId|+1':0,'userName|1':["张三",'李四',"鲍勃","丽丽","李阳","杨洋","王五","周星星","大仙","孤影"],'role|1':["系统管理员","操作人员","销售","平台管理者","仓库管理员","部长"],}]})return a;
}export default [{url:'/hello',method:'get',response: () => {return listUser;}}
]
5.在页面中需要发送请求获取数据时,使用axios发送请求:
1)在request.js文件中创建axios
import axios from 'axios'const request = axios.create({baseURL:"http://127.0.0.1:5173/",
})export default request
2)在需要发送请求的页面编写一下内容:
import request from './utils/request';
request({method: 'GET',url: "/hello",}).then((res) => {console.log(res);})
显示结果:
如果显示报错:Access to XMLHttpRequest at ‘http://localhost:5173’ from origin ‘http://127.0.0.1:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
说明使用mock.js时遇到了跨域,需要进行以下配置:
1.在vite.config.ts中进行数据代理:
export default defineConfig({plugins: [vue(),viteMockServe({supportTs:true,logger:false,mockPath:"./mock/"})],server: {proxy: {'/api': {target:'http://127.0.0.1:5173/',changeOrigin:true,//支持跨域rewrite:(path) => path.replace(/^\/api/,""),//重写路径,替换/api}}},})
2.在axios基地址中添加/api即可
import axios from 'axios'const request = axios.create({baseURL:"/api",timeout:5000
})export default request