高仿饿了么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)