未使用router
新版webpack.dev.conf.js配置本地数据访问:
// 引入express 模块
const express = require('express')
// 创建express对象
const app = express()
// 引入请求文件 加载本地数据文件
const appData = require('../data.json')
// 获取对应的本地数据
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
}, hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
},
before (app) {
// 创建不同的路由对象 配置接口
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller //接口返回json数据,上面配置的数据seller就赋值给data请求后调用
})
})
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
})
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
}
},

在devServer中before方法中配置接口

使用router:

新版webpack.dev.conf.js配置本地数据访问:
// 引入express 模块
const express = require('express')
// 创建express对象
const app = express()
定义router
const apiRoutes = express.Router()
// 引入请求文件 加载本地数据文件
const appData = require('../data.json')
// 获取对应的本地数据
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
apiRoutes.get('getOrderList', (res) =>{
res.json({
errno: 0
data: getOrderList //返回值为json格式,效验码编程时方便判断返回状态
  })
})
app.use(apiRoutes)

高仿饿了么mock本地数据的更多相关文章

  1. Vue.js高仿饿了么WebApp

    介绍 学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目.这是一个高仿饿了么外卖WebApp,现已完成商品预览.商品详情.商家预览.添加购物.查看评论等功能. 部分截图 项目预 ...

  2. 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)

    前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...

  3. 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)

    #高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack )   ##demo [demo 地址](http://liangxiaojuan.github.io/ ...

  4. Vuejs 高仿饿了么外卖APP 百度云视频教程下载

    Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...

  5. 基于vue2+nuxt构建的高仿饿了么(2018版)

    前言 高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习 项目地址如遇网络不佳,请移步国内镜像加速节点 效果演示 查看demo请戳这里(请用chrome手 ...

  6. vue.js高仿饿了么(前期整理)

    1.熟悉项目开发流程 需求分析——>脚手架工具——>数据mock——>架构设计——>代码编写——>自测——>编译打包. 2.熟悉代码规范 从架构设计.组件抽象.模块 ...

  7. vue2高仿饿了么app

    Github地址: https://github.com/ccyinghua/appEleme-project 一.构建项目所用: vue init webpack appEleme-project ...

  8. vue2.0高仿饿了么better-scroll

    首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"& ...

  9. 【Vue.js】高仿饿了么外卖App(一)

    1.架构从传统的MVC向REST API+前端MV*迁移 参考链接: http://blog.csdn.net/broadview2006/article/details/8615055 http:/ ...

随机推荐

  1. 出现epoll failed: Bad file descriptor的原因

    今天遇到了这个问题,之前找了半天原来是IO事件的socket描述符在epoll_ctl()处理之前关闭了. if(epoll_ctl(epollFd, EPOLL_CTL_DEL, ev->fd ...

  2. P1900 自我数

    题意: 对于每一个正整数n,我们定义d(n)为n加上它每一位数字的和. 例如,d(75)=75+7+5=87.给定任意正整数n作为一个起点,都能构造出一个无限递增的序列:n, d(n), d(d(n) ...

  3. luogu3172 [CQOI2015]选数 莫比乌斯反演+杜教筛

    link 题目大意:有N个数,每个数都在区间[L,H]之间,请求出所有数的gcd恰好为K的方案数 推式子 首先可以把[L,H]之间的数字gcd恰好为K转化为[(L-1)/K+1,H/K]之间数字gcd ...

  4. the swap trick用于锐减过剩容量

    1.由于vector的复制构造函数只为被复制的vector分配它所需要的空间,故可以用如下的方式来削减vector v中过剩的容量:vector<int>(v).swap(v) 2.the ...

  5. 数据结构42:n个结点构造多少种树

    本节要讨论的是当给定 n(n>=0)个结点时,可以构建多少种形态不同的树. 如果两棵树中各个结点的位置都一一对应,可以说这两棵树相似.如果两棵树不仅相似,而且对应结点上的数据也相同,就可以说这两 ...

  6. (转)ios学习--你会遇到的runtime面试题(详)

    1.了解runtime吗?是什么? 2.你怎么知道的? 3.对象如何找到对应方法去调用的 于是我总结了很多网上被问到的一些关于runtime的题目,并做了详细的回答,并在后面补充了我在学习runtim ...

  7. kuangbin专题十二 HDU1069 Monkey and Banana (dp)

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  8. P5020 货币系统 (NOIP2018)

    传送门 BFS解法 显然如果一个面额A可以被其他面额表示出来 那么这个面额A就没用了 且如果A不能被其他面额表示,那么A一定有用(A本身的值只有自己可以表示) 发现面额最大不超过 25000 那么设 ...

  9. GC:并行回收CMS详解

    CMS详解 https://www.cnblogs.com/ggjucheng/p/3977612.html CMS默认不回收Perm, 需要加参数 +CMSPermGenSweepingEnable ...

  10. vue(5)联动+tab页

    来自:https://juejin.im/post/5a0c191f6fb9a04514639419 1.联动 新增 <input v-model="msg" /> & ...