项目开发知识盲区记录
Posted 大忽悠爱忽悠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了项目开发知识盲区记录相关的知识，希望对你有一定的参考价值。
项目开发知识盲区记录
- 解决ajax请求下，后台页面跳转无效问题
- layui数据表格的使用和分页失效的问题解决
- 从ajax的回调函数（success等）中取返回值
- html网页什么样的字体最好看，css设置各种中文字体样式代码
- cookie，session，localStorage，sessionStorage的区别
- 隐藏div常用的两种方法
- layui弹出层，弹出表单或其他东西
- Layui中弹出层关闭后但是弹出层中的内容依然显示在页面上，没有消失
- layui下拉多级选择框扩展组件
- Invalid bound statement (not found): 各种原因
- mybatis-plus在spring项目中常用配置项yml和properties
- 根据状态修改layui表格显示的文字及字体颜色
- JS刷新当前页面---location.reload()
- Springboot ---Error resolving template
解决ajax请求下，后台页面跳转无效问题
ajax实际上是通过XMLHttpRequest来向服务器发送异步请求的，从服务器获取数据，然后使用JS来更新页面，这也就是常说的局部刷新实现方式，所以ajax请求之后，服务器返回的都是纯文本流，客户端的浏览器在获取ajax异步结果时，不是直接显示在页面上，而是要通过js来进行处理，js处理完以后才能显示在页面上，所以这才导致了controller中的ModelAndView对象不能直接返回视图
解决方法：
将页面跳转的控制放到前端页面的js中来进行跳转，即location.href = 'xxxxxxx’
$.ajax({
url: "toMain",//请求路径
type: "post",//请求方式
data: {"username": name, "password": pwd},
success: function (data)
{
alert(data);
if(data==1)
{
window.location.href="toRealMain";
}
else
{
window.location.href="/";
}
}
});
layui数据表格的使用和分页失效的问题解决
<!-- 数据表格 -->
<table id="demo" lay-filter="test"></table>
</div>
</div>
</div>
<!-- 引入 layui.js -->
<script src="../js/layui.js"></script>
<script>
layui.use(['element','table'], function(){
var element = layui.element;
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 400//容器高度
,url: 'getAllUsers' //数据接口
,page: true //开启分页
,cols: [
[ //表头
{field: 'id', title: 'ID', width:150, sort: true, fixed: 'left'}
,{field: 'useraccount', title: '用户名', width:150,sort:true}
,{field: 'userpassword', title: '密码', width:150, sort: true}
,{field: 'flag', title: '权限', width: 100,sort:true}
,{field: 'powerofcourse', title: '课程权限', width: 200,sort:true}
,{field: 'information', title: '信息', width: 200, sort: true}
]
]
, method: "post"
, page: true
, limits: [3, 5, 10] //一页选择显示3,5或10条数据
, limit: 5 //一页显示10条数据
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
});
});
//退出登录按钮点击
$("#dropDown").click(function (){
//置空令牌
window.localStorage.xfxAdminToken="null";
//发送请求跳转到登录页面
//跳转到登录页面
window.location.href="/";
window.event.returnValue=false;
})
</script>
controller层代码:
//获取所有用户，并以json数组形式返回
@ResponseBody
@PostMapping("/getAllUsers")
public String getAllManagers()
{
//获取所有管理员
List<User> users = userService.list();
String jsonString = JSON.toJSONString(users);
System.out.println(jsonString);
//状态码，响应消息，数量，数据
String allManagers ="{\\"code\\":"+0+",\\"msg\\":\\"ok\\",\\"count\\":"+users.size()+",\\"data\\":"+jsonString+"}";
return allManagers;
}
点了好多条都不知道说的什么，后面还是我自己总结出了解决的办法。table的渲染提供了一个后端接口的参数
然而这个接口要求后端的数据进行格式化的处理，然而这个会和分页功能产生冲突导致分页失效。layui还提供了data参数去渲染数据，建议使用layui的表格组件时不用url，直接用data去渲染数据，就是先请求后台，返回数据再render。
layui的数据表格的cols属性设置列的二维数组的[[…]]和thymeleaf的语法重复，因此在使用springboot的模板引擎进行渲染时，会报错误，解决方法如下：
,cols: [
[ //表头
{field: 'id', title: 'ID', width:150, sort: true, fixed: 'left'}
,{field: 'useraccount', title: '用户名', width:150,sort:true}
,{field: 'userpassword', title: '密码', width:150, sort: true}
,{field: 'flag', title: '权限', width: 100,sort:true}
,{field: 'powerofcourse', title: '课程权限', width: 200,sort:true}
,{field: 'information', title: '信息', width: 200, sort: true}
]
]
将[[…]]分割开来写
从ajax的回调函数（success等）中取返回值
对于ajax，一般情况下我们都是在success函数中进行逻辑处理，
但是在某些特定的时候我们需要在ajax外对返回值进行处理，这时我们只需要进行下面两个操作：
1、async设置为false,也就是同步；
2、在方法内ajax外设置一个全局变量，用这个变量去接收success函数内的返回值。
//服务器端检测令牌是否可用
function VerifyServerToken(type)
{
if(type=="admin")
{
var ManagerName = "";
//检验令牌
$.ajax({
url: "getManageName",
type: "post",
async : false,
data: {"adminToken": window.localStorage.xfxAdminToken},
success: function (name)
{
if (name.length <=0){
//令牌置空
window.localStorage.xfxAdminToken = "null";
window.location.href = "/";
window.event.returnValue = true;
}
ManagerName=name;
}
});
return ManagerName;
}
}
ajax是异步请求，如果上面不让ajax变成同步请求，那么先执行完return语句，过了一会，ajax请求和成功回调函数才会执行完
layui-table表复选框勾选的所有行数据获取
<table class="layui-table" lay-data="{url:'******', id:'test3'}" lay-filter="test3">
<thead>
<tr>
<th lay-data="{type:'checkbox'}">ID</th>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'t1'}">测试项</th>
<th lay-data="{field:'t2', edit: 'text'}">标定参数</th>
<th lay-data="{field:'t3'}">标定值</th>
</tr>
</thead>
</table>
table.on('checkbox(test3)', function(obj){
var checkStatus = table.checkStatus('test3');
console.log(checkStatus.data)//选中行数据
console.log(checkStatus.data.length)
})
$('.ttes').click(function () {
var index = parent.layer.getFrameIndex(window.name);
var checkStatus = table.checkStatus('test3');
console.log(checkStatus.data)//选中行数据
var items = checkStatus.data;
//监听行工具事件---监听删除按钮
table.on('tool(test)', function (obj) {
var data = obj.data;
//如果删除按钮按下了
if (obj.event === 'del') {
layer.confirm('确认删除当前管理员吗？', {
btn: ['删除', '取消']
, yes: function (index, layero) {
//点击删除按钮
//发送ajax请求前往服务器，去数据库中删除当前选择的管理员
$.ajax({
url: "delManagerById",
type: "post",
data: {"id": data.id,"adminToken":adminToken},
success: function (data) {
if (data == 0) {
//删除成功
layer.alert('删除成功', {icon: 1});
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
}
else if(data==-1){
//出现异常，删除失败
layer.msg('出现异常，删除失败', {icon: 5});
}
else if(data==-2)
{
//令牌失效
window.localStorage.xfxAdminToken="null";
window.location.href="/";
window.event.returnValue=false;
}
}
});
layer.close(index);
}
, btn2: function (index, layero) {
//点击取消按钮
layer.close(index);
}
});
}
});
//复选框勾选事件
table.on('checkbox(test)', function (obj) {
var checkStatus = table.checkStatus('test');
//删除被勾选的行元素集合
//checkStatus.data:被选中的元素集合
//checkStatus.data.length:被选中的元素个数
//当头部工具栏的删除按钮被点击时，获取被选中元素集合，进行批量删除操作
$("#topDelBtn").click(function () {
//弹出确认是否删除的按钮
layer.confirm('确认批量删除选中的管理员？', {
btn: ['确认', '取消'] //可以无限个按钮
, yes: function (index, layero) {
//删除
//获取删除用户的id集合
var arr = new Array();
for (i = 0; i < checkStatus.data.length; i++) {
arr[i] = checkStatus.data[i].id;
}
//发送ajax请求前往服务器执行批量删除的操作
$.ajax({
url: "delManagerByIds",
type: "post",
data: {"ids": arr,"adminToken":adminToken},
success: function (data) {
if (data == 0) {
//删除成功
layer.msg('删除成功', {icon: 6});
//刷新当前页面
window.location.href = "toListAll";
window.event.returnValue = false;
}
else if (data == -1)
{
//出现异常删除失败
layer.msg('出现异常，删除失败，请重新尝试', {icon: 2});
}
else if(data==-2)
{
//令牌失效
window.localStorage.xfxAdminToken="null";
window.location.href="/";
window.event.returnValue=false;
}
}
});
},
btn2: function (index, layero) {
//取消
layer.msg('删除失败', {icon: 5});
}
});
});
});
});
html网页什么样的字体最好看，css设置各种中文字体样式代码
html网页什么样的字体最好看，css设置各种中文字体样式代码
cookie，session，localStorage，sessionStorage的区别
cookie，session，localStorage，sessionStorage的区别
隐藏div常用的两种方法
style里面设置内样式:
1.display:none;
2.visibility:hidden;
layui弹出层，弹出表单或其他东西
/!*
如果是页面层
*/
layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type: 1,
content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});
弹出细节
<div id="classInfo" style="padding:20px;display:none">
<table class="layui-hide" id="selectClassInfo" lay-filter="selectClassInfo"></table>
</div>
先写一个隐藏的div，里边写一个隐藏的table
Layui中弹出层关闭后但是弹出层中的内容依然显示在页面上，没有消失
原因：jquery 冲突
解决方法：将你html页面引入的jquery删掉，直接使用layui内置的jquery
删除页面引入的jquery
使用layui自带的jquery
或者:
,end: function(index, layero){
layer.close(index);
$('#divcontent').css({'display':'none'});
return false;
}
layui下拉多级选择框扩展组件
以上是关于项目开发知识盲区记录的主要内容，如果未能解决你的问题，请参考以下文章