搭建 Mock 服务,实现前端自调

现在项目都是前后端分离的了,而对于个人开发来说,尤其对于前端工程师来说,前端开发开发需要调用接口,需要数据。不可能这时去开发一个后端再返回来接着开发,所以搭建 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

最终结果:

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

相关推荐
余杭子曰17 分钟前
组件设计模式:聪明组件还是傻瓜组件?
前端
杨超越luckly24 分钟前
HTML应用指南:利用GET请求获取全国小米之家门店位置信息
前端·arcgis·html·数据可视化·shp
海绵宝龙32 分钟前
axios封装对比
开发语言·前端·javascript
Data_Adventure32 分钟前
setDragImage
前端·javascript
南岸月明36 分钟前
七月复盘,i人副业自媒体成长笔记:从迷茫到觉醒的真实经历
前端
静水流深LY39 分钟前
Vue2学习-el与data的两种写法
前端·vue.js·学习
玲小珑1 小时前
Next.js 教程系列(二十一)核心 Web Vitals 与性能调优
前端·next.js
YGY Webgis糕手之路1 小时前
Cesium 快速入门(八)Primitive(图元)系统深度解析
前端·经验分享·笔记·vue·web
懋学的前端攻城狮1 小时前
从 UI = f(state) 到 Fiber 架构:解构 React 设计哲学的“第一性原理”
前端·react.js·前端框架
三原1 小时前
6年前端学习Java Spring boot 要怎么学?
java·前端·javascript