Bootstrap+spring+springmvc+mybatis实现基本的增删改查（源码）

做个小列子，首先我这里先将spring+springmvc+mybatis整合好：首先，给大家看一下我项目的构造：1.第一步：我先将我项目中要是用的所有依赖导入： <!--Junit--><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><!--MyBatis--><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.4.5</version></dependency><!--MySQL--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.43</version></dependency><!--spring-webmvc包括核心包，所以只要导入这一个就好了--><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>4.3.3.RELEASE</version></dependency><!--C3p0--><dependency><groupId>com.mchange</groupId><artifactId>c3p0</artifactId><version>0.9.5.1</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>4.3.10.RELEASE</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>1.3.1</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.1</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.1</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.1</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.0</version><scope>provided</scope></dependency><!-- json数据 使springMVC可以返回json值 ,视情况添加--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.30</version></dependency>2.关于ssm的整合我这里就不细说了，之前的博客就讲了关于 spring+springmvc+mybatis的整合（http://blog.csdn.net/desert568/article/details/79082067），所以我这里就直接上代码：我的数据库连接池：db.properties:uname=rootupass=rooturl=jdbc:mysql://localhost:3306/testdriver_Class=com.mysql.jdbc.DriverinitPoolSize=5maxPoolSize=203.ApplicationContext.xml配置文件：<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"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"> <!--加载db.properties--><context:property-placeholder location="classpath:db.properties"></context:property-placeholder><!--c3p0-数据源--><bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"><property name="user" value="${uname}"></property><property name="password" value="${upass}"></property><property name="jdbcUrl" value="${url}"></property><property name="driverClass" value="${driver_Class}"></property><property name="initialPoolSize" value="${initPoolSize}"></property><property name="maxPoolSize" value="${maxPoolSize}"></property></bean><!--配置SQLSessionFactory--><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><property name="dataSource" ref="dataSource"></property><property name="configLocation" value="classpath:mybatis-config"></property><property name="mapperLocations" value="classpath:com/desert/entity/*.xml"></property></bean><bean id="scannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage" value="com.desert.dao"></property></bean></beans>

4.然后再是我的springmvc配置文件：

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"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="com.desert.controller"></context:component-scan><!--视图解析器--><bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"><!--前缀--><property name="prefix" value="/"></property><!--后缀--><property name="suffix" value=".jsp"></property></bean><mvc:annotation-driven></mvc:annotation-driven></beans>

5.web.xml：<!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name>Archetype Created Web Application</display-name><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><servlet><servlet-name>springMVC</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:springmvc.xml</param-value></init-param></servlet><servlet-mapping><servlet-name>springMVC</servlet-name><url-pattern>*.action</url-pattern></servlet-mapping></web-app>

6.person实体类：

private String pname;private int pid;private int page;

7.我的PersonDao接口：

public interface IPerson01 {public List<Person> getallPerson(Map map);public List<Person> getallPersonByPname(Map map);public Person getPersonById(int pid);public void delperson(int pid);public void addperson(Person person);public void updateperson(Person person);}

8.Person.xml配置文件：

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.desert.dao.IPerson01"><select id="getPersonById" parameterType="int" resultType="com.desert.entity.Person">select * from person where pid=#{pid}</select><select id="getallPerson" resultType="com.desert.entity.Person" parameterType="map">select * from person limit #{offset},#{pageSize}</select><select id="getallPersonByPname" resultType="com.desert.entity.Person" parameterType="map">select * from person p<where><if test="pname != null">and p.pname like '%${pname}%'</if><if test="page != null">and p.page =#{page}</if></where>limit #{offset},#{pageSize}</select><delete id="delperson" parameterType="int">delete from person where pid=#{pid}</delete><insert id="addperson" parameterType="com.desert.entity.Person">insert into person(pname,page)values(#{pname},#{page})</insert><update id="updateperson" parameterType="com.desert.entity.Person">update person set pname =#{pname}, page =#{page} where pid=#{pid}</update></mapper>

9.然后再是我的PersonController：@Controllerpublic class PersonController {@Autowiredprivate IPerson01 iPerson01;@RequestMapping("getPerson")public String getPerson(){Person person=iPerson01.getPersonById(1);System.out.println(person);return "success";}@RequestMapping("getsecondall")public void getsecondall(HttpServletResponse resp, HttpServletRequest request) throws IOException {//得到客户端传递的页码和每页记录数，并转换成int类型int pageSize = Integer.parseInt(request.getParameter("pageSize"));int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));

        //查询参数String pname = request.getParameter("orderNum");String age=request.getParameter("page");int offset=(pageNumber-1)*pageSize;  //当前起始页//定义map集合：Map mp=new HashMap();//分页：mp.put("offset",offset);mp.put("pageSize",pageSize);if(age.length()>0){int page=Integer.parseInt(age);mp.put("page",page);}if(pname.length()>0){mp.put("pname",pname);}//分页：List<Person> la = iPerson01.getallPersonByPname(mp);// System.out.println(mp.get("page")+","+mp.get("pname"));Map<String, Object> map = new HashMap<String, Object>();map.put("total",la.size());map.put("rows",la);PrintWriter out=resp.getWriter();String s= JSON.toJSONString(map);// System.out.println(s);out.write(s);out.flush();out.close();}//删除：@RequestMapping("delPerson")public void delPerson(HttpServletResponse resp, HttpServletRequest request) throws IOException {//得到传过来的字符串：String str=request.getParameter("str");//将字符串转化为数组：JSONArray jsons=JSONArray.parseArray(str);for (Object object : jsons) {int id=Integer.parseInt(object.toString());System.out.println(id);iPerson01.delperson(id);}//返回：PrintWriter out=resp.getWriter();out.write("1");out.flush();out.close();}//添加：@RequestMapping("addPerson")public void addPerson(HttpServletResponse resp, HttpServletRequest request) throws IOException {//得到传过来的字符串：String str=request.getParameter("str");//将字符串转化为数组：//将str转化为Area对象：Person person=JSON.parseObject(str, Person.class);System.out.println(person);//添加：iPerson01.addperson(person);//返回：PrintWriter out=resp.getWriter();out.write("1");out.flush();out.close();}//修改：@RequestMapping("updatePerson")public void updatePerson(HttpServletResponse resp, HttpServletRequest request) throws IOException {//得到传过来的字符串：String str=request.getParameter("str");//将字符串转化为数组：//将str转化为Area对象：Person person=JSON.parseObject(str, Person.class);//添加：iPerson01.updateperson(person);//返回：PrintWriter out=resp.getWriter();out.write("1");out.flush();out.close();}}

10.最后，就是我的界面，second.jsp：

我这里的css和js都是直接用网上的，所以联网就可以，不用去下载什么js文件了：

<!-- 引入bootstrap样式 --><link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"><!-- 引入bootstrap-table样式 --><link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"><!-- jquery --><script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><!-- bootstrap-table.min.js --><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script><!-- 引入中文语言包 --><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

<html><head><title>Title</title></head><body><script type="text/javascript">function initTable() {//初始化表格,动态从服务器加载数据$("#cusTable").bootstrapTable({method: "get",  //使用get请求到服务器获取数据url: "/getsecondall.action", //获取数据的Servlet地址toolbar: '#toolbar',                //工具按钮用哪个容器pagination: true, //启动分页pageSize: 10,  //每页显示的记录数pageNumber:1, //当前第几页pageList: [5, 10, 15, 20, 25],  //记录数可选列表search: false,  //是否启用查询showColumns: true,  //显示下拉框勾选要显示的列showRefresh: true,  //显示刷新按钮sidePagination: "server", //表示服务端请求height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度uniqueId: "pid",                     //每一行的唯一标识，一般为主键列showToggle:true,                    //是否显示详细视图和列表视图的切换按钮cardView: false,                    //是否显示详细视图detailView: false,                   //是否显示父子表minimumCountColumns: 2,             //最少允许的列数clickToSelect: true,                //是否启用点击选中行//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder//设置为limit可以获取limit, offset, search, sort, orderqueryParamsType : "undefined",queryParams: function queryParams(params) {   //设置查询参数var param = {pageNumber: params.pageNumber,pageSize: params.pageSize,orderNum : $("#txt_search_departmentname").val(),page:$("#txt_search_statu").val()};return param;},columns: [{checkbox: true}, {field: 'pname',title: '名称'}, {field: 'page',title: '年龄'}, {field: 'pid',title: 'id'}, ]});}$(document).ready(function () {//调用函数，初始化表格initTable();//当点击查询按钮的时候执行$("#btn_query").bind("click", initTable);//删除$('#btn_delete').on("click", function () {var row=$.map($("#cusTable").bootstrapTable('getSelections'),function(row){return row ;});var ids=[];for (var i = 0; i < row.length; i++) {//获取自定义table 的中的checkbox值var id=row[i].pid;   //OTRECORDID这个是你要在列表中取的单个idids.push(id); //然后把单个id循环放到ids的数组中}var str=JSON.stringify(ids);//批量删除：$.ajax({type:"POST",url:"/delPerson.action",data:"str="+str,success:function(msg){// alert("返回的是："+msg);if(msg==1){// alert("删除成功！");$('#cusTable').bootstrapTable('refresh');}else{alert("删除失败！");}}});});//添加：$('#btn_add').on("click", function () {$('#myModal').modal();});//修改$('#btn_edit').on("click", function () {var row=$.map($("#cusTable").bootstrapTable('getSelections'),function(row){return row ;});if(row.length==1){for (var i = 0; i < row.length; i++) {alert(row[i].pid);//打开弹出框：$('#updatemyModal').modal();$('#updatepname').val(row[i].pname);$('#updatepage').val(row[i].page);}}});})//提交添加：function mya(){var addpname=$('#addpname').val();var addpage=$('#addpage').val();//实例化一个对象：var person={"pname":addpname,"page":addpage};//将对象转换成字符串var str=JSON.stringify(person);alert(str);$.ajax({type:"POST" ,url:"/addPerson.action",data:"str="+str,success:function(msg){if(msg==1){$('#cusTable').bootstrapTable('refresh');$('#ff_p').form('clear');}else{alert('添加失败');}}});}//修改提交：function myb(){var addpname=$('#updatepname').val();var addpage=$('#updatepage').val();//实例化一个对象：var person={"pname":addpname,"page":addpage};//将对象转换成字符串var str=JSON.stringify(person);$.ajax({type:"POST" ,url:"/addPerson.action",data:"str="+str,success:function(msg){if(msg==1){$('#cusTable').bootstrapTable('refresh');}else{alert('修改失败');}}});}</script><div class="panel-body" style="padding-bottom:0px;"><div class="panel panel-default"><div class="panel-heading">查询条件</div><div class="panel-body"><form id="formSearch" class="form-horizontal"><div class="form-group" style="margin-top:15px"><label class="control-label col-sm-1" for="txt_search_departmentname">姓名</label><div class="col-sm-3"><input type="text" class="form-control" id="txt_search_departmentname"></div><label class="control-label col-sm-1" for="txt_search_statu">年龄</label><div class="col-sm-3"><input type="text" class="form-control" id="txt_search_statu"></div><div class="col-sm-4" style="text-align:left;"><button type="button" onclick="mya()" id="btn_query" class="btn btn-primary">查询</button></div></div></form></div></div><div id="toolbar" class="btn-group"><button id="btn_add" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button><button id="btn_edit" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button><button id="btn_delete" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button></div><table class="table table-hover" id="cusTable"></table></div><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">新增</h4></div><div class="modal-body"><form id="ff_p" method="post"><div class="form-group"><label for="addpname">姓名</label><input type="text" name="namepname" class="form-control" id="addpname" placeholder="姓名"></div><div class="form-group"><label for="addpage">年龄</label><input type="text" name="namepid" class="form-control" id="addpage" placeholder="年龄"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button><button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal" onclick="mya()"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true" ></span>保存</button></div></form></div></div></div></div><div class="modal fade" id="updatemyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="updatemyModalLabel">修改</h4></div><div class="modal-body"><form id="updateff_p" method="post"><div class="form-group"><label for="updatepname">姓名</label><input type="text" name="namepname" class="form-control" id="updatepname" placeholder="姓名"></div><div class="form-group"><label for="updatepage">年龄</label><input type="text" name="namepid" class="form-control" id="updatepage" placeholder="年龄"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button><button type="button" id="btn_update" class="btn btn-primary" data-dismiss="modal" onclick="myb()"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true" ></span>保存</button></div></form></div></div></div></div></body></html>

最后，附上一个完整截图：