SpringBoot+postgrepsql+bootstrap进行简单用户管理系统的开发【系列文章】（三）----整合前端页面
一、引入bootstrap相关插件
bootstrap依赖于jquery，所以必须引入jquery，并且要在bootstrap之前引入。如下所示，前端页面引擎选择的是springboot推荐的较新的themyleaf，具体详细信息，请网友自己查阅相关资料。按照springboot官方说法，该引擎优于jsp页面引擎。同时，该页面还引入了bootstrap的分页插件工具，bootstrap-table插件，用来对后台数据进行分页显示。
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
<link rel="stylesheet" th:href="@{/css/bootstrap-table.css}">
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table-zh-CN.js}"></script>二、编写前端页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>用户管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
<link rel="stylesheet" th:href="@{/css/bootstrap-table.css}">
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript">
$(function () {
$('#mytable').bootstrapTable({
url: 'http://localhost:8080/user/getPage',
method: 'post',
contentType: "application/x-www-form-urlencoded",//method为post时必须加上这个,否则接收不到参数
dataType: 'json',
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageSize: params.limit, //每页多少条数据
pageNumber: params.offset, //从第几条数据开始
//searchText: params.search //搜索框
};
return param;
},
cache: false,
onlyInfoPagination: false,
//height: 560,
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
pagination: true, //是否显示分页（*）
maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
smartDisplay: false,
//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true, //设置为 true启用 全匹配搜索，否则为模糊搜索
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "id", //每一行的唯一标识，一般为主键列\
sortStable: true,
columns: [
{checkbox: true},
//{field:'id',title:'ID'},
{field: 'name', title: '姓名'},
{field: 'gender', title: '性别'},
{field: 'address', title: '地址'},
{field: 'email', title: '邮箱'},
{
field: 'id', title: '操作',
// width: 120,
align: 'center',
valign: 'middle',
events: operateEvents,
formatter: actionFormatter//表格中操作按钮
},
]
});
});
window.operateEvents = {
"click #TableEditor": function (ev, value, row, index) {
$("#editUserModal").modal();
$('.modal-body input[name = name]').val(row.name);
$('.modal-body input[name = gender]').val(row.gender);
$('.modal-body input[name = address]').val(row.address);
$('.modal-body input[name = email]').val(row.email);
$('.modal-body input[name = id]').val(row.id);
}
}
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<button id='TableEditor'>编辑</button> <button onclick='deleteById(" +
id + ")' >删除</button>";
return result;
}
//删除
function deleteById(th) {
$.ajax({
type: "post",
url: "http://localhost:8080/user/deleteUserById?id=" + th,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
if (data == 1) {
alert("删除成功！");
$("#mytable").bootstrapTable('refresh');
} else {
alert("删除失败，请重试");
}
}
});
}
//搜索用户
function searchuser() {
var name = $("#searchtext").val();
$("#mytable").bootstrapTable('refresh', {url: "http://localhost:8080/user/getUserByName?name=" + name});
}
//增加用户
function adduser() {
$('#addUserModal').modal();
}
//增加用户提交数据
function addusersubmit() {
var name = $('#name').val();
var gender = $('#gender').val();
var address = $("#address").val();
var email = $("#email").val();
$.ajax({
type: "post",
url:
"http://localhost:8080/user/addUser?name=" + name + "&gender=" + gender + "&address=" + address +
"&email=" + email,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
if (data == 1) {
alert("增加信息成功！");
$("#mytable").bootstrapTable('refresh');
$('#addUserModal').hidden();
} else {
alert("增加失败失败，请重试");
}
}
});
}
//修改信息提交
function editusersubmit() {
var name = $('#editname').val();
var gender = $('#editgender').val();
var address = $("#editaddress").val();
var email = $("#editemail").val();
var id = $("#editid").val();
$.ajax({
type: "post",
url:
"http://localhost:8080/user/updateById?name=" + name + "&gender=" + gender + "&address=" +
address + "&email=" + email + "&id=" + id,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
if (data == 1) {
alert("信息修改成功！");
$("#mytable").bootstrapTable('refresh');
$('#addUserModal').hidden();
} else {
alert("信息修改失败，请重试");
}
}
});
}
</script>
</head>
<body>
<h1 align="center">用户管理</h1>
<br>
<div id="content">
<div><label>请输入用户名：</label><input type="text" id="searchtext">
<button id="searchusers" onclick="searchuser()"
type="button"
class="btn btn-primary">搜索
</button>    
 
<button
id="addUser" onclick="adduser()" type="button" class="btn btn-primary">增加用户
</button>
</div>
<table id="mytable"></table>
</div>
<div id="toolbar"></div>
<!--//增加模态框-->
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="name">性别</label>
<input type="text" name="gender" id="gender" class="form-control">
</div>
<div class="form-group">
<label for="gender">地址</label>
<input type="text" name="address" id="address" class="form-control">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="text" name="email" id="email" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class=""
aria-hidden="true"></span>关闭
</button>
<button type="button" id="addsubmit" onclick="addusersubmit()" class="btn btn-primary"
data-dismiss="modal"><span
class=""
aria-hidden="true"></span>保存
</button>
</div>
</div>
</div>
</div>
<!--//编辑模态框-->
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
aria-hidden="true">
<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="editModalLabel">编辑</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" name="name" id="editname" class="form-control">
</div>
<div class="form-group">
<label for="name">性别</label>
<input type="text" name="gender" id="editgender" class="form-control">
</div>
<div class="form-group">
<label for="gender">地址</label>
<input type="text" name="address" id="editaddress" class="form-control">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="text" name="email" id="editemail" class="form-control">
</div>
<div class="form-group">
<label for="id">用户ID</label>
<input type="text" name="id" id="editid" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class=""
aria-hidden="true"></span>关闭
</button>
<button type="button" id="editsubmit" onclick="editusersubmit()" class="btn btn-primary"
data-dismiss="modal"><span
class=""
aria-hidden="true"></span>保存
</button>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
