目录
2. 用户管理
2.1 环境搭建
2.1.1 前端环境
2.1.2 后端环境（9000）
2.2 用户登录
2.2.1 需求
2.2.2 后端实现
2.2.3 前端实现
2.3 首页
2.3.1 需求
2.3.2 前端实现
2. 用户管理
2.1 环境搭建
2.1.1 前端环境
编写默认布局
编写自定义登陆布局
编写登录页面，使用登录布局
编写默认布局
编写自定义登陆布局
<template><nuxt/></template><script>export default {}</script><style></style>
编写登录页面，使用登录布局
<template><div>登录</div></template><script>export default {layout: 'user'}</script><style></style>
2.1.2 后端环境（9000）
项目名：nacos-nuxt-student-service-user
pom文件
<dependencies><!--web起步依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- nacos 客户端 --><dependency><groupId>com.alibaba.nacos</groupId><artifactId>nacos-client</artifactId></dependency><!-- nacos 服务发现 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency><!--swagger2--><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId></dependency><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger-ui</artifactId></dependency><!-- feign 远程调用 --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency><!--测试--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId></dependency><!-- mybatis plus--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></dependency><!-- mysql驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><!--自定义项目--><dependency><groupId>com.czxy</groupId><artifactId>nacos-nuxt-student-domain</artifactId></dependency><!-- redis 启动器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><!-- JavaMail 启动器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId></dependency><!-- MQ 启动器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency><!-- fastjson --><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId></dependency><!--开发者工具--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency><!--jwt工具--><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId></dependency><!--joda 时间工具类 --><dependency><groupId>joda-time</groupId><artifactId>joda-time</artifactId></dependency><!--JavaBean工具类，用于JavaBean数据封装--><dependency><groupId>commons-beanutils</groupId><artifactId>commons-beanutils</artifactId></dependency></dependencies>
yml文件
# 服务端口号server:port: 9000# 服务名spring:application:name: user-servicedatasource:driverClassName: com.mysql.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/cloud_es_user?useUnicode=true&characterEncoding=utf8username: rootpassword: 1234druid: #druid 连接池配置initial-size: 1 #初始化连接池大小min-idle: 1#最小连接数max-active: 20 #最大连接数test-on-borrow: true #获取连接时候验证，会影响性能cloud:nacos:discovery:server-addr: 127.0.0.1:8848 #nacos服务地址#开启log4j打印SQL语句logging:level:com:czxy:user:mapper: debug# mp日志打印mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplglobal-config:db-config:logic-delete-value: 1logic-not-delete-value: 0sc:jwt:secret: sc@Login(Auth}*^31)&czxy% # 登录校验的密钥pubKeyPath: D:/rsa/rsa.pub # 公钥地址priKeyPath: D:/rsa/rsa.pri # 私钥地址expire: 360 # 过期时间,单位分钟
启动类
package com.czxy;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.cloud.client.discovery.EnableDiscoveryClient;import org.springframework.cloud.openfeign.EnableFeignClients;/*** @author 桐叔* @email liangtong@* @description*/@SpringBootApplication //spring boot@EnableDiscoveryClient //服务发现@EnableFeignClients//远程调用public class UserServiceApplication {public static void main(String[] args) {SpringApplication.run(UserServiceApplication.class, args);}}
拷贝config
基本结构：mapper、service、controller
package com.czxy.user.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.czxy.domain.TbUser;import org.apache.ibatis.annotations.Mapper;/*** @author 桐叔* @email liangtong@* @description*/@Mapperpublic interface TbUserMapper extends BaseMapper<TbUser> {}
package com.czxy.user.service;import com.baomidou.mybatisplus.extension.service.IService;import com.czxy.domain.TbUser;/*** @author 桐叔* @email liangtong@* @description*/public interface TbUserService extends IService<TbUser> {}
package com.czxy.user.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.czxy.domain.TbUser;import com.czxy.user.mapper.TbUserMapper;import com.czxy.user.service.TbUserService;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;/*** @author 桐叔* @email liangtong@* @description*/@Service@Transactionalpublic class TbUserServiceImpl extends ServiceImpl<TbUserMapper, TbUser> implements TbUserService {}
package com.czxy.user.controller;import com.czxy.user.service.TbUserService;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** @author 桐叔* @email liangtong@* @description*/@RestController@RequestMapping("/user")public class TbUserController {@Resourceprivate TbUserService tbUserService;}
2.2 用户登录
2.2.1 需求
基本校验：非空、长度
异步校验：
登录成功后，跳转到首页
2.2.2 后端实现
1）用户名校验
需求：用户名不存在不能登录、用户存在可以登录
编写service
编写controller
编写service
接口
package com.czxy.user.service;import com.baomidou.mybatisplus.extension.service.IService;import com.czxy.domain.TbUser;/*** @author 桐叔* @email liangtong@* @description*/public interface TbUserService extends IService<TbUser> {TbUser findByUserName(String userName);}
实现类
public class TbUserServiceImpl extends ServiceImpl<TbUserMapper, TbUser> implements TbUserService {@Overridepublic TbUser findByUserName(String userName) {//1 拼条件QueryWrapper<TbUser> queryWrapper = new QueryWrapper<>();queryWrapper.eq("user_name", userName);//2 查询TbUser findUser = baseMapper.selectOne(queryWrapper);return findUser;}}
编写controller
package com.czxy.user.controller;import com.czxy.domain.TbUser;import com.czxy.user.service.TbUserService;import com.czxy.vo.BaseResult;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** @author 桐叔* @email liangtong@* @description*/@RestController@RequestMapping("/user")public class TbUserController {@Resourceprivate TbUserService tbUserService;/*** 用户登录的校验* @author 桐叔* @email liangtong@* @return*/@PostMapping("/check")public BaseResult check(@RequestBody TbUser tbUser) {//1 查询：通用用户名查询TbUser findUser = tbUserService.findByUserName(tbUser.getUserName());//2 返回if(findUser != null) {return BaseResult.ok("可以登录");}return BaseResult.error("用户名不存在");}}
2）用户登录
编写service
编写controller
编写service
接口
package com.czxy.user.service;import com.baomidou.mybatisplus.extension.service.IService;import com.czxy.domain.TbUser;/*** @author 桐叔* @email liangtong@* @description*/public interface TbUserService extends IService<TbUser> {/*** 登录* @author 桐叔* @email liangtong@* @return*/TbUser login(TbUser loginUser);}
实现类
@Overridepublic TbUser login(TbUser loginUser) {//1 拼条件QueryWrapper<TbUser> queryWrapper = new QueryWrapper<>();queryWrapper.eq("user_name", loginUser.getUserName());queryWrapper.eq("password", loginUser.getPassword());//2 查询TbUser findUser = baseMapper.selectOne(queryWrapper);return findUser;}
编写controller
package com.czxy.user.controller;import com.czxy.domain.TbUser;import com.czxy.user.service.TbUserService;import com.czxy.vo.BaseResult;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** @author 桐叔* @email liangtong@* @description*/@RestController@RequestMapping("/user")public class TbUserController {@Resourceprivate TbUserService tbUserService;/*** 登录* @author 桐叔* @email liangtong@* @return*/@PostMapping("/login")public BaseResult login(@RequestBody TbUser tbUser) {//1 查询：通用用户名查询TbUser findUser = tbUserService.login(tbUser);//2 返回if(findUser != null) {return BaseResult.ok("登录成功");}return BaseResult.error("用户名或密码不匹配");}}
2.2.3 前端实现
1）绘制登录页面
<template><div class="login"><el-card class="box-card"><div slot="header" class="clearfix"><el-button type="text" icon="el-icon-s-home">传智专修学院</el-button></div><!-- 正文 --><el-form :model="user" :rules="rules" ref="loginForm" label-width="80px" ><el-form-item label="用户名" prop="userName"><el-input v-model="user.userName"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="user.password" show-password></el-input></el-form-item><el-form-item><el-button type="primary" >登录</el-button><el-button >取消</el-button></el-form-item></el-form></el-card></div></template><script>export default {layout: 'user',data() {return {user: {},rules: {userName: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }]}}},}</script><style>.login {}.login .box-card {width: 500px;}</style>
2）登录框居中
扩展：登录框居中
登录页面拷贝样式
.login {height: 100%;display: flex;justify-content: center;align-items: center;}
登录布局页面拷贝样式
html, body, #__nuxt, #__layout {height: 100%;}
3）登录
<template><div class="login"><el-card class="box-card"><div slot="header" class="clearfix"><el-button type="text" icon="el-icon-s-home">传智专修学院</el-button></div><!-- 正文 --><el-form :model="user" :rules="rules" ref="loginForm" label-width="80px" ><el-form-item label="用户名" prop="userName"><el-input v-model="user.userName"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="user.password" show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="login" >登录</el-button><el-button >取消</el-button></el-form-item></el-form></el-card></div></template><script>export default {layout: 'user',data() {return {user: {userName: 'jack',password: '1234'},rules: {userName: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }]}}},methods: {login() {// 校验//this.$refs['loginForm'].validate((valid) => {this.$refs.loginForm.validate(async (valid) => {if (valid) {// 校验通过后ajax登录let { data:baseResult } = await this.$axios.post('/user-service/user/login', this.user)if(baseResult.code == 20000) {// 成功this.$message.success(baseResult.message)// 跳转this.$router.push('/')} else {// 失败this.$message.error(baseResult.message)}} else {console.log('error submit!!');return false;}});}},}</script><style>.login {height: 100%;display: flex;justify-content: center;align-items: center;}.login .box-card {width: 500px;}</style>
4）表单校验：内置校验
5）用户名校验：自定义校验
<template><div class="login"><el-card class="box-card"><div slot="header" class="clearfix"><el-button type="text" icon="el-icon-s-home">传智专修学院</el-button></div><!-- 正文 --><el-form :model="user" :rules="rules" ref="loginForm" label-width="80px" ><el-form-item label="用户名" prop="userName"><el-input v-model="user.userName"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="user.password" show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="login" >登录</el-button><el-button >取消</el-button></el-form-item></el-form></el-card></div></template><script>export default {layout: 'user',data() {// 自定义校验规则startvar validateLoginCheck = async (rule, value, callback) => {// 校验通过：callback();// 校验未通过：callback(new Error('请输入密码'));// 发送ajax，进行用户名校验let user = {userName: value}let { data:baseResult } = await this.$axios.post(`/user-service/user/check`, user)if(baseResult.code == 20000) {// 成功callback();} else {// 失败callback(new Error(baseResult.message));}};// 自定义校验规则endreturn {user: {userName: 'jack',password: '1234'},rules: {userName: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' },{ validator: validateLoginCheck, trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }]}}},methods: {login() {// 校验//this.$refs['loginForm'].validate((valid) => {this.$refs.loginForm.validate(async (valid) => {if (valid) {// 校验通过后ajax登录let { data:baseResult } = await this.$axios.post('/user-service/user/login', this.user)if(baseResult.code == 20000) {// 成功this.$message.success(baseResult.message)// 跳转this.$router.push('/')} else {// 失败this.$message.error(baseResult.message)}} else {console.log('error submit!!');return false;}});}},}</script><style>.login {height: 100%;display: flex;justify-content: center;align-items: center;}.login .box-card {width: 500px;}</style>
2.3 首页
2.3.1 需求
2.3.2 前端实现
将element ui布局内容编写nuxt的默认布局中
编写布局
左侧垂直菜单
头像+弹出提示
设置reset.css（优化）
将element ui布局内容编写nuxt的默认布局中
编写布局
左侧垂直菜单
头像+弹出提示
<template><el-container><el-header><el-row><el-col :span="22" class="title">学生管理系统(SMS)</el-col><el-col :span="2"><!-- <el-popoverplacement="top-start"width="200"trigger="hover"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><el-avatar slot="reference" size="large" src="/5.jpg"></el-avatar><div class="avatarItem">用户详情</div><div class="avatarItem">修改密码</div><div class="avatarItem">退出登录</div></el-popover> --><el-dropdown><span class="el-dropdown-link"><el-avatar :size="50" src="/5.jpg"></el-avatar></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>用户详情</el-dropdown-item><el-dropdown-item>修改密码</el-dropdown-item><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></el-col></el-row></el-header><el-container><el-aside width="200px"><!-- 菜单start --><el-menu:default-active="$route.path"routerbackground-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item><el-submenu index="/classes"><template slot="title"><i class="el-icon-location"></i><span>班级管理</span></template><el-menu-item index="/classes/classesAdd">添加班级</el-menu-item><el-menu-item index="/classes/classesList">班级列表</el-menu-item></el-submenu><el-submenu index="/student"><template slot="title"><span>学生管理</span></template><el-menu-item index="/student/studentList">学生列表</el-menu-item></el-submenu></el-menu><!-- 菜单end --></el-aside><el-main><!-- 视图显示 --><nuxt/></el-main></el-container><el-footer>传智专修学院</el-footer></el-container></template><script>export default {}</script><style>html, body, #__nuxt, #__layout, .el-container {height: 100%;}body {margin: 0;}.avatarItem {width: 100px;display: inline-block;margin: 5px 0;}.title {font-size: 30px;font-weight: bold;}.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #545c64;color: #fff;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;}</style>
设置reset.css（优化）--待定
如果觉得《【学生管理系统】用户管理之用户登录》对你有帮助，请点赞、收藏，并留下你的观点哦！
