From 4f70b83f54a6395623042b6c24009745211c933e Mon Sep 17 00:00:00 2001 From: callmeyan Date: Mon, 5 Dec 2022 16:48:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85message,=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E5=A4=84=E7=90=86http=E5=93=8D=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-fe/package.json | 3 +- admin-fe/src/App.vue | 11 ++- admin-fe/src/assets/app.css | 34 +++++++- admin-fe/src/components/message/Toast.vue | 17 ++++ admin-fe/src/components/message/index.ts | 23 ++++++ admin-fe/src/main.ts | 2 +- admin-fe/src/service/types.d.ts | 4 + admin-fe/src/util/http.ts | 80 +++++++++++++++++-- admin-fe/src/views/Login.vue | 26 ++++-- admin-fe/tsconfig.json | 13 +++ admin-fe/vite.config.js | 3 + admin-fe/yarn.lock | 5 ++ .../controller/admin/UserAdminController.java | 3 + 13 files changed, 204 insertions(+), 20 deletions(-) create mode 100644 admin-fe/src/components/message/Toast.vue create mode 100644 admin-fe/src/components/message/index.ts create mode 100644 admin-fe/src/service/types.d.ts create mode 100644 admin-fe/tsconfig.json diff --git a/admin-fe/package.json b/admin-fe/package.json index e05ac7e..4f218c0 100644 --- a/admin-fe/package.json +++ b/admin-fe/package.json @@ -5,7 +5,7 @@ "scripts": { "start": "npm run dev", "dev": "vite", - "build": "vue-tsc && vite build" + "build": "vite build" }, "keywords": [], "author": "", @@ -17,6 +17,7 @@ "vue-router": "^4.1.6" }, "devDependencies": { + "@types/node": "^18.11.10", "@vitejs/plugin-vue": "^3.2.0", "typescript": "^4.9.3", "vite": "^3.2.4", diff --git a/admin-fe/src/App.vue b/admin-fe/src/App.vue index 014dcaf..7a5746c 100644 --- a/admin-fe/src/App.vue +++ b/admin-fe/src/App.vue @@ -1,16 +1,23 @@ diff --git a/admin-fe/src/assets/app.css b/admin-fe/src/assets/app.css index d81191c..4a5cf3a 100644 --- a/admin-fe/src/assets/app.css +++ b/admin-fe/src/assets/app.css @@ -13,7 +13,39 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Source Han Sans SC', 'Microsoft YaHei', 'Microsoft YaHei UI', "Helvetica Neue", sans-serif; scroll-behavior: smooth; } -.container{ + +.container { max-width: 1200px; margin: auto; } + +.message-wrapper { + box-sizing: border-box; + margin: 0; + padding: 0; + color: #000000d9; + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5715; + list-style: none; + font-feature-settings: "tnum"; + position: fixed; + top: 8px; + left: 0; + z-index: 1010; + width: 100%; + pointer-events: none; +} +.message-notice { + + padding: 8px; + text-align: center +} +.message-notice-content { + display: inline-block; + padding: 10px 16px; + background: #fff; + border-radius: 2px; + box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d; + pointer-events: all +} \ No newline at end of file diff --git a/admin-fe/src/components/message/Toast.vue b/admin-fe/src/components/message/Toast.vue new file mode 100644 index 0000000..065aa14 --- /dev/null +++ b/admin-fe/src/components/message/Toast.vue @@ -0,0 +1,17 @@ + + + + + \ No newline at end of file diff --git a/admin-fe/src/components/message/index.ts b/admin-fe/src/components/message/index.ts new file mode 100644 index 0000000..6102785 --- /dev/null +++ b/admin-fe/src/components/message/index.ts @@ -0,0 +1,23 @@ +import {createVNode, render} from 'vue' +import Toast from './Toast.vue' + +export const toast = (message: string) => { + if (timer) clearTimeout(timer) + let div = document.querySelector('.message-wrapper'); + if (!div) { + div = document.createElement('div'); + div.classList.add("message-wrapper"); + document.body.append(div); + } + // TODO 完善多消息同时共存 - 主要时添加新的容器 + const messageNode = createVNode(Toast, {message}) + render(messageNode, div) + // @ts-ignore + timer = setTimeout(() => { + div.removeChild(messageNode.el as Node) + }, 3000) +} +let timer = 0; +export default { + toast, +} \ No newline at end of file diff --git a/admin-fe/src/main.ts b/admin-fe/src/main.ts index 11f5de3..852b43e 100644 --- a/admin-fe/src/main.ts +++ b/admin-fe/src/main.ts @@ -2,7 +2,7 @@ import {createApp} from 'vue'; import App from './App.vue' import router from './router' import {httpConfig} from "./util/http"; - +import './assets/app.css' httpConfig.baseURL = "http://localhost:8080" diff --git a/admin-fe/src/service/types.d.ts b/admin-fe/src/service/types.d.ts new file mode 100644 index 0000000..6fde9b3 --- /dev/null +++ b/admin-fe/src/service/types.d.ts @@ -0,0 +1,4 @@ +type AdminLoginModel = { + account: string + token: string +} \ No newline at end of file diff --git a/admin-fe/src/util/http.ts b/admin-fe/src/util/http.ts index d0fc47a..707892a 100644 --- a/admin-fe/src/util/http.ts +++ b/admin-fe/src/util/http.ts @@ -1,7 +1,18 @@ +import {toast} from "../components/message"; + export type HttpMethod = 'get' | 'post' | 'delete' | 'put' +export enum RequestDataContentType { + JSON = 'application/json;charset=UTF-8', + FORM = 'application/x-www-form-urlencoded;charset=UTF-8', + FORM_DATA = 'multipart/form-data;charset=UTF-8', +} + export const httpConfig = { - baseURL: '' + baseURL: '', + globalErrorHandler: { + 1201: '请求参数不合法' + } } export type ResponseModel = { code: number @@ -12,27 +23,80 @@ export type ResponseModel = { class Http { post(url, data) { - return this.request(url, 'post', data) + return this.request(url, data) } - request(url: string, method: HttpMethod, data: any = null) { - return new Promise>((resolve, reject) => { + get(url, data = null) { + return this.request(url, data, 'get') + } + + /** + * GET /xxxx?a=1&b=2 + * NAME: value + * NAME2: value + * .... + * + * POSTDATA + * + * + * @param url + * @param method + * @param data + */ + request(url: string, data: any = null, method: HttpMethod = 'post', type: 'normal' | 'form' = 'normal') { + return new Promise((resolve, reject) => { + let contentType = RequestDataContentType.FORM; + if (data) { + if (type === 'form') { + const form = new FormData(); + for (const key in data) { + form.append(key, data[key]); + } + data = form; // 将data有{} => formData + contentType = RequestDataContentType.FORM_DATA; // 由于使用formData + method = 'post'; + } else if (method == 'post') { + // 将数据对象 转成json + data = JSON.stringify(data); + contentType = RequestDataContentType.JSON; + } else { + // 装对象转成 key=value&key=value + const params = []; + for (const key in data) { + params.push(`${key}=${data[key]}`); + } + data = params.join('&') + } + } fetch(httpConfig.baseURL + url, { method, - body: JSON.stringify(data), + body: data, headers: { - 'Content-Type': 'application/json;charset=utf-8' + 'Content-Type': contentType } }) .then(res => res.json()) // 只要json的响应数据 .then((res: ResponseModel) => { - if (res.code !== 0) { + const {code, data, message} = res; + if (code !== 0) { + const err = httpConfig.globalErrorHandler[code] + // 需要统一处理数据 + if (code === 403) { + toast("登录凭证无效或者已过期") + return; + } else if (err) { + toast(httpConfig.globalErrorHandler[code]) + return; + } reject(Error(res.message)) return; } resolve(res.data) - }).catch(reject) + }) + .catch(() => { + + }) }); } } diff --git a/admin-fe/src/views/Login.vue b/admin-fe/src/views/Login.vue index 7c4efd6..b88b34c 100644 --- a/admin-fe/src/views/Login.vue +++ b/admin-fe/src/views/Login.vue @@ -8,13 +8,14 @@ {{ data.password }}

- +
{{ err }}
+ \ No newline at end of file diff --git a/admin-fe/tsconfig.json b/admin-fe/tsconfig.json new file mode 100644 index 0000000..49b2fd6 --- /dev/null +++ b/admin-fe/tsconfig.json @@ -0,0 +1,13 @@ +{ + "include": [ + "src/**/*.d.ts", + "src/**/*.tsx", + "src/**/*.vue", + "vite.config.ts" + ], + "exclude": [ + "node_modules", + "dist", + "**/*.js" + ] +} \ No newline at end of file diff --git a/admin-fe/vite.config.js b/admin-fe/vite.config.js index 218dd3f..07cc97c 100644 --- a/admin-fe/vite.config.js +++ b/admin-fe/vite.config.js @@ -1,6 +1,9 @@ import vue from '@vitejs/plugin-vue' export default { + server: { + port: 10086 + }, // 必须配置vue插件 plugins: [vue()] } \ No newline at end of file diff --git a/admin-fe/yarn.lock b/admin-fe/yarn.lock index f9689b6..2b9a2de 100644 --- a/admin-fe/yarn.lock +++ b/admin-fe/yarn.lock @@ -17,6 +17,11 @@ resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.15.17.tgz#870daa61c257dfa0ee4f0ed71704d55e9af8e20c" integrity sha512-IA1O7f7qxw2DX8oqTpugHElr926phs7Rq8ULXleBMk4go5K05BU0mI8BfCkWcYAvcmVaMc13bv5W3LIUlU6Y9w== +"@types/node@^18.11.10": + version "18.11.10" + resolved "https://registry.npmmirror.com/@types/node/-/node-18.11.10.tgz#4c64759f3c2343b7e6c4b9caf761c7a3a05cee34" + integrity sha512-juG3RWMBOqcOuXC643OAdSA525V44cVgGV6dUDuiFtss+8Fk5x1hI93Rsld43VeJVIeqlP9I7Fn9/qaVqoEAuQ== + "@vitejs/plugin-vue@^3.2.0": version "3.2.0" resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54" diff --git a/api/src/main/java/me/xiaoyan/point/api/controller/admin/UserAdminController.java b/api/src/main/java/me/xiaoyan/point/api/controller/admin/UserAdminController.java index ff5dbec..29c2f33 100644 --- a/api/src/main/java/me/xiaoyan/point/api/controller/admin/UserAdminController.java +++ b/api/src/main/java/me/xiaoyan/point/api/controller/admin/UserAdminController.java @@ -1,6 +1,7 @@ package me.xiaoyan.point.api.controller.admin; import cn.dev33.satoken.stp.StpUtil; +import lombok.SneakyThrows; import lombok.extern.slf4j.Slf4j; import me.xiaoyan.point.api.error.BizException; import me.xiaoyan.point.api.pojo.UserInfo; @@ -33,8 +34,10 @@ public class UserAdminController { userStoreMap.put("test", UserAdminInfo.create(2, "test", "123123")); } + @SneakyThrows @PostMapping("login") public UserAdminInfo login(@Validated @RequestBody UserAdminInfo user) { + Thread.sleep(1); // 判断是否存在账号 if (!userStoreMap.containsKey(user.getAccount())) { throw BizException.create("账号不存在");