🐛由于mock无法模拟上传功能固变更为真实上传地址、移除webstorm自动构建http request功能

2025-11-04 21:32:09 +08:00 · 2020-10-03 10:27:49 +08:00 · 2020-10-03 10:27:49 +08:00 · 79d78e4794
commit 79d78e4794
parent ffd2770570
9 changed files with 48 additions and 148 deletions
--- a/http/mock.http
+++ b/http/mock.http
@ -1,70 +0,0 @@
-
-###/changeLog/getList###mockServer
-POST http://localhost:80/mock-server/changeLog/getList
-Content-Type: application/x-www-form-urlencoded
-###
-mockServer
-###/colorfulIcon/list###
-POST http://localhost:80/mock-server/colorfulIcon/list
-Content-Type: application/x-www-form-urlencoded
-###mockServer
-
-###/menu/navigate###
-POST http://localhost:80/mock-server/menu/navigate
-Content-Type: application/x-www-form-urlenmockServer
-###
-
-###/icon/list###
-POST http://localhost:80/mock-server/icon/mockServer
-Content-Type: application/x-www-form-urlencoded
-###
-
-###/face/list###mockServer
-POST http://localhost:80/mock-server/face/list
-Content-Type: application/x-www-form-urlencoded
-###
-mockServer
-###/table/list###
-POST http://localhost:80/mock-server/table/list
-Content-Type: application/x-www-form-urlencoded
-###mockServer
-
-###/remixicon/getList###
-POST http://localhost:80/mock-server/remixicon/getList
-Content-Type: application/x-www-form-urlenmockServer
-###
-
-###/publicKey###
-POST http://localhost:80/mock-server/pumockServer
-Content-Type: application/x-www-form-urlencoded
-###
-
-###/tree/list###mockServer
-POST http://localhost:80/mock-server/tree/list
-Content-Type: application/x-www-form-urlencoded
-###
-mockServer
-###/upload###
-POST http://localhost:80/mock-server/upload
-Content-Type: application/x-www-form-urlencoded
-###mockServer
-
-###/login###
-POST http://localhost:80/mock-server/login
-Content-Type: application/x-www-form-urlenmockServer
-###
-
-###/waterfall/list###
-POST http://localhost:80/mock-server/waterfall/list
-Content-Type: application/x-www-form-urlencoded
-###
-
-###/logout###
-POST http://localhost:80/mock-server/logout
-Content-Type: application/x-www-form-urlencoded
-###
-
-###/userInfo###
-POST http://localhost:80/mock-server/userInfo
-Content-Type: application/x-www-form-urlencoded
-###
--- a/mock/controller/upload.js
+++ b/mock/controller/upload.js
@ -1,14 +0,0 @@
-const data = [];
-module.exports = [
-  {
-    url: "/upload",
-    type: "post",
-    response() {
-      return {
-        code: 200,
-        msg: "success",
-        data: data,
-      };
-    },
-  },
-];
--- a/mock/index.js
+++ b/mock/index.js
@ -1,5 +1,5 @@
 /**
- * @copyright chuzhixin 1204505056@qq.com
+ * @author chuzhixin 1204505056@qq.com
 * @description 导入所有 controller 模块，npm run serve时在node环境中自动输出controller文件夹下Mock接口，请勿修改。
 */

--- a/mock/mockServer.js
+++ b/mock/mockServer.js
@ -70,7 +70,6 @@ module.exports = (app) => {
  let mockStartIndex = mockRoutes.mockStartIndex;
  chokidar
    .watch(mockDir, {
-      ignored: /mock-server/,
      ignoreInitial: true,
    })
    .on("all", (event) => {
--- a/package.json
+++ b/package.json
@ -50,6 +50,7 @@
    "lodash": "^4.17.20",
    "maptalks": "^0.49.1",
    "mapv": "^2.0.57",
+    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "qs": "^6.9.4",
    "screenfull": "^5.0.2",
@ -72,24 +73,23 @@
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.6",
    "@vue/cli-plugin-eslint": "^4.5.6",
-    "@vue/cli-plugin-router": "^4.5.6",
-    "@vue/cli-plugin-vuex": "^4.5.6",
    "@vue/cli-service": "^4.5.6",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
+    "body-parser": "^1.19.0",
+    "chalk": "^4.1.0",
+    "chokidar": "^3.4.2",
    "compression-webpack-plugin": "^6.0.2",
    "eslint": "^7.10.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.0.0",
    "filemanager-webpack-plugin": "^2.0.5",
-    "image-webpack-loader": "^7.0.1",
    "lint-staged": "^10.4.0",
-    "mockjs": "^1.1.0",
    "plop": "^2.7.4",
    "prettier": "^2.1.2",
+    "raw-loader": "^4.0.1",
    "sass": "^1.26.11",
    "sass-loader": "^10.0.2",
-    "script-loader": "^0.7.2",
    "stylelint": "^13.7.2",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-recess-order": "^2.1.0",
--- a/src/components/VabUpload/index.vue
+++ b/src/components/VabUpload/index.vue
@ -1,10 +1,10 @@
 <template>
  <el-dialog
+    :before-close="handleClose"
+    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="909px"
-    :before-close="handleClose"
-    :close-on-click-modal="false"
  >
    <div class="upload">
      <el-alert
@ -15,34 +15,34 @@
      <br />
      <el-upload
        ref="upload"
-        class="upload-content"
-        :name="name"
-        :data="data"
        :action="action"
-        :headers="headers"
-        :on-change="handleChange"
-        :on-preview="handlePreview"
-        :on-remove="handleRemove"
-        :on-exceed="handleExceed"
-        :on-success="handleSuccess"
-        :on-progress="handleProgress"
-        :on-error="handleError"
-        :file-list="fileList"
-        :multiple="true"
        :auto-upload="false"
-        accept="image/png, image/jpeg"
-        :limit="limit"
-        list-type="picture-card"
        :close-on-click-modal="false"
+        :data="data"
+        :file-list="fileList"
+        :headers="headers"
+        :limit="limit"
+        :multiple="true"
+        :name="name"
+        :on-change="handleChange"
+        :on-error="handleError"
+        :on-exceed="handleExceed"
+        :on-preview="handlePreview"
+        :on-progress="handleProgress"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+        accept="image/png, image/jpeg"
+        class="upload-content"
+        list-type="picture-card"
      >
        <i slot="trigger" class="el-icon-plus"></i>
        <el-dialog
-          title="查看大图"
-          append-to-body
          :visible.sync="dialogVisible"
+          append-to-body
+          title="查看大图"
        >
-          <div style="padding-bottom: 20px !important">
-            <img width="100%" :src="dialogImageUrl" alt="" />
+          <div>
+            <img :src="dialogImageUrl" alt="" width="100%" />
          </div>
        </el-dialog>
      </el-upload>
@ -62,10 +62,10 @@
      </div>
      <el-button type="primary" @click="handleClose">关闭</el-button>
      <el-button
-        style="margin-left: 10px"
-        size="small"
-        type="success"
        :loading="loading"
+        size="small"
+        style="margin-left: 10px"
+        type="success"
        @click="submitUpload"
      >
        开始上传
@ -75,7 +75,7 @@
 </template>

 <script>
-  import { tokenName } from "@/config/settings";
+  import { baseURL, tokenName } from "@/config/settings";

  export default {
    name: "VabUpload",
@ -107,7 +107,7 @@
        loading: false,
        dialogVisible: false,
        dialogImageUrl: "",
-        action: "",
+        action: "https://vab-unicloud-3a9da9.service.tcloudbase.com/upload",
        headers: {},
        fileList: [],
        picture: "picture",
@ -126,16 +126,6 @@
        return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
      },
    },
-    created() {
-      if ("development" === process.env.NODE_ENV) {
-        this.api = process.env.VUE_APP_BASE_API;
-      } else {
-        this.api = `${window.location.protocol}//${window.location.host}`;
-      }
-
-      this.action = this.api + this.url;
-      this.headers[tokenName] = this.$baseAccessToken();
-    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
@ -161,7 +151,6 @@
        this.imgSuccessNum = this.imgSuccessNum + 1;
        if (fileList.length === this.imgNum) {
          setTimeout(() => {
-            this.$emit("fetch-datas");
            this.$baseMessage(
              `上传完成! 共上传${fileList.length}张图片`,
              "success"
@ -217,14 +206,13 @@
        this.imgNum = 0;
        this.imgSuccessNum = 0;
        this.imgErrorNum = 0;
-        if ("development" === process.env.NODE_ENV) {
+        /* if ("development" === process.env.NODE_ENV) {
          this.api = process.env.VUE_APP_BASE_API;
        } else {
          this.api = `${window.location.protocol}//${window.location.host}`;
        }

-        this.action = this.api + this.url;
-        this.headers[tokenName] = this.$baseAccessToken();
+        this.action = this.api + this.url; */
        this.dialogFormVisible = false;
      },
    },
@ -233,7 +221,7 @@

 <style lang="scss" scoped>
  .upload {
-    height: 600px;
+    height: 500px;

    .upload-content {
      .el-upload__tip {
--- a/src/config/settings.js
+++ b/src/config/settings.js
@ -79,9 +79,7 @@ module.exports = {
  //是否开启登录拦截
  loginInterception: true,
  //是否开启登录RSA加密
-  loginRSA: true,
-  //是否依据mock数据生成webstorm HTTP Request请求文件
-  httpRequestFile: false,
+  loginRSA: false,
  //intelligence和all两种方式，前者后端权限只控制permissions不控制view文件的import（前后端配合，减轻后端工作量），all方式完全交给后端前端只负责加载
  authentication: "intelligence",
  //vertical布局时是否只保持一个子菜单的展开
--- a/src/main.js
+++ b/src/main.js
@ -9,7 +9,7 @@ import "./plugins";
 */

 if (process.env.NODE_ENV === "production") {
-  const { mockXHR } = require("@/config/static");
+  const { mockXHR } = require("@/utils/static");
  mockXHR();
 }

--- a/src/config/static.js
+++ b/src/config/static.js
@ -1,16 +1,15 @@
 /**
- * @copyright chuzhixin 1204505056@qq.com
+ * @author chuzhixin 1204505056@qq.com
 * @description 导入所有 controller 模块，浏览器环境中自动输出controller文件夹下Mock接口，请勿修改。
 */
 import Mock from "mockjs";
-import { paramObj } from "@/utils";
+import { paramObj } from "@/utils/index";

 const mocks = [];
 const files = require.context("../../mock/controller", false, /\.js$/);

 files.keys().forEach((key) => {
-  const obj = files(key);
-  mocks.push(...obj);
+  mocks.push(...files(key));
 });

 export function mockXHR() {
@ -26,9 +25,9 @@ export function mockXHR() {
    this.proxy_send(...arguments);
  };

-  function XHR2ExpressReqWrap(respond) {
+  function XHRHttpRequst(respond) {
    return function (options) {
-      let result = null;
+      let result;
      if (respond instanceof Function) {
        const { body, type, url } = options;
        result = respond({
@ -43,11 +42,11 @@ export function mockXHR() {
    };
  }

-  for (const i of mocks) {
+  mocks.forEach((item) => {
    Mock.mock(
-      new RegExp(i.url),
-      i.type || "get",
-      XHR2ExpressReqWrap(i.response)
+      new RegExp(item.url),
+      item.type || "get",
+      XHRHttpRequst(item.response)
    );
-  }
+  });
 }