舞动的灵魂

I am a good man

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 安装的包才能安装到虚拟环境中。进入虚拟环境的方式因操作系统的不同而有所差别：

阅读全文 »