2024.04.17
1. a-tabs中a-tab-pane不生效：ant design vue
原因：a-tabs中不能嵌套div后再嵌套a-tab-pane，a-tabs只能直接嵌套a-tab-pane
2024.04.16
1. 消息数html
2. 接口404
原因：（1）接口路径错了：（请检查是否多写了空格）
（2）服务器没开
2024.04.12
1. el-dropdown默认展开
实现方式：给el-dropdown 添加一个ref，然后通过this.$refs.refName.show()和hide()控制展开和隐藏
2. el-dropdown的使用
2024.04.11
1. 原生banner
2024.04.10
1. 理解 CSS 中的复合类选择器
.nav-name.selected： 在 CSS 中，这是一个复合类选择器。它选择具有
nav-name和selected两个类名的同一个元素。这意味着要匹配的元素必须同时拥有这两个类名，而不是作为父子元素的关系。.nav-name .selected： 这是两个类选择器的组合，中间有空格。它选择具有
selected类名的.nav-name元素的后代元素。换句话说，它会选择所有嵌套在.nav-name元素内部的具有selected类名的元素，而不一定是直接作为子元素。
2024.04.09
1. 元素间距gap: 10px
2. 文字水平线对齐：align-items: baseline;
2024.04.08
1. </#if>的#下有红色波浪线：MCMS
就是这么写的，这里的红色波浪线不代表代码错误
2024.04.07
1. v-for的key唯一
2. 找不到路径：小程序
原因：修改pages.js后需重新运行项目
3. 强制刷新:小程序
this.$forceUpdate()
4. 端口被占
cmd命令：netstat -ano | findstr "80" 查询80端口进程
杀死进程命令：taskkill /F /PID 36496 (大小写均可)
2024.04.03
1. 接口报500
（1）下载接口：解决方式：请求方式由post改成get
2024.04.02
1. 检查 iframe中的文件是否存在
<iframe></iframe>
// 使用 XMLHttpRequest 进行 HEAD 请求检查文件是否存在
function checkFileExists(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('HEAD', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
callback(xhr.status);
}
};
xhr.send();
}
// 在文件加载之前进行文件存在性检查
// 若res.data.url的格式为：https://xx/index.html?url=https://xxx
var params = new URLSearchParams(res.data.url);
checkFileExists(params.get('url'), function(status) {
if (status === 200) {
// 文件存在，显示下载按钮
} else {
// 文件不存在或加载失败，隐藏下载按钮
}
});2. 元素在开发者工具的 Elements 标签页中不可见
// jquery的写法
$("#id").remove() // 适合不需要再把元素加回来的场景
// 移除元素并保存其内容
var hiddenElement = $("#id").detach(); // 适合需要再把元素加回来的场景
$("body").append(hiddenElement); // 这里使用 append() 方法将元素添加到 body 的末尾2024.03.28
1. input的disabled没有样式效果：layui
/* 自定义禁用状态下的输入框样式 */
input[disabled] {
opacity: 0.6;
cursor: not-allowed;
background-color: #F0F0F0;
}2. uuid 和自增id
3. 文本不换行
white-space: nowrap;
4. 页面跳转带参数：layui
// 原页面
<a lay-href='/views/a/page?id={{d.id}}'>【跳转】</a>
// 传递参数
@GetMapping("/a/page")
public String aPage(@RequestParam(value = "id", required = false) String id, ModelMap map){
if(StringUtils.isNotBlank(id)) {
map.put("id", id);
}
return "views/a/page";
}
// 跳转页面
var id = /*[[${id}]]*/"";2024.03.27
1.input：radio：点击事件监听：layui
其它：在layui中,input 元素是 layui 组件生成的，不是普通的HTML元素，它自己的组件可能会处理事件绑定，需要使用layui提供的方法来绑定事件；即 form.on('radio(对应的lay-filter)',function() {})
效果：点击 '是' 后弹出弹窗，此时选中状态不发生改变，点击确认：选中状态更改为 '是'，点击取消：选中状态不发生改变
htmlBody += '<td><input lay-filter="addressYes" data-data="'+list[i].address+'" type="radio" name="address' + list[i].xuHao + '" value="是" title="是" ' + (list[i].checkState ? 'checked' : '') + '/>' +
' <input type="radio" name="address' + list[i].xuHao + '" value="否" title="否" ' + (list[i].checkState ? '' : 'checked') + '/></td>';
form.on('radio(addressYes)', function (event) {
let otherInput = $(event.elem).closest('td').find('input[type="radio"][value="否"]'); // 获取与当前单选框对应的另一个单选框
$(event.elem).prop('checked', false);
otherInput.prop('checked', true);
form.render('radio');
var dataDataValue = $(event.elem).data('data');
let confirmIndex = layer.confirm('本操作结果影响较大，请您再次确认'+ dataDataValue +'确实为xxx？', {
icon: 0,
title: '提示',
btn: ['确定', '取消']
}, function () {
$(event.elem).prop('checked', true);
otherInput.prop('checked', false);
form.render('radio');
layer.close(confirmIndex);
}, function () {
$(event.elem).prop('checked', false);
otherInput.prop('checked', true);
form.render('radio');
layer.close(confirmIndex);
});
})2. 输入文字字数限制
<textarea id="personalDeedContent" placeholder="请填写内容" maxlength="120"
name="personalDeedContent" class="layui-textarea my-textarea"
lay-verify="required"></textarea>
<div id="tipShow" class="tipShow">0/120</div>
form.val("biaodan", {personalDeedContent:data.personalDeedContent})
$(".my-textarea").on('input', function () {
const length = $(this).val().length
const all = $(this).attr('maxlength')
$(this).next().text(length + '/' + all)
$(this).prev().html($(this).val())
})2024.03.26
1. /和./和../
斜杠 "/" 表示根目录或者是一个绝对路径的开始。例如，"/home/user/Documents" 表示位于根目录下的 "home" 目录下的 "user" 目录中的 "Documents" 子目录。
"./"：这是表示当前目录的符号。当你在文件系统中工作时，"./" 表示你当前所在的目录。例如，如果你位于 "/home/user/Documents" 目录下，并且执行命令 "./script.sh"，这意味着你在当前目录下执行了名为 "script.sh" 的脚本。
"../"：这是表示父目录的符号。使用 "../" 可以访问当前目录的父级目录。例如，如果你在 "/home/user/Documents" 目录下执行命令 "../Downloads/file.txt"，这会尝试访问 "/home/user/Downloads" 目录中的 "file.txt" 文件。
2. pull代码后有冲突,不想要自己的代码
叉掉合并代码弹窗，把自己的代码回滚了再拉取代码
3. 编程到一半发现分支错了
将新添加的文件直接拉到桌面；修改的文件右键copy，然后在桌面ctrl+v；在开发工具还原代码，切换分支；然后把移动到桌面的代码移动到开发工具内。
4. @click按钮事件绑定不上
// 不能正确执行的代码
<a-form layout="inline">
<a-row style="float: right">
<a-button @click="$refs.table.refresh()">刷新</a-button>
<a-button @click="createTask">创建任务</a-button>
</a-row>
<a-row>标签提示：</a-row>
</a-form>
// 能正确执行代码
<a-form layout="inline">
<a-row style="float: right">
<a-button @click="$refs.table.refresh()">刷新</a-button>
<a-button @click="createTask">创建任务</a-button>
</a-row>
<div>标签提示：</div>
</a-form>表面上是a-form里面用了2个a-row，把其中一个去掉，就可以成功执行绑定事件了
实际上是因为第2个a-row把第一个a-row的位置霸占了，所以点击无效
5. table不刷新
原因： this.$refs.table.refresh()少写了$
6. 元素右对齐 float: right
2024.03.25
1.找不到页面代码位置
仅适用于pc端：在权限管理有页面对应的组件别名，拿着别名去代码里面找对应的文件路径
2024.03.22
1.字符串和字符串列表转化：javaScript
let stringList = ["string1", "string2", "string3"];
let result = stringList.join("$$");
console.log(result); // 输出: "string1$$string2$$string3"
let result = "string1$$string2$$string3";
let stringList = result.split("$$");
console.log(stringList); // 输出: ["string1", "string2", "string3"]
2. 字符，替换成$$：javaScript
// 写2个$$只能替换成1个$; 要替换成$$，需要写$$$$
data.valueDemo= data.valueDemo.replace(/,/g, "$$$$");2024.03.21
1. 微信小程序扫码
（1）在微信公众平台进行小程序码链接配置时：测试链接配置时不写参数，只写 “二维码规则+小程序功能页面”，功能页面后不加.html
（2）生成二维码时，二维码链接为 “协议类型://+二维码规则+小程序功能页面+.html+参数”
（3）通过process.env.NODE_ENV === 'development'，扫码后，可以调用本地运行的代码，进行debug
2024.03.20
1.JSONObject转类
JSONObject json = baseRedisService.getJSONObject(uuid);
JSONObject userJson = json.getJSONObject("user");
User user = JSON.parseObject(userJson.toJSONString(), User.class);2. layer.alert
layer.alert('<div>xxx </div>', {
btn: ['按钮1', '按钮2'],
btn1: function (index, layero) {
layer.close(index);
},
btn2: function (index, layero) {
sessionStorage.setItem('isToTab2',true)
window.location.href = '/views/xx';
},
area: ['400px', '200px']
});3.获取元素i为demo的值:jquery
// 获取值
var value = $('#demo').val()
// 赋值
$('#demo').val('123')4. var $ = layui.$
Layui 中重新定义了
$对象，使其指向 Layui 内部的 jQuery 对象，这样可以在 Layui 的模块中使用 jQuery 的语法。
5.hql 指的是Hibernate的查询语言
2024.03.19
1.a-switch开关状态无法控制：vue
<a-switch v-if="flag"/>
<span v-else>没办法，只能让它暂时不显示了</span>2024.03.15
1.子弹窗调用父页面弹窗的方法：Layui
// 父页面
window.reloadList = function () {
// 想进行的操作
}
// 子弹窗
window.parent.reloadList();2.页面显示404原因 :Layui
因为在xxx特定添加下，没写return false;
2024.03.12
1.监听textarea输入字数
.tipShow {
font-size: 12px;
color: rgba(0,0,0,0.45);
position: absolute;
right: 85px;
top: 90px;
}
.my-textarea {
height: 120px;
top: 0;
box-sizing: border-box;
resize: none;
font-family: "宋体";
}
.my-textarea-show {
padding: 6px 0;
white-space: pre-wrap;
overflow-wrap: break-word;
height: 120px;
display: none;
}
<div class="layui-input-block" style="position: relative">
<div class="my-textarea-show"></div>
<textarea id="content" placeholder="请填写内容" maxlength="150"
name="content" class="layui-textarea my-textarea"
lay-verify="required"></textarea>
<div id="tipShow" class="tipShow">0/150</div>
</div>
$(".my-textarea").on('input', function () {
const length = $(this).val().length
const all = $(this).attr('maxlength')
$(this).next().text(length + '/' + all)
$(this).prev().html($(this).val())
})2024.03.11
1.table高度设置使用full-100在火狐不生效：layui
解决方式：在文件顶部添加<!DOCTYPE html>
2024.03.09
1.接收但无法操作后台返回的信息
原因：在调用A接口后，调用B接口， A接口res返回错误信息导致B接口调用出现问题
// 解决方式
try {
const res = await admin.req({
url: root + '/api/award/application/statistics/reply-video/unit/download',
method: 'GET',
contentType: 'application/json; charset=utf-8',
data: data,
});
if(res.body && res.body.data &&res.body.data.token) {
window.location.href = root + '/api/xx/download?token=' + res.body.data.token;
} else {
layer.alert(res.message, { icon: 2 });
}
} catch (err) {
layer.alert(err.message, { icon: 2 });
}2.批量下载视频
3.初始化表格排序状态：Layui
table.reload('tableId', {
page: {
curr: 1
}
initSort: {
field: field, // 之前存储的排序字段
type: sort // 之前存储的排序方式
}
})4.预览图片效果:Layui
<div id="img" class="layui-inline">
{{# if(d.File && d.File.suffix != '.pdf'){ }}
<img modal="zoomImg" id="imgg" src="{{d.File?d.File.visitUrl:''}}" style="width: 100px;height: 100px;margin-right: 10px">
{{# } else if (d.File && d.File.suffix == '.pdf') { }}
<div class="pdfFile" data-value="{{ d.File.visitUrl }}" style="width: 70px;height: 70px">{{ d.File.originalName }}</div>
{{# } else { }}
无
{{# } }}
</div>
zoomImgRender("#img")
$(".pdfFile").on('click', function () {
var url = $(this).data('value')
window.open(url)
})2024.03.08
1.提示语样式：Layui
// 操作成功使用
layer.msg('操作成功',{icon:1,time:1500})
// 后台报错使用
layer.msg(err.message);
// 文件上传中
var loading = ''
before: function () {
loading = layer.msg('正在上传中，请稍后', {icon: 16, shade: 0.3, time: 100000});
},
done: function () {
layer.close(loading)
},
error: function () {
layer.close(loading)
}2024.03.07
1.蒙尘图标下载图片
#img::after { /* 在 #img 元素的内容之后插入了一个伪元素 */
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
#img:hover::after { /*鼠标悬浮（hover）在某个元素（#img）上时，对这个元素的后代元素（::after）应用样式*/
opacity: 1;
}
<div id="img" style="max-width:50px;max-height:50px;margin-right: 10px;float: left;"></div>
var downloadIconHTML = '<icon id="downloadIcon" class="layui-icon layui-icon-download-circle" ' +
'style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: opacity 0.3s ease;color: white;display: none;z-index: 999">' +
'</icon>';
$("#img").html('<img src="/'+ data.visitUrl + '" style="width: 50px;height: 50px">'+downloadIconHTML);
var downloadIcon = document.getElementById('downloadIcon');
var imgContainer = document.getElementById('img');
// 添加鼠标悬浮事件
imgContainer.addEventListener('mouseenter', function () {
downloadIcon.style.display = 'block';
downloadIcon.style.opacity = 1;
});
// 添加鼠标移开事件
imgContainer.addEventListener('mouseleave', function () {
downloadIcon.style.display = 'none';
downloadIcon.style.opacity = 0;
});2024.03.06
1.遮罩层
<div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999;"></div>
// 显示遮罩层
var overlay = document.getElementById('overlay');
overlay.style.display = 'block';
// 隐藏遮罩层
var overlay = document.getElementById('overlay');
overlay.style.display = 'none';2.子组件数据更新不了：vue
（不可参考）使用公司封装的子组件，也许是因为没有添加xLoading=true和xLoading=false
2024.03.05
1.获取浏览器宽度：JavaScript
window.innerWidth
2.img无法显示
<div id="img"></div>
$("#img").html('<img src="/'+ root + res.body.data.visitUrl + '" style="width: 50px;height: 50px">');
// 无法显示的原因：后台没有返回 / ,需要前端自行添加
// 在返回的 res.body.data.visitUrl 最前方不带 / 时，root 会自行变为当前页面路径（一般情况下root为空）2024.03.04
1.table自定义待标志的序号列:Layui
var currentIndex = 0;
table.render({
elem: "#tablee",
...
cols: [
[
{
title: '#',
fixed: 'left',
align:'center',
templet: function (d) {
currentIndex++;
if(!d.value1) {
return '<div class="demoClass" data-value="'+d.id+'" style="position:absolute;top:50%;transform:translateY(-50%);text-align:center;display: flex;flex-direction: row;line-height:15px;">'+currentIndex
+'<div style="margin-left:3px;border-radius:2px;width:15px;height:15px;background:red;color:white">!</div></div>';
} else {
return '<div>'+currentIndex+'</div>'
}
}
},
...
done: function () {
currentIndex = 0;
$(".demoClass").on('click', function () {
const id = $(this).data('value')
console.log('id',id)
})
}
2.form select监听：Layui
<form>
<select lay-filter="choseValue">
<option value="">请选择</option>
<option value="0">value0</option>-->
<option value="1">value1</option>
</select>
</form>
layui.config({
base: root + '/public/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'form'], function () {
var $ = layui.$,
form = layui.form,
form.on('select(choseValue)', function (data) {
console.log(data.value)
});2024.03.01
1.table开关权限控制：Layui
<script type="text/javascript" data-shiro-hasRole="view:pc:v1:sys:info:open">
var userHasPermissionOpen = true
</script>
{
field: "open",
title: '是否公开',
width: 100,
align: 'center',
templet: function (d) {
if (typeof userHasPermissionOpen !== "undefined") {
return '<input class="layui-input" lay-event="status" ' + (d.open ? 'checked' : '') + ' type="checkbox" lay-skin="switch" lay-text="ON|OFF" ' +
'lay-filter="switchTestOne" pid="' + d.id + '">';
} else {
return '<input class="layui-input" lay-event="status" ' + (d.open ? 'checked' : '') + ' disabled type="checkbox" lay-skin="switch" lay-text="ON|OFF" >';
}
}
},2.layui-富文本编辑框-上传文件-详情下载文件
3.HTTP请求总结：Layui
// GET请求
admin.req({
url: root + '/api/xxx',
method: 'GET',
contentType: "application/json; charset=utf-8",
success: function (res) {
},
fail: function (err) {
layer.alert(err.message, {icon: 2, title: '提示'});
}
});
// 下载请求
window.location.href = root + '/api/xxx?id='+ res.body.data;2024.02.29
1.body传参：JavaScript
admin.req({
url: root + '/api/xxx',
method: 'POST',
// 参数为对象时：
data: JSON.stringify(paramObject)
// 参数对象中有字符串数组时：
// data: JSON.stringify({ paramName: stringListName}),
contentType: "application/json; charset=utf-8",
success: function (res) {
layer.msg('操作成功');
},
fail: function (err) {
layer.msg(err.message);
}
});（1）body传参（一般为POST请求）：网络负载显示：请求负载
（2）参数传参（一般为GET请求）：网络负载显示：查询字符串参数
2.禁用button:JavaScript
<button id="submit">提交</button>
var submitBtn = document.getElementById('submit');
submitBtn.disabled = true3. 添加/禁用必填验证：Layui
// 添加
$('#demo').attr('lay-verify', 'required');
// 禁用
$('#demo').removeAttr('lay-verify');4.HTML中的data-属性与jQuery传值
<button data-value="{{ v.value1}}" data-custom-value="{{ v.value2}}"
lay-verify="{{ v.required ? 'required' : '' }}" id="demo">
Click me
</button>
$("#demo").on('click', function () {
console.log('v.value1',$(this).data('value'))
console.log('v.value2',$(this).data('custom-value'))
})2024.02.27
1.多选框：Layui
<select name="selectDemo" lay-filter="selectDemo" id="selectDemo"
xm-select-search=""
xm-select="selectDemo">
<option value="">请选择</option>
</select>
layui.config({
base: root + '/public/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'form','formSelects'], function () {
var $ = layui.$,
form = layui.form,
admin = layui.admin,
formSelects = layui.formSelects,
var demoList = [{ name: 'name1', value: 'value1' },{ name: 'name2', value: 'value2' }]
// 渲染可选择列表
formSelects.data('selectDemo', 'local', {
arr: demoList
});
// 渲染已选择列表
setTimeout(() => {
formSelects.value('selectDemo', ['value1']);
}, 500)
2024.02.23
1.idea连续选择对象快捷键
ctrl + shift + alt + 鼠标
2024.02.22
1.获取表格排序字段、方式：Layui
var field,sort;
// 监听排序事件
table.on('sort(tablee)', function (obj) {
field = obj.field; // 当前排序的字段
sort = obj.type; // 当前排序的方式
});2024.02.18
1.表格批量选择：Layui
<button class="layui-btn layui-btn-sm" id="addAll">批量添加</button>
<table class="layui-table" id="demo" lay-filter="demo"></table>
$("#addAll").click(function () {
var idList = [],
list = table.checkStatus('demo').data;
if (list.length > 0) {
layer.confirm('确定批量添加?', {icon: 3}, function (i) {
layer.close(i)
layui.each(list, function (i, t) {
idList.push(t.id);
});
var obj = {
userId: userId,
idList: idList
};
active.batchAdd(JSON.stringify(obj));
})
} else {
layer.msg('请先选择xx');
}
});
var active = {
batchAdd: function (option) {
admin.req({
url: root + 'xxx',
method: 'POST',
data: option,
contentType: "application/json; charset=utf-8",
success: function (res) {
layer.msg('添加成功!', {icon: 1, time: 1500}, function () {
table.reload('demo');
});
},
fail: function (err) {
layer.alert(err.message, {icon: 2});
}
});
}
}
// 单个添加时, 接口声明和 batchAdd 一样
table.on('tool(demo)', function (d) {
if (d.event == 'add') {
var obj = {
userId: userId,
id: d.data.id
};
active.add(JSON.stringify(obj));
}
});2024.01.31
1.确认弹窗 :Layui
layer.open({
content: '删除后不可恢复，是否确认删除？'
, btn: ['确认', '取消']
, yes: function (index, layero) {
}
, btn2: function (index, layero) {
layer.close(index);
}
});2.页面显示500原因 :Layui
（1）路径错误
（2）页面本身错误（重点关注传参和初始化时调用的方法）
（3）找到页面本身错误，但是还是报500：页面代码找错了（改到复制的原页面身上了）
（4）代码没问题，报500：将调用参数的方法，注释-刷新-取消注释
3.日期选择 :Layui
<input type="text" id="publicDate">
.use(['laydate'], function () {
var laydate = layui.laydate
laydate.render({
elem: '#publicDate',
format: 'yyyy-MM-dd HH:mm',
type: 'datetime',
trigger: 'click'
});
4.选项卡tab（菜单导航栏） :Layui
<div class="layui-tab layui-tab-brief" lay-filter="yourFilterName">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">标签1</li>
<li lay-id="2">标签2</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容
<div class="layui-card-body">
<div id="list"></div>
</div>
<div id="page"></div>
</div>
</div>
</div>
<script type="text/html" id="tpl">
{{# layui.each(d, function(i,v){ }}
<div class="active" data-id="{{v.id}}" data-active="{{v.activityName}}">
<div class="text">
<div><b style="font-size: 18px;color: #0C0C0C">{{v.activityName}}</b></div>
</div>
</div>
{{# }) }}
</script>
.use(['index','laytpl','element','layer','laypage'], function () {
var $ = layui.$,
element = layui.element,
layer = layui.layer;
var baseUrl = '/api/xxx/list1'
// 监听标签切换
element.on('tab(yourFilterName)', function(data){
if(data.index === 1) { // 当前 tab 项的所在下标
baseUrl = '/api/xxx/list2'
} else {
baseUrl = '/api/xxx/list1'
}
active.getInfo(1, 10);
});
var active = {
getInfo: function (page, size) {
admin.req({
url: root + baseUrl,
method: 'get',
contentType: "application/json; charset=utf-8",
data: { page: page, size: size },
success: function (res) {
var data = res.body.data.content;
var getTpl = tpl.innerHTML,
view = document.getElementById('list');
laytpl(getTpl).render(data, function (html) {
view.innerHTML = html;
});
active.renderPage(res.body.data.totalElements, 1, 10);
fail: function (err) {
layer.msg(err.message)
}
})
},
renderPage: function (total, curr, size) {
laypage.render({
elem: 'page',
count: total,
curr: curr,
limit: size,
limits: [10, 20, 30, 40, 50],
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
if (!first) {
active.getInfo(obj.curr, obj.limit);
}
}
});
}
};
active.getInfo(1, 10);
2024.01.30
1.upload触发不了
script中的页面，要等render完成后才能声明upload，不然触发不了；
2.控制表单项是否必填
// 添加必填
$('#id').attr('lay-verify', 'required');
// 取消必填
$('#id').removeAttr('lay-verify');3.控制span内的文本
var demo = document.getElementById('id');
demo.innerHTML = '这是通过 JavaScript 动态添加的内容。';4.时间比较
var currentDate = new Date();
endDate = new Date(endDate);
if (currentDate < endDate) {xxxx}5.sessionStorage
sessionStorage.setItem('data',JSON.stringify(data))
var data= JSON.parse(sessionStorage.getItem('data'));
sessionStorage.removeItem('data')2024.01.26
1.toggle：控制元素显示/隐藏
（1）定义：toggle是 jQuery 中的一个函数，它用于在元素的显示和隐藏状态之间切换。当你调用 toggle 时，它会根据当前状态自动切换显示或隐藏
（2）优点：使代码看起来更简洁。
（3）案例：
<div id="exampleElement1" style="display: none;">
通过选择下拉菜单中的选项来控制 exampleElement1 和 exampleElement2 的显示和隐藏状态。
</div>
<div id="exampleElement2" style="display: none;">
如果选择 "是"，它们将显示；选择 "否"，它们将隐藏。
</div>
<select name="exampleToggle" id="hasTeacher" >
<option value="">请选择是否</option>
<option value="true">是</option>
<option value="false">否</option>
</select>
<script>
form.on('select(exampleToggle)', function (data) {
var isTrue = data.value === 'true';
// 多元素控制
$('#exampleElement1, #exampleElement2').toggle(isTrue);
// 单元素控制
$('#exampleElement1').toggle(isTrue);
});
</script>2.Git撤回提交并保留更改
git reset --soft HEAD~12024.01.22
1.防抖
（1）定义：规定时间内，多次触发，只执行最后1次
（2）应用场景：搜索框的输入
（3）案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debouncing Example</title>
</head>
<body>
<label for="searchInput">Search:</label>
<input type="text" id="searchInput">
<script>
// 防抖函数
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
// 使用 apply 方法调用 func 函数，并将 this 指定为防抖函数debounce内部的上下文
// arguments包含 传递给 debouncedSearch 的参数 query
// 实际上就是执行performSearch方法
func.apply(this, arguments);
}, delay);
};
}
// 实际执行的搜索函数
function performSearch(query) {
// 模拟搜索操作，实际中可发送请求到服务器
console.log(`Searching for: ${query}`);
}
// 获取搜索输入框元素
const searchInput = document.getElementById('searchInput');
// 对输入框的输入进行防抖处理
const debouncedSearch = debounce(performSearch, 500);
// 监听输入框的输入事件，并触发防抖处理
searchInput.addEventListener('input', function(event) {
const query = event.target.value;
debouncedSearch(query);
});
</script>
</body>
</html>
2.节流
（2）节流：规定时间内，多次触发，只执行第1次
（2）应用场景：滚动事件
优秀资料：防抖和节流（详细） 使用场景和区别_防抖节流的区别和使用场景-CSDN博客
2024.01.19
1.字符串根据 ↵ 换行
<view style="display: flex;" v-if="item.content">
<view class="record-font">标题：</view>
<view class="record-font" style="white-space: pre-wrap;">
{{ item.content.replace(/↵/g, '\n') }}
</view>
</view>
2024.01.09
1.新inconfont图标与上传不符
遇见场景：想给导航栏换个图标，结果发现上传的和显示的不长一个样子，检查了类名和以前的没有一样的
原因：iconfont.css中要使用的图标的content和oldfont.css中的某一个图标的content一样
解决方式：
（1）在iconfont网站把要用的图标换个项目中没有的content（也就是Unicode），然后重新下载iconfont系列文件并换到项目中
（2）不用重新运行项目，直接ctrl+F9，等项目右下角名称为build的进度条加载完后，刷新浏览器
2024.01.04
1. 添加iconfont图标
遇见场景：
某项目使用了iconfont,但是iconfont有这个项目图标管理权限的员工早就不知道跑哪儿去了。
目前需要对某项目进行翻新，需要添加新的iconfont（本项目使用的框架是layui）
解决方式：
（1）在iconfont创建这个项目，导入自己新要用的图标
（2）把项目代码中，原本存放iconfont的一系列文件，更改名字（文件后缀和数量可能不一样）
iconfont.css -> oldfont.css iconfont.eot -> oldfont.eot iconfont.js -> oldfont.js
iconfont.svg -> oldfont.svg iconfont.ttf -> oldfont.ttf iconfont.woff -> oldfont.woff
（3） 引用这些文件的地方也得改名字。本项目使用了两个html分别引用了oldfont.css和oldfont.js
// 这里是 basic_css.html
<head th:fragment="onLoadBasicCSS">
<link th:href="@{/public/iconfont/oldfont.css}" rel="stylesheet" />
</head>
// 这里是 basic_js.html
<head th:fragment="onLoadBasicJS">
<script th:src="@{/public/iconfont/oldfont.js}"></script>
</head>
不知道为啥引用css和js,另一个项目使用的vue框架只引用了css（管它呢）
（4）把新上传的iconfont下载下来，把相关的iconfont系列文件放在和oldfont同一个目录下
（5）在oldfont.css顶部导入iconfont.css
@import url(./iconfont.css);
（6）把 oldfont.css中的 .iconfont{} 删了，因为iconfont.css里面有
（7）检查 oldfont.css 和 iconfont.css 中有没有类名一样的图标（有，就给iconfont中的改个名，记得重新下载更换iconfont系列文件）
（8）接下来在home.html中使用这些图标，首先需要引用它
<head>
<head data-th-replace="~{head/basic_css::onLoadBasicCSS}"></head>
<head data-th-replace="~{head/basic_js::onLoadBasicJS}"></head>
</head>
head里面好像不应该嵌套head,反正没报错，将就着用吧
（9）检查新旧图标能否正常显示
<i class="iconfont icon-fuzhushuxian">新</i>
<i class="iconfont icon-chat">旧</i>
（10）垃圾项目？！一直都显示不了新图标？（嗯，我在这里卡了很久）
（11）哦，是缓存导致的；按 ctrl+F9（本项目使用的编辑器是idea），会在项目右下角出现名称为build的进度条，加载完了，刷新浏览器，就会发现新图标出来了呢。
（12）这个前端代码呢，有前端代理，没错，里面有spring，我每次更新页面都重新运行了，那叫一个非常麻烦，结果 ctrl+F9可以直接刷新页面，压根不用重新运行项目。嗯，今日开始发疯
（13）刚才又加了点新图标，ctrl+F9废了，完全不起作用，算了算了，ctrl+shift+N，开启无痕浏览器，输入地址，很好，新图标出来了
2024.01.02
1. 正向代理/反向代理
遇见场景：在客户端获取接口，拿着接口去后端代码查询不到该接口，实际结果在前端代码查询到了该接口，然后开始接触正向代理、反向代理。
（1）正向代理：指代理服务器代表客户端向服务器请求资源（前端的代理），在这种情况下，客户端通过正向代理与目标服务器通信，而服务器只能看到代理服务器的信息，不知道实际请求来自哪个客户端。
示例：
a. 突破网络访问限制的翻墙工具
b. 企业内部网络使用代理服务器控制员工访问外部资源
用途：
a. 隐藏客户端真实IP地址，提高访问隐私和安全性；
b. 绕过访问限制，访问被屏蔽的资源或网站；
c. 缓存数据，减少重复请求，提高访问速度。
（2）反向代理：指代理服务器代表服务器向客户端提供服务（后端的代理），客户端请求的时候，请求被反向代理服务器接收，然后由代理服务器将请求转发给后端的目标服务器，最终将目标服务器的响应返回给客户端。
示例：
a. 将客户端的请求分别发到多个服务器，以平衡负载；
b. 通过反向代理实现SSL终结，减轻后端服务器负担；
c. 缓存静态资源，减少后端服务器压力。
用途：
a. 负载均衡：分发客户端请求到多个后端服务器，提高系统性能和稳定性；
b. 安全性：隐藏后端服务器的真实IP地址，提高安全性；
c. 缓存和压缩：减少后端服务器的负担，提高响应速度。
2. git强推导致数据丢失
遇见场景：
本来打算push的时候一并把云效上的bug状态改为已修复，结果学艺不精fix #ZKPW-8213写成#ZKPW-8213，commit之后push之前又拉了同事的代码。
看着这个push记录页面，总觉得不满意，然后又新学了一个回滚远程推送记录，正是新鲜的时候，就想把之前的推送记录删了，重新推送。经过下面等一系列操作，成功把同事的远程推送记录搞没了。
删除（回滚）push记录（在别人没有push之前）
//(数字代表回退几个版本)
git reset --hard HEAD~2
//强制覆盖
git push -f
不得不说，当时我是非常心慌的，但十分幸运的是，和我一起开发这个分支的同事今天请假了（这代表不会有别人在我解决的时候进行推送代码，造成更让我痛苦的问题），在别人没有发现之前，我解决了它。
解决方式：
（1）把我今天修改的代码备份（创一个文档，ctrl+c,ctrl+v）
（2）在控制台输出git reflog show origin/2.3.02 ，2.3.02是我当前开发的分支，这串命令是为了查询最近一段时间远程分支2.3.02的推送日志
3b9ec7d (HEAD -> 2.3.02, origin/2.3.02) refs/remotes/origin/2.3.02@{0}: update by push
0542b8d refs/remotes/origin/2.3.02@{1}: update by push
3b9ec7d (HEAD -> 2.3.02, origin/2.3.02) refs/remotes/origin/2.3.02@{2}: update by push
0542b8d refs/remotes/origin/2.3.02@{3}: update by push
281fa6d refs/remotes/origin/2.3.02@{4}: update by push
6ff5135 refs/remotes/origin/2.3.02@{5}: update by pushbaae6bf (tag: test-2.3.02.05) refs/remotes/origin/2.3.02@{6}: fetch origin --recurse-submodules=no --progress --prune: fast-forward
（3）新开一个控制台，git reset --hard 3b9ec7d，3b9ec7d为上面查询出来的第一行前面的数据串，这串命令是用于将当前分支的 HEAD 移动到指定的提交 (3b9ec7d)，并强制更新工作目录中的文件，使其与指定提交的状态一致。（文绉绉的听不懂，大概就是把当前分支强制更新成3b9ec7d时的状态，作用在本地，与远程是没有关系的）
（4）然后打开git本地记录列表，选中当前的分支2.3.02，看看现在的是不是我想要的版本，不是？继续输入git reset --hard 0542b8d，0542b8d为第二行前面的数据串，再去git查看是不是想要的版本，一步步继续，直到找到我想要的版本。
（4）黄天不负打工人，baae6bf就是我想要的版本，反复确认了几遍，然后输入git push -f origin 2.3.02，2.3.02为我要开发的分支，这串命令是用于将本地分支 2.3.02 的更改强制推送到远程仓库 origin 的同名分支。
（5）接下来跑去远程仓库上看，有没有成功把同事的代码搞回来，嗯，非常棒，同事的代码回来了，我真是涕泗横流。
（6）最后再把我今天写的代码搞回去，push
3090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
