Mock数据

在文件【vue.config.js】 - devServer 字段 - before(app)函数配置数据接口访问

const appData = require('./data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings devServer: {
before(app) {
app.get('/api/seller', function(req, res) {
res.json({
errno: 0,
data: seller
})
})
app.get('/api/goods', function(req, res) {
res.json({
errno: 0,
data: goods
})
})
app.get('/api/ratings', function(req, res) {
res.json({
errno: 0,
data: ratings
})
})
}
}

运行项目:npm run serve

http://localhost:8081/api/goods 即可访问到data.json数据

 

seller【2】Mock数据(接口访问配置)的更多相关文章

  1. vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)

    vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...

  2. ant-design-pro使用服务器数据接口代理配置

    因为是新入门antd-pro这个的小白,所以在mock数据和服务器数据切换这里搞了将近2天才弄好,配置如下,供各位初学者参考,如有错误的地方,请大神指出~叩谢!! 下面开始干货: 1..roadhog ...

  3. vue中访问数据接口的配置

    业务API接口地址: http://localhost:3816/api/ 前端UI浏览地址:http://127.0.0.1:8080/#/home 由于同源策略的问题: 需要配置代理: 在开发环境 ...

  4. 循序渐进BootstrapVue,开发公司门户网站(5)--- 使用实际数据接口代替本地Mock数据

    在我们开发一些门户网站功能的时候,有时候我们需要快速的创建数据模型来进行数据展示,因为数据结构可能处于不断的修正变化之中,因此服务端的接口我们可以暂时不开发,当我们基本完成数据结构和界面展示的时候,就 ...

  5. mock 数据 解决方案

    前端工程化之--Mock解决方案   https://www.jianshu.com/p/720b12b5d120 一.为什么要使用mock数据: 1.后端接口数据没有的时候,前端根据接口文档,使用 ...

  6. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  7. 【小程序】模拟数据支持(mockjs配置模拟服务器接口数据)

    utils目录 ①下载mockjs(地址)放置utils目录中 ②新建api.js :配置模拟数据以及后台接口,通过DEBUG=ture;  //切换数据接口 配置如下: let API_HOST = ...

  8. vue-cli项目配置mock数据(新版本)

    最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的,如何模拟本地数据操作? 解决方法: dev-server.js 改用webpack-d ...

  9. vue-cli的build的文件夹下没有dev-server.js文件,怎么配置mock数据

    因为最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行 新版webpack.dev.conf.js配置如下: 在const portfin ...

随机推荐

  1. Markdown 表格

    表格的基本写法很简单,就跟表格的形状很相似,冒号在左边表示左对齐,右边表示右对齐,两边都有表示居中,如果都不写冒号则默认左对齐 学号|姓名|分数 :-|:-:|-: 小明|男|75 小红|女|79 小 ...

  2. JS 使用html2canvas实现页面截图功能

    html2canvas的官方文档地址:http://html2canvas.hertzen.com/ 实现原理:将需要截图的页面在canvas中进行重绘,这样将页面转换成图片的过程. 注意事项: 不支 ...

  3. JS正则校验

    /** 用途:检查输入字符串是否为空或者全部都是空格 输入:str:字符串 返回: 如果全是空返回true,否则返回false */ function isNull(str) { if (str == ...

  4. 用SpannableString打造绚丽多彩的文本显示效果

    extends:http://www.jianshu.com/p/84067ad289d2 引语 TeXtView大家应该都不陌生,文本展示控件嘛! 就用TextView显示普普通通的文本,OK,很简 ...

  5. day_5.5 单例

    2018-5-5 15:00:25 单例 : 就是对象只有一个 ''' class main(object): __instance = None def __new__(cls,): if cls. ...

  6. Solve Error : Undefined function or variable ‘setInitialWorkingFolder’. Error in matlabrc (line 197)

    When compile program using Visual Studio 2015, Matlab 2016b, and OpenCV 3.1.0, one might get the err ...

  7. db2 基础语法

    一.db2 基础 基本语法 注释:“--”(两个减号) 字符串连接:“||” 如set msg=’aaaa’||’bbbb’,则msg为’aaaabbbb’ 字符串的引用:‘’(一定用单引号),如果需 ...

  8. checkbox做全部选中,全部取消效果

    批量选中.取消多个checkbox的用法很简单,这个功能也很常用.这里做个总结. 在HTML中的写法: <div id="ftpFileDownTr"> <but ...

  9. c# 编程小技巧

    1.对于界面布局,可以考虑使用 wpf,对于传统winfrom来说,tableLayoutPanel1可能是最好的选择. 2.你一定会问,如何使用代码管理大量的按钮,可以使用 List<Butt ...

  10. [No0000124]WPF 扩展控件Behavior的几种方式

    一.使用Attached Dependency Property的方式 (1)定义Attached Dependency Property public static class DigitsOnly ...