Spring MVCAjax模式

1.Spring MVC模式建包格式

2.数据库实体类 加layui实体类

package cn.ps.entity;

import java.util.List;

public class Result {
    private  int code;
    private  String msg;
    private int count;
    private List data;

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public List getData() {
        return data;
    }

    public void setData(List data) {
        this.data = data;
    }
}

3.创建控制层

 package cn.ps.coutroller;


import cn.ps.entity.MySqlUser;
import cn.ps.entity.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import cn.ps.service.EmpService;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.validation.Valid;


 @Controller
public class DataCoutroller {
	@Autowired
	private EmpService service;

	 /**
	  * 多条件搜索
	  *  传参   /emps?stu=1&curPage=2&pageNum=3
	  * @return
	  */
	 @ResponseBody
	@RequestMapping(value = "/emps",method = RequestMethod.GET)
	public Result listEmp(String name, String page, String limit)  {
		try {
			Result pb=service.queryClass(name,page,limit);
			return pb;
		}  catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	 @ResponseBody
	 @RequestMapping(value = "/emp",method = RequestMethod.POST)
	 public Result addEmp(MySqlUser emp)  {
		 Result r=new Result();
			try{
				service.addEmp(emp);
			}catch(Exception e){
				r.setCode(1);
				r.setMsg("新增出错"+e.getMessage());
			}

		 return r;
	 }
	 @ResponseBody
	 @RequestMapping(value = "/emp/{id}",method = RequestMethod.DELETE)
	 public Result deleteEmp(@PathVariable  String id)  {
		 Result r=new Result();
	 	try{
			service.deleteEmp(id);
	 	}catch(Exception e){
			r.setCode(1);
			r.setMsg("删除失败"+e.getMessage());
	 	}
		 return r;
	 }
	 @ResponseBody
	 @RequestMapping(value = "/emp/{id}",method = RequestMethod.PUT)
	 public Result updateEmp(@PathVariable  String id,@Valid  MySqlUser emp)  {
		 Result r=new Result();
		 try{
			 emp.setId(Integer.parseInt(id));
			 service.updateEmp(emp);
		 }catch(Exception e){
			 r.setCode(1);
			 r.setMsg("修改失败"+e.getMessage());
		 }
		 return r;
	 }

}

4.创建service

package cn.ps.service.impl;


import java.util.List;


import cn.ps.entity.Result;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.ps.dao.EmpDao;

import cn.ps.entity.MySqlUser;
import cn.ps.service.EmpService;
import cn.ps.utils.PagerBean;


@Service
public class EmpServiceImpl implements EmpService {
	@Autowired
	private EmpDao dao; 
	public Result queryClass(String name, String curPage, String pageNum) throws Exception{
		//第一次访问 没有当前页
		if(StringUtils.isEmpty(curPage)) {
			curPage="1";
		}
		if(StringUtils.isEmpty(pageNum)) {
			pageNum="10";
		}
		
		//转换成int类型
		int curPageIn=Integer.parseInt(curPage);
		int pageNumIn=Integer.parseInt(pageNum);
		int total=dao.countEmp(name);
		PagerBean<MySqlUser> pd=new PagerBean<MySqlUser>(curPageIn, pageNumIn, total);
		List<MySqlUser> queryClass=dao.queryClass(name,pd.getStartIndex(),pd.getPageNum());
		pd.setData(queryClass);
		Result re=new Result();
		re.setCode(0);
		re.setCount(total);
		re.setData(queryClass);
		return re;
	}

	public void addEmp(MySqlUser emp) {
		dao.addEmp(emp);
	}

	public void deleteEmp(String id) {
		dao.deleteEmp(id);
	}

	public void updateEmp(MySqlUser emp) {
		dao.updateEmp(emp);
	}

}

5.创建数据层

package cn.ps.dao.impl;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

import com.mysql.jdbc.StringUtils;

import cn.ps.dao.EmpDao;
import cn.ps.entity.MySqlUser;



@Repository
public class EmpDaoImpl implements EmpDao {
	@Autowired
	private JdbcTemplate jdbcTemplate;
	public int countEmp(String name) throws SQLException {
		String sql="SELECT count(*) as myCount FROM stu1";
		if(!StringUtils.isNullOrEmpty(name)) {
			sql+=" where name like '%"+name+"%'";
		}
		Map map =jdbcTemplate.queryForMap(sql);
		return Integer.parseInt(map.get("myCount").toString());
	}


	public List<MySqlUser> queryClass(String name,int startIndex,int pageNum) throws Exception {
		String sql="SELECT * FROM stu1";
		if(!StringUtils.isNullOrEmpty(name)) {
			sql+=" where name like '%"+name+"%'";
		}
		sql+=" limit "+startIndex+","+pageNum;
		List<MySqlUser> list=jdbcTemplate.query(sql,new BeanPropertyRowMapper<MySqlUser>(MySqlUser.class));
		return list;
	}
	public void addEmp(MySqlUser emp) {
		String sql="insert into stu1(name,age,eamil,sex,phone) values(?,?,?,?,?)";
		jdbcTemplate.update(sql,emp.getName(),emp.getAge(),emp.getEamil(),emp.getSex(),emp.getPhone());
	}

	public void deleteEmp(String id) {
		String sql="delete from stu1 where id=?";
		jdbcTemplate.update(sql,id);
	}

	public void updateEmp(MySqlUser emp) {
		String sql="update stu1 set name=?,age=?,eamil=?,sex=?,phone=? where id=?";
		jdbcTemplate.update(sql,emp.getName(),emp.getAge(),emp.getEamil(),emp.getSex(),emp.getPhone(),emp.getId());
	}

}

6.创建工具类

分页工具类
package cn.ps.utils;

import java.util.List;
/**
 * 分页帮助类
 *
 * @param <T>
 */
public class PagerBean<T> {
	public void calc() {
		
	}
	/**
	 * 构造方法
	 * @param curPage 当前页
	 * @param pageNum 每页显示的条数
	 * @param total	总条数
	 */
	public PagerBean(int curPage,int pageNum,int total) {
		//计算上一页
		this.prePage=(curPage==1?1:curPage-1);
		//计算总页数
		this.totalPage=(total%pageNum==0?total/pageNum:total/pageNum+1);
		//下一页
		this.nextPage=this.totalPage==0?curPage:(curPage==totalPage?totalPage:curPage+1);
		//当前页的索引
		this.startIndex=(curPage-1)*pageNum;
		
		this.total=total;
		
		this.curPage=curPage;
		this.pageNum=pageNum;
		
	}
	/**
	 * 当前页  查询的默认当前页=1
	 * 页面传递的参数
	 */
	private int curPage;
	/**
	 * 每页显示条数据  默认10条
	 * 页面传递的参数
	 */
	private int pageNum=10;
	/*
	 * 根据当前页计算
	 * curPage=1  prePage=1
	 * curPage>1 prePage=curPage-1
	 * 上一页
	 */
	private int prePage;
	/**
	 * 下一页
	 * curPage=totalPage  nextPage=totalPage
	 * curPage<totalPage nextPage=curPage+1
	 * 如果当前页是1 总页数是2 下一页=1+1
	 */
	private int nextPage;
	/**
	 * 总共有多少条
	 * 数据库查询
	 */
	private int total;
	/**
	 * 总共多少页
	 * 	总条数total/每页显示的条数pageNum
	 * 	total%pageNum==0?total/pageNum:total/pageNum+1
	 */
	private int totalPage;
	
	/**
	 * 装载当前页的数据
	 */
	private List<T> data;
	/**
	 * 开始索引
	 * startIndex=(curPage-1)*pageNum
	 */
	private int startIndex;
	
	
	public int getStartIndex() {
		return startIndex;
	}
	public void setStartIndex(int startIndex) {
		this.startIndex = startIndex;
	}
	public int getCurPage() {
		return curPage;
	}
	public void setCurPage(int curPage) {
		this.curPage = curPage;
	}
	public int getPageNum() {
		return pageNum;
	}
	public void setPageNum(int pageNum) {
		this.pageNum = pageNum;
	}
	public int getPrePage() {
		return prePage;
	}
	public void setPrePage(int prePage) {
		this.prePage = prePage;
	}
	public int getNextPage() {
		return nextPage;
	}
	public void setNextPage(int nextPage) {
		this.nextPage = nextPage;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public List<T> getData() {
		return data;
	}
	public void setData(List<T> data) {
		this.data = data;
	}
	
	
}

7.创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="resources/layui/css/layui.css"/>
    <script src="resources/layui/layui.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        layui.use('form',function () {
            var form=layui.form;
            form.on('submit(myForm)', function(data){
                layui.table.reload('myEmpTable', {
                    url: 'emps'
                    ,where:data.field
                });
                return false;
            });
            form.on('submit(addForm)', function(data){
               $.ajax({
                  url:'emp',
                   dataType:'json',
                   data:data.field,
                   type:'post',
                   success:function (da) {
                       if(da.code==0){
                           layer.close(addwindow);
                           layui.table.reload('myEmpTable', {
                               url: 'emps'
                           });
                       }else{
                           alert(da.msg)
                       }
                   }
               });
                return false;
            });
            form.on('submit(upForm)', function(data){
                data.field["_method"]="put";
                $.ajax({
                    url:'emp/'+data.field.id,
                    dataType:'json',
                    data:data.field,
                    type:'post',
                    success:function (da) {
                        if(da.code==0){
                            layer.close(update);
                            layui.table.reload('myEmpTable', {
                                url: 'emps'
                            });
                        }else{
                            alert(da.msg)
                        }
                    }
                });
                return false;
            });
        });
        layui.use('table', function(){
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#myEmpTable'
                ,height: 312
                ,width:'100%'
                ,url: 'emps' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: '学生ID', width:210, sort: true, fixed: 'left'}
                    ,{field: 'name', title: '学生姓名', width:210}
                    ,{field: 'sex', title: '学生性别', width:210, sort: true}
                    ,{field: 'age', title: '年龄', width:210}
                    ,{field: 'eamil', title: '邮箱', width: 210}
                    ,{field: 'phone', title: '手机号码', width: 210, sort: true}
                    ,{field: 'as', title: '删除操作', width: 210, sort: true ,templet: function(d){
                            return "<button onclick='toDelete("+d.id+")'>删除</button>";
                        }}
                    ,{field: 'acc', title: '修改操作', width: 210, sort: true ,templet: function(d){
                            var str=JSON.stringify(d);
                            //return  '<a href=javascript:toUpdate('+d.id+',"'+d.name+'","'+d.sex+'","'+d.age+'","'+d.phone+'","'+d.eamil+'")>修改</a>';
                            //return "<button onclick=toUpdate('"+d.id+"','"+d.name+"','"+d.sex+"','"+d.age+"','"+d.phone+"','"+d.eamil+"')>修改</button>";
                            return "<button onclick=\"toUpdate()\" data='"+str+"'>修改</button>";
                        }}
                ]]
            });
        });
        var addwindow=null;
        function toAdd() {
            layui.use('layer', function(){
                addwindow=layer.open({
                    type: 1,
                    area: ['500px', '400px'],
                    content:$('#addForm')
                });
            });
        }
        function toDelete(id) {
            $.ajax({
                url:'emp/'+id,
                dataType:'json',
                data:{
                    "_method":"delete"
                },
                type:'post',
                success:function (da) {
                    if(da.code==0){
                        layui.table.reload('myEmpTable', {
                            url: 'emps'
                            ,page: {
                            curr: 1 //重新从第 1 页开始
                            }
                        });
                    }else{
                        alert(da.msg)
                    }
                }
            });
            return false;
        }
        var update=null;
        function toUpdate(da) {
           /* $("#f").val(id);
            $("#a").val(name);
            $("#b").val(sex);
            $("#c").val(age);
            $("#d").val(eamil);
            $("#e").val(phone);*/
           //获取字符串
           var attribute = event.srcElement.getAttribute("data");
           //转换成JSON 对象
           var parse = JSON.parse(attribute);
            layui.use('layer', function(){
                update=layer.open({
                    type: 1,
                    area: ['500px', '400px'],
                    content:$('#upForm')
                });
            });
            layui.form.val("upForm",parse);
        }
    </script>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">学生姓名</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="name"  autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 200px;">
            <button class="layui-btn" lay-submit lay-filter="myForm">查询</button>
            <a href="javascript:toAdd()" class="layui-btn">新增</a>
        </div>
    </div>
</form>
    <table id="myEmpTable" ></table>
</body>
</html>



<!--新增的表单-->
<form  id="addForm" class="layui-form" style="display: none" > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label" >学生姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学生性别</label>
        <div class="layui-input-block">
            <input type="text" name="sex" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学生年龄</label>
        <div class="layui-input-block">
            <input type="text" name="age" lay-verify="number" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="eamil" lay-verify="email"  autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-block">
            <input type="text" name="phone" lay-verify="phone" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--修改的表单-->
<form  id="upForm" class="layui-form" lay-filter="upForm" style="display: none"  > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label" >学生姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input" id="a">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学生性别</label>
        <div class="layui-input-block">
            <input type="text" name="sex" autocomplete="off" class="layui-input" id="b">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学生年龄</label>
        <div class="layui-input-block">
            <input type="text" name="age" lay-verify="number" autocomplete="off" class="layui-input" id="c">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="eamil" lay-verify="email"  autocomplete="off" class="layui-input" id="d">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-block">
            <input type="text" name="phone" lay-verify="phone" autocomplete="off" class="layui-input" id="e">
        </div>
    </div>
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">学生编号</label>
        <div class="layui-input-block">
            <input type="text" name="id"  autocomplete="off" class="layui-input" id="f">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="upForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

8.创建xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
">
        <context:component-scan base-package="cn"></context:component-scan>
        <context:property-placeholder location="classpath:/jdbc.properties"/>
        <bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource">
                <property name="driverClassName" value="${jdbcDriver}"></property>
                <property name="url" value="${jdbcUrl}"></property>
                <property name="username" value="${jdbcUsername}"></property>
                <property name="password" value="${jdbcPassword}"></property>
        </bean>
        <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
                <property name="dataSource" ref="dataSource"></property>
        </bean>
        <!--启用验证-->
        <mvc:annotation-driven>
                <mvc:message-converters>
                        <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
                </mvc:message-converters>
        </mvc:annotation-driven>
        <mvc:default-servlet-handler></mvc:default-servlet-handler>
</beans>

jdbc配置文件
jdbcDriver=com.mysql.jdbc.Driver
jdbcUrl=jdbc:mysql://localhost:3306/unit02
jdbcUsername=root
jdbcPassword=ps123456

web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <!-- 过滤springmvc的请求  将请求字符集修改为UTF-8-->
    <filter>
        <filter-name>fgf</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <!-- 设置请求头-->
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <!--设置请求体-->
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>fgf</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
        <!--
            springmvc 支持 rest风格
        -->
        <filter>
            <filter-name>httpFile</filter-name>
            <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>httpFile</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
        <!--
            中央处理器
        -->
        <servlet>
            <servlet-name>DispatcherServlet</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <load-on-startup>1</load-on-startup>
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>/WEB-INF/springweb.xml</param-value>
            </init-param>
        </servlet>
        <servlet-mapping>
            <servlet-name>DispatcherServlet</servlet-name>
            <url-pattern>/</url-pattern>
        </servlet-mapping>

</web-app>

pox.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>cn.ps</groupId>
    <artifactId>SpringMVCAjax</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <dependencies>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.20.RELEASE</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.5</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>4.3.19.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.39</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-dbcp2</artifactId>
            <version>2.5.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>5.3.6.Final</version>
        </dependency>
    </dependencies>
    <!-- 设定tomcat一些参数  字符集 端口-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <uriEncoding>UTF-8</uriEncoding>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>