2021-10-14 前端達人
在前面項目的基礎上繼續，因為我們的項目進來頁面主題就是用戶數據，所以我們想讓它一進來就是高亮狀態，那么我們可以這樣做，同時我們再加上一個菜單：
<template> <div> <el-menu
style="width: 200px; min-height: calc(100vh - 50px)" default-active="user" :default-openeds="[1]" class="el-menu-vertical-demo"> <!--這是兩個函數，我們可以先不寫@open="handleOpen"--> <!--@close="handleClose"--> <el-sub-menu index="1"> <template #title>系統管理</template> <el-menu-item index="user" :route-="{path:'/'}">用戶管理</el-menu-item> </el-sub-menu> <el-menu-item index="data" :route-="{path:'/'}">數據管理</el-menu-item> </el-menu> </div> </template> <script> export default { name: "Aside" } </script> <style scoped> </style>
訪問效果如下：
可以看到一進來因為頁面主體是用戶管理界面，所以“用戶管理”菜單欄是默認高亮的，然后還多了一個數據管理的菜單欄。
菜單之間怎么跳轉一會兒再講，我們現在先寫注冊和登錄。
在寫注冊和登錄之前，我們先講一下路由，可以看到我們這個路由文件下的文件中，默認的“/”訪問的是Home文件：
Home頁面寫的就是我們這個用戶表的增刪改查，然后Home頁面呢是在我們的App.vue中給它嵌入進去了的，<router-view>就是展示的Home，還有Header啊Aside等
首先我們嘗試一下可不可以直接在路由文件下寫上一個Login路由，同時我們在views頁面下創建一個Login.vue，看看能不能成功：
注意引入路由的寫法要特別注意，不能直接像下面這樣寫：
而應該用引入的方式;
現在我們重啟訪問/login：
成功；
但是同時我們也看到了問題，我們明明是登錄界面，為什么進到了后臺主頁了，而我們想要的登錄界面應該是一個非常獨立的界面，所以我們的這個路由是有問題的。因為我們之前是直接使用App.vue作為項目的框架，其實這個App.vue在我們的main.js里面是引入進來了的：
引進來之后呢直接作為createApp的根節點來使用，所以這個App.vue這個界面呢，不適合用來作為我們的這個后臺骨架來使用：
它應該是一個全局的根節點，所以我們需要把App.vue里面的東西把它給挪走，挪到另一個界面，我們要把App.vue呢給它空出來，讓App.vue可以直接訪問我們所有的界面。
怎么做呢？
我們在src目錄下新建一個layout文件夾，這個文件夾呢就用來做我們項目的骨架部分，再在這個文件下建一個Layout組件：
然后把之前在App.vue的東西copy過來：
然后Header啊Aside啊那些組件我們需要在這個組件里面進行引入，然后App里面的那些原來引入的就刪掉就行了：
然后現在我們就完成了遷移，現在我們要去配置一下我們的路由，實現我們后臺的一個訪問。
路由怎么配置呢？非常簡單。
我們來講解一下剛才這個什么意思，App.vue里面我們只寫了一個router-view，而這個router-view呢就作為我們這個全局的一個根節點訪問，
這個router-view里面既可以是登錄界面也可以是注冊界面也可以是后臺主體，就是根據它是路由進行一個展示。當我們訪問到我們的后臺主體的時候，會進行一個二次的嵌套路由，那這個嵌套路由怎么寫呢？我們先配置登錄頁面的路由和后臺管理布局的路由：
此時訪問/和訪問/login都能到達對應的頁面：
但是訪問/時，Home主體頁面并沒有出來，只出來了/對應的頁面骨架的路由，怎么讓這個Home主體頁面出來呢，這就涉及到了嵌套路由，像下面這樣寫，children屬性是一個數組屬性，意味著其可以嵌套多個路由：
訪問/下的home路由，可以看到如下頁面：
vue-router給我們提供了重定向屬性，可以讓我們在訪問某個路由頁面時自動重定向到一個我們指定的路由頁面：
現在我們直接訪問/試試，可以看到依然是訪問的home頁面：
現在路由問題解決之后我們就可以去寫我們的登錄頁面了。
<template> <!--將整個瀏覽器頁面放在一個大div里
width: 100%表示這個讓div撐滿全屏
height: 100vh同上，一個撐滿高度一個撐滿寬度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 參數1 參數2; 參數1表示上下距離，參數2表示左右距離，auto表示自動匹配
如果頁面產生了空白，就在外層最大的div上加一個overflow，設置為hidden即可--> <div style="width: 400px; margin: 150px auto"> <!--font-size表示字體大小，text-align表示字體居中--> <div style="color: #cccccc; font-size: 30px; text-align: center; padding: 30px 0"> 歡迎登錄 </div> <!--然后去element上copy一個表單--> <el-form ref="form" :model="form" size="normal"> <el-form-item> <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input> </el-form-item> </el-form> <el-form ref="form" :model="form" size="normal"> <el-form-item> <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input> </el-form-item> </el-form> <el-form ref="form" :model="form" size="normal"> <el-button style="width: 100%" type="primary" @click="login">登錄</el-button> </el-form> </div> </div> </template> <script> import request from "../utils/request"; export default { name: "Login", data(){ return{ form:{} } }, methods: { login() { request.post("/api/user/login",this.form).then(res => { if(res.code === "0"){ this.$messageBox({ type: "success", message: "登錄成功" }) // 登錄成功之后進行頁面跳轉，跳轉到主頁 this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } } } </script> <style scoped> </style>
然后現在去寫我們后端的接口：
//用戶登錄 @PostMapping("/login") public 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.success(); }else{ //登錄失敗 return Result.error("-1","用戶名或密碼錯誤"); } }
現在數據庫中的數據有：
我們試著訪問登錄：
可以看到登錄成功：
然后我們再去我們的網頁頭部右側的用戶信息欄寫一下退出系統的操作：
點擊則路由跳轉到登錄頁面。
然后還有注冊頁面，也一起寫了，注冊頁面其實邏輯和登錄界面差不多，我們copy一個登錄組件進行更改即可。
然后進行更改就行了，注冊不過就比登錄多了一個確認密碼的操作。
<template> <!--將整個瀏覽器頁面放在一個大div里
width: 100%表示這個讓div撐滿全屏
height: 100vh同上，一個撐滿高度一個撐滿寬度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 參數1 參數2; 參數1表示上下距離，參數2表示左右距離，auto表示自動匹配
如果頁面產生了空白，就在外層最大的div上加一個overflow，設置為hidden即可--> <div style="width: 400px; margin: 150px auto"> <!--font-size表示字體大小，text-align表示字體居中--> <div style="color: #cccccc; font-size: 30px; text-align: center; padding: 30px 0"> 歡迎登錄 </div> <!--然后去element上copy一個表單--> <el-form ref="form" :model="form" size="normal" :rules="rules"> <el-form-item prop="username"> <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input> </el-form-item> </el-form> <el-form ref="form" :model="form" size="normal"> <el-button style="width: 100%" type="primary" @click="login">登錄</el-button> </el-form> </div> </div> </template> <script> import request from "../utils/request"; export default { name: "Login", data(){ return{ form:{}, rules:{ username:[ {required: true,message:"請輸入用戶名",trigger:'blur'}, ], password:[ {required: true,message:"請輸入密碼",trigger:'blur'}, ] } } }, methods: { login() { //發送請求之前先加這個判斷，不為空且滿足規則時才發送請求 this.$refs['form'].validate((valid) => { if (valid) { request.post("/api/user/login",this.form).then(res => { if(res.code === "0"){ this.$messageBox({ type: "success", message: "登錄成功" }) // 登錄成功之后進行頁面跳轉，跳轉到主頁 this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } }) } } } </script> <style scoped> </style>
其中我們還要注意在請求數據之前要先判斷表單內部是否數據符合要求，否則不予請求，同樣在Login頁面內也要加入該判斷：
<template> <!--將整個瀏覽器頁面放在一個大div里
width: 100%表示這個讓div撐滿全屏
height: 100vh同上，一個撐滿高度一個撐滿寬度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 參數1 參數2; 參數1表示上下距離，參數2表示左右距離，auto表示自動匹配
如果頁面產生了空白，就在外層最大的div上加一個overflow，設置為hidden即可--> <div style="width: 400px; margin: 150px auto"> <!--font-size表示字體大小，text-align表示字體居中--> <div style="color: #cccccc; font-size: 30px; text-align: center; padding: 30px 0"> 歡迎登錄 </div> <!--然后去element上copy一個表單--> <el-form ref="form" :model="form" size="normal" :rules="rules"> <el-form-item prop="username"> <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input> </el-form-item> </el-form> <el-form ref="form" :model="form" size="normal"> <el-button style="width: 100%" type="primary" @click="login">登錄</el-button> </el-form> </div> </div> </template> <script> import request from "../utils/request"; export default { name: "Login", data(){ return{ form:{}, rules:{ username:[ {required: true,message:"請輸入用戶名",trigger:'blur'}, ], password:[ {required: true,message:"請輸入密碼",trigger:'blur'}, ] } } }, methods: { login() { //發送請求之前先加這個判斷，不為空且滿足規則時才發送請求 this.$refs['form'].validate((valid) => { if (valid) { request.post("/api/user/login",this.form).then(res => { if(res.code === "0"){ this.$messageBox({ type: "success", message: "登錄成功" }) // 登錄成功之后進行頁面跳轉，跳轉到主頁 this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } }) } } } </script> <style scoped> </style>
然后現在去后端寫register的接口：
//用戶注冊 @PostMapping("/register") public Result register(@RequestBody User user){ User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername())); if(res != null){ //說明用戶名重復 return Result.success(); } //該用戶不存在，予以注冊 if(user.getPassword() == null){ user.setPassword("123456"); } userMapper.insert(user); return Result.success(); }
就此我們的注冊頁面也寫完啦。
1
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn