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

前言

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

准备工作

后端技术

技术

说明

官网

Spring

Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架。

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文件

初始化全局函数

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

//初始化全局变量

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();   //这个对应页面的 

 

// 获取数据集合

var list = pageInfo.list;

// 判断list是否有效

if (list == null || list.length == 0) {

$("#roleTableBody").append("

没有查询到数据！");

return;

}

for (var i = 0; i 

var role = list[i];

var checkBtn = "";

var pencilBtn = "";

var removeBtn = "";

var numberTd = "

" + (i + 1) + "";

var checkBoxTd = "

";

var roleNameTd = "

" + role.name + "";

var btnTd = "

" + checkBtn + " " + pencilBtn + " " + removeBtn + "";

var tr = "

" + numberTd + checkBoxTd + roleNameTd + btnTd + "";

// 将前面拼好的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: "下一页"            //下一页文本

};

// 显示分页导航条 

$("#Pagination").pagination(pageInfo.total, paginationProperties);

}

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

function pageselectCallback(pageIndex, jq){

// 将全局变量中的pageNum修改为最新值

// pageIndex从0开始，pageNu