ajax和ssm添加用户,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 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 getMaps() {

return maps;

}

public void setMaps(Map 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;

/**

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;

@Override

public void save(Customer customer) {

customerMapper.insertSelective(customer);

}

}

5.编写mapper

使用反向引擎生成的mapper

6.编写页面

Title

后台登录

---

用户名

密码

用户登录

用户注册

用户注册界面

---

用户名

密码

地址

生日

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‘);

}

}

});

}