封装axios

.env.dev

@@ -1,4 +1,4 @@
 NODE_ENV = 'production'
 VUE_APP_BASE_URL = http://101.201.121.115:8093/
 VUE_APP_LOGIN_TITLE = 沈阳领新智科智能信息系统有限公司
-VUE_APP_LOGIN_LOGO = ../assets/img/logo.png
+VUE_APP_LOGIN_LOGO = ../assets/img/logo.png

.env.prod

@@ -1,4 +1,4 @@
 NODE_ENV = 'production'
 VUE_APP_BASE_URL = http://101.201.121.115:8093/
 VUE_APP_LOGIN_TITLE = 沈阳领新智科智能信息系统有限公司
-VUE_APP_LOGIN_LOGO = ../assets/img/logo.png
+VUE_APP_LOGIN_LOGO = ../assets/img/logo.png

package-lock.json

@@ -5,8 +5,10 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "standard-project",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.21.1",
         "core-js": "^3.6.5",
         "element-plus": "^1.0.2-beta.48",
         "vue": "^3.0.0",
@@ -3666,6 +3668,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -7702,7 +7712,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555234886&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz",
       "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -18586,6 +18595,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -21606,8 +21623,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555234886&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz",
-      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
-      "dev": true
+      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
     },
     "for-in": {
       "version": "1.0.2",

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "element-plus": "^1.0.2-beta.48",
     "vue": "^3.0.0",

src/server/api.js

@@ -0,0 +1,18 @@
+import service from "./request.js";
+
+export const get = (url, params) =>
+  service.request({
+    url: url,
+    method: "get",
+    params,
+  });
+export const post = (url, data) =>
+  service.request({
+    url: url,
+    method: "post",
+    data,
+  });
+export default {
+  get,
+  post,
+};

src/server/request.js

@@ -0,0 +1,31 @@
+import axios from "axios";
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_URL,
+  timeout: 20000, // request timeout
+});
+// request interceptor
+service.interceptors.request.use(
+  (config) => {
+    config.headers["Authorization"] = "Bearer token";
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+service.interceptors.response.use(
+  (response) => {
+    const code = response.data.code;
+    if (code === 200) {
+      return response.data;
+    }
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default service;

src/views/Home.vue

@@ -18,6 +18,7 @@
 <script>
 import SearchTemplate from "../components/SearchTemplate.vue";
 import ContentContainer from "../components/ContentContainer.vue";
+import { get } from "../server/api.js";
 export default {
   name: "Home",
   components: {
@@ -55,5 +56,11 @@ export default {
       console.log("可以正常输出内容");
     },
   },
+  mounted() {
+    get("/user/plants", {}).then(({ code, data }) => {
+      console.log(code);
+      console.log(data);
+    });
+  },
 };
 </script>

vue.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  // 基本路径
+  publicPath: "./",
+  // 构建输出目录
+  outputDir: "dist",
+  // 静态文件
+  assetsDir: "static",
+  // html路径
+  indexPath: "index.html",
+  // 文件名哈希
+  filenameHashing: true,
+  lintOnSave: true,
+  // 请求配置
+  devServer: {
+    //自动打开浏览器
+    port: "8080",
+    host: "localhost",
+    open: true,
+    proxy: {
+      "/user": {
+        target: process.env.VUE_APP_BASE_URL, //要跨域的域名 目标地址
+        changeOrigin: true, //是否开启跨域  是否更改源路径
+        ws: true,
+        pathRewrite: {
+          "^/user": "", // /api/ / 凡是/api开头的地址都可以跨域
+        },
+      },
+    },
+  },
+};

yarn.lock

@@ -1941,6 +1941,13 @@
   "resolved" "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz"
   "version" "1.11.0"
 
+"axios@^0.21.1":
+  "integrity" "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg="
+  "resolved" "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz"
+  "version" "0.21.1"
+  dependencies:
+    "follow-redirects" "^1.10.0"
+
 "babel-eslint@^10.1.0":
   "integrity" "sha1-aWjlaKkQt4+zd5zdi2rC9HmUMjI="
   "resolved" "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz"
@@ -4117,7 +4124,7 @@
     "inherits" "^2.0.3"
     "readable-stream" "^2.3.6"
 
-"follow-redirects@^1.0.0":
+"follow-redirects@^1.0.0", "follow-redirects@^1.10.0":
   "integrity" "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
   "resolved" "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555234886&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz"
   "version" "1.14.1"