diff --git a/my-project-frontend/package-lock.json b/my-project-frontend/package-lock.json index 201b4d1..f370e2c 100644 --- a/my-project-frontend/package-lock.json +++ b/my-project-frontend/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@element-plus/icons-vue": "^2.3.1", + "axios": "^1.6.8", "element-plus": "^2.7.2", "vue": "^3.3.4", "vue-router": "^4.3.2" @@ -725,6 +726,21 @@ "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz", "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz", @@ -782,6 +798,17 @@ "fsevents": "~2.3.2" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/confbox": { "version": "0.1.7", "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.7.tgz", @@ -815,6 +842,14 @@ } } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/element-plus": { "version": "2.7.2", "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.2.tgz", @@ -941,6 +976,32 @@ "node": ">=8" } }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz", @@ -1104,6 +1165,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "9.0.4", "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.4.tgz", @@ -1209,6 +1289,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz", diff --git a/my-project-frontend/package.json b/my-project-frontend/package.json index f1207ea..61890e5 100644 --- a/my-project-frontend/package.json +++ b/my-project-frontend/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@element-plus/icons-vue": "^2.3.1", + "axios": "^1.6.8", "element-plus": "^2.7.2", "vue": "^3.3.4", "vue-router": "^4.3.2" diff --git a/my-project-frontend/src/main.js b/my-project-frontend/src/main.js index 23eec6d..57ec483 100644 --- a/my-project-frontend/src/main.js +++ b/my-project-frontend/src/main.js @@ -3,6 +3,9 @@ import { createApp } from 'vue' import App from './App.vue' import router from "@/router"; +import axios from "axios"; + +axios.defaults.baseURL = 'http://localhost:8080' const app = createApp(App) app.use(router) diff --git a/my-project-frontend/src/net/index.js b/my-project-frontend/src/net/index.js new file mode 100644 index 0000000..935f5a3 --- /dev/null +++ b/my-project-frontend/src/net/index.js @@ -0,0 +1,75 @@ +import axios from 'axios' +import {ElMessage} from "element-plus"; + + +const authItemName = "access_token" +const defaultFailure = (message , code , url) => { + console.warn(`请求地址: ${url} , 状态码: ${code} , 错误信息: ${message}`) + ElMessage.warning(message) +} + +const defaultError = (err) => { + console.error(err) + ElMessage.warning('发生了一些错误,请联系管理员') +} + +function takeAccess() { + const str = localStorage.getItem(authItemName) || sessionStorage.getItem(authItemName) + if (!str) return null; + const authObj = JSON.parse(str) + if (authObj.expire <= new Date()){ + deleteAccessToken() + ElMessage.warning('登录状态已过期,请重新登录') + return null + } + return authObj.token +} + +function storeAccessToken(token , remember , expire) { + const authObj = {token: token ,expire: expire} + const str =JSON.stringify(authObj) + if (remember) + localStorage.setItem(authItemName , str) + else + sessionStorage.setItem(authItemName , str) +} + +function deleteAccessToken(){ + localStorage.removeItem(authItemName) + sessionStorage.removeItem(authItemName) +} + +function internalPost(url , data , header , success ,failure , error = defaultError) { + axios.post(url,data, {headers: header}).then(({data}) => { + if (data.code ===200){ + success(data.data) + }else { + failure(data.message , data.code , url) + } + }).catch(err => error(err)) +} + +function internalGet(url , header , success ,failure , error = defaultError) { + axios.get(url,{headers: header}).then(({data}) => { + if (data.code ===200){ + success(data.data) + }else { + failure(data.message , data.code , url) + } + }) .catch(err => error(err)) +} + +function login(username , password , remember , success , failure = defaultFailure) { + internalPost('api/auth/login', { + username: username , + password: password + }, { + 'Content-Type': 'application/x-www-form-urlencoded' + },(data)=> { + storeAccessToken(remember, data.token , data.expire) + ElMessage.success(`登录成功,欢迎 ${data.username} 来到我们的系统`) + success(data) + + }, failure) +} +export {login} \ No newline at end of file diff --git a/my-project-frontend/src/views/welcome/LoginPage.vue b/my-project-frontend/src/views/welcome/LoginPage.vue index 2e183ce..17683eb 100644 --- a/my-project-frontend/src/views/welcome/LoginPage.vue +++ b/my-project-frontend/src/views/welcome/LoginPage.vue @@ -1,12 +1,35 @@