在前面項(xiàng)目的基礎(chǔ)上繼續(xù)，因?yàn)槲覀兊捻?xiàng)目進(jìn)來(lái)頁(yè)面主題就是用戶數(shù)據(jù)，所以我們想讓它一進(jìn)來(lái)就是高亮狀態(tài)，那么我們可以這樣做，同時(shí)我們?cè)偌由弦粋€(gè)菜單：

<template> <div> <el-menu
                        style="width: 200px; min-height: calc(100vh - 50px)" default-active="user" :default-openeds="[1]" class="el-menu-vertical-demo"> <!--這是兩個(gè)函數(shù)，我們可以先不寫@open="handleOpen"--> <!--@close="handleClose"--> <el-sub-menu index="1"> <template #title>系統(tǒng)管理</template> <el-menu-item index="user" :route-="{path:'/'}">用戶管理</el-menu-item> </el-sub-menu> <el-menu-item index="data" :route-="{path:'/'}">數(shù)據(jù)管理</el-menu-item> </el-menu> </div> </template> <script> export default { name: "Aside" } </script> <style scoped> </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

訪問(wèn)效果如下：

可以看到一進(jìn)來(lái)因?yàn)轫?yè)面主體是用戶管理界面，所以“用戶管理”菜單欄是默認(rèn)高亮的，然后還多了一個(gè)數(shù)據(jù)管理的菜單欄。
菜單之間怎么跳轉(zhuǎn)一會(huì)兒再講，我們現(xiàn)在先寫注冊(cè)和登錄。
在寫注冊(cè)和登錄之前，我們先講一下路由，可以看到我們這個(gè)路由文件下的文件中，默認(rèn)的“/”訪問(wèn)的是Home文件：

Home頁(yè)面寫的就是我們這個(gè)用戶表的增刪改查，然后Home頁(yè)面呢是在我們的App.vue中給它嵌入進(jìn)去了的，<router-view>就是展示的Home，還有Header啊Aside等

首先我們嘗試一下可不可以直接在路由文件下寫上一個(gè)Login路由，同時(shí)我們?cè)趘iews頁(yè)面下創(chuàng)建一個(gè)Login.vue，看看能不能成功：

注意引入路由的寫法要特別注意，不能直接像下面這樣寫：

而應(yīng)該用引入的方式;

現(xiàn)在我們重啟訪問(wèn)/login：

成功；
但是同時(shí)我們也看到了問(wèn)題，我們明明是登錄界面，為什么進(jìn)到了后臺(tái)主頁(yè)了，而我們想要的登錄界面應(yīng)該是一個(gè)非常獨(dú)立的界面，所以我們的這個(gè)路由是有問(wèn)題的。因?yàn)槲覀冎笆侵苯邮褂肁pp.vue作為項(xiàng)目的框架，其實(shí)這個(gè)App.vue在我們的main.js里面是引入進(jìn)來(lái)了的：

引進(jìn)來(lái)之后呢直接作為createApp的根節(jié)點(diǎn)來(lái)使用，所以這個(gè)App.vue這個(gè)界面呢，不適合用來(lái)作為我們的這個(gè)后臺(tái)骨架來(lái)使用：

它應(yīng)該是一個(gè)全局的根節(jié)點(diǎn)，所以我們需要把App.vue里面的東西把它給挪走，挪到另一個(gè)界面，我們要把App.vue呢給它空出來(lái)，讓App.vue可以直接訪問(wèn)我們所有的界面。
怎么做呢？
我們?cè)趕rc目錄下新建一個(gè)layout文件夾，這個(gè)文件夾呢就用來(lái)做我們項(xiàng)目的骨架部分，再在這個(gè)文件下建一個(gè)Layout組件：

然后把之前在App.vue的東西copy過(guò)來(lái)：

然后Header啊Aside啊那些組件我們需要在這個(gè)組件里面進(jìn)行引入，然后App里面的那些原來(lái)引入的就刪掉就行了：

然后現(xiàn)在我們就完成了遷移，現(xiàn)在我們要去配置一下我們的路由，實(shí)現(xiàn)我們后臺(tái)的一個(gè)訪問(wèn)。
路由怎么配置呢？非常簡(jiǎn)單。
我們來(lái)講解一下剛才這個(gè)什么意思，App.vue里面我們只寫了一個(gè)router-view，而這個(gè)router-view呢就作為我們這個(gè)全局的一個(gè)根節(jié)點(diǎn)訪問(wèn)，
這個(gè)router-view里面既可以是登錄界面也可以是注冊(cè)界面也可以是后臺(tái)主體，就是根據(jù)它是路由進(jìn)行一個(gè)展示。當(dāng)我們?cè)L問(wèn)到我們的后臺(tái)主體的時(shí)候，會(huì)進(jìn)行一個(gè)二次的嵌套路由，那這個(gè)嵌套路由怎么寫呢？我們先配置登錄頁(yè)面的路由和后臺(tái)管理布局的路由：

此時(shí)訪問(wèn)/和訪問(wèn)/login都能到達(dá)對(duì)應(yīng)的頁(yè)面：

但是訪問(wèn)/時(shí)，Home主體頁(yè)面并沒(méi)有出來(lái)，只出來(lái)了/對(duì)應(yīng)的頁(yè)面骨架的路由，怎么讓這個(gè)Home主體頁(yè)面出來(lái)呢，這就涉及到了嵌套路由，像下面這樣寫，children屬性是一個(gè)數(shù)組屬性，意味著其可以嵌套多個(gè)路由：

訪問(wèn)/下的home路由，可以看到如下頁(yè)面：

vue-router給我們提供了重定向?qū)傩裕梢宰屛覀冊(cè)谠L問(wèn)某個(gè)路由頁(yè)面時(shí)自動(dòng)重定向到一個(gè)我們指定的路由頁(yè)面：

現(xiàn)在我們直接訪問(wèn)/試試，可以看到依然是訪問(wèn)的home頁(yè)面：

現(xiàn)在路由問(wèn)題解決之后我們就可以去寫我們的登錄頁(yè)面了。

<template> <!--將整個(gè)瀏覽器頁(yè)面放在一個(gè)大div里
    width: 100%表示這個(gè)讓div撐滿全屏
    height: 100vh同上，一個(gè)撐滿高度一個(gè)撐滿寬度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 參數(shù)1 參數(shù)2; 參數(shù)1表示上下距離，參數(shù)2表示左右距離，auto表示自動(dòng)匹配
        如果頁(yè)面產(chǎn)生了空白，就在外層最大的div上加一個(gè)overflow，設(shè)置為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一個(gè)表單--> <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: "登錄成功" }) //    登錄成功之后進(jìn)行頁(yè)面跳轉(zhuǎn)，跳轉(zhuǎn)到主頁(yè) this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } } } </script> <style scoped> </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

然后現(xiàn)在去寫我們后端的接口：

 //用戶登錄 @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","用戶名或密碼錯(cuò)誤"); } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

現(xiàn)在數(shù)據(jù)庫(kù)中的數(shù)據(jù)有：

我們?cè)囍L問(wèn)登錄：

可以看到登錄成功：

然后我們?cè)偃ノ覀兊木W(wǎng)頁(yè)頭部右側(cè)的用戶信息欄寫一下退出系統(tǒng)的操作：

點(diǎn)擊則路由跳轉(zhuǎn)到登錄頁(yè)面。
然后還有注冊(cè)頁(yè)面，也一起寫了，注冊(cè)頁(yè)面其實(shí)邏輯和登錄界面差不多，我們copy一個(gè)登錄組件進(jìn)行更改即可。

然后進(jìn)行更改就行了，注冊(cè)不過(guò)就比登錄多了一個(gè)確認(rèn)密碼的操作。

<template> <!--將整個(gè)瀏覽器頁(yè)面放在一個(gè)大div里
    width: 100%表示這個(gè)讓div撐滿全屏
    height: 100vh同上，一個(gè)撐滿高度一個(gè)撐滿寬度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 參數(shù)1 參數(shù)2; 參數(shù)1表示上下距離，參數(shù)2表示左右距離，auto表示自動(dòng)匹配
        如果頁(yè)面產(chǎn)生了空白，就在外層最大的div上加一個(gè)overflow，設(shè)置為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一個(gè)表單--> <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:"請(qǐng)輸入用戶名",trigger:'blur'}, ], password:[ {required: true,message:"請(qǐng)輸入密碼",trigger:'blur'}, ] } } }, methods: { login() { //發(fā)送請(qǐng)求之前先加這個(gè)判斷，不為空且滿足規(guī)則時(shí)才發(fā)送請(qǐng)求 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: "登錄成功" }) //    登錄成功之后進(jìn)行頁(yè)面跳轉(zhuǎn)，跳轉(zhuǎn)到主頁(yè) this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } }) } } } </script> <style scoped> </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

    

        68
    

    

        69
    

    

        70
    

    

        71
    

    

        72
    

    

        73
    

    

        74
    

    

        75
    

    

        76
    

其中我們還要注意在請(qǐng)求數(shù)據(jù)之前要先判斷表單內(nèi)部是否數(shù)據(jù)符合要求，否則不予請(qǐng)求，同樣在Login頁(yè)面內(nèi)也要加入該判斷：

<template> <!--將整個(gè)瀏覽器頁(yè)面放在一個(gè)大div里
    width: 100%表示這個(gè)讓div撐滿全屏
    height: 100vh同上，一個(gè)撐滿高度一個(gè)撐滿寬度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 參數(shù)1 參數(shù)2; 參數(shù)1表示上下距離，參數(shù)2表示左右距離，auto表示自動(dòng)匹配
        如果頁(yè)面產(chǎn)生了空白，就在外層最大的div上加一個(gè)overflow，設(shè)置為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一個(gè)表單--> <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:"請(qǐng)輸入用戶名",trigger:'blur'}, ], password:[ {required: true,message:"請(qǐng)輸入密碼",trigger:'blur'}, ] } } }, methods: { login() { //發(fā)送請(qǐng)求之前先加這個(gè)判斷，不為空且滿足規(guī)則時(shí)才發(fā)送請(qǐng)求 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: "登錄成功" }) //    登錄成功之后進(jìn)行頁(yè)面跳轉(zhuǎn)，跳轉(zhuǎn)到主頁(yè) this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } }) } } } </script> <style scoped> </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

    

        68
    

    

        69
    

    

        70
    

    

        71
    

    

        72
    

    

        73
    

    

        74
    

    

        75
    

    

        76
    

然后現(xiàn)在去后端寫register的接口：

//用戶注冊(cè) @PostMapping("/register") public Result register(@RequestBody User user){ User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername())); if(res != null){ //說(shuō)明用戶名重復(fù) return Result.success(); } //該用戶不存在，予以注冊(cè) if(user.getPassword() == null){ user.setPassword("123456"); } userMapper.insert(user); return Result.success(); }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

就此我們的注冊(cè)頁(yè)面也寫完啦。

1

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)