6.4

cdTMP/.eslintignore

@@ -1,3 +1,2 @@
 /*.json
-/*.ts
 dist

cdTMP/package.json

@@ -31,6 +31,8 @@
         "vuedraggable": "^2.24.3"
     },
     "devDependencies": {
+        "@types/lodash": "^4.14.195",
+        "@types/qs": "^6.9.7",
         "@vitejs/plugin-vue": "^4.1.0",
         "@vitejs/plugin-vue-jsx": "^3.0.1",
         "autoprefixer": "^10.4.14",

cdTMP/src/api/request.js

@@ -0,0 +1,122 @@
+import axios from "axios"
+import { Message } from "@arco-design/web-vue"
+import tool from "@/utils/tool"
+import { get, isEmpty } from "lodash"
+import qs, { stringify } from "qs"
+import { h } from "vue"
+import { IconFaceFrownFill } from "@arco-design/web-vue/dist/arco-vue-icon"
+
+// createService
+function createService() {
+    // 创建axios实例
+    const service = axios.create()
+
+    // 实例的request请求拦截器
+    service.interceptors.request.use(
+        (config) => config,
+        (error) => {
+            return Promise.reject(error)
+        }
+    )
+    // 实例的response响应拦截器
+    service.interceptors.response.use(
+        (res) => {
+            // 如果发现响应头有文件传输扩展，或则响应头为application/json，或者直接status=200
+            if (
+                (res.headers["content-disposition"] || !/^application\/json/.test(res.headers["content-type"])) &&
+                res.status === 200
+            ) {
+                return res
+                // 如果发现data中有size字段直接报错
+            } else if (res.data.size) {
+                res.data.code = 500
+                res.data.message = "服务器内部错误"
+                res.data.success = false
+            } else if (res.data.code && res.data.code !== 200) {
+                Message.error({
+                    content: res.data.message,
+                    // 注意奇怪的用法
+                    icon: () => h(IconFaceFrownFill)
+                })
+            }
+            return res.data
+        },
+        (error) => {
+            // 其实基本逻辑是有message写message
+            // 没用message再去找默认的response的status
+            const err = (text) => {
+                Message.error({
+                    content:
+                        error.response && error.response.data && error.response.data.message
+                            ? error.response.data.message
+                            : text,
+                    icon: () => h(IconFaceFrownFill)
+                })
+            }
+            if (error.response && error.response.data) {
+                switch (error.response.status) {
+                    case 404:
+                        err("服务器资源不存在")
+                        break
+                    case 500:
+                        err("服务器内部错误")
+                        break
+                    case 401:
+                        err("登录状态已过期，需要重新登录")
+                        // 清楚本地localStorage
+                        tool.local.clear()
+                        // 移动到网站的根目录
+                        window.location.href = "/"
+                        break
+                    case 403:
+                        err("没有权限访问该资源")
+                        break
+                    default:
+                        err("未知错误！")
+                }
+            } else {
+                err("请求超时，服务器无响应！")
+            }
+            return Promise.reject(error.response && error.response.data ? error.response.data : null)
+        }
+    )
+    return service
+}
+
+/**
+ * @description 创建请求方法
+ * @param {Object} service axios 实例
+ */
+function createRequest(service) {
+    return function (config) {
+        const env = import.meta.env
+        // localStorage获取token信息
+        const token = tool.local.get(env.VITE_APP_TOKEN_PREFIX)
+        const configDefault = {
+            headers: {
+                Authorization: "Bearer " + token,
+                "Accept-Language": "zh_CN",
+                "Content-Type": get(config, "headers.Content-Type", "application/json;charset=UTF-8")
+            },
+            timeout: 10000,
+            baseURL: env.VITE_APP_OPEN_PROXY === "true" ? env.VITE_APP_PROXY_PREFIX : env.VITE_APP_BASE_URL,
+            data: {}
+        }
+        // option是configDefault和传入的config合并
+        const option = Object.assign(configDefault, config)
+        // lodash的isEmpty函数可以判断对象属性是否为空/数组是否为空->为空则返回true
+        // qs中stringfy作用是urlencode
+        // { c: 'b', a: 'd' } -> 'c=b&a=d'
+        // 如果有params就转为urlencode样子
+        if (!isEmpty(option.params)) {
+            option.url = option.url + "?" + stringify(option.params)
+            option.params = {}
+        }
+        return service(option)
+    }
+}
+
+// 上面两个函数一个为增加实例拦截器，一个是传入实例后请求
+export const service = createService()
+// 返回的是一个函数，这个函数传入config然后添加上默认config然后发出实例的请求
+export const request = createRequest(service)

cdTMP/src/utils/tool.js

@@ -34,4 +34,30 @@ tool.capsule = (title, info, type = "primary") => {
     )
 }
 
+// local函数处理localStorage
+/**
+ * LocalStorage
+ */
+tool.local = {
+    set(table, settings) {
+        let _set = JSON.stringify(settings)
+        return localStorage.setItem(table, _set)
+    },
+    get(table) {
+        let data = localStorage.getItem(table)
+        try {
+            data = JSON.parse(data)
+        } catch (err) {
+            return null
+        }
+        return data
+    },
+    remove(table) {
+        return localStorage.removeItem(table)
+    },
+    clear() {
+        return localStorage.clear()
+    }
+}
+
 export default tool

cdTMP/src/views/login.vue

@@ -77,12 +77,17 @@
 import { reactive, onMounted, ref } from "vue"
 import verifyCode from "@cps/ma-verifyCode/index.vue"
 import { Message } from "@arco-design/web-vue"
+import { useUserStore } from "@/store"
+import { useRouter, useRoute } from "vue-router"
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
 // 绑定登录form的数据
 const form = reactive({ username: "superAdmin", password: "admin123", code: "" })
 // 获取验证码dom && arco表单loading
 const Verify = ref(null)
 const loading = ref(null)
-// handle登录按钮表单校验以及验证码
+// 点击登录按钮
 const handleSubmit = async ({ values, errors }) => {
     if (loading.value) {
         return
@@ -90,6 +95,18 @@ const handleSubmit = async ({ values, errors }) => {
     loading.value = true
     if (Verify.value.checkResult(form.code) && !errors) {
         // 登录逻辑需要用到userStore
+        const result = await useUserStore.login(form)
+        if (!result) {
+            loading.value = false
+            return
+        }
+        // 1.注意router.currentRoute.value要加value
+        // 2.query是router的东西，params是axios的东西
+        const { redirect, ...othersQuery } = router.currentRoute.value.query
+        router.push({
+            name: redirect || "WorkPlace",
+            query: { ...othersQuery }
+        })
     }
     loading.value = false
 }

cdTMP/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "composite": false,
-        "outDir": "./build",
+        "outDir": "build",
         "declaration": true,
         "declarationMap": true,
         "esModuleInterop": true,
@@ -32,6 +32,9 @@
             "@cps/*": [
                 "src/components/*"
             ],
+            "vue-i18n": [
+                "vue-i18n/dist/vue-i18n.cjs.js"
+            ]
         },
         "lib": [
             "dom",
@@ -52,6 +55,6 @@
     ],
     "exclude": [
         "node_modules",
-        "build/**/*",
+        "build/**/*"
     ]
 }

cdTMP/进度.md

@@ -1,3 +1,2 @@
 ### login页面样式
-1.把login页面的业务写完->包括store的和router逻辑
+1.明天了解arco和mine两个的user.js（store里面的）
-2.login样式全理解

chengduTestPlant/package-lock.json

@@ -42,7 +42,9 @@
                 "vuedraggable": "^4.1.0"
             },
             "devDependencies": {
+                "@types/lodash": "^4.14.195",
                 "@types/nprogress": "^0.2.0",
+                "@types/qs": "^6.9.7",
                 "@types/vue": "^2.0.0",
                 "less": "^4.1.3",
                 "less-loader": "^11.0.0",
@@ -1046,6 +1048,12 @@
             "dev": true,
             "peer": true
         },
+        "node_modules/@types/lodash": {
+            "version": "4.14.195",
+            "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.195.tgz",
+            "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==",
+            "dev": true
+        },
         "node_modules/@types/node": {
             "version": "20.2.5",
             "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.2.5.tgz",
@@ -1059,6 +1067,12 @@
             "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==",
             "dev": true
         },
+        "node_modules/@types/qs": {
+            "version": "6.9.7",
+            "resolved": "https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz",
+            "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+            "dev": true
+        },
         "node_modules/@types/vue": {
             "version": "2.0.0",
             "resolved": "https://registry.npmmirror.com/@types/vue/-/vue-2.0.0.tgz",

chengduTestPlant/package.json

@@ -44,7 +44,9 @@
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
+        "@types/lodash": "^4.14.195",
         "@types/nprogress": "^0.2.0",
+        "@types/qs": "^6.9.7",
         "@types/vue": "^2.0.0",
         "less": "^4.1.3",
         "less-loader": "^11.0.0",

chengduTestPlant/src/components/ma-cityLinkage/index.vue

@@ -1,12 +1,3 @@
-<!--
- - MineAdmin is committed to providing solutions for quickly building web applications
- - Please view the LICENSE file that was distributed with this source code,
- - For the full copyright and license information.
- - Thank you very much for using MineAdmin.
- -
- - @Author X.Mo<root@imoi.cn>
- - @Link   https://gitee.com/xmo/mineadmin-vue
--->
 <template>
     <a-cascader
         v-if="props.type === 'cascader'"

chengduTestPlant/src/utils/request.js

@@ -22,6 +22,7 @@ function createService() {
     // HTTP response 拦截器
     service.interceptors.response.use(
         (response) => {
+            // 请求正确情况
             if (
                 (response.headers["content-disposition"] ||
                     !/^application\/json/.test(response.headers["content-type"])) &&

chengduTestPlant/src/views/login.vue

@@ -3,16 +3,6 @@ import { reactive, ref } from "vue"
 import verifyCode from "@cps/ma-verifyCode/index.vue"
 import { useUserStore } from "@/store"
 import { useRouter, useRoute } from "vue-router"
-import { request } from "@/utils/request"
-
-// 首页图片暂时不用
-// request({
-//     url: "system/getBingBackgroundImage",
-//     timeout: 10000,
-//     method: "get"
-// }).then((res) => {
-//     document.getElementById("background").style.backgroundImage = `url(${res.data.url})`
-// })
 
 const router = useRouter()
 const route = useRoute()

chengduTestPlant/yarn.lock

@@ -523,6 +523,11 @@
   resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.12.tgz"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
 
+"@types/lodash@^4.14.195":
+  version "4.14.195"
+  resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.195.tgz"
+  integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
+
 "@types/node@*", "@types/node@>= 14":
   version "20.2.5"
   resolved "https://registry.npmmirror.com/@types/node/-/node-20.2.5.tgz"
@@ -533,6 +538,11 @@
   resolved "https://registry.npmmirror.com/@types/nprogress/-/nprogress-0.2.0.tgz"
   integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
 
+"@types/qs@^6.9.7":
+  version "6.9.7"
+  resolved "https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz"
+  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
+
 "@types/vue@^2.0.0":
   version "2.0.0"
   resolved "https://registry.npmmirror.com/@types/vue/-/vue-2.0.0.tgz"