基于vue-cli (mock假数据)

有时候web前端需要一些假数据来进行模拟后台数据。基于vue-cli,我们就来演示一下如何模拟假数据,用到了 express,和 express.Router、


依旧废话不多说,直接上代码。



存放json文件
json文件内容例如(自己随便写的):

{
"seller":{
  text:"我是seller"
},
"goods":{
  text:"我是goods"
},
"ratings":{
  text:"我是ratings"
}
}

需要在build里面修改一下dev-server文件:



然后进行修改文件:


//导入data.json文件
const appData = require("../data.json");
//存一下数据
const seller = appData.seller;
const goods = appData.goods;
const ratings = appData.ratings;
//创建express路由
const apiRoutes = express.Router();

//用路由接受一下 这里的/seller就是访问的地址
apiRoutes.get("/seller",(req,res)=>{
    res.json({
        errorNo:0,
        seller
    });
});
apiRoutes.get("/goods",(req,res)=>{
    res.json({
        errorNo:0,
        goods
    });
});
apiRoutes.get("/ratings",(req,res)=>{
    res.json({
        errorNo:0,
        ratings
    });
});
//这里需要用一下 "/api"这里是就在api/seller
app.use("/api",apiRoutes);

重新 npm run dev

按着下图访问 就能访问到数据了

(我这里是在谷歌商店上安装了读取json文件的插件,如果有兴趣的小伙伴也可以去安装一下,很强大,麻麻再也不用担心我看json文件咪眼睛了...)

这个时候就大功告成了,您就各种用数据吧您嘞~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,132评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,886评论 18 139
  • Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs三国鼎立,我不是职业前端...
    玄木阅读 272,947评论 70 259
  • 北岛说:“一个人的行走范围,就是他的世界。” 你行走的眼界决定了你看世界的境界,相比于生命的风景,又有几个地方适合...
    树培L阅读 637评论 8 4
  • 注意力要有产出。 要学会分清看法和事实 08:20 l 我老是忘记不吃君沛胶囊呢 i 我在吃啊 l 都不见你说的 ...
    陈东Growth阅读 149评论 0 0