feat:接口请求处理

Signed-off-by: zhangdd <86431843@qq.com>

initializer-ui/.gitignore

@@ -22,3 +22,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+package-lock.json
\ No newline at end of file

initializer-ui/package.json

@@ -11,6 +11,7 @@
     "axios": "^0.26.1",
     "core-js": "^3.21.1",
     "vue": "^3.2.31",
+    "element-plus": "^2.1.4",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {

initializer-ui/src/components/BackendStarter.vue

@@ -63,6 +63,12 @@ export default {
         link.click();
         window.URL.revokeObjectURL(link.href);
         document.body.removeChild(link);
+      }, error => {
+        var reader = new FileReader();
+        reader.readAsText(error.data, 'utf-8');
+        reader.onload = function (e) {
+          alert(reader.result)
+        }
       })
     }
   }

initializer-ui/src/main.js

 import {createApp} from 'vue'
+import ElementPlus from 'element-plus'
 import vRouter from './router'
 import App from './App.vue'
 
 const app = createApp(App)
 app.use(vRouter)
+app.use(ElementPlus)
 app.mount('#app')
\ No newline at end of file

initializer-ui/src/util/loading.js

+/**
+ * 全局loading效果：合并多次loading请求，避免重复请求
+ * 当调用一次showLoading，则次数+1；当次数为0时，则显示loading
+ * 当调用一次hideLoading，则次数-1; 当次数为0时，则结束loading
+ */
+import { ElLoading } from 'element-plus';
+
+// 定义一个请求次数的变量，用来记录当前页面总共请求的次数
+let loadingRequestCount = 0;
+// 初始化loading
+let loadingInstance;
+
+// 编写一个显示loading的函数 并且记录请求次数 ++
+const showLoading = (target) => {
+    if (loadingRequestCount === 0) {
+        // element的服务方式 target 我这边取的是表格class
+        // 类似整个表格loading和在表格配置v-loading一样的效果，这么做是全局实现了，不用每个页面单独去v-loading
+        loadingInstance = ElLoading.service({ target });
+    }
+    loadingRequestCount++
+}
+
+// 编写一个隐藏loading的函数，并且记录请求次数 --
+const hideLoading = () => {
+    if (loadingRequestCount <= 0) return
+    loadingRequestCount--
+    if (loadingRequestCount === 0) {
+        loadingInstance.close();
+    }
+}
+
+export {
+    showLoading,
+    hideLoading
+}
\ No newline at end of file

initializer-ui/src/util/request.js

 import axios from 'axios';
+import { showLoading, hideLoading } from './loading'
 
 axios.defaults.baseURL = 'http://localhost:8080'
 axios.defaults.timeout = 10000
@@ -6,11 +7,20 @@ axios.defaults.timeout = 10000
 const service = axios.create()
 
 service.interceptors.request.use(config => {
+    showLoading()
     return config
 })
 
 service.interceptors.response.use(response => {
+    hideLoading()
+    if (response.data.type == 'application/json') {
+        if (response.data.code != 200) {
+            return Promise.reject(response);
+        }
+    }
     return response
+}, error => {
+
 })
 
 export default service
\ No newline at end of file