vue2+json-server

我们先来了解一下，什么是json-server呢？

json-server就是一个Node模块，运行Express服务器，你可以指定一个json文件作为api的数据源。

了解完毕，开整。

首先，我们全局安装一下json-server

 

 

 

 记住一定是全局安装啊！！！！ -g而不是-s，我就是因为-s所以，错了太多太多次，还以为是我代码编写错了。

安装完毕，可以查看一下版本号。出现版本号就安装成功了。

 

 

 

然后准备一组json数据

{
    "chartData":[
        {"title":"冰箱","num":1827},
        {"title":"洗衣机","num":342},
        {"title":"电视机","num":541},
        {"title":"微波炉","num":1347},
        {"title":"烤箱","num":2431},
        {"title":"空调","num":876},
        {"title":"洗碗机","num":1578}
    ]
}

放在一个文件夹下，随便一个文件夹就好。

 

将命令行的路径，来到放置json数据的文件夹下

 

 

 启动json-server

json-server+json文件名

 

json-server+监视+json文件名

 

 

 

json-server+监视+json文件名+端口号

 

 

 

 

 启动json-server，我们点击下方第一个链接

得到json数据，就是成功了。

命令行反馈

 

 

 

 我们再安装axios，异步操作拿到数据。

 npm i axios 

在vue组件引入axios

获取数据方法

  methods: {
    //  数据请求方法
    async linkData() {// 异步操作 
      let echartsData = await axios({url:"http://localhost:8080/one"})
      console.log(echartsData.data)
    //将数据打印在控制台
    }
  }

挂载函数

 mounted() {
    this.linkData()
  },