@vue/cli 3.0 + axios + json-server (前後端分離，前端進行數據模擬)

vue是前後端分離的架構，那麼在後端還沒有給數據接口的時候，前端改如何使用模擬數據。
關於模擬數據，適應較多的有Mock.js和json-server，在此進行json-server的使用講解，關於另一個可查看官網 → Mockjs官網

一、創建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 300"

當配置好啓動命令之後，啓動 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>

效果如下：

依然可以獲取到數據，然後根據需要操作即可