vue moke 数据的使用

news/2024/7/24 12:26:25 标签: vue, moke数据, 前端模拟数据

开发过程中,一般前台的代码调试是需要后台的接口与数据支持的,在数据流的支持下,才能有效的完成对整个代码的调测。moke数据的产生就是让前端脱离后台,完成代码的调测。

vue项目中,与static目录同级创建moke目录,moke目录中存放moke数据文件,文件已json格式为主,因为多数接口返回的也是json的格式数据。

文件名字不重要,可以随意取,例如demo.json

demo.json文件内部结构全部以json格式数据,不能添加注释,不然自己的前台代码无法正确解析数据

一般格式为{'status':'0','msg':'success','result':[{},{}]}等等

文件编辑完成后,需要在vue内置的服务模拟发布程序中进行调用。vue内置的服务模拟发布程序为express

找到build目录下的dev-server.js文件,打开。找到var app = express()的代码处,在它下面添加代码:

var router = express.Router()

var demoData = require('./../moke/demo.json')  //将moke数据的对象引入

router.get('/demo',function(req,res,next){

   // '/demo'为路由的路径,在路由跳转到该路径文件下时会被这个方法进行拦截

   // req 请求对象   res 相应对象   next 表示继续后面的路由事件

   //将数据对象填充到相应对象中    res.json()表示填充json对象,res.end()表示填充string对象

   res.json(demoData)

})

//最后调用app使用这个设置了拦截的路由对象即可

app.use(router)


http://www.niftyadmin.cn/n/1162586.html

相关文章

cordova跳转原生Android页面

1.创建cordova项目,添加平台android cordova create LocalCordova com.hjk.cordova CordovaApp 2.使用plugman创建自定义插件 plugman create --name HjkPlugin --plugin_id HjkPlugin --plugin_version 1.0.0 调用java代码如下: package org.apach…

Cordova环境下的依赖项目唯一性

cordova运行环境在编译其他平台项目时(如:android,ios等),会确定依赖项目的唯一性。举例说明:cordova run android 或者 cordova run ios 会在cordova运行环境下,开始编译平台项目。好处是,如果存在多平台…

给iframe添加点击事件

方案一:无本地源码iframe 存在跨域问题,所以需要用到document.activeElement 1.0处理方法: export const IframeOnClick {resolution: 200,iframes: [],interval: null,Iframe: function () {this.element arguments[0]this.cb argumen…

vue-cropper 截图插件的使用

安装插件&#xff1a; npm install vue-cropper --save-dev 引用&#xff1a; import vueCropper from vue-cropper 声明&#xff1a; components: {vueCropper } <vueCropperref"cropper":img"option.img" // 裁剪图片的地址 可选值&#xff1a;u…

Maven的安装配置与第一个hello-world

1.安装配置 Maven的安装与配置maven定义&#xff1a;Maven实一个给予java平台的自动化构建工具make > ant > maven >gradle(gradle学习成本较高&#xff0c;普及不如maven)Maven是一个跨平台的项目管理工具。主要用户java平台项目的构建与依赖管理。maven作用&#x…

cordova调用第三方应用

cordova 帮助webapp 达到调用原生系统的功能 项目需求&#xff1a;在项目中调用系统中含有的第三方地图应用 需求其实分为两步&#xff1a; 1. 查找本地地图应用 2.成功调起本地应用 首先需要安装两个插件&#xff0c;安装指令如下&#xff1a; 1. cordova plugin add cordo…

存储、读取、清除cookies数据

// 存cookiessetCookies (key, value, execTime) {var exdate new Date()// cookies保存天数exdate.setTime(exdate.getTime() 24*60*60*1000*execTime)// 拼接window.document.cookie key "" value ";path/;expires"exdate.toGMTString();},// 读co…

vue axios get、post请求

/*** axios的安装* 本地引入&#xff0c;或者cdn引入 <script src"js/axios.min.js"></script>* 或者npm 安装 npm install axios --save-dev* 引入&#xff1a; import axios from axios* 属性化&#xff1a; Vue.prototype.$axios axios 以后页面即…