在大多数开发流程中 后台开发人员一般会优先输出API文档给前端开发人员
前端开发人员按照API文档先行编写业务逻辑 当然此时API并不能真正调用 意味着我们拿不到测试数据
而有些业务逻辑需要后台API数据的支持 我们必须等到后台API开发完成后 才能测试这些业务逻辑
显然这种工作效率是低下的 我们不得不依赖API的开发进度
这样的话很容易就会影响开发效率。试想下如果我们自己本地搭建一台JSON服务器 自己生产测试数据 ???
那么,json-server就能帮我们达到目的
Step.1 下载安装
npm install -g json-server
Step.2 使用
既然是测试json数据 那么我们需要创建一个json数据。首先在你喜欢的位置创建一个文件目录
我在当前目录下创建了db.json
{
"getNewsList": [
{
"id": 1,
"title": "励志!轮椅高考生经历",
"url": "http://starcraft.com"
},
{
"id": 2,
"title": "不可思议,迪丽热巴和王宝强竟然参加了世界杯?",
"url": "http://warcraft.com"
},
{
"id": 3,
"title": "关晓彤又在北影食堂被偶遇,她是来上学的还是来吃饭的?",
"url": "http://overwatch.com"
},
{
"id": 4,
"title": "神吐槽:我是梅西,我现在__得一比",
"url": "http://hearstone.com"
}
]
}
我创建了简单的测试数据
接下来需要启动 json-server 并告诉json-server监视db.json
json-server --watch db.json
接下来需要我们在webpack-dev-conf.js文件下进行配置
1. 在const portfinder = require('portfinder') 之后添加代码:
const express = require('express') //引入node.js的express框架
const app = express() //创建express实例
const appData = require('../db.json') //加载本地数据
const getNewsList = appData.getNewsList //获取json文件中的数据
const apiRoutes = express.Router() //编写路由
app.use('/api', apiRoutes)
2. 还是在本文件下找到devServer,写入如下代码:
before(app) {
app.get('/api/getNewsList', (req, res) => {
res.json({
errno: 0,
data: getNewsList
})//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
})
}
3. npm run dev,在浏览器中输入地址即可
4. 本地请求数据的接口,实例通过的是vue-resource调用的
created: function (){
this.$http.get('/api/getNewsList')
.then((res) => {
this.newList = res.data
console.log(res)
}, (err) => {
console.log(err)
})
}
前方高能,请注意!!!
上图中箭头指示的路径切记一定要是绝对路径!绝对路径!不带盘符的特殊绝对路径!