目录
<template> <nuxt/> </template> <script> export default { } </script> <style> </style>
<template> <div> 登录 </div> </template> <script> export default { layout: 'user' } </script> <style> </style>
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@itcast.cn * @description */ @Mapper public 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@itcast.cn * @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@itcast.cn * @description */ @Service @Transactional public 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@itcast.cn * @description */ @RestController @RequestMapping("/user") public class TbUserController { @Resource private TbUserService tbUserService; }
1)用户名校验
2)用户登录
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() {
// 自定义校验规则start
var 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));
}
};
// 自定义校验规则end
return {
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>
默认布局
中
默认布局
中
<template> <el-container> <el-header> <el-row> <el-col :span="22" class="title"> 学生管理系统(SMS) </el-col> <el-col :span="2"> <!-- <el-popover placement="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" router background-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>