ssm+easyui+bootstrap+ajax 完成用户的登录和注册
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ssm+easyui+bootstrap+ajax 完成用户的登录和注册相关的知识,希望对你有一定的参考价值。
使用ssm+easyui+bootstrap+ajax 完成用户的登录和注册界面如下:具体步骤如下:
1.编写返回的响应信息的bean
package com.edu.bean;
import java.util.HashMap;
import java.util.Map;
public class Message {
private Integer code ;// 状态码 200 代表成功 500 代表失败
private String msg ;
private Map<String,Object> maps = new HashMap<>() ;
/**
* 成功
* @return
*/
public static Message success() {
Message message = new Message() ;
message.setCode(200);
message.setMsg("成功");
return message ;
}
/**
* 失败
* @return
*/
public static Message error() {
Message message = new Message() ;
message.setCode(500);
message.setMsg("失败");
return message;
}
/**
*
* @param key
* @param value
* @return
*/
public Message add(String key,Object value) {
this.getMaps().put(key,value);
return this;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getMaps() {
return maps;
}
public void setMaps(Map<String, Object> maps) {
this.maps = maps;
}
}
2.编写控制器
package com.edu.controller;
import com.edu.bean.Customer;
import com.edu.bean.Message;
import com.edu.service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
-
这是用户controllerbr/>*/
@Controller
public class CustomerController {br/>@Autowired
private CustomerService customerService;/**
- 用户登录的控制器
- @param customer
- @returnbr/>*/
@ResponseBody
@RequestMapping("/login")
public Message login(Customer customer) {
Customer cust = customerService.loginByUserNameAndPwd(customer.getUserName(),customer.getUserPwd());
if(null == cust) {
return Message.error();
}
return Message.success();
}
/**
3.编写service
package com.edu.service;
import com.edu.bean.Customer;
public interface CustomerService {
// 用户登录
Customer loginByUserNameAndPwd(String userName, String userPwd);
// 用户注册
void save(Customer customer);
}
4.编写service的实现类
package com.edu.service.impl;
import com.edu.bean.Customer;
import com.edu.bean.CustomerExample;
import com.edu.mapper.CustomerMapper;
import com.edu.service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Servicebr/>@Transactional
public class CustomerServiceImpl implements CustomerService {br/>@Autowired
private CustomerMapper customerMapper;br/>@Override
public Customer loginByUserNameAndPwd(String userName, String userPwd) {
CustomerExample example = new CustomerExample() ;
example.createCriteria().andUserNameEqualTo(userName).andUserPwdEqualTo(userPwd);
List<Customer> customers = customerMapper.selectByExample(example);
if(customers.size()>0) {
return customers.get(0) ;
}
return null;
}
@Override
public void save(Customer customer) {
customerMapper.insertSelective(customer);
}
}
5.编写mapper
使用反向引擎生成的mapper
6.编写页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<jsp:include page="common/header.jsp"></jsp:include>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 javascript 插件都依赖 jQuery,所以必须放在前边) -->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body>
<%--这是用户登录界面--%>
<div id="userLoginDialog">
<form style="padding: 20px;" id="userLoginForm">
<h1>后台登录</h1>
<hr/>
<div class="form-group">
<label for="userName">用户名</label>
<input type="text" class="form-control" name="userName" id="userName" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="userPwd">密码</label>
<input type="password" class="form-control" name="userPwd" id="userPwd" placeholder="请输入密码">
</div>
<button id="btnLogin" class="btn btn-info" type="button" style="width: 100%">用户登录</button>
<button id="btnRegUI" type="button" class="btn btn-default" style="width: 100%;margin-top:10px;">用户注册</button>
</form>
</div>
<%--这是用户注册界面--%>
<div id="userRegDialog" style="display: none;">
<form style="padding: 20px;" id="userRegForm">
<h1>用户注册界面</h1>
<hr/>
<div class="form-group">
<label for="userRegName">用户名</label>
<input type="text" class="form-control" name="userName" id="userRegName" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="userRegPwd">密码</label>
<input type="password" class="form-control" name="userPwd" id="userRegPwd" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="userRegAddr">地址</label>
<input type="text" class="form-control" name="userAddress" id="userRegAddr" placeholder="请输入地址">
</div>
<div class="form-group">
<label for="userRegBirthday">生日</label>
<input type="text" class="form-control" name="birthday" id="userRegBirthday" placeholder="请输入生日">
</div>
</form>
</div>
<script type="text/javascript">
var userLoginDialog,userRegDialog ;
userLoginDialog = $(‘#userLoginDialog‘).dialog({
width: 600,
height: 450,
closed: false,
closable: false,
cache: false,
modal: true,
draggable: false,
resizable: false,
noheader: true,
border: false
});
userRegDialog = $(‘#userRegDialog‘).dialog({
width: 600,
height: 550,
closed: true,
closable: false,
cache: false,
modal: true,
draggable: false,
resizable: false,
noheader: true,
border: false,
buttons: [
{
text: ‘注册‘,
iconCls: ‘icon-ok‘,
handler: function () {
regRegisterForm();
}
}
]
});
$(‘#btnRegUI‘).click(function(){
userLoginDialog.dialog(‘close‘);
userRegDialog.show().dialog(‘open‘);
});
// 给登录按钮绑定一个点击事件
$(‘#btnLogin‘).click(function(){
// 点击click 按钮的时候,首先要进行表单校验
// 使用ajax的方式来进行提交
$.ajax({
type: ‘POST‘,
url: ‘${pageContext.request.contextPath}/login‘,
data: $(‘#userLoginForm‘).serialize(),
dataType: ‘json‘,
success: function(data){
if(data && data.code == 200) {
// 代表登录成功
userLoginDialog.dialog(‘close‘);
$.messager.show({
title:‘提示消息‘,
msg:‘用户登录成功‘,
timeout:5000,
showType:‘slide‘
});
} else {
$.messager.alert(‘提示消息‘,‘登录失败!‘,‘error‘);
}
}
});
});
// 给注册按钮绑定一个点击事件
function regRegisterForm() {
$.ajax({
type: ‘POST‘,
url: ‘${pageContext.request.contextPath}/reg‘,
data: $(‘#userRegForm‘).serialize(),
dataType: ‘json‘,
success: function(data){
if(data && data.code == 200) {
// 代表登录成功
userRegDialog.dialog(‘close‘);
$.messager.show({
title:‘提示消息‘,
msg:‘用户注册成功‘,
timeout:5000,
showType:‘slide‘
});
} else {
$.messager.alert(‘提示消息‘,‘注册失败!‘,‘error‘);
}
}
});
}
</script>
</body>
</html>
以上是关于ssm+easyui+bootstrap+ajax 完成用户的登录和注册的主要内容,如果未能解决你的问题,请参考以下文章
SSM+lucene+bootstrap搭建漂亮的Java博客系统(附博客源码)
bootstrap+Ajax+SSM(maven搭建)表单增删改查
bootstrap+Ajax+SSM(maven搭建)实现增删改查
bootstrap+Ajax+SSM(maven搭建)实现增删改查