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

现在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. centos7 PostgreSQL_12.7安装-TimeScaleDB_2.01插件安装

    一.安装psql的yum源 sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64 ...

  2. Spring总结之AOP

    一.Spring AOP简介(百度百科) 面向切面编程(也叫面向方面编程):Aspect Oriented Programming(AOP),是软件开发中的一个热点,也是 Spring 框架中的一个重 ...

  3. Python_结合Re正则模块爬虫

    ##### 爬取古诗文import reimport requestsdef parse_page(url): headers = { 'User-Agent':'Mozilla/5.0 (Windo ...

  4. 【动态规划DP】[USACO16OPEN]248

    题目描述 Bessie likes downloading games to play on her cell phone, even though she doesfind the small to ...

  5. 从redis数据库取数据存放到本地mysql数据库

    redis数据库属于非关系型数据库,数据存放在内存堆栈中,效率比较高. 其存储数据是以json格式字符串存储字典的,而类似的关系型数据库无法实现这种数据的存储. 在爬取数据时,将数据暂存到redis中 ...

  6. 记一次系统崩溃事件【Mac版】

    事件:Mac系统崩溃,导致电脑数据丢失,以及数据安全备份措施的不到位的教训! 解决措施: 1.开机后按:Command+R 按开机键 ,进入Mac 实用工具, 选择磁盘工具.由于没有备份直接抹掉磁盘. ...

  7. odoo视图 “动作” 里添加菜单按钮:案例

    ####################################################################################odoo中常用方法,在动作里面添 ...

  8. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  9. 用好Git stash,助你事半功倍

    git stash: 用法:git stash list [<选项>] 或:git stash show [<选项>] [<stash>] 或:git stash ...

  10. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...