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>

加油，加油，加油！