现在项目都是前后端分离的了,而对于个人开发来说,尤其对于前端工程师来说,前端开发开发需要调用接口,需要数据。不可能这时去开发一个后端再返回来接着开发,所以搭建 Mock 服务,实现前端自调是非常重要的,本章内容由此而来,记录自己的学习搭建过程。
使用node.js和mock.js搭建 Mock 服务
使用 koa 、 koa-router 搭建路由和监听服务
nodemon 监听更新并重载
javascript
const Koa=require('koa');
const Router=require('koa-router');
const mockList=require('./mock/index')
const app=new Koa();
const router=new Router();
async function getRes(fn){
return new Promise((resolve)=>{
setTimeout(()=>{
const res=fn()
resolve(res)
},1000)
})
}
// 注册路由
mockList.forEach(item=>{
const {url, method, response} = item;
router[method](url,async ctx=>{
const res= await getRes(response)
ctx.body=res;
})
})
app.use(router.routes())
app.listen(3005)
"dev": "nodemon index.js"
模拟网络请求的加载状态,1s
javascript
async function getRes(fn){
return new Promise((resolve)=>{
setTimeout(()=>{
const res=fn()
resolve(res)
},1000)
})
}
然后就需要解决跨域问题了。
vite就只需要在vite.config.js中配置
json
server: {
proxy: {
"/api": {
target: "http://localhost:3005", // 后端接口地址
changeOrigin: true, // 是否更改 origin 头
},
},
},
webpack的比较复杂好像,需要用到craco,有用过朋友可以说一下,0.o
最终结果:

后面随着项目开发,遇到新问题,再回来记录。