當前位置：首頁 >

后台管理系统2——登录、退出、注册功能、个人中心页面

發布時間：2024/5/14 62 豆豆

生活随笔收集整理的這篇文章主要介紹了后台管理系统2——登录、退出、注册功能、个人中心页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

登錄功能的實現

1、登錄功能
- 1.1 頁面內容的修改
- 1.2 路由的實現
- 1.3 登錄頁面的設計
- 1.4 登錄邏輯實現
- 1.5 后臺的實現
- 1.6 登錄功能的修改
2 退出系統
3 注冊功能
- 3.1 頁面設計
- 3.2 后端代碼
4 個人中心頁面功能實現
- - 4.1 login的頁面修改
  - 4.2 Header的頁面修改
  - 4.3 Person 的頁面設計與實現
5 側邊欄點擊跳轉的實現
6 登錄存在的問題

1、登錄功能

1.1 頁面內容的修改

由于剛開始直接是進行編寫主要的頁面，在進行登錄頁面的編寫時，會將登錄頁面顯示在內容區域，而不是單獨呈現出一個頁面，所以為了解決這個問題，就將原來的header sider 組件不直接放到App.vue里面，在App.vue組件中只放入router-view,此時頁面只顯示內容。
存在的問題： 此時header 和 sider 部分就不能顯示在頁面上了。
解決辦法： 在 src下創建一個Layout 文件夾，里面創建一個 Layout.vue文件，在此文件中，將header 和 sider 進行引入。具體的代碼如下：

<template><div><Header></Header><div style="display: flex; width: 100%"><Aside></Aside><router-view style="flex: 1" /></div></div> </template><script> import Header from "../components/Header.vue"; import Aside from "../components/Aside"; export default {name: "Layout",components: {Header,Aside,}, }; </script>

1.2 路由的實現

在router文件夾的index.js進行代碼的編寫，此時由于將原來的部分分為兩部分，所以在路由設置的時候，分為登錄和主頁面，登錄頁面是以**/login**進入，而主頁面則是以默認的 / 或者 /home 的形式進入。

import { createRouter, createWebHistory } from 'vue-router' import Layout from '../layout/Layout.vue'// 內容區域的路由 const routes = [// 默認路由頁面,主體區域{// 頭部加上側邊欄path: '/',name: 'Layout',// 重定向功能，當訪問 / 時，會自動的訪問 /home 的頁面redirect: '/home',component: Layout,// 進行路由的嵌套主體區域children:[{path: '/home',name: 'Home',component: ()=>import("@/views/Home"),}]},{path: '/login',name: 'Login',component: ()=>import("@/views/Login")}, ]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes })export default router

1.3 登錄頁面的設計

登錄頁面的位置在 views文件夾下的login.vue里面，主要包括標題，文本框，密碼框，登錄按鈕，具體的樣式使用 element-plus 中的樣式，具體代碼如下：

<template><div class="login"><div style="width: 400px; margin: 150px auto"><divstyle="color: rgb(71, 80, 156);font-size: 30px;text-align: center;padding: 30px 0;">歡迎登錄</div><el-form :model="form"><el-form-item><el-input v-model="form.username" prefix-icon="user"> </el-input></el-form-item><el-form-item><el-input v-model="form.password" prefix-icon="lock" show-password /></el-form-item><el-form-item><el-button style="width: 100%" type="primary">登錄</el-button></el-form-item></el-form></div></div> </template><script> export default {name: "Login",data() {return {form: {},};}, }; </script><style> .login {width: 100%;height: 100vh;background-image: linear-gradient(-225deg,#69eacb 0%,#eaccf8 48%,#6654f1 100%);overflow: hidden; } </style>

1.4 登錄邏輯實現

此時只是簡單的頁面，具體的登錄邏輯：通過給登錄按鈕綁定一個點擊事件login，然后在methods中進行發送請求，判斷當前請求的是否正確。
需要將原先定義的request文件進行引入

import request from "../utils/request"; methods: {login() {// 通過 post 請求進行發送// 把表單的數據發送給后臺，后臺根據用戶名和密碼進行驗證，驗證通過，登錄成功，否則，將錯誤信息進行返回request.post("/user/login",this.form).then((res) => {console.log(res);if (res.code === "0") {this.$message({type: "success",message: "登錄成功",});// 登錄成功之后要進行頁面的跳轉this.$router.push("/")} else {this.$message({type: "error",message: res.msg,});}});},},

1.5 后臺的實現

登錄代碼：

// 登錄接口@PostMapping("/login")// Result<?>表示接收任何類型的數據// 使用user 進行接收，因為 user中包含 username 和 passwordpublic Result<?> login(@RequestBody User user){// 查詢數據庫中用戶名和密碼User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername()).eq(User::getPassword,user.getPassword()));if(res == null){return Result.error("-1","用戶名或密碼錯誤");}return Result.success();}

在進行用戶名密碼進行登錄的時候，盡量不讓用戶名重復，因為在進行查詢的時候使用的是唯一的，會報錯

1.6 登錄功能的修改

為了防止不合法的輸入，在輸入框和密碼框增加了一個屬性，并在發送請求之前進行判斷，此時輸入框中的內容是否合法，合法則進行發送請求，反之則不發送請求，完整代碼如下：
HTML代碼

JS代碼

2 退出系統

直接在components 下面的 header 組件中的退出系統綁定一個事件，當進行點擊的時候，直接退回到登錄頁面
具體代碼如下：

3 注冊功能

3.1 頁面設計

頁面的基本設計與登錄頁面基本相同，只是多了一個確認密碼
HTML代碼

JS代碼

3.2 后端代碼

前端想后端發送請求的時候使用的是post，在里面的代碼中，對于判斷密碼是否為空，其實沒有必要，因為在前端的時候，已經對不合法的輸入進行了校驗，所以可以將判斷的代碼進行刪除。

// 注冊接口@PostMapping("/register")// Result<?>表示接收任何類型的數據// 使用user 進行接收，因為 user中包含 username 和 passwordpublic Result<?> register(@RequestBody User user){//判斷用戶名是否存在，首先進行獲取用戶名，然后判斷User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername()));//如果用戶名不為空，此時用戶名重復，否則在數據庫中進行新增操作if(res != null){return Result.error("-1","用戶名重復");}// 如果前端密碼未填雖然在前端已經校驗過，設置一個默認密碼if(user.getPassword() == null){user.setPassword("123456");}userMapper.insert(user);return Result.success();}

4 個人中心頁面功能實現

在登錄之后，能夠獲取到當前登錄人所對應的信息，然后在header中進行渲染，以及在路徑 /person 能夠進行信息的更改，當點擊保存的時候，將修改的信息保存到數據庫中，

4.1 login的頁面修改

（1）HTML方面：主要進行添加了一個按鈕，跳轉到注冊頁面，代碼如下：

（2）JS方面：進行兩個方面的修改，其一是在mounted生命周期中將存儲在session中的數據移除，其二是在登錄成功之后獲取當前的數據，部分代碼如下：

mounted() {sessionStorage.removeItem("user");},methods: {login() {this.$refs["form"].validate((valid) => {if (valid) {// 表明此時合法,發送請求// 通過 post 請求進行發送// 把表單的數據發送給后臺，后臺根據用戶名和密碼進行驗證，驗證通過，登錄成功，否則，將錯誤信息進行返回request.post("/user/login", this.form).then((res) => {console.log(res.data);console.log(JSON.stringify(res.data));if (res.code === "0") {this.$message({type: "success",message: "登錄成功",});sessionStorage.setItem("user", JSON.stringify(res.data)); // 緩存用戶信息this.$router.push("/");} else {this.$message({type: "error",message: res.msg,});}});}});},},

（3）后端的修改：

// 登錄接口@PostMapping("/login")// Result<?>表示接收任何類型的數據// 使用user 進行接收，因為 user中包含 username 和 passwordpublic Result<?> login(@RequestBody User user){QueryWrapper<User> queryWrapper=new QueryWrapper<>();queryWrapper.eq("username",user.getUsername());queryWrapper.eq("password",user.getPassword()); // User one = userMapper.getOne(queryWrapper);User res = userMapper.selectOne(queryWrapper);// 判斷密碼是否正確if(res == null){return Result.error("-1","用戶名或密碼錯誤");}// 生成tokenString token = TokenUtils.genToken(res);res.setToken(token);return Result.success(res);}

4.2 Header的頁面修改

header右上角會根據登錄用戶的不同顯示不同的昵稱，所以需要進行獲取到session從儲存的登錄信息即可。

<span class="el-dropdown-link">{{ name }}<el-icon class="el-icon--right"><arrow-down /></el-icon></span> <script> import router from "@/router"; export default {name: "Header",data() {return {name: "",};},mounted() {let userJson = sessionStorage.getItem("user");// console.log(userJson);if (userJson) {this.name = JSON.parse(userJson).nickName;} else {router.push("/login");}}, }; </script>

4.3 Person 的頁面設計與實現

使用了element-plus中的 card 和 form組件
html代碼：

js代碼：
（1）主要的實現邏輯是，通過在剛進行頁面加載的時候獲取到儲存在session中的信息，然后通過JSON.parse 將原先保存的信息進行格式轉換，最后賦值給form，而由于form使用了雙向綁定 v-model,當進行賦值之后，頁面上的信息也會跟著改變。
（2）給保存按鈕綁定一個click事件，當點擊保存按鈕的時候，會觸發 update函數，然后向后端進行發送請求。

后端代碼

// 更新使用PutMapping接口@PutMapping// Result<?>表示接收任何類型的數據public Result<?> update(@RequestBody User user){// 根據id進行更新userMapper.updateById(user);return Result.success();}

5 側邊欄點擊跳轉的實現

問題:在 components文件夾下的Aside組件中（側邊欄），現存的問題就是當進行點擊左側內容時，無法進行跳轉。
解決方法: 因為在進行頁面設計的時候使用的是element-plus中的menu組件，它本身提供一種屬性 router，在內容區域配合index屬性進行使用，index的值就是路由的名稱。

6 登錄存在的問題

問題： 由于默認路由重定向到 /user中，而在header區域又綁定了從登錄中獲取的數據nickName，所以直接進行項目啟動時，會導致nickName為空，不進行顯示。
解決方法： 就是在用戶未登錄的時候，進行攔截，不能直接跳轉到 /user 中，具體措施在util文件夾下的 request.js進行實現：

import axios from 'axios' import router from "@/router";const request = axios.create({baseURL: "/api",timeout: 5000 })// request 攔截器 // 可以自請求發送前對請求做一些處理 // 比如統一加token，對請求參數統一加密 // 不管發送什么請求，首先進入到攔截器中，所以在攔截器中進行登錄的處理 request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// 1. 取出sessionStorage里面緩存的用戶信息，此時拿到的是個json字符串let userJson = sessionStorage.getItem("user")// 2 此時存在兩種情況，// 未登錄，為空，直接跳轉到登錄頁面if(!userJson) {router.push("/login")} return config }, error => {return Promise.reject(error) });// response 攔截器 // 可以在接口響應后統一處理結果 request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服務端返回的字符串數據if (typeof res === 'string') {res = res ? JSON.parse(res) : res}// 驗證tokenif (res.code === '401') {console.error("token過期，重新登錄")router.push("/login")}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)} )export default request

總結

以上是生活随笔為你收集整理的后台管理系统2——登录、退出、注册功能、个人中心页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Linux线程属性总结 http://b
下一篇：简信CRM：四方面突显CRM客户管理系统