在开发过程中,有时候接口跟不上我们的进度,我们要测试,就需要自测。

现在vue已经升级到2.0版本了,早期在vue构建工程文件在build里面有dev-server.js,但是后来构建去除了该文件集成到了webpack的webpack.dev.conf.js里面。希望对大家有帮助。

1、先编写模拟数据

在本目录配置一个data.json的文件,具体的自己配置,也不难。

2、编写接口模块

进入webpack.dev.conf.js文件,在Number(process.env.PORT)后面写入以下代码:

const express = require('express')
const app = express()
var appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
var apiRouter = express.Router()
app.use('/api',apiRouter)
 
再找到同文件下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
})
});
}

模拟接口配置就已经完成,然后打开cmd,进入项目目录,输入:npm run dev,启动项目

输入:localhost:8080/api/goods

vue2.0中模拟数据的配置的更多相关文章

  1. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  2. Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  3. router-view在vue2.0中不显示,解决方法

    学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...

  4. vue2.0中使用pug(jade)

    第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...

  5. vue2.0中使用less

    第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...

  6. vue2.0中使用sass

    第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...

  7. vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...

  8. vue2.0中 怎么引用less?

    vue2.0中  怎么引用less? 第一步: 安装less依赖, npm install less less-loader --save 第二步: 修改webpack.config.js文件,配置l ...

  9. vue2.0中router-link详解

    vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...

随机推荐

  1. 实验4 RDD编程初级实践

    1.spark-shell交互式编程 (1) 该系总共有多少学生 scala> val lines = sc.textFile("file:///usr/local/spark/spa ...

  2. Hive——基本DML语句

    Hive--基本DML语句 DML:Data Manipulation Language(数据操作语言,与关系型数据库相似) 官方手册:https://cwiki.apache.org/conflue ...

  3. 微信小程序云开发-数据查询的两种写法

    从数据中查询数据有两种方法: 一.js文件的写法 1.使用传统的get方法 2.使用ES6简洁写法,推荐使用此方法  二.wxml文件的代码 把请求的数据显示在页面上.

  4. Blazor 事件处理开发指南

    翻译自 Waqas Anwar 2021年3月25日的文章 <A Developer's Guide To Blazor Event Handling> [1] 如果您正在开发交互式 We ...

  5. 两万字Vue.js基础学习笔记(二)

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  6. odoo检查规则

    @api.multidef button_cancel(self): for move in self: if not move.journal_id.update_posted: raise Use ...

  7. Python基础之实现界面和代码分离

    第一步:用QT Designer画一个TreeWidget,存为treeview4.ui,这个处理前面TreeWidget那一节讲过,这里不细讲 treeview4.py # -*- coding: ...

  8. Python 数值中的下划线是怎么回事?

    花下猫语:Python 中下划线的用法令人叹为观止,相信你已在各种文章或教程中见识过了.在 2016 年的 3.6 版本之后,Python 还引入了一种新的语法,使得下划线也可以出现在数值中.这篇翻译 ...

  9. 《SEO实战密码》

    一.搜索引擎 1.蜘蛛访问网站时都会先访问网站根目录下的 robots.txt 文件. 2.蜘蛛喜欢访问经常更新的页面. 3.离首页点击距离越近,页面权重越高. 4.使用"" + ...

  10. Electron 开发音视频

    废话不多说,咱直接进入正题! 创建 Electron 项目 前提条件 在使用Electron进行开发之前,需要安装 Node.js. 要检查 Node.js 是否正确安装,请在您的终端输入以下命令: ...