方法一采用node的express搭建服务
一.旧版本存在dev-server.js的配置方法
build下的dev-server.js中配置
在const app = express()后，const compiler = webpack(webpackConfig)前配置即可，
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var foods = appData.foods
var pice = appData.pice
var apiRoutes = express.Router()
apiRoutes.post('/foods', function (req, res) {
res.json({
errno: 0,
data: foods
});
})
apiRoutes.get('/seller', function (req, res) {
res.json({
errno: 0,
data: seller
});
})
apiRoutes.get('/goods', function (req, res) {
res.json({
errno: 0,
data: goods
})
})
apiRoutes.get('/ratings', function (req, res) {
res.json({
errno: 0,
data: ratings
});
})
apiRoutes.get('/pice', function (req, res) {
res.json({
errno: 0,
data: pice
});
})
app.use('/api',apiRoutes)
二.新版vue-webpack-template已经删除dev-server.js，改用webpack.dev.conf.js代替，所以 配置本地访问在webpack.dev.conf.js里配置
webpack.dev.conf.js
//首先
// nodejs开发框架express，用来简化操作
const express = require('express')
// 创建node.js的express开发框架的实例
const app = express()
// 引用的json地址
var appData = require('../data.json')
// json某一个key
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
第二步，当前js下找到devServer,添加以下代码
get请求配置
在 const portfinder = require(‘portfinder’)后添加
// 在devServer选项中添加以下内容
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: ratings
})
})
}
注意： 修改配置文件完毕后，需要重新运行命令npm run dev即可。
post请求配置。
如果要配置post请求，需要在该文件夹配置如下:
#webpack.dev.conf.js
apiRoutes.post('/foods', function (req, res) { //注意这里改为post就可以了
res.json({
error: 0,
data: foods
});
})
// 在组件里面
#...vue
created () {
this.$http.post('http://localhost:8080/api/foods').then((res) => {
console.log(res)
})
}
下面的方法原文地址http://www.jianshu.com/p/ccd53488a61b
方法二 使用 JSON Server 搭建 Mock 服务器
JSON Server是一个创建伪RESTful服务器的工具，具体使用方法可以看官方文档，这里直接讲在vue-cli 中的用法。
配置流程
全局安装 $ npm install -g json-server
项目目录下创建 mock 文件夹
mock 文件夹下添加 db.json 文件，内容如下
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
package.json 添加命令
"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"
启动 mock 服务器
$ npm run mock 命令 运行 mock server
访问 http://localhost:3000/
发现 db.json 下第一级 json 对象被解析成为可访问路径
GET请求具体路径 如：http://localhost:3000/posts 可获取数据
faker.js 批量生成伪数据
如果需要大量的伪数据，手动构造比较费时费力，可以使用 faker.js 批量生成。faker.js 的具体使用参见官方文档，这里做一个示例。
$ cnpm install faker -G 全局安装 faker
mock 目录下创建 faker-data.js，内容如下
module.exports = function () {
var faker = require("faker");
faker.locale = "zh_CN";
var _ = require("lodash");
return {
people: _.times(100, function (n) {
return {
id: n,
name: faker.name.findName(),
avatar: faker.internet.avatar()
}
}),
address: _.times(100, function (n) {
return {
id: faker.random.uuid(),
city: faker.address.city(),
county: faker.address.county()
}
})
}
}
$ json-server mock/faker-data.js 在 json server 中使用 faker
请求 http://localhost:3000/address 可以获取到随机生成的100组伪数据
1
2
添加中间件
json server 使用 RESTful 架构，GET请求可以获取数据，POST 请求则是添加数据。
在开发过程中，有时候想直接模拟获取POST请求返回结果，可以添加 express 中间件 将POST请求转为GET请求。
mock 目录下创建 post-to-get.js，内容如下
1
module.exports = function (req, res, next) {
req.method = "GET";
next();
}
启动命令添加运行中间件 --m mock/post-to-get.js
"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
重新启动服务，POST请求就被转换为GET请求了
其他需求也可以通过添加不同的中间件实现。
代理设置
在 config/index.js 的 proxyTable 将请求映射到 http://localhost:3000
代码中添加请求以测试效果
$ npm run mockdev 启动带mock 数据的本地服务