在线商城项目03-启用mock服务
简介
对于前后端分离的开发，在后台接口还未就绪时，前端需要使用mock数据进行开发。最容易想到的办法，当然是把mock数据写在页面里，但是这会让我们的页面代码很臃肿，而且也不能还原请求和响应的场景。所以，我们需要在本地启用一个服务器，用来返回mock数据。本篇将会介绍常用的几种mock服务开启办法，大家根据需要自行选择。
首先，我们肯定要引入mock数据。在根目录下新建mock文件夹用来存放我们的mock数据，如下图：
goods.json内容如下：
{
"status": "0",
"msg": "",
"result": [
{
"productId": "10001",
"productName": "小米6",
"salePrice": "2499",
"productImage": "mi6.jpg"
},
{
"productId": "10002",
"productName": "小米笔记本",
"salePrice": "3999",
"productImage": "note.jpg"
},
{
"productId": "10003",
"productName": "小米6",
"salePrice": "2499",
"productImage": "mi6.jpg"
},
{
"productId": "10004",
"productName": "小米6",
"salePrice": "2499",
"productImage": "1.jpg"
},
{
"productId": "10005",
"productName": "小米6",
"salePrice": "2499",
"productImage": "2.jpg"
},
{
"productId": "10006",
"productName": "小米6",
"salePrice": "2499",
"productImage": "3.jpg"
},
{
"productId": "10007",
"productName": "小米6",
"salePrice": "2499",
"productImage": "4.jpg"
},
{
"productId": "10008",
"productName": "小米6",
"salePrice": "2499",
"productImage": "5.jpg"
}
]
}
然后，我们开启服务器，允许我们访问该mock数据。
方法1 MAC下可以直接使用apache
apache相关命令如下：
开启apache: sudo apachectl start
重启apache: sudo apachectl restart
关闭apache: sudo apachectl stop
服务python -m SimpleHTTPServer [port]
所以我们只需要开启apache，然后进入需要开启服务器的目录，运行如下命令：
python -m SimpleHTTPServer 8888
即可，端口号可根据你自己的需要来指定。假设我们现在在根目录开启服务，在浏览器输入
http://localhost:8888/mock/goods.json
会有：
访问成功。
方法2 使用http-server开启服务
原理上，和apache相同，都是进入指定目录开启服务，所选工具不一样而已。我们可以全局或者在项目中使用npm安装http-server，然后进入指定目录开启服务。这里假设是在全局安装，步骤如下：
npm install http-server -g
进入项目根目录：
http-server -p 8888
方法3 使用express
我们同样可以使用express自己新开一个服务器，但是这没有太大的必要，vue-cli构建的build文件夹下以前有一个dev-server.js，但是现在已经没有了，如果需要mock数据我们可以直接在webpack.dev.conf.js中进行修改。
最简单的办法如下，添加如下代码：
const express = require('express')
const app = express()
var goodsData = require('../mock/goods.json')
var apiRoutes = express.Router()
app.use('/mock', apiRoutes)
然后在该文件的devServer对象中添加如下代码：
before(app) {
app.get('/mock/goods', (req, res) => {
res.json(goodsData)
})
}
如果你没看懂，不要紧，文末我会放出文件的整体代码。
好的，现在试着重新run以下代码。访问http://localhost:8086/mock/goods
成功。
方法3的优化
好的，目前来看，方法3是最不错的，因为你可以指定mock请求的路径，比如mock/goods或者api/goods，可以对返回做额外的处理，比如
res.json({
code: '000',
data: goodsData
})
可是，还是有一点不方便。如果现在项目中有其他人也建立了自己的mock数据，难道每个人都需要在这个文件中新增一段代码吗？那么这个代码的体积和维护难度将大大增加。这里我有个思路，就是直接遍历mock文件夹，将所有的文件数据放进一个mock数组，根据需要返回。
webpack.dev.conf.js需要进行如下修改：
const fs = require('fs')
var mockData = {}
var mockFiles = fs.readdirSync(path.resolve(__dirname, '../mock'))
mockFiles.forEach(function (val) {
mockData[val.split('.')[0]] = require('../mock/' + val)
})
devServer{
...
before(app) {
app.get(/\/mock\/(\w+)/, (req, res) => {
res.json(mockData[RegExp.$1])
})
}
}
这里我是用的正则，因为直接在before(app)里写函数方法没有运行，所以我猜想此处是根据正则进行匹配和回调，当然，我的正则水平很一般，有大神的话可以自己写一个。
我们来验证一下，复制一份goods.json命名为goods2.json，然后重新run以下代码，分别访问这两个路径如下：
成功访问到了mock下的隔文件。不过其实这样也并不是很好，因为有些mock数据没有使用的情况下也会构建，拖慢性能。这里有两个办法，一个是即使清理已经废弃的mock数据，第二就是新添一个mock数据的配置表，只有配置表指定的数据我们才去mock。这里我就不详述方法了。
webpack.dev.conf.js代码如下：
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const fs = require('fs')
const express = require('express')
const app = express()
// var goodsData = require('../mock/goods.json')
var mockData = {}
var mockFiles = fs.readdirSync(path.resolve(__dirname, '../mock'))
mockFiles.forEach(function (val) {
mockData[val.split('.')[0]] = require('../mock/' + val)
})
var apiRoutes = express.Router()
app.use('/mock', apiRoutes)
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
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('/mock/goods', (req, res) => {
// res.json(goodsData)
// })
// }
before(app) {
app.get(/\/mock\/(\w+)/, (req, res) => {
res.json(mockData[RegExp.$1])
})
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
总结
另外，大家还可以用json-server，或者自己编写一个服务器，其实目的不过是返回一个假数据，不管怎样实现都是可以的，看实际项目中怎么方便。你甚至还可以使用mock.js来模拟随机数据等。就不一一列举了。
然后我们提交代码
git status
git diff
git add .
git commit -am 'add mock data and mock server'
git push
