前端项目需要设定好数据接口以及数据的定义，剩下的就可以各自开发，最后集成测试。
利用json-server快速搭建本地服务器模拟后台数据的请求。
1.首先你的电脑中需要安装nodejs，建议使用最新版本，并且利用vue-cli初始化好项目，然后安装json server
npm install json-server --save2.提供json数据文件。
在项目static目录下，新建一个 JSON 文件db.json
例如，我的项目中db.json文件内容如下：
{
"likesList":[
{
"title": "针织衫",
"url": "/sfjw/dfs",
"hot":false
},
{
"title": "蛋糕裙",
"url": "/sfjw/dfs",
"hot":true
},
{
"title": "百褶裙",
"url": "/sfjw/dfs",
"hot":true
}
]
}
3.配置json-server
这部分很尴尬的是对于Vue2.0，官方移除了build文件下的dev-server.js,这时候改成在build/webpack.dev.conf.js里模拟数据
// server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
server.use(middlewares)
server.use(router)
server.listen(3000, () => {
console.log('JSON Server is running')
})不过我们的json文件在static目录下，需要修改文件目录，在build/webpack.dev.conf.js文件的结尾处添加下面的代码：
（相当于我们把JSON数据放在了http://localhost:3000地址下）
/*----------------jsonServer---------*/
/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router('static/db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
/*监听端口*/
apiServer.listen(3000, () => {
console.log('JSON Server is running')
})4.访问JSON数据
配置完成后，一定要在项目位置下的cmd里 利用npm dev run 重启项目，然后再地址栏输入http://localhost:3000 就可以访问到数据。（这个3000可以随便设置，需要与上面监听的端口对应，只要不是8080就可以，因为设置本地服务器，不能和客户端同源！）
likesList就是我们的json数据
5、设置浏览器代理
浏览器为了保护用户安全，引入了同源策略，即一个服务器页面无法访问另一个协议、域名、端口不同的服务器数据。当页面需要跨服务器访问另一个服务器的数据时，即产生跨域行为。
按照上面的配置，我们的开发的是 http://localhost:8080的页面，获取的服务器接口地址是http://localhost:3000,不同端口，所以是跨域请求，所以会导致请求http://localhost:3000下的JSON数据不成功。Vue通过代理配置proxyTable来解决此问题因此需要在config/index.js 的dev中进行如下配置：
module.exports = {
dev: {
...
proxyTable: {
'/api': {
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
target: 'http://localhost:3000',// 接口的域名
pathRewrite: {
'^/api': ''
}
}
},
...
}6.验证
npm run dev重启一下项目。在浏览器中输入http://localhost:8080/api，出现如下界面就OK了。配置好了之后，怎么使用这个api接口数据呢？
（如果配置好了，还是请求不到数据，建议在重启项目之前，利用npm install 安装缺少的依赖;配置好一定要npm run dev重启项目）
7.使用api接口的JSON数据
利用 使用vue-resouce发送Ajax获取数据，将请求到的数据显示在前端页面。
安装vue-resoue，参考vue-resoue的GitHub文档
this.$http.get('api/likesList')
.then((res) => {
this.likesList = res.data
},(err) => {
console.log("this is an error")
})<!-------------------------------------------------------------------------------我是一条分隔符------------------------------------------------------------->
vue页面的data里定义一下likesList
likesList:''在页面就可以随意使用了：
<ul>
<li v-for="like in likesList">
<a :href="like.url">{{ like.title }}</a>
<span v-if="like.hot" class="hot-tag">hot</span>
</li>
</ul>这样就实现了从后台服务器获取数据，并显示到前端页面的过程。
