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>