主要内容
这篇主要是登陆注册功能，包括了登陆注册的前后端设计，用户登陆了可以看到具体的网页信息，管理员登陆了可以管理网页的信息。
主要步骤
前端网页设计：
点击右上方的登录按钮，进入登录界面。
点击注册界面，进入注册界面。
网页设计如下：
<template>
<div >
<div class="block" style="float:left;width:500px;margin-top:150px;margin-left:100px;">
<el-carousel height="350px" :interval="2000">
<el-carousel-item v-for="item in imagebox" :key="item.id">
<img :src="item.idView" class="image">
</el-carousel-item>
</el-carousel>
</div>
<div style="float:right;width:450px;margin-top:220px;margin-right:150px; " v-show='active === 1' >
<!--添加表单-->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login_form" label-width="100px" >
<el-form-item label="用户名" prop="user_id">
<el-input v-model="loginForm.user_id" prefix-icon="iconfont icondenglu" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" prefix-icon="iconfont iconmima" type="password" style="width:400px;"></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary" @click="login" plain>登录</el-button>
<el-button type="success" @click="active=2" plain>注册</el-button>
<el-button type="info" @click="resetLoginForm" plain>重置</el-button>
</el-form-item>
</el-form>
</div>
<div style="float:right;width:450px;margin-top:200px;margin-right:150px; " v-show='active === 2' >
<!--添加表单-->
<el-form ref="FormRef" :model="user_info" :rules="Rules" class="login_form" label-width="100px" >
<el-form-item label="用户名" prop="user_id">
<el-input v-model="user_info.user_id" prefix-icon="iconfont icondenglu" style="width:450px;"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="user_info.password" prefix-icon="iconfont iconmima" style="width:450px;"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="querenpassword">
<el-input v-model="user_info.querenpassword" prefix-icon="iconfont iconmima" style="width:450px;"></el-input>
</el-form-item>
<el-form-item label="电话" prop='phone'>
<el-input v-model='user_info.phone' style="width:450px;"></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary" @click="active=1" plain>登录</el-button>
<el-button type="success" @click="register" plain>注册</el-button>
<el-button type="info" @click="resetForm" plain>重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
var validatePass2 = (rule, value, callback) => {
console.log(value);
if (this.user_info.querenpassword === '') {
callback(new Error('请再次输出明码'));
} else if (this.user_info.querenpassword != this.user_info.password) {
callback(new Error('两次输出明码不统一!'));
} else {
callback();
}
};
return {
imagebox:[{id:0,idView:require('../assets/image/1.jpg')},
{id:1,idView:require('../assets/image/2.jpg')},
{id:2,idView:require('../assets/image/3.jpg')}
],
loginForm: {
user_id: "admin",
password: "123456"
},
loginRules:{
user_id:[
{ required: true, message: '用户名为必填项', trigger: 'blur' },//验证必填项
{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' } //验证长度
],
password:[
{ required: true, message: '用户密码为必填项', trigger: 'blur' },//验证必填项
{ min: 6, max: 10, message: '长度在 6 ~ 10 个字符', trigger: 'blur' } //验证长度
],
},
active:1,
user_info: {
user_id: "",
password: "",
querenpassword:"",
type:"用户",
phone:"",
},
Rules:{
user_id:[
{ required: true, message: '用户名为必填项', trigger: 'blur' },//验证必填项
{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' } //验证长度
],
password:[
{ required: true, message: '用户密码为必填项', trigger: 'blur' },//验证必填项
{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' } //验证长度
],
querenpassword:[
//{ required: true, message: '请确认明码', trigger: 'blur' },//验证必填项
//{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }, //验证长度
{ validator: validatePass2, trigger: 'blur', required: true },
],
},
};
},
methods:{
resetLoginForm(){
this.$refs.loginFormRef.resetFields();
},
//登录
login(){
this.$refs.loginFormRef.validate(async valid =>{
if(!valid) return;
const {data:res} = await this.$http.post("Login",this.loginForm);
if(res.flag=="ok"){
let resdata=JSON.parse(JSON.stringify(this.loginForm));
console.log("运行记录组件发送的数据",resdata);
console.log("运行记录组件的数据",res.user);
console.log("session", window.sessionStorage.getItem("user"));
console.log("运行记录组件的数据",res.user.type,res.user.type=="管理员");
this.$message.success("登陆成功！！！");
if(res.user.type=="管理员")
{
this.$router.push({path: "/Main_user"});
window.sessionStorage.setItem("guanli",res.user.user_id);
}else{
this.$router.push({path: "/Main"});
window.sessionStorage.setItem("user",res.user.user_id);
}
}else{
this.$message.error("登录失败,请重试！");
}
})
},
resetForm(){
this.$refs.FormRef.resetFields();
},
register(){
this.$refs.FormRef.validate(async valid =>{
if(!valid) return;
const {data:res} = await this.$http.post("Register",this.user_info);
console.log(res,res=="ok");
if(res=="ok"){
this.$message.success("注册成功！！！");
this.active=1;
}else{
this.$message.error("注册失败！您的用户名已被注册，请重新注册！");
}
})
},
},
};
</script>
<style lang="less" scoped>
// 跟节点样式
.login_container {
background-color: #fff;
height: 100%;
}
// 登录框
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;// 圆角
position: absolute;// 绝对定位
left: 50%;
top: 50%;
transform: translate(-50%, -50%);// 根据自己位置 以自己为长度位移
border: 1px solid #fff;
// 头像框
.avatar_box {
width: 130px;
height: 130px;
border: 1px solid #eee;
border-radius: 50%; // 加圆角
padding: 10px;
box-shadow: 0 0 10px #ddd;// 盒子阴影
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0ee;
img {
width: 100%;
height: 100%;
border-radius: 50%; // 加圆角
background-color: #eee;
}
}
.btns {
display: flex;// 弹性布局
justify-content: flex-end; // 尾部对齐
}
.login_form {
position: absolute;
bottom: 0%;
width: 100%;
padding: 0 10px;
box-sizing: border-box;// 设置边框
}
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
img{
/*设置图片宽度和浏览器宽度一致*/
width:100%;
height:inherit;
}
</style>
后端：主要接收前端的数据，查询数据库，返回登录注册是否成功。主要创建四个文件：
在User.java为实体用户，包括了用户名，密码，手机号。
public class User {
private String user_id;
private String password;
private String type;
private String phone;
public String getUser_id() {return user_id;}
public void setUser_id(String user_id){this.user_id=user_id;}
public String getPassword() {return password;}
public void setPassword(String password) {this.password=password;}
public String getType() {return type;}
public void setType(String type) {this.type=type;}
public String getPhone() {return phone;}
public void setPhone(String phone){this.phone=phone;}
@Override
public String toString(){
return "User{"+
"user_id'"+user_id+'\''+
",password='"+password+'\''+
",type='"+type+'\''+
",phone='"+phone+'\''+
'}';
}
}
UserController.java主要得到前端数据，并进行数据库的查询插入。
登录：
@RequestMapping("/Login")
public String login(@RequestBody User user)
{
String flag="error";
User u=userDao.getUserById(user.getUser_id(),user.getPassword());
System.out.println("接收user:"+user+"查询:"+u);
HashMap<String,Object> res=new HashMap();
if (u!=null)
{
flag="ok";
}
res.put("flag",flag);
res.put("user",u);
String res_json= JSON.toJSONString(res);
System.out.println(user.toString());
System.out.println(user.toString());
return res_json;
}
注册：
@RequestMapping("/Register")
public String Register(@RequestBody User user)
{
System.out.println(user.toString());
int f= userDao.insertUser(user);
System.out.println("f="+f);
if(f==0)
return "false";
return "ok";
}
UserDao.java是数据库操作的接口。
userMapper.xml主要是数据库的查询操作。
登陆注册的前后端完成。
点击登录，进入用户页面。
注册，输入信息：用户名，密码，确认密码，手机号。
扫一扫
4665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
