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 = true
3. 添加/禁用必填验证: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~1
2024.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