vue运用模拟数据的示例代码 - 行业资讯 - 肥雀云

本文介绍了vue运用模拟数据的示例代码,分享给大家,具体如下:
　　

初始化你的项目
　　

话不用啰嗦,首先初始化你的项目,最简单的就是使用vue-cli啦
　　

　　　　　　vue init webpack 　　　　

引入模拟。js
　　

安装mockjs
　　

　　　　　　npm安装——save-dev mockjs 　　　　

引入到Vue原型上,方便使用

　　　　　　从“mockjs”进口mockjs 　　Vue.prototype。模拟=Vue美元。$模拟=mockjs.mock 　　　　

以上引入到Vue原型上,可以使用。美元模拟直接产生模拟数据
　　

请看这里Vue。原型
　　

请看这里mockjs

在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请求,访问自己模拟的假数据虚拟请求后台的模式,具体做法如下

在构建/dev-server.js文件中

在var的应用=表达()这个实例的下面添加如下代码

　　　　//本地json-server服务器搭建代码//引入数据库文件　　var appData=https://www.yisu.com/zixun/require (“. ./mock.json”)//引入数据库　　var getBoardList=appData.getBoardList 　　var apiRoutes=express.Router ()//使用api的方法来创建连接时候的请求　　apiRoutes。帖子(/getBoardList,函数(点播,res) { 　　res.json ({ 　　errno: 0, 　　数据:getBoardList 　　}); 　　})//调用api 　　app.use (/api, apiRoutes) 　　　　之前　　　　

其中appData依赖的mock.json文件是自己模拟的假数据的文件,根据前后台需求自己模拟或者使用模拟。js制作假数据
　　

getBoardList是一个接口,var getBoardList=appData。getBoardList就是在appData定义了这一个接口数据。
　　

var apiRoutes=express.Router()是创建了一个api的路,由apiRoutes.post是创建一个帖子接口,这个帖子接口有一个请求和一个res参数,分别执行请求和返回,当返回的时候会给我们一个json,这个json包括一个状态码errno和返回的数据的数据(数据指向了接口数据getBoardList)。

然后当我们调用api的时候应用。使用(“/api”, apiRoutes),就能正常使用这个服务了

这里我使用了vue2.0推荐的axios请求数据,代码如下

　　　　　　这个。http.post美元(“/api/getBoardList”) 　　不要犹豫(函数(响应){ 　　console.log (response.data.data); 　　alert('成功了”); 　　}) 　　.catch(函数(代码){ 　　alert('失败了的); 　　console.log(代码); 　　}); 　　　　之前　　　　

打开浏览器的控制台的网络,你会发现已经产生了网络请求

vue运用模拟数据的示例代码