本地模拟请求数据，json-server与vue配合使用

安装json-server

npm install -g json-server

启动 json-server

新建db.json文件

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

如图

把db.json文件托管成一个 web 服务

json-server --watch --port 53000 db.json

如图

imgListData是json里自己起的名字，如图

vue配置 json-server

1、build/webpack.dev.conf.js

在里面添加如下（放在最下面就可以）

/*----------------json-Server---------*/
var jsonServer = require('json-server') //引入文件
var apiServer = jsonServer.create(); //创建服务器
var apiRouter = jsonServer.router('static/db.json') //引入json 文件 ，这里的地址就是你json文件的地址，然后把json文件放在里面
var middlewares = jsonServer.defaults(); //返回JSON服务器使用的中间件。
apiServer.use(middlewares)
apiServer.use('/api',apiRouter)
apiServer.listen( 3000 ,function(){ //json服务器端口:3000
  console.log('JSON Server is running')  //json server成功运行会在git bash里面打印出'JSON Server is running'
})

2、config/index.js

在proxyTable里添加值

3、package.json

在dependencies里面添加

"json-server": "^0.9.6",
"nodemon": "^1.11.0"

4、npm install 一下 ，接着启动vue项目npm run dev

运行

<template>
	<el-table :data="ulList" style="width: 100%" border>
		<el-table-column prop="id" label="ID" width="180"></el-table-column>
		<el-table-column prop="title" label="标题"></el-table-column>
	    <el-table-column prop="city" label="城市" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button size="small"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
	</el-table>
</template>

export default {
    created(){
		this.test();
    },
    data() {
      return {
   		ulList:[],
        //url:"/static/db.json",
      }
    },
//  computed: {  	
//  },	
   methods: {  
   		test(){// this.$http.get('api/imgListData').then((res)=>{ 或者 this.$axios
	        this.$axios.get('api/imgListData').then((res)=>{  //可用post请求，this.$http.post('api/imgListData',{'userId':123})
		        console.log(res, '请求成功')
		        //console.log(res.data);
		        this.ulList=res.data;
		        //console.log( this.ulList);
	        },(err)=>{
	        	console.log(err, '请求失败')
	        });   			
   		},
   		
	    handleEdit(index, row) {
	        this.$message('编辑第'+(index+1)+'行');
			this.$router.push({path:'editjson', query:{num:this.ulList[index],from:'server'}})
//			this.$router.push({name: '/editjson',params:{num:row}})
	    },   
   }
}

操作

1、http://localhost:3000/api/imgListData 访问的是db.json文件下的所有内容； 
2、http://localhost:53000/imgListData?id=5  模拟接口参数可筛选该目录下内容 
3、分页查询 参数为 _start, _end, _limit，并可添加其它参数筛选条件 
如从第3条开始的5条数据：http://localhost:53000/imgListData?_start=3&_limit=5

4、模糊查询_gte大于，_lte小于， _ne非， _like ，标题（titile）带一字的 ： http://localhost:53000/imgListData?title_like=一

5、排序 参数为_sort, _order 
如：http://localhost:53000/imgListData?_sort=id,views&_order=desc,asc