当前位置: 首页 > Web前端 > vue.js

如何在前端优雅的Mock数据

时间:2023-04-01 00:41:43 vue.js

一、什么是MockMock在软件开发领域,我们理解为“模拟数据”和“虚假数据”。2.Mock的好处有很多好处。一句话,有了Mock,前后端人员只需要定义接口文件就可以开始并行工作,互不影响。3.实现Mock1。安装node.js2。安装其他依赖包express(express框架):npminstallexpress-gexpress-generator(express项目生成插件):npminstallexpress-generator-gmockjs(模拟数据生成库):npminstallmockjs3。生成一个新的express项目,写一个新的server.tsimportexpress,{Express,Router,Request,Response,NextFunction,}from"express";importMock,{Random}from"mockjs";constapp:Express=express();constrouter:Router=express.Router();app.use("*",(req:Request,res:Response,next:NextFunction)=>{res.header("Access-Control-Allow-Origin","*");next();});app.use("/api",router);router.get("/list",(req:Request,res:Response)=>{letcurrPage=req.query;res.json(Mock.mock({"data|10":[{"id|+1":1,name:"@cname",time:"@datetime",//先忽略日期"source|80-100":Random.natural(80,100),},],}));});app.listen(9000,():void=>{console.log("服务成功");});打开命令行,在浏览器中输入nodeserver.js输入:http:localhost:9000/api/list请求参数处理router.get("/index",(req:Request,res:Response)=>{console.log(req.query);让num=req.query.num;让name_query=req.query.name;让res_body={“code”:200,“msg”:“success”,“data”:{}}if(num=='0'){res_body.data={"query_value_name":name_query}}else{res_body.data={"body_value_name":'小河'}}res.json(res_body);});写在最后作为前端开发,学习Mock是最基础的东西,不仅可以提高开发效率,还可以将接口信息掌握在自己手中。关于mock等功能,这次只是简单的例子分享。如果有兴趣深入挖掘,建议百度学习。源码附件已经打包上传到百度云,大家可以自行下载~链接:https://pan.baidu.com/s/14G-b...提取码:yu27百度云链接不稳定,随时可能坏掉无效,请抓紧保存。如果百度云链接失效请留言告诉我,我看到后会及时更新~开源地址码云地址:http://github.crmeb.net/u/defuGithub地址:http://github.crmeb。网/你/得福