webpack4.0.1_vue脚手架的项目与json-server结合，vue开发前端时用json-server模拟数据

写在前面的话：

      在完成现代web开发时，一个公司中，前后端同时进行开发，前端开发页面逻辑，后端处理业务逻辑。在后端还没有开发好，即没有提供数据是，则提前写好前后端的数据接口，前端人员利用json-server模拟出数据，前端利用fetch（或ajax）从json-server上请求到数据，进行动态数据的展示。等到后端人员把业务逻辑写好后。再把请求地址换成后端的即可。

正式开始：

        前端利用vue脚手架，或者自行搭建好vue项目后，把json-server也结合到项目中，这样前端就可以开始自己的页面逻辑开发了。
        下面就说一下，如何把json-server融合到vue脚手架项目中，如果不会vue脚手架搭建项目（搭建很简单）的话，请先看一下这篇文章：vue脚手架（vue-cli）如何搭建项目。
        1、前提已经用vue搭建好了项目
        2、建立模拟数据：在build目录下创建文件：db.json。在文件里写上如下代码：        {
"books":[
{"id":"878911","name":"三国","author":"罗贯中"},
{"id":"878912","name":"水浒","author":"吴承恩"}
],
"readers":[
{"id":"007","name":"张三疯","age":35},
{"id":"008","name":"张四疯","age":32}
]
}            以上代码表示你有两类数据，分别是书籍（books）和读者（readers），相当于数据库中表，mongod中叫集合。   
             你可以根据你的项目实际情况，写出你的数据    
       3、搭建json-server服务器
              1）、安装json-server模块，npm i json-server  -D
              2）、在build目录下创建jserver.js（这是nodejs做的简易服务器）。写上如下代码：                const path = require("path");

//引入：json-server模块
const jsonserver = require("json-server");
//用jsonserver创建服务对象
const jserver = jsonserver.create();
//创建路由
const jrouter = jsonserver.router(path.join(__dirname,"db.json"));
//定义中间件
const middlewares = jsonserver.defaults();

//nodejs的思路，每次请求服务器是，都会执行middlewares中间件
jserver.use(middlewares);
//路由，会根据请求，找对应的数据，如：books或者readers
jserver.use(jrouter);
//启动服务器
jserver.listen(8081,()=>{
console.log("json-server running in 8081");
});              3）、如果想测试json-server服务器配置是否成功，按照如下步骤：
                       （1）、在build目录下执行命令：node jserver.js，如果出现了提示json-server running in 8081，说明启动成
                       （2）、在浏览器中输入：http://localhost:8081/books。如果在浏览器里看到了如下内容，说明成功了。[
{
"id": "878911",
"name": "三国",
"author": "罗贯中"
},
{
"id": "878912",
"name": "水浒",
"author": "吴承恩"
}
]                  （3）、在浏览器中输入：http://localhost:8081/books?id=878912，你会发现可以取到id为878912的书籍信息：[
{
"id": "878912",
"name": "水浒",
"author": "吴承恩"
}
]当然你也可以看看readers的数据（在浏览器输入：http://localhost:8081/readers）

          4）、配置服务代理
                 此步骤的意思是以后，访问vue脚手架中启动的服务时，会引入到json-server服务下，什么意思呢，下面详细解释，先写代码。
                 打开项目目录下的config下的index.js文件。找到 dev：属性，该属性一般默认会有 proxyTable: {}。如果没有自己写上就行，    在花括号里写如下代码：module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api':{    
          target: 'http://localhost:8081',
          pathRewrite: {'^/api' : ''}, //api 做为标识，到最后是要被替换掉的。
          changeOrigin: true
          }
    },………………………………     此代码的意思是：如何访问的是/api路径，那么就转到http://localhost:8081下。
          5）、启动测试：
                （1）、启动json-server服务器（即数据来源的服务器）：
                           在build目录下执行命令：node jserver.js，如果出现了提示json-server running in 8081，说明成功
                 （2）、启动vue脚手架项目服务器：
                          在vue脚手架项目下执行命令：npm run dev，如果出现了提示“Your application is running here: http://localhost:706”，说明成功。                  （3）、在浏览器中测试：
                             在地址栏中输入：http://localhost:706/api/books，在浏览器中看到了：[
{
"id": "878911",
"name": "三国",
"author": "罗贯中"
},
{
"id": "878912",
"name": "水浒",
"author": "吴承恩"
}
]                            说明一切ok。
             6）、使用fetch，请求地址http://localhost:706/api/books，就可以拿到书籍信息了。
<template>
<div class="goodslistcss">
<ul>
<li v-for="item in goodslist">
<p @click="goGoodsdetail(item.goodsid)">商品编号:{{item.goodsid}}</p>
<p class="title">商品名称:{{item.goodsname}}</p>
<p>商品价格:{{item.goodsprice}}</p>
</li>
</ul>
</div>
</template>

<script>

import common from "../assets/common.css"

export default {
name: 'goodslist',
methods:{
goGoodsdetail:function(goodsid){
//保存商品编号
this.$store.state.id=goodsid;
//跳转
this.$router.push({ path: '/goodsdetail/:id',name:"goodsdetail",params: { goodsid:goodsid}});
},
getGoodsList:function(){
fetch('api/goodslists',{
method:"GET",
headers: new Headers({
'Accept': 'application/json' // 通过头指定，获取的数据类型是JSON
})
}) // 返回一个Promise对象，
.then((res)=>{
return res.json() // res.json()是一个Promise对象
})
.then((res)=>{
console.log(res) // res是最终的结果
this.goodslist = res;
})
}
},
mounted:function(){
this.getGoodsList();
},
data () {
return {
goodslist: []
}
}
}
</script>

<style scoped>
.goodslistcss{
width:1000px;
height:400px;
background-color:gray;
}
</style>
加油，加油，加油！