撸完代码，成功运行的那一刻，激动、兴奋、高兴地点了个外卖，，琢磨着要记录下来遇到的坑，但是突然发现。不知道该写什么了。。那就先写几个记忆比较深刻的坑，记录下来提醒自己，以及帮助遇到同样问题的旁友
前面已经配置好其他环境，现在就是在iframe中使用BootStrapTable
用户管理页面：增加，批量删除，修改，分页，修改是使用模态框获取一行数据
爬爬遇到的坑
1、使用BootStrapTable传递到后台时，分页时，queryParam方法传递pageNumber和pageSize传递到后台死活传不过去，找了好久，
method:"POST",
//极为重要，缺失无法执行queryParams，传递page参数
contentType : "application/x-www-form-urlencoded",
dataType:"json",
url:'/user/pageInfo',
queryParams:queryParam,
pagination:true,//显示分页条：页码，条数等
striped:true,//隔行变色
pageNumber:1,//首页页码
pageSize:10,//分页，页面数据条数method:"POST",
//极为重要，缺失无法执行queryParams，传递page参数
contentType : "application/x-www-form-urlencoded",
dataType:"json",
url:'/user/pageInfo',
queryParams:queryParam,
pagination:true,//显示分页条：页码，条数等
striped:true,//隔行变色
pageNumber:1,//首页页码
pageSize:10,//分页，页面数据条数加上这句
contentType : "application/x-www-form-urlencoded",就搞定了，这是我的情况。。
2、BootStrapTable获取一个表单中填入的值
var param = $("#addUserForm").serializeArray();BootStrapTable获取选中一行数据
var rows = $("#dataGrid").bootstrapTable('getSelections');3、获取选中一行的数据到模态框中
//获取选中行的数据
var rows = $("#dataGrid").bootstrapTable('getSelections');
if(rows.length!=1){
document.getElementById("tipContent").innerText="请选择一行数据";
$("#Tip").modal('show');
}
else{
var row = rows[0];
$('#editId').val(row.id);
$('#editAccount').val(row.account);
$('#editPassword').val(row.password);
$('#editName').val(row.name);
$('#editSex').val(row.sex);
$('#editEmail').val(row.email);
$('#editPhone').val(row.phone);
$('#editStates').val(row.states);
$('#editCreated_at').val(row.created_at);
$("#editModal").modal("show");
}//获取选中行的数据
var rows = $("#dataGrid").bootstrapTable('getSelections');
if(rows.length!=1){
document.getElementById("tipContent").innerText="请选择一行数据";
$("#Tip").modal('show');
}
else{
var row = rows[0];
$('#editId').val(row.id);
$('#editAccount').val(row.account);
$('#editPassword').val(row.password);
$('#editName').val(row.name);
$('#editSex').val(row.sex);
$('#editEmail').val(row.email);
$('#editPhone').val(row.phone);
$('#editStates').val(row.states);
$('#editCreated_at').val(row.created_at);
$("#editModal").modal("show");
}#editId是模态框里面input的id，row.id中的id是模态框一个input中的name属性。4、后台传递从数据库查到的数据需要转为json
List<User> users =userService.getUserList();
int total = users.size();
PageHelper.startPage(pageNumber,pageSize);
List<User> pageInfo=userService.getUserList();
JSONObject result = new JSONObject();
result.put("rows",pageInfo);
result.put("total",total);
System.out.println(result.toJSONString());
return result.toJSONString(); int total = users.size();
PageHelper.startPage(pageNumber,pageSize);
List<User> pageInfo=userService.getUserList();
JSONObject result = new JSONObject();
result.put("rows",pageInfo);
result.put("total",total);
System.out.println(result.toJSONString());
return result.toJSONString();导入import com.alibaba.fastjson.JSONObject;
5、批量删除无非存入多个id，到后台循环调用删除。
function deleteUser(){
var rows = $("#dataGrid").bootstrapTable("getSelections");
var ids = [];
var len = rows.length;
debugger;
for(var i=0;i<len;i++){
ids.push(rows[i].id);
}
debugger;
$.ajax({
url:"/user/deleteUser",
dataType:"json",
traditional: true,//属性在这里设置
method:"post",
data:{
"ids":ids
},
success:function(data){
document.getElementById("tipContent").innerText="删除成功";
$("#Tip").modal('show');
$("#dataGrid").bootstrapTable("refresh");
},
error:function(){
document.getElementById("tipContent").innerText="删除失败";
$("#Tip").modal('show');
}
});
}后台获取ajax传的数组
String[] list=request.getParameterValues("ids");
6、SpringBoot中templates使用thymeleaf时，<,>都报错，使用了<，用了for，最后还是放到了别的包下面。这样在html里面就不会使用<,>
就记得这么些了。。
贴代码：index.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="back/header">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<section class="content-header">
<h1>用户管理</h1>
</section>
<section class="content table-content">
<form class="form-inline" >
<!-- 工具栏 -->
<div id="toolbar">
<input type="button" value="新增用户" id="addBtn" data-toggle="modal" data-target="#addUserModal" class="btn btn-primary"></input>
<input type="button" value="修改用户" id="editBtn" data-toggle="modal" data-target="#editUserModal" class="btn btn-primary" onclick="editUser()"></input>
<input type="button" value="删除用户" id="deleteBtn" data-toggle="modal" data-target="#deleteUserModal" class="btn btn-primary" onclick="deleteUser()"></input>
</div>
<!-- bootstrapTable -->
</form>
<table id="dataGrid">
</table>
</section>
<!-- 新增用户的模态框，在修改用户中将获取一行的值放入input中，改变一些参数继续使用 -->
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>新增用户</h3>
</div>
<div class="modal-body">
<form id="addUserForm" action="/user/addUser" method="post" class="form-horizontal">
<div class="form-group">
<label for="inputAccount" class="col-sm-2 control-label">账户</label>
<div class="col-sm-7">
<input type="account" name="account" class="form-control" id="inputAccount" placeholder="账户"/>
</div>
<label id="errorAccount" for="inputAccount" class="col-sm-3 control-label"></label>
</div>
<div class="form-group" >
<label for="inputPassword" class="col-sm-2 control-label">密码</label>
<div class="col-sm-7">
<input type="text" name="password" class="form-control" id="inputPassword" placeholder="密码"/>
</div>
<label id="errorPassword" for="inputPassword" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-7">
<input type="name" name="name" class="col-sm-4 form-control" id="inputName" placeholder="姓名"/>
</div>
<label id="errorName" for="inputName" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputSex" class="col-sm-2 control-label">性别</label>
<div class="col-sm-7">
<input type="sex" name="sex" class="col-sm-4 form-control" id="inputSex" placeholder="性别"/>
</div>
<label id="errorSex" for="inputSex" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputPhone" class="col-sm-2 control-label">手机</label>
<div class="col-sm-7">
<input type="phone" name="phone" class="col-sm-4 form-control" id="inputPhone" placeholder="手机"/>
</div>
<label id="errorPhone" for="inputPhone" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-7">
<input type="email" name="email" class="col-sm-4 form-control" id="inputEmail" placeholder="邮箱"/>
</div>
<label id="errorEmail" for="inputEmail" class="col-sm-3 control-label"></label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="conf" class="btn btn-default" onclick="addUser()">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetAddModal()">取消</button>
</div>
</div>
</div>
</div>
<!-- 修改用户的模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>修改用户</h3>
</div>
<div class="modal-body">
<form id="editForm" method="post" class="form-horizontal">
<div class="form-group" style="display:none">
<label for="editId" class="col-sm-2 control-label">ID</label>
<div class="col-sm-7">
<input type="id" name="id" class="form-control" id="editId" placeholder="ID" />
</div>
<label id="errorId" for="editId" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputAccount" class="col-sm-2 control-label">账户</label>
<div class="col-sm-7">
<input type="account" name="account" class="form-control" id="editAccount" placeholder="账户"/>
</div>
<label id="errorAccount" for="inputAccount" class="col-sm-3 control-label"></label>
</div>
<div class="form-group" >
<label for="inputPassword" class="col-sm-2 control-label">密码</label>
<div class="col-sm-7">
<input type="text" name="password" class="form-control" id="editPassword" placeholder="密码"/>
</div>
<label id="errorPassword" for="inputPassword" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-7">
<input type="name" name="name" class="col-sm-4 form-control" id="editName" placeholder="姓名"/>
</div>
<label id="errorName" for="inputName" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputSex" class="col-sm-2 control-label">性别</label>
<div class="col-sm-7">
<input type="sex" name="sex" class="col-sm-4 form-control" id="editSex" placeholder="性别"/>
</div>
<label id="errorSex" for="inputSex" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputPhone" class="col-sm-2 control-label">手机</label>
<div class="col-sm-7">
<input type="phone" name="phone" class="col-sm-4 form-control" id="editPhone" placeholder="手机"/>
</div>
<label id="errorPhone" for="inputPhone" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-7">
<input type="email" name="email" class="col-sm-4 form-control" id="editEmail" placeholder="邮箱"/>
</div>
<label id="errorEmail" for="inputEmail" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputStates" class="col-sm-2 control-label">状态</label>
<div class="col-sm-7">
<input type="states" name="states" class="col-sm-4 form-control" id="editStates" placeholder="状态"/>
</div>
<label id="errorStates" for="inputStates" class="col-sm-3 control-label"></label>
</div>
<div class="form-group" style="display:none">
<label for="inputCreated_at" class="col-sm-2 control-label">创建时间</label>
<div class="col-sm-7">
<input type="created_at" name="created_at" class="col-sm-4 form-control" id="editCreated_at" placeholder="创建时间" />
</div>
<label id="errorCreated_at" for="inputCreated_at" class="col-sm-3 control-label"></label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="conf" class="btn btn-default" onclick="updateUser()">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetAddModal()">取消</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Tip" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>提示</h3>
</div>
<div class="modal-body" align="center">
<h4 id="tipContent">新增成功</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="updateEnd" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>提示</h3>
</div>
<div class="modal-body" align="center">
<h4 id="al">修改成功</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<div th:include="back/footer"></div>
</body>
<script type="text/javascript">
$(function() {
//初始加载
initDataGrid();
});
function initDataGrid() {
//创建bootstrapTable
$("#dataGrid").bootstrapTable({
method:"POST",
//极为重要，缺失无法执行queryParams，传递page参数
contentType : "application/x-www-form-urlencoded",
dataType:"json",
url:'/user/pageInfo',
queryParams:queryParam,
pagination:true,//显示分页条：页码，条数等
striped:true,//隔行变色
pageNumber:1,//首页页码
pageSize:10,//分页，页面数据条数
uniqueId:"id",//Indicate an unique identifier for each row
sidePagination:"server",//在服务器分页
height:tableModel.getHeight(),
toolbar:"#toolbar",//工具栏
columns : [{
checkbox:"true",
field : "box"
}, {
title : "ID",
field : "id",
visible: false
}, {
title : "账户",
field : "account"
}, {
title : "密码",
field : "password"
}, {
title : "姓名",
field : "name"
}, {
title : "性别",
field : "sex"
}, {
title : "手机",
field : "phone"
}, {
title : "邮箱",
field : "email"
}, {
title : "状态",
field : "states"
}, {
title : "创建时间",
field : "created_at",
sortable : true
}],
search : true,//搜索
searchOnEnterKey : true,
showRefresh : true,//刷新
showToggle : true//
});
}
function queryParam(params){
var param = {
limit : this.limit, // 页面大小
offset : this.offset, // 页码
pageNumber : this.pageNumber,
pageSize : this.pageSize
};
return param;
}
//点击取消后清空表单中已写信息
function resetAddModal(){
document.getElementById("addUserForm").reset();
}
//新增用户
function addUser(){
var param = $("#addUserForm").serializeArray();
debugger;
$("#conf").attr("onclick","addUser()");
$.ajax({
url:"/user/addUser",
method:"post",
data:param,
dataType:"json",
success:function(data){
if(data.state=="success"){
document.getElementById("al").innerText="新增成功";
$("#addEnd").modal('show');
$("#addUserModal").modal('hide');
$("#dataGrid").bootstrapTable('refresh');
}
},
error:function(){
document.getElementById("al").innerText="新增失败";
$("#addEnd").modal('show');
}
});
}
//修改用户
function editUser(){
//获取选中行的数据
var rows = $("#dataGrid").bootstrapTable('getSelections');
if(rows.length!=1){
document.getElementById("tipContent").innerText="请选择一行数据";
$("#Tip").modal('show');
}
else{
var row = rows[0];
$('#editId').val(row.id);
$('#editAccount').val(row.account);
$('#editPassword').val(row.password);
$('#editName').val(row.name);
$('#editSex').val(row.sex);
$('#editEmail').val(row.email);
$('#editPhone').val(row.phone);
$('#editStates').val(row.states);
$('#editCreated_at').val(row.created_at);
$("#editModal").modal("show");
}
}
function updateUser(){
var param = $("#editForm").serializeArray();
//设为disable则无法获取
$.ajax({
url:"/user/updateUser",
method:"post",
data:param,
dataType:"json",
success:function(data){
if(data.state=="success"){
$("#editModal").modal("hide");
document.getElementById("tipContent").innerText="修改成功";
$("#Tip").modal('show');
}
},
error:function(data){
alert("wrong");
}
});
}
</script>
</html>引入user.js
/**
*
*/
function deleteUser(){
var rows = $("#dataGrid").bootstrapTable("getSelections");
var ids = [];
var len = rows.length;
debugger;
for(var i=0;i<len;i++){
ids.push(rows[i].id);
}
debugger;
$.ajax({
url:"/user/deleteUser",
dataType:"json",
traditional: true,//属性在这里设置
method:"post",
data:{
"ids":ids
},
success:function(data){
document.getElementById("tipContent").innerText="删除成功";
$("#Tip").modal('show');
$("#dataGrid").bootstrapTable("refresh");
},
error:function(){
document.getElementById("tipContent").innerText="删除失败";
$("#Tip").modal('show');
}
});
}后台Controller
package com.damionew.website.controller.back;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import com.damionew.website.model.back.User;
import com.damionew.website.service.back.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.github.pagehelper.PageHelper;
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/insert")
public void insert(User user) {
System.out.println("before");
userService.addUser(user);
System.out.println("after");
}
@RequestMapping("/index")
public String index(User user) {
return "back/user/index";
}
@ResponseBody
@RequestMapping(value="getUser",produces="html/text;charset=UTF-8")
public String queryUserList() {
List<User> users =userService.getUserList();
System.out.println();
JSONObject result = new JSONObject();
result.put("rows", users);
System.out.println(result.toJSONString());
return result.toJSONString();
}
@ResponseBody
@RequestMapping(value="pageInfo",produces="html/text;charset=UTF-8")
public String pageInfo(@RequestParam int pageNumber,int pageSize,HttpServletResponse response) {
response.setContentType("text/json");
response.setCharacterEncoding("utf-8");
List<User> users =userService.getUserList();
int total = users.size();
PageHelper.startPage(pageNumber,pageSize);
List<User> pageInfo=userService.getUserList();
JSONObject result = new JSONObject();
result.put("rows",pageInfo);
result.put("total",total);
System.out.println(result.toJSONString());
return result.toJSONString();
}
@ResponseBody
@RequestMapping("/addUser")
public String addUser(User user) {
Date date = new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-mm-dd HH:mm:ss");
String time = dateFormat.format(date);
user.setCreated_at(time);
user.setStates("1");
System.out.println(user.getName());
userService.addUser(user);
System.out.println("success");
JSONObject result = new JSONObject();
result.put("state", "success");
return result.toJSONString();
}
@ResponseBody
@RequestMapping("/updateUser")
public String updateUser(User user) {
userService.updateUser(user);
JSONObject result = new JSONObject();
result.put("state", "success");
return result.toJSONString();
}
@ResponseBody
@RequestMapping("/deleteUser")
public String deleteUser(HttpServletRequest request) {
String[] list=request.getParameterValues("ids");
System.out.println(list);
for (int i = 0; i < list.length; i++) {
String id = list[i];
System.out.println(id);
userService.deleteUser(id);
}
JSONObject result = new JSONObject();
result.put("state", "success");
return result.toJSONString();
}
}UserMapper.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.damionew.website.dao.back.UserDao">
<select id="insert" parameterType="string" resultType="User">
insert into user(name,email) values("2","3")
</select>
<select id="getUserList" parameterType="string" resultType="User">
select * from user
</select>
<select id="addUser">
insert into user(account,password,name,sex,phone,email,states,created_at)
values
(#{account},#{password},#{name},#{sex},#{phone},#{email},#{states},#{created_at})
</select>
<select id="updateUser">
update user set account=#{account},password=#{password},name=#{name},sex=#{sex},phone=#{phone},
email=#{email},states=#{states},created_at=#{created_at}
where id = #{id}
</select>
<select id="deleteUser">
delete from user where id = #{id}
</select>
</mapper>很多朋友留言要源码，已经上传到码云： https://gitee.com/Damionew/website.git
至于其他的都放在GitHub上面了，毕竟2018年底可以创建免费个人私有仓库啦
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
