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;

/**
- @return br/>*/
  @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();
  }
/**
- @return br/>*/
  @ResponseBody
  @RequestMapping("/reg")
  public Message reg(Customer customer) {
  try {
  customerService.save(customer);
  return Message.success();
  } catch (Exception e) {
  e.printStackTrace();
  return Message.error();
  }
  }
  }

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;

@Service br/>@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">


<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 完成用户的登录和注册

猜你喜欢