SSM 整合实现增删改查、PageHelper 实现分页

最新推荐文章于 2022-09-20 07:42:32 发布

原创

最新推荐文章于 2022-09-20 07:42:32 发布 · 6.2k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#分页 #spring mvc #spring

一、前言

1、想法

这个SSM（Spring+SpringMVC+MyBatis，基于Maven）实现的 CRUD 测试是之前写的，一直留着想等有空再使用点 BootStrap / EasyUI / ElementUI 对界面（现在纯 HTML）进行优化，却一直没有时间。不过后来想了想，这样代码更加注重后台业务逻辑，更加简单易读。

这里页面虽然使用了 JSP，并没有使用 JSP 的 EL、JSTL 库，全程使用 jQuery 的 Ajax 以 JSON 的数据格式进行交互

后面有时间会实现 vue+ssm 的整合来替代简陋的 JSP 页面，并前后端分离

2、运行环境

①编译器：eclipse
②服务器：Tomcat7
③JDK：1.7
④数据库：MySQL

3、框架、工具

①前端： jQuery
②后台：Spring、SpringMVC、MyBatis、Maven

二、功能介绍

1、jsonlist.jsp 主界面：

相当简单，以后的 CRUD 都在这个页面上

这里写图片描述

2、分页功能：

在上述页面中，例如点击>>显示下一页，效果如下：红色框表示变化的地方

这里写图片描述

3、编辑功能：

点击上图第一行的编辑，就会显示在下方的编辑区
这里写图片描述
修改密码为123后，点击编辑，刷新页面，改变web5为123

4、删除功能：

点击id=6的一行的删除链接，即刚才修改的那行，id=6就不见了
这里写图片描述

5、增加功能：

这里有个细节，就是你输入的用户名是之前就有的话，会提示你的名字不可用
这里写图片描述

正确输入后，点击新增
这里写图片描述

会自动跳到最后一页，可以看刚刚正确输入的信息
这里写图片描述

至此 CRUD 该演示的应都演示完了，下面是实现的代码

三、代码实现

1、代码结构

这里要注意，绿色框中的内容都不是我自己手动编写加入的，是使用 MyBatis 的逆向工程自动生成的，这里也就没有必要列出代码了，同时代码的关键地方都清除注释了，应该没有任何阅读障碍

逆向工程具体使用方法可以去参考之前的文章

MyBatis 使用逆向工程自动生成项目的实体层、dao层

逆向工程使用的文件为红色框中的文件

这里写图片描述

2、主界面 jsonlist.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSON</title>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
    src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<link
    href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
    rel="stylesheet">
<script
    src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<style type="text/css">
                  table{
                        border-collapse: collapse;
                  }
                  a{
    
    text-decoration:none}
</style>
<body>
    <h2>Ajax 纯天然无污染</h2>
    <table border="1" width="40%" align="center" >
        <tr>
            <th>Id</th>
            <th>Username</th>
            <th>Password</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
        <tbody id="tableBody"></tbody>
    </table>

    <div>
        <h4 id="pageShow"></h4>
    </div>

    <h4>连续显示的页码</h4>
    <div id="choose"></div>

    <hr>
    用户名：
    <input type="text" id="username"> 密码：
    <input type="text" id="password">

    <button id="add">新增</button>
    <div id="message"></div>

    <hr>
    id:
    <input type="text" id="ediid" disabled="true">
    用户名：
    <input type="text" id="ediname" disabled="true">
    密码：
    <input type="text" id="ediword" >
    <button id="edi">编辑</button>

    <script type="text/javascript">
        //注意是 change函数,这也是即时反馈的原因
        $('#username').change(function() {
    
    
            var un = $('#username').val();
            $.ajax({
                url : "${APP_PATH}/checkuser",//注意里边还可以嵌套$
                type : "POST",
                data : "userName=" + un,
                //data : userName=un,注意是字符串
                success : function(result) {
    
    
                    $('#message').empty();
                    $('#message').append(result.msg);
                }
            });
        })
        //点击增加按钮的事件
        $('#add').click(function() {
    
    
            var username = $('#username').val();
            var password = $('#password').val();
            $.ajax({
                url : "${APP_PATH}/jsonusers",
                type : "POST",
                data : "password=" + password + "&username=" + username,//注意格式
                //data:$("form").serialize(),这种写法在表单足够复杂是有优势的，目前还存在问题
                success : function(result) {
    
    
                    //利用插件设置的合理性，直接暴力到最后一页
                    //mybatis-config.xml:<property name="reasonable" value="true" />
                    toPage(999);
                }
            });
        });

        $('#edi').click(function(){
    
    
            var ediid=$('#ediid').val();
            var ediname=$('#ediname').val();
            var ediword=$('#ediword').val();
            $.ajax({
                url:"${APP_PATH}/ediUser",
                type:"POST",
                data:"id="+ediid+"&username="+ediname+"&password="+ediword,
                success:function(result){
    
    
                    alert("修改成功");
                }
            });
        });

        //每次打开本页面的时候，先前往第一页
        $(function() {
    
    
            toPage(1);
        });
        //指定前往页
        function toPage(pn) {
    
    
            $.ajax({
                url : "${APP_PATH}/jsonusers",
                type : "GET",
                data : "pn=" + pn,
                success : function(result) {
    
    
                    //下面的的函数都是append标签进去的，每次先情况之前的
                    $('#tableBody').empty();
                    $('#pageShow').empty();
                    $('#choose').empty();
                    show(result);
                    page(result);
                    choice(result);
                }
            });
        }

        //删除链接绑定事件
        function delUser(id) {