原文地址：http://imain.net/index.php/archives/182/ 非常感谢原文作者的分享！
简介
前台要进行数据的模拟，来验证自己功能的实现，就需要安装json-server来模拟后端响应数据。
json-server
使用npm安装：
npm install json-server --save-dev 配置相关文件：
/* webpack.dev.conf.js */ const jsonServer = require('json-server') // 引入文件
/* *
const apiServer = jsonServer.create(); // 创建服务器 // const apiRouter = jsonServer.router(path.join(__dirname, 'db.json'));// 数据文件 const apiRouter = jsonServer.router('db.json');// 工程中的数据文件，使用上面那个可能会找不到资源 const middlewares = jsonServer.defaults(); // 返回JSON文件使用的中间件
apiServer.use(middlewares) apiServer.use(apiRouter) apiServer.listen(8081, () => { // 监听的端口 console.log('JSON Server is running') }) 创建一个跟index.html同级的文件叫db.json（这就是模拟后端响应的JSON数据），内容如下：
{ "getNewsList": [ { "id": 1, "title": "新闻条目1新闻条目1新闻条目1新闻条目1", "url": "http://starcraft.com" }, { "id": 2, "title": "新闻条目2新闻条目2新闻条目2新闻条目2", "url": "http://warcraft.com" }, { "id": 3, "title": "新闻条3新闻条3新闻条3", "url": "http://overwatch.com" }, { "id": 4, "title": "新闻条4广告发布", "url": "http://hearstone.com" } ], "login": { "username": "yudongdong", "userId": 123123 }, "getPrice": { "amount": 678 }, "createOrder": { "orderId": "6djk979" }, "getOrderList": { "list": [ { "orderId": "ddj123", "product": "数据统计", "version": "高级版", "period": "1年", "buyNum": 2, "date": "2016-10-10", "amount": "500元" }, { "orderId": "yuj583", "product": "流量分析", "version": "户外版", "period": "3个月", "buyNum": 1, "date": "2016-5-2", "amount": "2200元" }, { "orderId": "pmd201", "product": "广告发布", "version": "商铺版", "period": "3年", "buyNum": 12, "date": "2016-8-3", "amount": "7890元" } ] } } 类似于后端：
@RequestMapping(value = "getNewsList") @ResponseBody public String getNewsList() { // ... }
@RequestMapping(value = "login") @ResponseBody public String login() { // ... }
@RequestMapping(value = "getPrice") @ResponseBody public String getPrice( @RequestParam() { // ... }
// ...... 访问http://localhost:8081就可以看到：
json-server
可以访问：http://loalhost:8081/getNewsList 拿取对应的JSON数据。
配置代理
配置vue代理：
// config/index.js module.exports = { dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/* 代理 */
proxyTable: {
'/api': 'http://localhost:8081/' // ->> http://localhost:8080/ == http://localhost:8081/
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// ...
配置json-server：
/* 给访问db.json资源路径加一个前缀：http://localhost:8080/getUserName ->> http://localhost:8080/api/getUserName */ apiServer.use('/api', apiRouter) 现在访问需要加上 "/api"：http://localhost:8080/api == http://localhost:8081/api。
在我目前的这个案例中，在页面加载完成后需要db.json的数据，于是我写了一个钩子函数来完成数据的加载：
export default { data () { return { newList: [] } } //... created () { this.$http.get('/api/getNewsList').then((res) => this.newList = res.data); // 不支持POST } }
另外一种方式
使用json-server只能支持get，不支持post，所以我们更介意使用下面的这种方式：
/* config/webpack.dev.conf.js 下面引入的这些模块和插件都无需install */ const fs = require('fs'); // node模块，文件系统 const express = require('express') // node模块，web模块 const bodyParser = require('body-parser') // 引入组件，用它返回JSON数据
var apiServer = express(); // 创建服务器 var apiRouter = express.Router() // 创建路由
apiServer.use(bodyParser.urlencoded({extended: true})) apiServer.use(bodyParser.json()) apiServer.use('/api', apiRouter); // 路由根目录
apiRouter.get('/', function (req, res) { // 如果设置了use的路径参数，这个就会被覆盖：/ ->> /api res.json({message: 'hooray! welcome to our api!'}) }) // /:apiName 路径变量，/api/getUser [apiName == getUser] apiRouter.route('/:apiName').all(function (req, res) { // .all 所有请求都走这个 fs.readFile('./db.json', 'utf8', function (err, data) { // (文件全路径, 编码格式, 回调函数(异常，取到的数据)) if (err) { throw err } var data = JSON.parse(data) // 将字符串转成对象 if (data[req.params.apiName]) { // 判断这个对象中有没有这个属性 res.json(data[req.params.apiName]) // 返回 } else { res.send('no such api name') } }); }); apiServer.listen(8090, function (err) { if (err) { console.log(err); return; } console.log('Listening at http://localhost:8090'); }) 步骤和json-server是一样的，只不过把之前json-server在webpack.dev.conf.js中的内容换成上面的这种即可。然后配合vue-resource的this.$http.post(url)完成请求。
