0%

基础概念

设备像素或逻辑像素

指设备能控制显示的最小物理单位,意指屏幕上一个个的点。

CSS像素或设备独立像素

指CSS样式代码中使用的逻辑像素,即 px(在iPhone中单位为pt)。

像素密度(PPI)

指设备能控制显示的最小物理单位,意指屏幕上一个个的点(=设备像素或逻辑像素)。PPI 越高,分辨率也就越高。

像素比(DPR)

像素比 = 设备像素 / CSS像素。

rem

rem 是一个相对单位,区别于 em(相对于父亲的字体大小) ,它是相对于 html 的字体大小单位。

阅读全文 »

ArrayBuffer 表示二进制数据的原始缓冲区,该缓冲区用于存储各种类型化数组的数据。是最基础的原始数据容器,无法直接读取或写入, 需要通过其他方式来读写。如:

1
2
3
4
5
6
7
Int8Array             8位有符号整数
Uint8Array 8位无符号整数
Uint8ClampedArray 8位无符号整数,像素操作

Int16Array 16位有符号整数
Uint16Array 16位无符号整数
...
阅读全文 »

由于 js 无法对文件直接操作,所以通过 js 下载文件的原理是创建一个 标签,然后让其执行 click() 方法来进行下载。

具体代码如下:

1
2
3
4
5
6
// 假设 data 为后台返回的 ArrayBuffer
let link = document.createElement('a');
link.href = window.URL.createObjectURL(new Blob([data]));
link.download = file.name;
link.click();
window.URL.revokeObjectURL(str2ab(sm4_decrypt_str));

我们这里用到了 Blob 类,接下来就来讲一下 Blob 的用法。

阅读全文 »

上传图片(其他任何文件)其实就是点击 type=file 的 input 标签,然后在 js 中获取。

本地预览图片就是为获得的图片创建一个 url,然后通过 img 标签将其显示出来。

具体代码如下:

阅读全文 »

问题描述

在使用 jQuery 封装的 ajax 请求发送图片等一系列文件时,使用 FormData 传入数据作为 data 的属性值,会出现这个错误。

报错原因

jQuery 封装的 ajax 里面的 Content-Type 属性默认为 true,它会设置请求头中 Content-Type= "application/x-www-form-urlencoded"。而使用 FormData 传输数据时默认的 Content-Type 为 MultiPart/form-data,二者相互矛盾,所以报错。

阅读全文 »

我们来看一下 jquery 实现的 Ajax 请求:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const data = {'data': 'silence'};
$.ajax({
url: 'http://127.0.0.1:8000/hello',
async: false,
type: 'post',
head: {
'accept': 'application/json',
'content-type': 'application/json'
}
data: JSON.stringify(data),
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(res) {
console.log(res.responseText);
}
});

注意:js 发送 json 数据时,发送的是 json 字符串而不是 json 对象。比如 {'data': 'silence'} 是 json 对象,发送时会报解析 json 失败的错误。应该发送的是 "{'data': 'silence'}",json 对象转换为 json 字符串可以使用 JSON.stringify()

json 字符串转换为 json 对象可以使用 JSON.parse()

js 自身并没有字符串格式匹配功能,但是我们可以基于 replace 方法实现一个 format 方法。

1
2
3
4
5
6
7
8
9
10
11
12
// 字符串格式化函数
String.prototype.format = function () {
// 数据长度为空,则直接返回
if (arguments.length == 0){
return this;
}
// 使用正则表达式,循环替换占位符数据
for (var result = this, i = 0; i < arguments.length; i++){
result = result.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
}
return result;
};

然后我们就可以使用它:

1
2
3
4
let str = "my name is {0}, my age is {1}".format('silence', '23');
console.log(str);

// 输出:my name is silence, my age is 23

XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 ajax 编程中被大量使用。

方法

XMLHttpRequest.open()

初始化一个请求,其有三个参数:

1
2
3
4
5
XMLHttpRequest.open(method, url, async)

// method:请求方法,如 post get delete 等
// url:请求路径
// async:是否异步,默认为 true
阅读全文 »

安装全局 @vue/cli

Vue3 与 Vue2 的脚手架安装方式稍有不同,Vue2 安装的是 vue-cli,Vue3 安装的是 @vue/cli。如果之前已经安装过 Vue2 的 vue-cli,那么要先将其卸载,再安装 Vue3 的 @vue/cli。而且 @vue/cli 仍可以创建 Vue2 项目,所以可放心卸载。

安装 @vue/cli 的命令如下:

1
npm install @vue/cli -g

创建 Vue 项目

创建项目的方式也与 Vue2 不同,执行如命令:

阅读全文 »

pycharm 创建 python 虚拟环境

打开 pycharm,点击 File -> settings -> Project -> Python Interpreter,然后点击右上角的设置图标 -> Add,弹出一个界面,其中 Location 表示存放将要创建的虚拟环境的位置,Base interpreter 表示这个虚拟环境是基于哪个 python 来创建的,此处为系统中 python 文件夹所在的路径。然后点击 OK 创建成功。

创建成功后,我们需要进入虚拟环境,这样通过 pip 安装的包才能安装到虚拟环境中。进入虚拟环境的方式因操作系统的不同而有所差别:

阅读全文 »