ssm+easyui+bootstrap+ajax 完成用戶的登陸和註冊

時間 2020-05-16

標籤 ssm+easyui+bootstrap+ajax ssm easyui bootstrap ajax 完成用戶登陸註冊欄目 Bootstarp 简体版

原文原文鏈接

使用ssm+easyui+bootstrap+ajax 完成用戶的登陸和註冊界面以下：

具體步驟以下：
1.編寫返回的響應信息的bean
package com.edu.bean;javascript

import java.util.HashMap;
import java.util.Map;css

public class Message {
private Integer code ;// 狀態碼 200 表明成功 500 表明失敗
private String msg ;
private Map<String,Object> maps = new HashMap<>() ;html

/**
 * 成功
 * @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;
}

}java

2.編寫控制器
package com.edu.controller;web

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;ajax

/**spring

這是用戶controllerbr/>*/
@Controller
public class CustomerController {br/>@Autowired
private CustomerService customerService;json

/**bootstrap
- 用戶登陸的控制器
- @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();
  }
/**app
- 用戶註冊的控制器
- @param customer
- @returnbr/>*/
  @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;

@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">


<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>