date:
updated:
前端笔记
JS
链接下载文件名特殊符号
一般 web 上传文件到服务器上时会重命名为 uuid ，如果还要再下载回来，就需要做原文件名和新文件名的映射，不然下载的文件名就是一堆 uuid 。
改动量大无法使用 uuid 的话可以使用 base64 。文件上传保存时，文件名进行 base64 编码，下载需要获取文件名时再解码，可以完美解决因各种特殊符号而导致链接不对的问题。
实际使用时发现 base64 生成的字符串可能还会带有 + 和 / ，可以让后台编码时把 + 和 / 替换成 - 和 _ ，前端在解码前先进行一次替换即可。
Base64
JavaScript 教程 / 数据类型 / 字符串
有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。另一个场景是，有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。
所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+ 和 / 这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。
JavaScript 原生提供两个 Base64 相关的方法。
btoa()：任意值转为 Base64 编码atob()：Base64 编码转为原来的值
注意，这两个方法不适合非 ASCII 码的字符，会报错。要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。如可以使用 encodeURI() / encodeURIComponent 方法
JavaScript编码转换（UTF-8、UTF-16）
JavaScript编码转换（UTF-8、UTF-16）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
function utf16ToUtf8(s){
if(!s){
return;
}
var i, code, ret = [], len = s.length;
for(i = 0; i < len; i++){
code = s.charCodeAt(i);
if(code > 0x0 && code <= 0x7f){
ret.push(s.charAt(i));
}else if(code >= 0x80 && code <= 0x7ff){
ret.push(
String.fromCharCode(0xc0 | ((code >> 6) & 0x1f)),
String.fromCharCode(0x80 | (code & 0x3f))
);
}else if(code >= 0x800 && code <= 0xffff){
ret.push(
String.fromCharCode(0xe0 | ((code >> 12) & 0xf)),
String.fromCharCode(0x80 | ((code >> 6) & 0x3f)),
String.fromCharCode(0x80 | (code & 0x3f))
);
}
}
return ret.join('');
}
function utf8ToUtf16(s){
if(!s){
return;
}
var i, codes, bytes, ret = [], len = s.length;
for(i = 0; i < len; i++){
codes = [];
codes.push(s.charCodeAt(i));
if(((codes[0] >> 7) & 0xff) == 0x0){
ret.push(s.charAt(i));
}else if(((codes[0] >> 5) & 0xff) == 0x6){
codes.push(s.charCodeAt(++i));
bytes = [];
bytes.push(codes[0] & 0x1f);
bytes.push(codes[1] & 0x3f);
ret.push(String.fromCharCode((bytes[0] << 6) | bytes[1]));
}else if(((codes[0] >> 4) & 0xff) == 0xe){
codes.push(s.charCodeAt(++i));
codes.push(s.charCodeAt(++i));
bytes = [];
bytes.push((codes[0] << 4) | ((codes[1] >> 2) & 0xf));
bytes.push(((codes[1] & 0x3) << 6) | (codes[2] & 0x3f));
ret.push(String.fromCharCode((bytes[0] << 8) | bytes[1]));
}
}
return ret.join('');
}
|
CSS
浮动塌陷
高度塌陷的产生条件和解决方法
万能清除法(更适合整站开发)—-最常用的
给塌陷的元素加 :after 伪类
1
2
3
4
5
6
7
8
| .selector:after {
content: " ";
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
|
:after 对于IE8以下有兼容问题，所以给塌陷的元素
Ruoyi-Vue
自定义表单验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
export default {
data() {
const checkChinese = (rule, value, callback) => {
if (/.*[\u4e00-\u9fa5|-]+.*$/.test(value)) {
return callback(new Error('文件名不能含有中文、-'));
}
callback();
};
return {
rules: {
fileName: [
{ validator: checkChinese, trigger: ["blur", "change"] }
]
}
}
}
}
</script>
|
多个按钮单独设置 loading
重点：:loading="scope.row.updateLoading"
1
2
3
4
5
6
7
8
| <el-button
size="mini"
type="text"
icon="el-icon-upload"
:loading="scope.row.updateLoading"
@click="handleUpdate(scope.row)"
v-hasPermi="['cont:update:update']"
>更新</el-button>
|
method 中
1
2
3
4
5
6
7
| handleUpdate(row) {
this.$set(row, 'updateLoading', true);
setTimeout(() => {
this.$set(row, 'updateLoading', false);
this.msgSuccess("更新成功");
}, 3000)
},
|
app-main 高度，不出现滚动条
layout/components/AppMain.vue :
1
2
3
4
5
6
| .hasTagsView {
.app-main {
min-height: calc(100vh - 128px);
}
}
|
electron
安装 electron ，卡在 node install.js 报错
在 ~/.npmrc 添加
1
| electron_mirror=http://npm.taobao.org/mirrors/electron/
|
打包
1
| electron-packager ./ app --out=dist
|
–no-sandbox
兼容IE8
IE8常见兼容问题及解决方法总结
HTML
JS
判断是否ie8
Jquery
1
2
3
| if ($.browser.msie && $.browser.version == '8.0') {
console.log('ie8')
}
|
console
写在全局
1
2
3
4
5
| window.console = window.console || (function () {
var c ={};
c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile= c.clear = c.exception = c.trace = c.assert = function(){};
return c;
})();
|
event
获取当前 event
1
| var e = event || arguments.callee.caller.arguments[0];
|
获取鼠标点击的当前元素 target
1
2
3
4
5
| var event = window.event || e;
var objEle = event.target || event.srcElement;
if (objEle.id == 'xxx') {
return;
}
|
stopPropagation
函数调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| var e = event || arguments.callee.caller.arguments[0];
if (e.stopPropagation) {
e.stopPropagation();
} else {
if (typeof(e.cancelBubble) != 'undefined') {
e.cancelBubble = true
} else {
if (e.domEvent && typeof(e.domEvent.cancelBubble) != 'undefined') {
e.domEvent.cancelBubble = true
} else {
if (window.event && typeof(window.event.cancelBubble) != 'undefined') {
window.event.cancelBubble = true;
}
}
}
}
|
preventDefault
a 标签
1
| <a href="javascript:void(0)">跳转到首页</a>
|
函数调用
1
2
3
4
5
6
7
8
| function preventDefault(e) {
var event = window.event || e;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
|
remove()
1
2
3
4
5
6
| var html = document.getElementById('xxx');
if (html.remove) {
html.remove(true);
} else {
html.removeNode(true);
}
|
indexOf()
写在全局
1
2
3
4
5
6
7
8
9
10
| if (!Array.indexOf) {
Array.prototype.indexOf = function (obj) {
for (var i = 0; i < this.length; i++) {
if (this[i] == obj) {
return i;
}
}
return -1;
}
}
|
trim()
写在全局
1
2
3
| String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
};
|
日期格式化
函数调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function dateFormat(dateString, format) {
if (!dateString) {return "";}
var time = new Date(dateString.replace(/-/g,'/').replace(/T|Z/g,' ').trim());
var o = {
"M+": time.getMonth() + 1,
"d+": time.getDate(),
"h+": time.getHours(),
"m+": time.getMinutes(),
"s+": time.getSeconds(),
"q+": Math.floor((time.getMonth() + 3) / 3),
"S": time.getMilliseconds()
};
if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return format;
}
|
1
| dateFormat('2021-05-15 20:50:00', 'yyyy-MM-dd')
|
window.innerHeight
1
2
3
| var height = window.innerHeight || document.documentElement.clientHeight
|
获取文件大小
需要修改 Internet 选项
1
2
3
4
5
6
7
8
9
| try{
document.getElementById("uploadInput").select();
var realPath = document.selection.createRange().text;
var fso = new ActiveXObject("Scripting.FileSystemObject");
alert(fso.GetFile(realPath).size);
} catch(e) {
alert(e + "\n" + "如果错误为：Error:Automation 服务器不能创建对象；" + "\n" + "请按以下步骤配置IE8浏览器：" + "\n" + "请打开【Internet选项-安全-Internet-自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本-启用(不安全)-确定】");
return;
}
|
CSS
background-size
使用 backgroundsize.min.htc
background-size-polyfill
1
2
3
4
5
6
| .selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
|
圆角、阴影、渐变
使用 pie.htc
PIE使IE支持CSS3圆角盒阴影与渐变渲染
demo
1
2
3
4
5
6
7
8
9
| .selector {
position: relative;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
behavior: url(pie.htc);
}
|
使用 respond.js
Respond
遮罩层阻止下层样式反应、点击事件
再起一个半透明遮罩层
1
2
3
4
5
6
7
8
9
10
11
12
13
| #mask {
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
|
PHP
下载文件，中文文件名乱码
PHP下载文件名中文乱码解决方法和PHP下载流程分析
ie8采用 urlencode 编码，无法处理 utf-8 的中文名
支持所有主流浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <?php
$ua = $_SERVER["HTTP_USER_AGENT"];
$filename = "中文 文件名.txt";
$encoded_filename = urlencode($filename);
$encoded_filename = str_replace("+", "%20", $encoded_filename);
header('Content-Type: application/octet-stream');
if(preg_match("/MSIE/", $ua) || preg_match("/Trident\/7.0/", $ua)){
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
} else if (preg_match("/Firefox/", $ua)) {
header('Content-Disposition: attachment; filename*="utf8\'\'' . $filename . '"');
} else {
header('Content-Disposition: attachment; filename="' . $filename . '"');
}
print 'ABC';
?>
|
