700字范文 > 后台管理系统2——登录退出注册功能个人中心页面

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

时间：2023-04-11 21:51:53

登录功能的实现

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 组件中的退出系统绑定一个事件，当进行点击的时候，直接退回到登录页面

具体代码如下：

<template #dropdown><el-dropdown-menu><el-dropdown-item>个人中心</el-dropdown-item><el-dropdown-item @click="$router.push('/login')">退出登录</el-dropdown-item></el-dropdown-menu>

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。