使用JSON-Server搭建JSON服务器
JSON-Server主要的做用是搭建一台JSON服务器，测试一些业务逻辑（我以前都是采用读取文件的方式尴尬）。
1、安装javascript
|
1
|
npm install --save json-server
|
前提是已经安装好了node环境，而且初始化好了项目。
2、提供json数据文件。
在项目根目录下，新建一个 JSON 文件db.json。
3、配置json-server
在build\webpack.dev.conf.js下配置，若是是用旧版本的手脚架工具初始化的项目，是在build/dev-server.js下配置。html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/*----------------jsonServer---------*/
/*引入json-server*/
const jsonServer = require(
'json-server'
)
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router(
'db.json'
)
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
/*监听端口*/
apiServer.listen(3000, () => {
console.log(
'JSON Server is running'
)
})
|
4、访问数据
配置完成后，要npm dev run 重启项目，而后再地址栏输入http://localhost:3000 就能够访问到数据。
5、设置代理
最后作一下浏览器代理设置，在 config/index.js中：vue
|
1
2
3
4
5
6
7
8
9
10
|
/*代理配置表，在这里能够配置特定的请求代理到对应的API接口*/
/* 下面的例子将代理请求 /api/getNewsList 到 http://localhost:3000/getNewsList*/
proxyTable: {
'/api'
: {
changeOrigin:
true
,
// 若是接口跨域，须要进行这个参数配置
target:
'http://localhost:3000'
,// 接口的域名
pathRewrite: {
'^/api'
:
''
//后面能够使重写的新路径，通常不作更改
}
}
|
具体设置代理的方法，参见：Vue-接口跨域请求调试proxyTable
6、最后验证一下代理是否成功
在浏览器输入地址：http://localhost:8080/api。java
7、使用node
使用vue-resouce发送Ajax获取数据。webpack
|
1
2
3
4
5
6
|
this
.$http.get(
'/api/getNewsList'
)
//代替http://localhost:3000/getNewsList
.then((res) => {
this
.newsList = res.data
}, (err) => {
console.log(err)
})
|
转载自：https://www.cnblogs.com/superlizhao/p/8618221.htmlweb