高仿饿了么mock本地数据
未使用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本地数据的更多相关文章
- Vue.js高仿饿了么WebApp
介绍 学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目.这是一个高仿饿了么外卖WebApp,现已完成商品预览.商品详情.商家预览.添加购物.查看评论等功能. 部分截图 项目预 ...
- 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)
前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...
- 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)
#高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack ) ##demo [demo 地址](http://liangxiaojuan.github.io/ ...
- Vuejs 高仿饿了么外卖APP 百度云视频教程下载
Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...
- 基于vue2+nuxt构建的高仿饿了么(2018版)
前言 高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习 项目地址如遇网络不佳,请移步国内镜像加速节点 效果演示 查看demo请戳这里(请用chrome手 ...
- vue.js高仿饿了么(前期整理)
1.熟悉项目开发流程 需求分析——>脚手架工具——>数据mock——>架构设计——>代码编写——>自测——>编译打包. 2.熟悉代码规范 从架构设计.组件抽象.模块 ...
- vue2高仿饿了么app
Github地址: https://github.com/ccyinghua/appEleme-project 一.构建项目所用: vue init webpack appEleme-project ...
- vue2.0高仿饿了么better-scroll
首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"& ...
- 【Vue.js】高仿饿了么外卖App(一)
1.架构从传统的MVC向REST API+前端MV*迁移 参考链接: http://blog.csdn.net/broadview2006/article/details/8615055 http:/ ...
随机推荐
- P1080 国王游戏
题意: 让n 位大臣排成一排,国王站在队伍的最前面. 排好队后,所有的大臣都会获得国王奖赏的若干金币, 每位大臣获得的金币数分别是:排在该大臣前面的所有人的左手上的数的乘积除以他自己右手上的数,然后向 ...
- FFT字符串匹配
本文半原创 参考资料:其实就是照抄的什么参考啊 我们知道KMP可以用来在线性复杂度内进行制胡窜匹配 今天教您一种新方法:用FFT进行字符串匹配 您可能觉得这很玄学,FFT不是做多项式卷积的吗,怎么还可 ...
- 文件上传之Ajax篇
AJAX上传文件 1.为什么要写这篇文章 楼主前几天去北京面试,聊起ajax上传文件, 面试官告之不能,遂讨论之,不得果,于是写下这篇文章,希望能和大家一起学习 2.正文 首先,要使用ajax上传文 ...
- Angular组件生命周期——生命周期钩子
生命周期钩子介绍: 1.ngOnChange:响应组件输入值发生变化时触发的事件. 2.ngOnInit:用于数据绑定输入属性之后初始化组件,在第一次ngOnChange之后被调用. a. 组件构造后 ...
- Python入门8文件处理
文件处理文本模式name = input("请输入用户名:").strip()with open("a.txt","wt",encoding ...
- python自动化day1
一.变量 变量定义的规则: 变量名只能是 字母.数字或下划线的任意组合 变量名的第一个字符不能是数字 以下关键字不能声明为变量名['and', 'as', 'assert', 'break', 'cl ...
- 磁盘 IO 和网络 IO 该如何评估、监控、性能定位和优化?
生产中经常遇到一些IO延时长导致的系统吞吐量下降.响应时间慢等问题,例如交换机故障.网线老化导致的丢包重传:存储阵列条带宽度不足.缓存不足.QoS限制.RAID级别设置不当等引起的IO延时. 一.评估 ...
- 协议 + socket import 和 form xx import *的区别 028
一 . 网络通信协议(了解) 1 . osi 七层协议 (最好记住 面试会问) 应表会传网数物(应用层 表示层 会话层 传输层 网络层 数据链路层 物理层) 2 .tcp/ip五层 或 tcp/ip四 ...
- vue 的watch用法
参考转自https://www.imooc.com/article/details/id/28187 类型:{ [key: string]: string | Function | Object | ...
- JavaSE---线程同步
1.当多个线程同时访问同一个数据时,容易出现线程安全问题,必须进行线程同步: 2.解决方案: 1.1 Java的多线程引入了 同步监视器 ,使用同步监视器的通用方法就是 同步代码块 //线程开始 ...