tangjinzhou 6 years ago
parent
commit
0952edcd07
5 changed files with 57 additions and 25 deletions
  1. 1 1
      babel.config.js
  2. 5 1
      package.json
  3. 26 0
      src/utils/request.js
  4. 24 22
      src/views/Dashboard/Analysis.vue
  5. 1 1
      vue.config.js

+ 1 - 1
babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ["@vue/app"],
+  presets: ["@vue/app", "@vue/babel-preset-jsx"],
   plugins: [
     [
       "import",

+ 5 - 1
package.json

@@ -4,6 +4,7 @@
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve",
+        "serve:no-mock": "cross-env MOCK=none vue-cli-service serve",
         "build": "vue-cli-service build",
         "lint": "vue-cli-service lint",
         "test:unit": "vue-cli-service test:unit"
@@ -20,6 +21,8 @@
         "vuex": "^3.0.1"
     },
     "devDependencies": {
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
+        "@vue/babel-preset-jsx": "^1.0.0-beta.3",
         "@vue/cli-plugin-babel": "^3.5.0",
         "@vue/cli-plugin-eslint": "^3.5.0",
         "@vue/cli-plugin-unit-jest": "^3.5.0",
@@ -30,6 +33,7 @@
         "babel-eslint": "^10.0.1",
         "babel-jest": "^23.6.0",
         "babel-plugin-import": "^1.11.0",
+        "cross-env": "^5.2.0",
         "eslint": "^5.8.0",
         "eslint-plugin-vue": "^5.0.0",
         "less": "^3.0.4",
@@ -46,4 +50,4 @@
             "git add"
         ]
     }
-}
+}

+ 26 - 0
src/utils/request.js

@@ -0,0 +1,26 @@
+import axios from "axios";
+import { notification } from "ant-design-vue";
+
+function request(options) {
+  return axios(options)
+    .then(res => {
+      return res;
+    })
+    .catch(error => {
+      const {
+        response: { status, statusText }
+      } = error;
+      notification.error({
+        // eslint-disable-next-line no-unused-vars
+        message: h => (
+          <div>
+            请求错误 <span style="color: red">{status}</span> : {options.url}
+          </div>
+        ),
+        description: statusText
+      });
+      return Promise.reject(error);
+    });
+}
+
+export default request;

+ 24 - 22
src/views/Dashboard/Analysis.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import axios from "axios";
+import request from "../../utils/request";
 import Chart from "../../components/Chart";
 export default {
   data() {
@@ -21,27 +21,29 @@ export default {
   },
   methods: {
     getChartData() {
-      axios
-        .get("/api/dashboard/chart", { params: { ID: 12345 } })
-        .then(response => {
-          this.chartOption = {
-            title: {
-              text: "ECharts 入门示例"
-            },
-            tooltip: {},
-            xAxis: {
-              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
-            },
-            yAxis: {},
-            series: [
-              {
-                name: "销量",
-                type: "bar",
-                data: response.data
-              }
-            ]
-          };
-        });
+      request({
+        url: "/api/dashboard/chart",
+        method: "get",
+        params: { ID: 12345 }
+      }).then(response => {
+        this.chartOption = {
+          title: {
+            text: "ECharts 入门示例"
+          },
+          tooltip: {},
+          xAxis: {
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+          },
+          yAxis: {},
+          series: [
+            {
+              name: "销量",
+              type: "bar",
+              data: response.data
+            }
+          ]
+        };
+      });
     }
   },
   beforeDestroy() {

+ 1 - 1
vue.config.js

@@ -14,7 +14,7 @@ module.exports = {
           if (req.headers.accept.indexOf("html") !== -1) {
             console.log("Skipping proxy for browser request.");
             return "/index.html";
-          } else {
+          } else if (process.env.MOCK !== "none") {
             const name = req.path
               .split("/api/")[1]
               .split("/")