前端测试工具：JSON-SERVER

原文地址：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') // 引入文件

/

• 前端测试工具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")br/>@ResponseBody
public String getNewsList() {
// ...
}

@RequestMapping(value = "login")br/>@ResponseBody
public String login() {
// ...
}

@RequestMapping(value = "getPrice")br/>@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)完成请求。

转载于:https://blog.51cto.com/zhuxianzhong/2384279