高仿饿了么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:/ ...
随机推荐
- P4094 [HEOI2016/TJOI2016]字符串 后缀数组+主席树+二分答案
$ \color{#0066ff}{ 题目描述 }$ 佳媛姐姐过生日的时候,她的小伙伴从某东上买了一个生日礼物.生日礼物放在一个神奇的箱子中.箱子外边写了一个长为n的字符串s,和m个问题.佳媛姐姐必须 ...
- springcloud系列四 搭建服务模块重点讲解
首先这个服务地址:一定不要写错,是自己注册中心开启的地址 如果注意到这些了,可以简单的进行操作,也可以不需要mybatis与数据库连接,在controller里直接返回相应的数据可以了,不用这么幸苦的 ...
- SprimgMVC学习笔记(八)—— SpringMVC与前台json数据交互
一.两种交互形式 可以看出,前台传过来的方式有两种,一种是传json格式的数据过来,另一种就是在url的末尾传普通的key/value串过来,针对这两种方式,在Controller类中会有不同的解析, ...
- 2015苏州大学ACM-ICPC集训队选拔赛(2)1002
草爷要的雷 Problem Description 扫雷一直是风靡实验室的重要娱乐游戏,在赛前赛后.刷题疲惫的时候,扫一局雷经常可以让队员们感受到身心的振奋,毕竟,劳逸结合刷题,防猝死才是硬道理.但是 ...
- JS函数调用分析过程
- Python 错误总结
1.以一种访问权限不允许的方式做了一个访问套接字的尝试. 解决方法:这个问题缘由是有端口被占用
- my12_xtrabackup压缩备份与恢复
xtrabackup版本 # rpm -qa | grep xtrabackup percona-xtrabackup-24-2.4.12-1.el7.x86_64 此版本为目前比较新的版本(2018 ...
- Linux Vi/Vim 在插入模式下键盘右边数字键输入异常
问题:Linux在 Vi/Vim 在编辑文件时遇到一个问题,当我在 Insert 模式下进行修改文件内容的时候,用到了键盘(104键,右边带数字键那种)进行数字输入,当我输入数字 “5” 时,插入的数 ...
- 异地clone RAC数据库 +ASM USE RMAN
###sample 如何在本地生成数据库的备份,并复制到DG库新环境(高级) 1. 首先确定本地文件系统(存放备份集)足够大,可以使用如下语句查询当前数据库实际的使用总大小 Rman 备份进度: se ...
- 转 python中%s与%d
https://blog.csdn.net/SuperCreators/article/details/81393977 pythn print格式化输出. %r 用来做 debug 比较好,因为它会 ...