@vue/cli 3.0 + axios + json-server (前后端分离，前端进行数据模拟)

vue是前后端分离的架构，那么在后端还没有给数据接口的时候，前端改如何使用模拟数据。
关于模拟数据，适应较多的有 Mock.js和 json-server，在此进行 json-server的使用讲解，关于另一个可查看官网 → Mockjs官网

---

更新该流程
vue-cli + axios + element + (mockjs | json-server)

---

一、创建vue项目

此处不再进行项目的创建演示，不会创建项目的可跳转传送门，进行学习 传送门 → 创建vue项目

使用脚手架创建好项目之后，效果会如下图：

依照提示进行项目的启动

cd json-pro
yarn serve

使用 ctrl + 鼠标左击即可，项目暂时告一段落，要注意的是项目的端口号为 8080

二、json-server相关

2.1 安装json-server

参考地址： 【npm josn-server】

此时在你创建的项目文件处打开终端，执行安装命令

npm i json-server
or
yarn add json-server

如图：

2.2 创建.json文件

安装完成之后，在项目根目录下创建一个***.json的文件，文件名看个人随便起

db.json

{
  "infomation": [
    {
      "id": 1,
      "title": "json-server 的第1条数据",
      "desc": "奥特曼不想打小怪兽，明明可以做好朋友的",
      "author": "被奥特曼打了很久的怪兽"
    },
    {
      "id": 2,
      "title": "json-server 的第2条数据",
      "desc": "葫芦娃不想去救爷爷，一个一个的去送不好",
      "author": "种出七个葫芦的爷爷"
    },
    {
      "id": 1,
      "title": "json-server 的第一条数据",
      "desc": "王者荣耀其实不是很好玩，这并不是我内心的真话",
      "author": "想玩游戏的我"
    }
  ]
}

2.3 配置启动命令

打开 package.json，在 script里加一条语句

 "json": "json-server --watch db.json --port 3000"

当配置好启动命令之后，启动 json-server

yarn json
or
npm run json

启动完成，就会出现如图：

点击红色框里的链接，或者复制到浏览器地址栏即可看到数据

json-server 暂时告一段落，要注意的是 json-server的端口号是3000

三、axios请求

参考文献： 【axios 官方网站】

3.1 安装axios

yarn add axios
or
npm install axios

打开终端，输入安装指令

如图所示为 安装完成

3.2 二次封装axios

在实际的项目中，我们一般不会直接将安装好的axios进行使用，而是进行二次封装，接下来我们来简单的封装

3.2.1 创建 utils/http.js

在src文件在下创建utils文件夹，在utils里创建 http.js文件

3.2.2 编写http.js

http.js

//引入安装好的axios插件
import axios from "axios";

const get = (url, params) => {
  return axios.get(url, { params });
};

const post = (url, data) => {
  return axios.post(url, data);
};

//将二次封装好的axios导出
export { get, post };

3.3 项目使用axios

3.3.1 配置代理

上文也提到过，项目的端口为8080,然后json文件的端口为3000，这样就会涉及到跨域，解决跨域的方式很多种，此处讲解一下配置proxy代理
在根目录下创建文件vue.config.js，覆盖webpack的一些内容。

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        // 此处的写法，目的是为了 将/api 替换成 http://localhost:3000
        target: "http://localhost:3000",
        //是否跨域
        changeOrigin: true,
        //路径重写 下面示例为 将 /api 替换成空
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

3.3.2 发送axios请求

此示例是随便找一个文件进行数据的请求
在views文件夹下面的about.vue文件里重新写一下
about.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="sendRequest">click me</button>
  </div>
</template>
<script>
import { get, post } from "../utils/http";
export default {
  methods: {
    async sendRequest() {
      let res = await get("/api/infomation");
      console.log("res", res);
    },
  },
};
</script>

添加一个按钮click me,当点击按钮时会执行sendRequest。引入二次封装的axios文件，因为axios的返回值是一个Promise，所以需要使用async await解决异步问题。

样式如图：

当点击之后，获取到的数据如图：

数据其实在当前数据的data里，根据个人需要进行操作即可。

切记：如果点击按钮出现 404 的错误，此时只许重新启动。先启动json文件，然后启动项目即可

3.4 不进行二次封装，进行axios请求

将之前创建的 utils/http.js文件删除掉
重新修改文件
about.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="sendRequest">click me</button>
  </div>
</template>
<script>
import axios from "axios";
export default {
  methods: {
    sendRequest() {
      axios
        .get("http://localhost:3000/infomation")
        .then((response) => {
          console.log("数据请求成功,获取到的数据为:", response);
        })
        .catch((error) => {
          console.log("数据请求出错,错误为:", error);
        });
    },
  },
};
</script>

效果如下：

依然可以获取到数据，然后根据需要操作即可