vue配置json-server, 与vue配合使用 数据请求

vue配置 json-server

json-server安装 https://blog.csdn.net/qq_39109182/article/details/85048135

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, '请求失败')
	        });   			
   		},
 
   }
}