表格不分页渲染大量数据卡顿的优化方案
在开发项目的过程中遇到需求：表格渲染大量的数据，要求不使用分页。并且要运行在硬件配置相对较低及浏览器版本也较低的政府相关部门中。
结果：正常使用蚂蚁金服的Table组件渲染的话，在低配置电脑和低版本浏览器中渲染非常卡顿，甚至导致页面卡死。于是需要进行优化。高配置一点的电脑，渲染不会卡死，但也会有五六秒左右的渲染时间。
思路：
保证Table组件中渲染的数据，永远只有20条(可以任意其他条数都行)。当滚动条滚动时，则渲染不同的20条数据。
在表格DOM结构中append一个tr节点，设置高度，用于撑开表格结构，使渲染20条数据的滚动条高度看起来和渲染所有数据的滚动条高度一样(随着滚动条滚动，这个tr节点的高度要随之减少)
同样为了视觉效果，需要设置表格DOM结构的transform: translateY属性，使得表格滚动时，其上部的高度也能撑开
实现方法：
Vue中可以使用computed计算属性，对所有的数据进行过滤，只取20条。
监听表格的滚动事件，在事件中改变当前的20条数据，同时改变tr节点的高度以及表格的transform: translateY属性
以 ...
node连接mysql创建简单服务
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181// 引入expressconst express = require('express')// 引入mysq ...
JS中Map和Object的对比
在做算法题的过程中，发现当用数字作为一个对象的键来存储数据时，后续取对象中的数据，并不会根据你存入的顺序取出数据。
由此判断出对象中的键其实不是无序的，这个时候可以使用 Map 数据结构来代替。
一、Map 介绍Map 和 Object 一样用来存取键值对形式的数据。不过 Object 可以使用字面量和构造函数两种方式创建，而 Map 结构必须使用构造函数创建。如下所示：
12345678910// 创建一个空的Map对象const mapOne = new Map()// 创建一个Map对象并赋初值，参数必须是一个数组(或iterable对象)。// 其元素为键值对(两个元素的数组，例如: [[ 1, 'one' ],[ 2, 'two' ]])。 每个键值对都会添加到新的 Mapconst mapTwo = new Map([ [1, 'one'], [true, 'two'], [{ a: '1' }, 'three'],])
正如 ...
查缺补漏之async await
在开发过程中，时有遇到多个请求时，后一个请求需要依赖前一个请求拿到的结果进行请求。为处理这种情况，下面对 ES6 中Promise方法和async和await关键字进行总结
一、Promise 方法使用在编写 vue 组件时，我们的请求大多都写在 methods 对象中，要想将请求封装成独立的方法，通常会使用如下形式：
1234567891011testGet() { this.$axios('https://jsonplaceholder.typicode.com/comments/1') .then((res) => { if (res.status === 200) { console.log('请求成功', res) } }) .catch((err) => { console.log('请求失败', err) })},
这样在其他方法内需要调用该接口则直接调用该 testGet ...
查缺补漏之正则表达式
首先要明白正则表达式可以干什么？
正则表达式是用于匹配字符串中字符组合的模式。简单的说就是比如你想知道一串数字是否是正确的手机号。就需要用到正则表达式。由于之前一直对正则表达式的知识比较薄弱，所以在此进行查缺补漏
一、创建一个正则表达式创建一个正则表达式的方法有两种：
字面量创建；1const regTest = /[a-z]/
使用构造函数创建1const regTest = new RegExp('[a-z]')
这里就使用第一种简单字面量的方式来熟悉正则表达式相关知识。正则表达式的匹配方法有很多例如 exex()、test()、match()等。这里主要熟悉正则的编写，方法先不做介绍。能看懂下面的匹配方法就行
123const helloReg = /Hello/const str = 'Hello World'helloReg.test(str) // true
二、正则表达式修饰符修饰符是在字面量的结尾加上的参数。或是用构造函数创建的对象第二个参数。如:new RegExp('[a-z]', i);
修饰符
描 ...
JS读取用户命令行的输入
这阵子在看牛客网上看一些编程题，发现有一部分的编程题是需要读取用户输入，并输出结果的。在我开发前端以来，使用 JS 读取用户输入的内容好像从没用过。所以一开始的我一头雾水。网上有介绍说 Node 的方法 readline 可以逐行读取用户输入信息。于是便在此对 readline 方法进行总结
readline 使用123456789101112// 1.引入readline模块const readline = require('readline')// 2.创建 Interface 类的实例const rl = readline.createInterface({ input: process.stdin, // 输入的流 output: process.stdout, // 输出的流})// 监听line事件，读取用户输入的一行内容(用户敲回车键之前的所有内容)rl.on('line', function (input) { // input便是用户输入的一行内容 console.log(`接收到：$& ...
HTTP与HTTPS的介绍
HTTP 协议一、什么是 HTTP 协议？
HTTP 是一个用在计算机世界里的协议。它使用计算机能够理解的语言确立了一种计算机之间交流通信的规范（两个以上的参与者），以及相关的各种控制和错误处理方式（行为约定和规范）。
HTTP 是一个在计算机世界里专门在「两点」之间「传输」文字、图片、音频、视频等「超文本」数据的「约定和规范」。
二、HTTP 常见的状态码
1XX 类状态码属于提示信息，是协议处理中的一种中间状态，实际用到的比较少。
2XX 类状态码表示服务器成功处理了客户端的请求，也是我们最愿意看到的状态。
「200 OK」是最常见的成功状态码，表示一切正常。如果是非 HEAD 请求，服务器返回的响应头都会有 body 数据。
「204 No Content」也是常见的成功状态码，与 200 OK 基本相同，但响应头没有 body 数据。
「206 Partial Content」是应用于 HTTP 分块下载或断电续传，表示响应返回的 body 数据并不是资源的全部，而是其中的一部分，也是服务器处理成功的状态。
3XX 类状态码表示客户端请求的资源发生了变动，需要客 ...
Java实现登录功能的加密与解密
加密算法： MD5用到的 java 工具类： DigestUtils地址使用方法：首先在 SpringBoot 的 pom.xml 文件中添加依赖12345<!-- MD5加密依赖 --><dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId></dependency>
然后添加一个工具类 MD5Utils.class 内容如下12345678910111213141516171819202122import org.apache.commons.codec.digest.DigestUtils;public class MD5Utils { public static String md5(String src) { return DigestUtils.md5Hex(src); } ...
项目问题总结(持续更新)
2021-03-16 更新1.旋转元素遇到的问题想要某块元素实现旋转，通常情况下使用 css 的 transform 属性设置rotate(角度deg)即可。如下
123456div { // 使用transform旋转 transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */}
但是很多情况下，我们使用了旋转后发现效果并不是期待的那样，也许就需要用到我接下来说的属性来解决。
rotate 旋转属性默认都是以自身元素的中心为圆心来旋转，如下图。如果我们希望它不是围绕自身元素的中心旋转，这时就需要 transform-origin 属性来修改旋转圆心（这里只介绍 transform-origin 两个参数 2d 平面的旋转用法。3 个参数的 3d 用法暂不考虑）
我们希望黄色区域旋转 90 度后与白色区域重叠，就需要对旋转中心进行设置。将圆心设在如下位置后就可以达 ...
网站上线部署流程
1.服务器购买国内服务器： 阿里云 ECS(Elastic Compute Service)， 腾讯云 CVM(Cloud Virtual Machine)等
国外服务器：日本[Vultr]，美国 Linode，谷歌云，微软 Azure，亚马逊 AWS 等
这一步需要创建好服务器实例，分配好公网 IP 地址。
2.域名购买国内：阿里、腾讯等
国外：Godaddy
3.域名解析(配置 DNS)注册好域名后需要将域名映射到自己服务器对应的 ip 地址，这样别人才能通过域名访问到我们的服务器。
这个步骤叫做域名解析，通过域名服务商提供的后台就可以操作，一般域名解析会有延迟，不是及时生效的。
4.服务器环境搭建这里我选择的是CentOS操作系统（其他系统命令不同）
配置服务器， Mac 系统下直接使用终端就 ok
windows 系统下需要用到 git bash，或者别的工具(Putty)
需要用到的 Linux 系统操作命令
1234567891011121314151617181920# 远程连接命令ssh root@域名# 展示当前文件夹路径pwd# 切换文件夹目录cd 目录# ...
