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=root
upass=root
url=jdbc:mysql://localhost:3306/test
driver_Class=com.mysql.jdbc.Driver

initPoolSize=5
maxPoolSize=20

3.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 mapper
        PUBLIC "-//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:

@Controller
public class PersonController {

    @Autowired
    private 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, order
            queryParamsType : "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这个是你要在列表中取的单个id
                ids.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>

最后,附上一个完整截图:



猜你喜欢

转载自blog.csdn.net/desert568/article/details/79142943