学生管理 + 用户管理（Element版）
2024-06-07 03:23:35
1.1 搭建环境
创建vue项目：vue create day16_element_student
安装第三方组件：axios、element
npm install axios
vue add element
1.2 查询所有前端
1.2.1. 显示页面
创建页面
- 配置路由
const routes = [{path: '/studentList',name: '学生列表',component: () => import('../views/StudentList.vue')}
]- 访问路径
http://localhost:8080/studentList
1.2.2 ajax操作
<template><div>{{studentPage}}</div>
</template><script>
// 导入axios
import axios from 'axios'
export default {data() {return {studentVo: { //条件查询},studentPage: { //分页数据pageNum: 1,pageSize: 3}}},methods: {async condition() {// ajax查询var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} = await axios.post(url, this.studentVo)// 保存结果this.studentPage = baseResult.data}},mounted() {// 查询this.condition()},
}
</script><style></style>1.2.3 整合element ui
<template><div><!-- 表单start --><el-form :inline="true" :model="studentVo" size="mini" ><el-form-item label="班级"><el-select v-model="studentVo.cid" placeholder="请选择班级" clearable><el-option label="Java12班" value="c001"></el-option><el-option label="Java56班" value="c003"></el-option></el-select></el-form-item><el-form-item label="姓名"><el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input></el-form-item><el-form-item label="年龄"><el-col :span="11"><el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input></el-col></el-form-item><el-form-item><el-button type="primary" @click="condition(1)">查询</el-button></el-form-item></el-form><!-- 表单end --><!-- 表格start --><el-table:data="studentPage.list"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="cid"label="班级"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><template slot-scope="scope">{{scope.row.gender == 1 ? "男" : "女"}}</template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini">编辑</el-button><el-button size="mini" type="danger">删除</el-button></template></el-table-column></el-table><!-- 表格end --><!-- 分页条start --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="studentPage.pageNum":page-sizes="[1, 2, 3, 5, 10]":page-size="studentPage.pageSize"layout="total, sizes, prev, pager, next, jumper":total="studentPage.total"></el-pagination><!-- 分页条end --></div>
</template><script>
// 导入axios
import axios from 'axios'
export default {data() {return {studentVo: { //条件查询},studentPage: { //分页数据pageNum: 1,pageSize: 3}}},methods: {async condition(num) {if(num) {this.studentPage.pageNum = num}// ajax查询var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} = await axios.post(url, this.studentVo)// 保存结果this.studentPage = baseResult.data},handleSelectionChange(val) {console.info('批量删除')},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.studentPage.pageSize = valthis.studentPage.pageNum = 1// 重新开始this.condition()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.studentPage.pageNum = val// 重新开始this.condition()}},mounted() {// 查询this.condition()},
}
</script><style></style>1.3 导航（嵌套路由）
步骤1：创建页面
创建登录页面（模板页面）
编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）
创建页面：ClassesList.vue
步骤2：配置路由
步骤3：编写布局容器和导航
步骤1：创建页面
创建登录页面（模板页面）
编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）
创建页面：ClassesList.vue
步骤2：配置路由
const routes = [{path: '/',redirect: '/home' //重定向},{path: '/login',name: '登录',component: () => import('../views/Login.vue')},{path: '/home',name: '首页',component: () => import('../views/Home.vue'),children: [{path: '/studentList',name: '学生列表',component: () => import('../views/StudentList.vue')},{path: '/classesList',name: '班级列表',component: () => import('../views/ClassesList.vue')}]},]步骤3：编写布局容器和导航
修改main.js，配置css加载顺序（配置重置样式）
- 修改App.vue，配置样式，上下自动填充
- 编写Home页面，完成导航和二级路由显示
<template><el-container><el-header class="home-header"><!-- 导航start --><el-menu:default-active="$route.path"routerclass="el-menu-demo"mode="horizontal"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/home">首页</el-menu-item><el-submenu index="/classes"><template slot="title">班级管理</template><el-menu-item index="/classesList">班级列表</el-menu-item></el-submenu><el-submenu index="/student"><template slot="title">学生管理</template><el-menu-item index="/studentList">学生列表</el-menu-item></el-submenu></el-menu><!-- 导航end --></el-header><el-main><!-- 二级路由 --><router-view></router-view></el-main><el-footer>学生管理系统Element UI 版</el-footer></el-container>
</template><script>
export default {}
</script><style>.el-container {height: 100%;}.home-header {padding: 0;}.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}
</style>1.4 编辑学生（弹出框）
1.4.1 分析
页面布局：
添加一个“添加”按钮，点击可以显示弹出层
拷贝添加的弹出框Dialog，且要求表单（班级列表、id、名称、年龄、生日、性别）
提供student变量，用于表单数据的绑定
ajax操作
查询班级列表
添加按钮绑定事件，进行ajax提交（成功：刷新列表关闭弹出框，失败：错误提示，但不关闭弹出框）
1.4.2 页面布局
页面布局：
添加一个“添加”按钮，点击可以显示弹出层
- 拷贝添加的弹出框Dialog，且要求表单（班级列表、id、名称、年龄、生日、性别）
<!-- 添加的弹出框start --><el-dialog title="添加学生" :visible.sync="addStudentDialogVisible"><el-form :model="student" label-width="80px"><el-form-item label="班级列表" ><el-select v-model="student.cid" placeholder="请选择班级"><el-option label="区域一" value="shanghai"></el-option></el-select></el-form-item><el-form-item label="id" ><el-input v-model="student.sid"></el-input></el-form-item><el-form-item label="名称" ><el-input v-model="student.sname"></el-input></el-form-item><el-form-item label="生日" ><el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker></el-form-item><el-form-item label="年龄" ><el-input v-model="student.age"></el-input></el-form-item><el-form-item label="性别" ><el-radio-group v-model="student.gender"><el-radio label="1">男</el-radio><el-radio label="0">女</el-radio></el-radio-group></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="addStudentDialogVisible = false">取 消</el-button><el-button type="primary" @click="addStudentDialogVisible = false">确 定</el-button></div></el-dialog><!-- 添加的弹出框end -->- 提供student变量，用于表单数据的绑定
1.4.3 添加：ajax操作
查询班级列表
- 添加按钮绑定事件，进行ajax提交（成功：刷新列表关闭弹出框，失败：错误提示，但不关闭弹出框）
<template><div><!-- 表单start --><el-form :inline="true" :model="studentVo" size="mini" ><el-form-item label="班级"><el-select v-model="studentVo.cid" placeholder="请选择班级" clearable><el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option></el-select></el-form-item><el-form-item label="姓名"><el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input></el-form-item><el-form-item label="年龄"><el-col :span="11"><el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input></el-col></el-form-item><el-form-item><el-button type="primary" @click="condition(1)">查询</el-button></el-form-item></el-form><!-- 表单end --><el-button type="primary" @click="openAddDialog" >添加</el-button><!-- 添加的弹出框start --><el-dialog title="添加学生" :visible.sync="addStudentDialogVisible"><el-form :model="student" label-width="80px"><el-form-item label="班级列表" ><el-select v-model="student.cid" placeholder="请选择班级"><el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option></el-select></el-form-item><el-form-item label="id" ><el-input v-model="student.sid"></el-input></el-form-item><el-form-item label="名称" ><el-input v-model="student.sname"></el-input></el-form-item><el-form-item label="生日" ><el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker></el-form-item><el-form-item label="年龄" ><el-input v-model="student.age"></el-input></el-form-item><el-form-item label="性别" ><el-radio-group v-model="student.gender"><el-radio label="1">男</el-radio><el-radio label="0">女</el-radio></el-radio-group></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="addStudentDialogVisible = false">取 消</el-button><el-button type="primary" @click="addStudent">确 定</el-button></div></el-dialog><!-- 添加的弹出框end --><!-- 表格start --><el-table:data="studentPage.list"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="cid"label="班级"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><template slot-scope="scope">{{scope.row.gender == 1 ? "男" : "女"}}</template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini">编辑</el-button><el-button size="mini" type="danger">删除</el-button></template></el-table-column></el-table><!-- 表格end --><!-- 分页条start --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="studentPage.pageNum":page-sizes="[1, 2, 3, 5, 10]":page-size="studentPage.pageSize"layout="total, sizes, prev, pager, next, jumper":total="studentPage.total"></el-pagination><!-- 分页条end --></div>
</template><script>
// 导入axios
import axios from 'axios'
export default {data() {return {studentVo: { //条件查询},studentPage: { //分页数据pageNum: 1,pageSize: 3},addStudentDialogVisible: false, //添加弹出框的控制变量student: { //添加表单对象},classesList: [], // 所有班级}},methods: {async condition(num) {if(num) {this.studentPage.pageNum = num}// ajax查询var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} = await axios.post(url, this.studentVo)// 保存结果this.studentPage = baseResult.data},handleSelectionChange(val) {console.info('批量删除')},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.studentPage.pageSize = valthis.studentPage.pageNum = 1// 重新开始this.condition()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.studentPage.pageNum = val// 重新开始this.condition()},async selectAllClasses() {// ajax 查询所有的班级var url = `http://localhost:8888/classes`let { data: baseResult } = await axios.get(url)// 保存结果this.classesList = baseResult.data},openAddDialog() {// 打开弹出框this.addStudentDialogVisible = true// 清空表单数据this.student = {}// 查询班级列表this.selectAllClasses()},async addStudent() {// 添加学生ajaxvar url = `http://localhost:8888/student/saveOrUpdate`let { data: baseResult } = await axios.post(url, this.student)// 处理结果if(baseResult.code == 20000) {// 成功：刷新页面，成功提示，关闭弹出框this.condition()this.$message.success(baseResult.message)this.addStudentDialogVisible = false} else {// 失败：失败提示this.$message.error(baseResult.message)}}},mounted() {// 查询班级this.selectAllClasses()// 查询学生this.condition()},
}
</script><style></style>1.4.4 修改：ajax操作
点击修改按钮，通过id查询详情，显示弹出框，并自动填充表单。
<template><div><!-- 表单start --><el-form :inline="true" :model="studentVo" size="mini" ><el-form-item label="班级"><el-select v-model="studentVo.cid" placeholder="请选择班级" clearable><el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option></el-select></el-form-item><el-form-item label="姓名"><el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input></el-form-item><el-form-item label="年龄"><el-col :span="11"><el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input></el-col></el-form-item><el-form-item><el-button type="primary" @click="condition(1)">查询</el-button></el-form-item></el-form><!-- 表单end --><el-button type="primary" @click="openAddDialog" >添加</el-button><!-- 添加的弹出框start --><el-dialog :title="dialogTitle" :visible.sync="addStudentDialogVisible"><el-form :model="student" label-width="80px"><el-form-item label="班级列表" ><el-select v-model="student.cid" placeholder="请选择班级"><el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option></el-select></el-form-item><el-form-item label="id" ><el-input v-model="student.sid"></el-input></el-form-item><el-form-item label="名称" ><el-input v-model="student.sname"></el-input></el-form-item><el-form-item label="生日" ><el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker></el-form-item><el-form-item label="年龄" ><el-input v-model="student.age"></el-input></el-form-item><el-form-item label="性别" ><el-radio-group v-model="student.gender"><el-radio label="1">男</el-radio><el-radio label="0">女</el-radio></el-radio-group></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="addStudentDialogVisible = false">取 消</el-button><el-button type="primary" @click="addStudent">确 定</el-button></div></el-dialog><!-- 添加的弹出框end --><!-- 表格start --><el-table:data="studentPage.list"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="cid"label="班级"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><template slot-scope="scope">{{scope.row.gender == 1 ? "男" : "女"}}</template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="openUpdateDialog(scope.row.sid)">编辑</el-button><el-button size="mini" type="danger">删除</el-button></template></el-table-column></el-table><!-- 表格end --><!-- 分页条start --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="studentPage.pageNum":page-sizes="[1, 2, 3, 5, 10]":page-size="studentPage.pageSize"layout="total, sizes, prev, pager, next, jumper":total="studentPage.total"></el-pagination><!-- 分页条end --></div>
</template><script>
// 导入axios
import axios from 'axios'
export default {data() {return {studentVo: { //条件查询},studentPage: { //分页数据pageNum: 1,pageSize: 3},addStudentDialogVisible: false, //添加弹出框的控制变量student: { //添加表单对象},classesList: [], // 所有班级dialogTitle: '', // 弹出框的标题}},methods: {async condition(num) {if(num) {this.studentPage.pageNum = num}// ajax查询var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} = await axios.post(url, this.studentVo)// 保存结果this.studentPage = baseResult.data},handleSelectionChange(val) {console.info('批量删除')},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.studentPage.pageSize = valthis.studentPage.pageNum = 1// 重新开始this.condition()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.studentPage.pageNum = val// 重新开始this.condition()},async selectAllClasses() {// ajax 查询所有的班级var url = `http://localhost:8888/classes`let { data: baseResult } = await axios.get(url)// 保存结果this.classesList = baseResult.data},openAddDialog() {// 设置标题this.dialogTitle = '添加学生'// 打开弹出框this.addStudentDialogVisible = true// 清空表单数据this.student = {}// 查询班级列表this.selectAllClasses()},async openUpdateDialog(sid) {// 设置标题this.dialogTitle = '修改学生'// 通过id查询详情var url = `http://localhost:8888/student/${sid}`let { data: baseResult } = await axios.get(url)this.student = baseResult.data// 查询班级列表this.selectAllClasses()// 打开弹出框this.addStudentDialogVisible = true},async addStudent() {// 添加学生ajaxvar url = `http://localhost:8888/student/saveOrUpdate`let { data: baseResult } = await axios.post(url, this.student)// 处理结果if(baseResult.code == 20000) {// 成功：刷新页面，成功提示，关闭弹出框this.condition()this.$message.success(baseResult.message)this.addStudentDialogVisible = false} else {// 失败：失败提示this.$message.error(baseResult.message)}}},mounted() {// 查询班级this.selectAllClasses()// 查询学生this.condition()},
}
</script><style></style>2. 用户管理
2.1 用户名登录
2.1.1 显示登录页面
<template><div class="login"><el-card class="login-card"><div slot="header" class="clearfix"><el-button type="text" icon="el-icon-home">传智专修学院</el-button></div><!-- 表单start --><el-form ref="form" :model="user" label-width="80px"><el-form-item label="用户名"><el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="user.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"></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><!-- 表单end --></el-card></div>
</template><script>
export default {data() {return {user: {},}},methods: {login() {}},
}
</script><style>.login {height: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;}.login-card {width: 500px;}
</style>2.1.2 表单校验
普通字段校验
<template><div class="login"><el-card class="login-card"><div slot="header" class="clearfix"><el-button type="text" icon="el-icon-home">传智专修学院</el-button></div><!-- 表单start --><el-form ref="form" :model="user" :rules="loginRules" label-width="80px"><el-form-item label="用户名" prop="username"><el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="user.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"></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><!-- 表单end --></el-card></div>
</template><script>
export default {data() {return {user: {},loginRules: { //校验规则username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }]}}},methods: {login() {this.$message.success('ajax发送')}},
}
</script><style>.login {height: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;}.login-card {width: 500px;}
</style>- 程序校验
<template><div class="login"><el-card class="login-card"><div slot="header" class="clearfix"><el-button type="text" icon="el-icon-home">传智专修学院</el-button></div><!-- 表单start --><el-form ref="loginForm" :model="user" :rules="loginRules" label-width="80px"><el-form-item label="用户名" prop="username"><el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="user.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"></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><!-- 表单end --></el-card></div>
</template><script>
export default {data() {return {user: {},loginRules: { //校验规则username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }]}}},methods: {login() {this.$refs.loginForm.validate((valid) => {if (valid) {// 校验通过this.$message.success('ajax发送')} else {console.log('error submit!!');return false;}});}},
}
</script><style>.login {height: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;}.login-card {width: 500px;}
</style>2.1.3 ajax提交
表单校验通过后，发送ajax，如果登录成功跳转到首页，如果失败提示“用户名或密码不匹配”
methods: {login() {this.$refs.loginForm.validate(async (valid) => {if (valid) {// 校验通过 发送ajax startvar url = `http://localhost:8888/user/login`let { data: baseResult } = await axios.post(url, this.user)if( baseResult.code == 20000) {// 登录成功，跳转到首页this.$router.push('/home')} else {// 登录失败this.$message.error(baseResult.message)}// 校验通过 发送ajax end} else {console.log('error submit!!');return false;}});}},2.1.4 后端实现
步骤：
步骤1：拷贝表
步骤2：编写JavaBean
步骤3：编写mapper
步骤4：编写service，提供login，使用用户名和密码进行查询，null或user
步骤5：编写controller，根据返回值提出，登录成功/账号或密码不匹配
步骤1：拷贝表
CREATE TABLE `tb_user` (`u_id` varchar(32) NOT NULL COMMENT '用户编号',`user_name` varchar(50) DEFAULT NULL COMMENT '用户名',`password` varchar(32) DEFAULT NULL COMMENT '密码',`gender` bit(1) DEFAULT NULL COMMENT '性别,1表示男，0表示女',PRIMARY KEY (`u_id`),UNIQUE KEY `user_name` (`user_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;/*Data for the table `tb_user` */insert into `tb_user`(`u_id`,`user_name`,`password`,`gender`) values ('1','jack','1234',''),('10','jack5','1234',''),('2','rose','1234','\0'),('3','张三','1234',''),('4','tom','1234',''),('5','jack2','1234',''),('6','jack1','1234',''),('7','jack3','1234',''),('8','jack4','1234',''),('cd0d2523b5024589af142787de8a7b2a','jack6','1234','');步骤2：编写JavaBean
package com.czxy.domain;import lombok.Data;import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;@Data
@Table(name = "tb_user")
public class User {@Id@Column(name = "u_id")private String uid;@Column(name = "user_name")private String username;@Column(name = "password")private String password;@Column(name = "gender")private Integer gender; // 0 或 1}
步骤3：编写mapper
package com.czxy.mapper;import com.czxy.domain.User;
import tk.mybatis.mapper.common.Mapper;@org.apache.ibatis.annotations.Mapper
public interface UserMapper extends Mapper<User> {
}步骤4：编写service，提供login，使用用户名和密码进行查询，null或user
接口
package com.czxy.service;import com.czxy.domain.User;public interface UserService {/**** @param userLogin 用户名和密码（表单提交）* @return 查询结果（数据库查询）*/public User login(User userLogin);
}
- 实现类
package com.czxy.service.impl;import com.czxy.domain.User;
import com.czxy.mapper.UserMapper;
import com.czxy.service.UserService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;import javax.annotation.Resource;
import java.util.List;@Service
@Transactional
public class UserServiceImpl implements UserService {@Resourceprivate UserMapper userMapper;@Overridepublic User login(User userLogin) {// 用户名和密码查询，如果有结果返回，如果没有返回nullExample example = new Example(User.class);Example.Criteria criteria = example.createCriteria();criteria.andEqualTo("username", userLogin.getUsername());criteria.andEqualTo("password", userLogin.getPassword());// 查询List<User> list = userMapper.selectByExample(example);// 返回第一个数据if(list != null && list.size() > 0) {return list.get(0);}return null;}
}- 步骤5：编写controller，根据返回值提出，登录成功/账号或密码不匹配
package com.czxy.controller;import com.czxy.domain.User;
import com.czxy.service.UserService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;@RestController
@CrossOrigin //跨域
@RequestMapping("/user")
public class UserController {@Resourceprivate UserService userService;@PostMapping("/login")public BaseResult login(@RequestBody User user) {// 登录User loginUser = userService.login(user);// 判断if(loginUser != null) {// 登录成功return BaseResult.ok("登录成功", loginUser);} else {// 登录失败return BaseResult.error("用户名或密码不匹配");}}
}2.2 注册：用户名校验（ajax校验）
2.2.1 需求
用户名存在，表单不能注册。用户名不存在，可以注册。
2.2.2 后端
通过用户名查询，根据查询结果提示
查询到，提示“用户名已存在”
没有查询到，提示“用户名可用”
步骤：
步骤1：service，通过用户名查询
步骤2：controller，post，json数据，判断
步骤1：service，通过用户名查询
接口
/*** 通过用户名查询* @param username* @return*/public User findByUsername(String username);- 实现类
@Overridepublic User findByUsername(String username) {// 用户名和密码查询，如果有结果返回，如果没有返回nullExample example = new Example(User.class);Example.Criteria criteria = example.createCriteria();criteria.andEqualTo("username", username);// 查询List<User> list = userMapper.selectByExample(example);// 返回第一个数据if(list != null && list.size() > 0) {return list.get(0);}return null;}步骤2：controller，post，json数据，判断
@PostMapping("/check")public BaseResult check(@RequestBody User user) {// 登录User findUser = userService.findByUsername(user.getUsername());// 判断if(findUser == null) {// 没有结果，可用return BaseResult.ok("用户名可用");} else {// 有结果，不可用，已存在return BaseResult.error("用户名已存在");}}2.2.3 前端：页面
步骤：
步骤1：注册编写路由
步骤2：创建注册页面
步骤3：拷贝注册表单
步骤1：注册编写路由
{path: '/register',name: '注册',component: () => import('../views/Register.vue')},步骤2：创建注册页面
步骤3：拷贝注册表单
<template><el-card class="register-card"><el-form ref="form" :model="user" label-width="80px" size="mini"><el-form-item label="用户名"><el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input></el-form-item><el-form-item label="确认密码"><el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input></el-form-item><el-form-item label="生日"><el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker></el-form-item><el-form-item label="学历"><el-select v-model="user.edu" placeholder="请选择学历"><el-option label="大班" value="db"></el-option><el-option label="中班" value="zb"></el-option></el-select></el-form-item><el-form-item label="性别"><el-radio-group v-model="user.gender"><el-radio label="1">男</el-radio><el-radio label="0">女</el-radio></el-radio-group></el-form-item><el-form-item label="爱好"><el-checkbox-group v-model="user.hobbies"><el-checkbox label="cy" name="type">抽烟</el-checkbox><el-checkbox label="hj" name="type">喝酒</el-checkbox><el-checkbox label="tt" name="type">烫头</el-checkbox></el-checkbox-group></el-form-item><el-form-item label="婚否"><el-switch v-model="user.marry"></el-switch></el-form-item><el-form-item label="省市县"><el-cascaderv-model="user.citys":options="cityList":props="{ expandTrigger: 'hover' }"></el-cascader></el-form-item><el-form-item><el-button type="primary">注册</el-button><el-button type="info">重置</el-button></el-form-item></el-form>{{ user }}</el-card>
</template><script>
export default {data() {return {user: {hobbies: [] , //必须是数组},cityList: [{value: 'js',label: '江苏省',children: [{value: 'nj',label: '南京市',},{value: 'sq',label: '宿迁市',children: [{value: 'sy',label: '沭阳县',children: [{value: 'nh',label: '南湖街道',},{value: 'mx',label: '梦溪街道',}]},{value: 'sh',label: '泗洪县',}]}]},{value: 'hb',label: '河北省',}]}},
}
</script><style>.register-card {width: 500px;}
</style>2.2.4 前端：自定义校验
步骤
步骤1：完成用户名普通校验（必填、长度3-6）
步骤2：自定义ajax用户名校验
步骤1：完成用户名普通校验（必填、长度3-6）
<template><el-card class="register-card"><el-form ref="registerForm" :rules="registerRules" :model="user" label-width="80px" size="mini"><el-form-item label="用户名" prop="username"><el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input></el-form-item><el-form-item label="确认密码"><el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input></el-form-item><el-form-item label="生日"><el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker></el-form-item><el-form-item label="学历"><el-select v-model="user.edu" placeholder="请选择学历"><el-option label="大班" value="db"></el-option><el-option label="中班" value="zb"></el-option></el-select></el-form-item><el-form-item label="性别"><el-radio-group v-model="user.gender"><el-radio label="1">男</el-radio><el-radio label="0">女</el-radio></el-radio-group></el-form-item><el-form-item label="爱好"><el-checkbox-group v-model="user.hobbies"><el-checkbox label="cy" name="type">抽烟</el-checkbox><el-checkbox label="hj" name="type">喝酒</el-checkbox><el-checkbox label="tt" name="type">烫头</el-checkbox></el-checkbox-group></el-form-item><el-form-item label="婚否"><el-switch v-model="user.marry"></el-switch></el-form-item><el-form-item label="省市县"><el-cascaderv-model="user.citys":options="cityList":props="{ expandTrigger: 'hover' }"></el-cascader></el-form-item><el-form-item><el-button type="primary" @click="register">注册</el-button><el-button type="info">重置</el-button></el-form-item></el-form>{{ user }}</el-card>
</template><script>
export default {data() {return {user: {hobbies: [] , //必须是数组},cityList: [{value: 'js',label: '江苏省',children: [{value: 'nj',label: '南京市',},{value: 'sq',label: '宿迁市',children: [{value: 'sy',label: '沭阳县',children: [{value: 'nh',label: '南湖街道',},{value: 'mx',label: '梦溪街道',}]},{value: 'sh',label: '泗洪县',}]}]},{value: 'hb',label: '河北省',}],registerRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }],},}},methods: {register() {this.$refs.registerForm.validate((valid) => {if (valid) {// 校验通过} else {// 没通过console.log('error submit!!');return false;}});}},
}
</script><style>.register-card {width: 500px;}
</style>步骤2：自定义ajax用户名校验
<template><el-card class="register-card"><el-form ref="registerForm" :rules="registerRules" :model="user" label-width="80px" size="mini"><el-form-item label="用户名" prop="username"><el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input></el-form-item><el-form-item label="确认密码"><el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input></el-form-item><el-form-item label="生日"><el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker></el-form-item><el-form-item label="学历"><el-select v-model="user.edu" placeholder="请选择学历"><el-option label="大班" value="db"></el-option><el-option label="中班" value="zb"></el-option></el-select></el-form-item><el-form-item label="性别"><el-radio-group v-model="user.gender"><el-radio label="1">男</el-radio><el-radio label="0">女</el-radio></el-radio-group></el-form-item><el-form-item label="爱好"><el-checkbox-group v-model="user.hobbies"><el-checkbox label="cy" name="type">抽烟</el-checkbox><el-checkbox label="hj" name="type">喝酒</el-checkbox><el-checkbox label="tt" name="type">烫头</el-checkbox></el-checkbox-group></el-form-item><el-form-item label="婚否"><el-switch v-model="user.marry"></el-switch></el-form-item><el-form-item label="省市县"><el-cascaderv-model="user.citys":options="cityList":props="{ expandTrigger: 'hover' }"></el-cascader></el-form-item><el-form-item><el-button type="primary" @click="register">注册</el-button><el-button type="info">重置</el-button></el-form-item></el-form>{{ user }}</el-card>
</template><script>
import axios from 'axios'
export default {data() {// 自定义校验器 var 函数名 = 箭头函数(规则,数据,回调函数)// 校验通过：callback();// 校验失败：callback(new Error('失败原因'));var validateUsername = async (rule, value, callback) => {// 1 发送ajax根据用户查询var url = `http://localhost:8888/user/check`let { data: baseResult } = await axios.post(url,{username: value})// 2 根据结果处理：20000通过，否则失败if(baseResult.code == 20000) {// 2.1 成功callback();} else {// 2.2 失败callback(new Error(baseResult.message));}};return {user: {hobbies: [] , //必须是数组},cityList: [{value: 'js',label: '江苏省',children: [{value: 'nj',label: '南京市',},{value: 'sq',label: '宿迁市',children: [{value: 'sy',label: '沭阳县',children: [{value: 'nh',label: '南湖街道',},{value: 'mx',label: '梦溪街道',}]},{value: 'sh',label: '泗洪县',}]}]},{value: 'hb',label: '河北省',}],registerRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, //内置校验：必填{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }, //内置校验：长度{ validator: validateUsername, trigger: 'blur' } //自定义校验：用户名校验 validateUsername],},}},methods: {register() {this.$refs.registerForm.validate((valid) => {if (valid) {// 校验通过} else {// 没通过console.log('error submit!!');return false;}});}},
}
</script><style>.register-card {width: 500px;}
</style>页面展示
学生管理 + 用户管理（Element版）相关推荐
- Linux 文件与目录管理+用户管理命令（详解+练习）
1. 创建目录 mkdir NO1. 在当前路径创建一级目录 [root@rehat root]# mkdir test NO2. 在当前路径创建多级目录 [root@rehat root]# mkd ...
- 商户管理后台/消费统计管理/云平台商户端管理后台原型/PaaS金融服务平台商户端管理后台原型/企业管理系统后台/账户管理/工单管理/充值管理/汇款单管理/余额管理/用户管理/认证管理/web后台原型
商户管理后台/消费统计管理/云平台商户端管理后台原型/PaaS金融服务平台商户端管理后台原型/企业管理系统后台/账户管理/工单管理/充值管理/汇款单管理/余额管理/用户管理/认证管理/axure后台管 ...
- 企业办公oa系统医药OA办公后台管理会议管理用户管理物料管理活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权限管理
作品介绍:企业办公oa系统&医药OA办公后台管理&会议管理&用户管理&物料管理&活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权 ...
- Linux 文件与目录管理+用户管理命令
Linux 文件与目录管理+用户管理命令(详解+练习) 标签: it分类: Linux A linux实用命令详解(新建删除复制文件夹,挂载) + B Linux 文件与目录管理+用户管理命令练习 A ...
- 输入输出管理 用户管理
第四单元 #########管理输入输出######### 正确输出的编号为1,错误输出编号为2,在普通用户下会因为用户权限,出现两种结果(正确输出和报错) find /etc -name passw ...
- linux X配置文件,Linux和Windows互传文件 用户配置文件和密码配置文件 用户组管理 用户管理...
显示日期date [root@centos_1 ~]# date 2017年 11月 21日 星期二 08:38:25 CST 显示系统语言 [root@centos_1 ~]# echo $LANG ...
- Kafka的灵魂伴侣Logi-KafkaManger(5)之运维管控–平台管理(用户管理和平台配置)
推荐一款非常好用的kafka管理平台,kafka的灵魂伴侣 滴滴开源Logi-KafkaManager 一站式Kafka监控与管控平台 技术交流 有想进滴滴LogI开源用户群的加我个人微信: jjdl ...
- 微软ad域服务器 管理用户,管理 Azure AD 域服务的 DNS | Microsoft Docs
您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn. 管理 DNS 并在 A ...
- 用户和用户组管理-用户管理命令-useradd
1.useradd命令格式 命令:useradd [选项] 用户名 选项: -u UID 手工指定用户的UID -d 家目录 手工指定用户的家目录 -c 用户说 ...
- Axure 经典实例高保真原型下载（Axure高保真企业办公oa系统OA协同办公后台管理会议管理用户管理统计分析活动管理+考勤管理+档案管理+行政支持管理）
Axure高保真OA协同办公后台管理功能介绍: OA软件的核心应用是:流程审批.协同工作.公文管理(国企和政府机关).沟通工具.文档管理.信息中心.电子论坛.计划管理.项目管理.任务管理.会议管理.关 ...
最新文章
- Android 中文API （94） —— MediaController
- 大厂围猎春招，年轻人却卸甲出逃
- OpenCASCADE：Foundation Classes之集合、字符串、数量和单位转换
- MySQL数据库语句总结
- linux c++线程池的实现
- python json.loads namespace_python json.loads兼容单引号数据的方法
- 《中国人工智能学会通讯》——11.64 基于成对约束的属性特征选择
- 安全是一个系统问题包括服务器安全,信息安全技术题库：除了应用程序功能，Web内容和功能枚举还需要关注（ ）。...
- 数据库 MySQL 之 表操作、存储引擎
- php urldecode 加号,php|urldecode urlencode 的加号问题
- mysql分组查询学生平均年龄_8.21MySQL（四）基本查询语句及方法、连表、子查询...
- fr4速度 微带线_微带线(microstrip)和带状线(stripline)
- 生存分析第一课: censoring 、truncation、survival function、hazard function
- openwrt的自动挂载功能
- apt安装golang
- 火了：一只蝙蝠的自述
- 使用css和js实现刮刮乐（简单易懂还有趣）
- 高斯消去法解线性方程组的fortran程序实现
- 【TrailHead】Create a test harness app and component
- 项目发布到各个电脑上，css样式都变了，jsp页面布局乱了，怎么处理