超详细的JavaWeb用户的增删改查实现总结

前言

本文是基于单体架构实现的角色的增删改查的功能。前台使用Bootstrap+Ajax+Jsp , 后端使用Spring+SpringMvc+MyBatis进行开发，相信使用过这些技术的小伙伴应该很好的理解以下的内容，也希望看了这篇文章小伙伴们有所收获。

准备工作

后端技术

技术	说明	官网
Spring	Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架。	https://spring.io/
SpringMvc	MVC框架	https://spring.io/projects/spring-boot
MyBatis	持久层框架	https://mybatis.org/mybatis-3/zh/index.html
Druid	数据库连接池	https://github.com/alibaba/druid
log4j	日志框架	https://logging.apache.org/log4j/2.x/

前端技术

Bootstrap	简洁、直观、强悍的前端开发框架	https://www.bootcss.com/
Ajax	前后端交互	https://www.w3school.com.cn/ajax/index.asp
Jsp	模板引擎	https://www.runoob.com/jsp/jsp-intro.html
layer.js	消息提示	http://www.h-ui.net/lib/layer.js.shtml
Modal插件	模态框（Modal）是覆盖在父窗体上的子窗体	https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
jquery.pagination.js	分页插件	http://www.jq22.com/yanshi5697/

角色维护-分页实现

分页前端功能实现

创建外部JavaScript源文件,role.js

在页面 role-page.jsp引入role.js文件

<script type="text/javascript" src="script/my-role.js"></script>

初始化全局函数

分页实现初始化全局函数，每页的条数，页码，模糊查询的关键词

//初始化全局变量
function initGlobalVariable() {
   
    window.pageSize = 5; //每页的条数
    window.pageNum = 1;  //页码
    window.keyword = ""; //关键词
}

声明分页函数

//给服务器发送请求获取分页数据（pageInfo），并在页面上显示分页效果（主体、页码导航条）
function showPage() {
   

    // 给服务器发送请求获取分页数据：PageInfo
    var pageInfo = getPageInfo();

    // 在页面上的表格中tbody标签内显示分页的主体数据
    generateTableBody(pageInfo);

    // 在页面上的表格中tfoot标签内显示分页的页码导航条
    initPagination(pageInfo);
}

获取分页数据

function getPageInfo() {
   

    // 以同步请求方式调用$.ajax()函数并获取返回值（返回值包含全部响应数据）
    var ajaxResult = $.ajax({
   
        "url": "role/search/by/keyword.action",
        "type": "post",
        "data": {
   
            "pageNum": (window.pageNum == undefined) ? 1 : window.pageNum,
            "pageSize": (window.pageSize == undefined) ? 5 : window.pageSize,
            "keyword": (window.keyword == undefined) ? "" : window.keyword
        },
        "dataType": "json",
        "async": false	// 为了保证getPageInfo()函数能够在Ajax请求拿到响应后获取PageInfo，需要设置为同步操作
    });
    
    // 从全部响应数据中获取JSON格式的响应体数据
    var resultEntity = ajaxResult.responseJSON;

    // 从响应体数据中获取result，判断当前请求是否成功
    var result = resultEntity.result;

    // 如果成功获取PageInfo
    if (result == "SUCCESS") {
   
        return resultEntity.data;
    }

    if (result == "FAILED") {
   
        layer.msg(resultEntity.message);
    }

    return null;
}

使用PageInfo数据在tbody标签内显示分页数据

function generateTableBody(pageInfo) {
   
    // 执行所有操作前先清空
    $("#roleTableBody").empty();   //这个对应页面的 <tbody id="roleTableBody"> </tbody>
    // 获取数据集合
    var list = pageInfo.list;

    // 判断list是否有效
    if (list == null || list.length == 0) {
   
        $("#roleTableBody").append("<tr><td colspan='4' style='text-align:center;'>没有查询到数据！</td></tr>");
        return;
    }

    for (var i = 0; i < list.length; i++) {
   

        var role = list[i];

        var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
        var pencilBtn = "<button type='button' id='roleTableBody'  roleid='" + role.id + "' class='btn btn-primary btn-xs  editBtn'><i class=' glyphicon glyphicon-pencil'></i></button>";
        var removeBtn = "<button type='button'   roleid='" + role.id + "'  class='btn btn-danger btn-xs  removeBtn'><i class=' glyphicon glyphicon-remove'></i></button>";

        var numberTd = "<td>" + (i + 1) + "</td>";
        var checkBoxTd = "<td><input class='itemBox' roleid='" + role.id + "' type='checkbox'></td>";
        var roleNameTd = "<td>" + role.name + "</td>";
        var btnTd = "<td>" + checkBtn + " " + pencilBtn + " " + removeBtn + "</td>";

        var tr = "<tr>" + numberTd + checkBoxTd + roleNameTd + btnTd + "</tr>";

        // 将前面拼好的HTML代码追加到#roleTableBody中
        $("#roleTableBody").append(tr);
    }
}

声明函数封装导航条初始化操作

function initPagination(pageInfo) {
   

    // 声明变量存储分页导航条显示时的属性设置
    var paginationProperties = {
   
        num_edge_entries: 3,			//边缘页数
        num_display_entries: 5,		//主体页数
        callback: pageselectCallback,	//回调函数
        items_per_page: window.pageSize,	//每页显示数据数量，就是pageSize
        current_page: (window.pageNum - 1),//当前页页码
        prev_text: "上一页",			//上一页文本
        next_text: "下一页"			//下一页文本
    };

    // 显示分页导航条 <div id="Pagination" class="pagination"> <!-- 这里显示分页 --> </div>
    $("#Pagination").pagination(pageInfo.total, paginationProperties);
}

在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面

function pageselectCallback(pageIndex, jq) {
   

    // 将全局变量中的pageNum修改为最新值
    // pageIndex从0开始，pageNum从1开始
    window.pageNum = pageIndex + 1;

    // 调用分页函数重新执行分页
    showPage();

    return false;
}

页面初始化,就是我们点击角色维护页面需要加载的内容

$(function(){
   
	
	// 调用分页参数初始化方法
	initGlobalVariable();
	// 执行分页
	showPage();
});

关键词查询功能

在点击“查询”按钮后，获取文本框中填写的keyword值，赋值给全局变量keyword，调用showPage()函数即可。

//关键字查询实现
        $("#searchBtn").click(function () {
   
            //获取关键字查询的值
            var keywordInput = $.trim($("#keywordInput").val());
            /*if (keywordInput==null || keywordInput==""){
            	layer.msg("请输入关键词");
            	return;
			}*/
            window.keyword = keywordInput;
            //执行查询操作
            showPage();

        });

分页后端实现

点击角色维护加载页面数据两种思路：

第一种是我们请求后台把查询到的数据放到Model,前台遍历把数据展示出来。

第二种是我们请求后台把查询到的数据当PageInfo，然后动态的拼接把数据展示到页面上。（我们采用第二种）

Controller方法的实现

@ResponseBody
    @RequestMapping("/role/search/by/keyword")
    public ResultEntity<PageInfo<Role>> search(
            @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
            @RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
            @RequestParam(value = "keyword", defaultValue = "") String keyword) {
   

        // 1.查询得到PageInfo对象
        PageInfo<Role> pageInfo = roleService.queryForKeywordWithPage(pageNum, pageSize, keyword);

        // 2.封装结果对象返回
        return ResultEntity.successWithData(pageInfo);
    }

Service方法的实现

public PageInfo<Role> queryForKeywordWithPage(Integer pageNum, Integer pageSize, String keyword) {
   
		// 1.开启分页功能
		PageHelper.startPage(pageNum, pageSize);

		// 2.执行查询
		List<Role> list = roleMapper.selectForKeywordSearch(keyword);

		// 3.封装为PageInfo对象
		return new PageInfo<Role>