前言 开发网站登录功能时，如何保证密码在传输过程/储存的安全？
相信不少前后端的朋友，在面试时都会被问到类似的问题。
在我对密码学一无所知时，也仅会回答：“MD5加密啊。”
诸不知，密码学在网络七层模型，甚至web开发中的应用比我想象得多得多。
1. 什么是密码学？ 密码学是各种安全应用程序所必需的，现代密码学旨在创建通过应用数学原理和计算机科学来保护信息的机制。但相比之下，密码分析旨在解密此类机制，以便获得对信息的非法访问。
密码学具有三个关键属性：
机密性，为了防止未经授权的各方访问信息（换句话说，是要确保只有经过授权的人才能访问受限制的数据）。 完整性，是指保护信息不被随意篡改 真实性，与识别信息的所有者有关。 例如个人医疗数据：
机密性，个人医疗数据需要保密，这意味着只有医生或医护人员才能访问它。 完整性，还必须保护其完整性，因为篡改此类数据可能导致错误的诊断或治疗，并给患者带来健康风险。 真实性，患者数据应与已识别的个人联系起来，且患者需要知道操作者（医生）是谁。 在本文中，我们将从加密，哈希，编码和混淆四种密码学基础技术来入门。
本文图片经过再制，方便看懂。
大纲和主体内容引自： How Secure Are Encryption, Hashing, Encoding and Obfuscation?
2. 什么是加密？ 加密定义：以保证机密性的方式转换数据的过程。
为此，加密需要使用一个保密工具，就密码学而言，我们称其为“密钥”。
加密密钥和任何其他加密密钥应具有一些属性：
为了保护机密性，密钥的值应难以猜测。 应该在单个上下文中使用它，避免在不同上下文中重复使用（类比JS作用域）。密钥重用会带来安全风险，如果规避了其机密性，则影响更大，因为它“解锁”了更敏感的数据。 2.1 加密的分类：对称和非对称 加密分为两类：对称和非对称
对称加密：
用途：文件系统加密，Wi-Fi保护访问（WPA），数据库加密（例如信用卡详细信息）
非对称加密：
用途： TLS，VPN，SSH。
其主要区别是：所需的密钥数量：
在对称加密算法中，单个密用于加密和解密数据。只有那些有权访问数据的人才能拥有单个共享密钥。 在非对称加密算法中，使用了两个密钥：一个是公用密钥，一个是私有密钥。顾名思义，私钥必须保密，而每个人都可以知道公钥。 应用加密时，将使用公钥，而解密则需要私钥。 任何人都应该能够向我们发送加密数据，但是只有我们才能够解密和读取它。 通常使用非对称加密来在不安全的通道上进行通信时，两方之间会安全地建立公共密钥。 通过此共享密钥，双方切换到对称加密。 这种加密速度更快，更适合处理大量数据。 能被密码界承认的加密算法都是公开的：
某些公司使用专有或“军事级”加密技术进行加密，这些技术是“私有的”。且基于“复杂“算法，但这不是加密的工作方式。 密码界广泛使用和认可的所有加密算法都是公开的，因为它们基于数学算法，只有拥有密钥或先进的计算能力才能解决。 公开算法是得到广泛采用，证明了其价值的。 3. 什么是哈希？ 哈希算法定义：·一种只能加密，不能解密的密码学算法，可以将任意长度的信息转换成一段固定长度的字符串。
加密算法是可逆的（使用密钥），并且可以提供机密性（某些较新的加密算法也可以提供真实性），而哈希算法是不可逆的，并且可以提供完整性，以证明未修改特定数据。
哈希算法的前提很简单：给定任意长度的输入，输出特定长度的字节。在大多数情况下，此字节序列对于该输入将是唯一的，并且不会给出输入是什么的指示。换一种说法：
仅凭哈希算法的输出，是无法确定原始数据的。 取一些任意数据以及使用哈希算法输出，就可以验证此数据是否与原始输入数据匹配，从而无需查看原始数据。 为了说明这一点，请想象一个强大的哈希算法通过将每个唯一输入放在其自己的存储桶中而起作用。当我们要检查两个输入是否相同时，我们可以简单地检查它们是否在同一存储桶中。
散列文件的存储单位称为桶（Bucket）
3.1 例子一：资源下载 提供文件下载的网站通常会返回每个文件的哈希值，以便用户可以验证其下载副本的完整性。
例如，在Debian的图像下载服务中，您会找到其他文件，例如SHA256SUMS，其中包含可供下载的每个文件的哈希输出（在本例中为SHA-256算法）。
下载文件后，可以将其传递给选定的哈希算法，输出一段哈希值 用该哈希值来与校验和文件中列出的哈希值作匹配，以校验是否一致。 在终端中，可以用openssl来对文件进行哈希处理：
Deep Linking 其实 deep linking 并不是一个新名词，在 web 开发领域，区别于指向首页的链接（http://tech.glowing.com/），deep linking 是指向具体内容页的链接（http://tech.glowing.com/cn/advices-to-junior-developers/）。在移动开发领域，deep linking 则是指 mobile app 在 handle 特定 URI 的时候可以直接跳转到对应的内容页或触发特定逻辑，而不仅仅是启动 app。比如 dianping://shopinfo?id=1859284，如果你的手机上装了大众点评的话点击这个链接可以直接跳转到商铺页面。这样做的好处主要有：
在 web 和 app 的切换过程中保留上下文 App 间带上下文切换（用于实现 app 间参数的传递，如授权协议，分享 API 等） Web 页可以被搜索引擎索引，可以通过 SEO 增加访问量从而提高 app 下载量和开启率 目前处理 deep linking，主要有两种方式：
Custom URL Scheme 在 universal links 出现之前的很长一段时间里，iOS 上主要通过 custom URL scheme 来实现 deep linking，以及 app 间的通信。
在 info plist 里设置了自定义 URL 后，handle URL 的入口是 app delegate 方法 application:openURL:sourceApplication:annotation:（iOS 9 开始被 deprecate）或 application:openURL:options:（iOS 9 引入，但如果没有实现这个方法，在 iOS 9 上还是会向前兼容 call 老方法，所以一般还是实现老方法）。
样式设置scoped属性带来的问题 通常我们在写样式的时候会在style标签中加上scoped属性，相信这个属性的作用大家都很清楚（Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范），但是这样有时候也会遇到问题：
假如我写了一个公用组件，想在父组件中改公共组件的样式，用通常的样式覆盖是不可以的。
解决方案 这时候需要用到 /deep/。
项目开发中使用到了elementui组件，后期发现浏览器中的滚动条不仅占宽，还与页面暗色风格不搭配。于是打算寻找一款插件使用，而elementui中的scroll组件刚好满足需要而且兼容ie10+。
官网侧边栏中scroll的使用截图
使用方法 直接在页面中调用el-scroll组件
占位 页面内渲染出的dom结构可以看出，组件内总共有三块内容
最外层：el-scrollbar。使用时需要指定高度和宽度 第一块代码：el-scroll__wrap：
1).overflow:scroll是写在这里的，通过margin为负，将浏览器中的原始滚动条排除视觉内隐藏掉。
2).el-scroll__view包裹滚动区域 第二块代码：el-scroll__bar is-horizontal: 横向滚动条 第三块代码：el-scroll__bar is-vertical: 纵向滚动条 组件的自定义属性 根据官网的scroll组件源码，可以看到scroll组件是有几个属性可以传入的。具体使用可以自己研究下，主要就是传入自定义样式和class，注意自定义stlye接收的是数组类型。
举栗子：
vue-amap中添加高德地图地图的自定义样式 高德地图的自定义样式列表：
使用： amap://styles/+ 样式的名称
如： 使用标准颜色
amap://styles/normal
依次类推
标准
normal
幻影黑
dark
月光银
light
远山黛
whitesmoke
草色青
fresh
雅士灰
grey
涂鸦
graffiti
马卡龙
macaron
靛青蓝
blue
极夜蓝
darkblue
酱籽
wine
vue中：
script :
Recent Posts 暗网网址导航大全（2021年12月更新） 暗网网址合集 暗网链接 Deep Web Link Director 全球十大暗网搜索引擎 最详细的暗网教程——tor洋葱浏览器的安装和使用方法 最新darkweb暗网搜索引擎——Tordex | The Uncensored Tor Search Engine 顶级保密暗网网址分享 如何进入暗网？教程+工具 Tor 洋葱浏览器 如何进入暗网详细步骤（暗网网桥获取方法） 什么是“暗网”？我们该如何访问? Deep Web / Dark Web 大全 Tagsandroid (10) application (5) google (7) hacker (5) internet (5) java (7) Linux (16) network (6) qq (4) Source Code Analysis (15) tor (44) ubuntu (14) web (21) windows (9) 互联网 (7) 产品 (6) 代理服务器 (5) 信息安全 (4) 其他 (7) 区块链 (4) 存储 (4) 安全 (11) 工作 (20) 工具 (10) 手机 (9) 搜索引擎 (5) 暗网 (16) 服务器 (10) 杂项 (17) 活动 (12) 测试 (5) 浏览器 (19) 深度学习 (5) 照片 (6) 爬虫 (7) 物理学猜想 (10) 环境搭建 (3) 生活 (23) 电信 (4) 电话 (5) 百度 (4) 算法 (5) 网络 (52) 网络安全 (18) 网络安全知识 (6) Categories AI (5) AltiumDesigner (7) BTC (6) darknet (25) Database (3) DeepLearning (78) Docker (1) GIS (9) Google (2) iOS (7) IT (7) java (37) Life (93) linux (86) LPC (11) macOS (6) mysql (5) Python (52) qt (5) SEO (2) threejs (5) Unity (19) 产品设计 (15) 人工智能 (12) 信息安全 (36) 前端 (128) 区块链 (14) 图像处理 (59) 图形视频 (36) 大数据 (15) 嵌入式 (7) 工具 (45) 开发 (57) 性能优化 (2) 技术 (18) 搜索 (10) 操作系统 (35) 教程知识 (1) 教育 (2) 数字图像处理 (3) 数据分析 (2) 数据库 (4) 数据结构 (3) 数论 (1) 显卡驱动 (1) 智能搜索技术 (3) 未分类 (496) 机器学习 (23) 模型压缩 (2) 模拟电路 (1) 模拟题 (1) 比特币 (3) 水下图像增强 (1) 测试 (4) 浏览器 (1) 深网 (2) 渗透测试 (4) 游戏 (2) 游戏开发 (16) 爬虫 (6) 环境搭建 (2) 生活 (5) 电子商务 (1) 硬件设计 (1) 社工库 (1) 神经机制 (1) 移动web (1) 移动开发 (76) 程序员 (6) 站长 (1) 算法 (9) 统计搜索 (9) 网络优化 (7) 网络安全 (80) 视觉 (4) 计算机 (31) 论文 (8) 设计 (6) 资源搜集 (1) 资讯 (34) 软件工具 (15) 软件开发 (26) 运维 (21) 逆向 (2) 项目管理 (4) Archives December 2021 (1) August 2021 (8) April 2020 (4) March 2020 (63) February 2020 (154) January 2020 (134) December 2019 (14) November 2019 (25) October 2019 (27) September 2019 (43) August 2019 (32) July 2019 (51) June 2019 (49) May 2019 (65) April 2019 (64) March 2019 (97) February 2019 (49) January 2019 (78) December 2018 (70) November 2018 (69) October 2018 (31) September 2018 (73) August 2018 (109) July 2018 (70) June 2018 (58) May 2018 (51) April 2018 (52) March 2018 (52) February 2018 (19) January 2018 (25) December 2017 (39) November 2017 (31) October 2017 (26) September 2017 (42) August 2017 (46) July 2017 (50) June 2017 (71) May 2017 (32) April 2017 (29) March 2017 (36) February 2017 (18) January 2017 (25) December 2016 (20) November 2016 (17) October 2016 (19) September 2016 (14) August 2016 (23) July 2016 (26) June 2016 (15) May 2016 (11) April 2016 (21) March 2016 (18) February 2016 (21) January 2016 (14) December 2015 (13) November 2015 (13) October 2015 (6) September 2015 (7) August 2015 (12) July 2015 (11) June 2015 (3) May 2015 (9) April 2015 (12) March 2015 (7) February 2015 (10) January 2015 (10) December 2014 (14) November 2014 (6) October 2014 (10) September 2014 (6) August 2014 (10) July 2014 (11) June 2014 (6) May 2014 (9) April 2014 (6) March 2014 (5) February 2014 (3) January 2014 (3) December 2013 (12) November 2013 (7) October 2013 (6) September 2013 (7) August 2013 (4) July 2013 (5) June 2013 (6) May 2013 (28) April 2013 (17) March 2013 (4) February 2013 (2) January 2013 (6) December 2012 (6) November 2012 (4) October 2012 (6) September 2012 (6) August 2012 (4) July 2012 (8) June 2012 (5) May 2012 (8) April 2012 (15) March 2012 (5) February 2012 (2) January 2012 (3) December 2011 (9) November 2011 (4) October 2011 (1) September 2011 (4) August 2011 (4) July 2011 (4) June 2011 (4) May 2011 (6) April 2011 (2) March 2011 (4) February 2011 (2) January 2011 (3) December 2010 (6) November 2010 (6) October 2010 (5) September 2010 (8) August 2010 (8) July 2010 (7) June 2010 (3) May 2010 (14) April 2010 (7) February 2010 (4) January 2010 (11) December 2009 (8) November 2009 (3) October 2009 (5) September 2009 (4) July 2009 (7) April 2009 (5) March 2009 (5) February 2009 (3) January 2009 (3) December 2008 (5) November 2008 (5) October 2008 (3) September 2008 (3) August 2008 (2) July 2008 (5) June 2008 (6) May 2008 (9) April 2008 (4) March 2008 (5) February 2008 (4) January 2008 (3) December 2007 (6) November 2007 (3) October 2007 (1) September 2007 (5) August 2007 (2) July 2007 (3) June 2007 (3) May 2007 (1) April 2007 (1) March 2007 (2) February 2007 (2) January 2007 (3) December 2006 (1) November 2006 (3) September 2006 (3) July 2006 (1) June 2006 (3) May 2006 (3) April 2006 (1) March 2006 (2) February 2006 (3) January 2006 (1) December 2005 (2) November 2005 (1) September 2005 (1) August 2005 (1) July 2005 (2) April 2005 (2) March 2005 (3) February 2005 (2) January 2005 (2) December 2004 (2) November 2004 (4) September 2004 (2) August 2004 (2) July 2004 (2) September 2003 (1) May 2002 (1) March 2002 (1) Copyright ©️uzzz.
文章参考 vue-easytable 排序 安装 拖拽 无法访问vue-easytable的API页面 之前收藏了vue-easytable的API页面，方便时刻查阅，前几次还好，后面发现推荐给同事和自己打开的时候，就出现了无法访问，开始以为是网络问题或者是服务器挂了，后面发现，只要通过github链接过去就可以了。
排序的问题 根据文档，只需要添加multiple-sort属性即可，但是页面还是无法出现相关的图标，最后跟官网的demo每个字段做相关的对比，原来是我的cloumn的值要在对应的字段中添加orderBy:'asc'属性
export default{ name: 'sort-by-multiple-columns', data(){ return { tableData: [ {"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"} ], columns: [ {field: 'name', title: '姓名', width: 80, titleAlign: 'center',columnAlign:'center',orderBy:'asc',isResize:true} } }, methods: { } } 拖拽的问题 根据文档的要求，我只需要添加 column-width-drag 这个组件就可以了，发现不管怎么使用，都无法拖拽。最后找同事帮忙解决了，原来是因为我设置了不显示表格的border；即 :show-vertical-border='true'即可
<v-table :columns='columns' :table-data='tableData' :show-vertical-border='true' column-width-drag >v-table>
最近好长时间没有写博客，也不知道要写点什么，一直也静不下心来学习，想看会学习视频，手机又放不下，看一会就去玩手机了。最近好不容易下定决心学习一波，虽然有时候还是会玩手机，但是比以前好太多了。
以后我的博客会侧重于Flutter的讲解，有时间也会穿插着Android的一些知识。现在就让我们开始Flutter的踩坑之路吧。
前言 Dart诞生于2011年10月10日，是一种“结构化的Web编程”语言，Dart编程语言在所有现在浏览器和环境中提供高性能。Dart用于Web、服务器、移动应用和物联网等领域的开发。
Dart语言的特性 ①.Dart是AOT(Ahead Of Time)编译的，编译成快速、可预测的本地代码，使Flutter几乎都可以使用Dart编写。
②.Dart也可以JIT(Just In Time)编译，开发周期异常快，工作流颠覆常规。
③.Dart可以更轻松地创建以60fps运行的流畅动画和转场。
④.Dart使Flutter不需要单独的声明式布局语言(如JSX或XML)，或单独的可视化界面构建器，因为Dart的声明式编程布局易于阅读和可视化
Dart重要概念 ①.所有的东西都是对象，无论是变量、数字、函数等都是对象。所有的对象都是类的实例。
②.程序中指定数据类型使得程序合理地分配内存空间，并帮助编译器进行语法检查。但是，指定类型不是必须的。Dart语言是弱数据类型。
③.Dart代码在运行前解析。指定数据类型和编译时的常量，可以提高运行速度。
④.Dart程序有统一的程序入口:main();
⑤.Dart没有public、protected和private的概念。私有特性通过变量或函数加上下划线来表示。
⑥.Dart的工具可以检查出警告信息(warning)和错误信息(error)。
⑦.Dart支持anync/await异步处理。
Dart语言常用库 包名 描述
dart:async 异步编程支持，提供Future和Stream类
dart:collection 对dart:core提供更多的集合支持
dart:convert 不同类型(JSON,UTF-8)间的字符编码、解码支持
dart:core Dart语言内建的类型、对象以及dart语言核心的功能
dart:html 网页开发用到的库
dart:io 文件读写I/O相关操作的库
dart:math 数字常量及函数，提供随机数算法
dart:svg 事件和动画的矢量图像支持
以下三个库的使用频率最高
①.dart:core:核心库，包括strings、numbers、collections、errors、dates、URIs等
②.dart：html:网页开发里DOM相关的一些库
③.dart:io:I/O命令行使用的I/O库
④.dart:core库是Dart语言初始已经包含的库，其他的任何库在使用前都需要加上import语句。
使用官方提供的pub工具可以安装丰富的第三方库。第三方库的地址为：pub.dartlang.org
环境准备 安装Dart SDK 官方共有三种SDK版本选择，分别是Flutter、Web、Server这三种，我们这里只是Dart编程语言的学习，只需要下载Server版的SDK就行。
网址是：https://dart.dev/tools/sdk/archive
分为Windows，Macos和Linux，根据自己的电脑系统下载所需的sdk
配置环境变量 我是在Windows上安装的，通过点击下一步即可安装，安装完成后，需将dart-sdk下的的bin目录添加到系统Path环境变量中。
测试是不是安装成功了，打开cmd，输入dart，出现红框里面的就是成功了
配置idea编辑器 我没有用官方推荐的VSCode编辑器，而是选择了idea编辑器，大家可以根据自己的需求选择编辑器。
在idea中使用Dart语言，要先安装Dart插件
依照如下步骤安装 Dart 的插件
1.依次选择 File -> Setting 打开 IDEA 设定的界面
2.选择 “Plugins” 选项，在输入输入“Dart”并点击搜索按钮
解决Scoped CSS内想修改组件库组件样式问题：
分析：Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了
解决方案：
提取一个公共文件，在公共文件里面修改样式 存在问题：别人和你使用相同的组件，但并不想用你修改后的样式。当然，你们可以强行给自己的元素加一个独特的类名，或者尝试自己封装一个组件，但是都不太现实，所以就需要有一个方法，既不影响到别的地方，又能修改子组件在当前的样式。
使用>>>穿透scoped & >>> .swiper-container { overflow: visible; } .question[data-v-0b9a2966]表示子组件使用了scoped
注意：有些预编译器不支持>>>，可以使用/deep/
& /deep/ .swiper-container { overflow: visible; }
原文：https://blog.csdn.net/ysq5202121/article/details/50809494
1、用线性渐变实现如下图的斜线？
答案：
div{margin:50px auto; width:100px;height:100px;border:1px solid #333; background:linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
}
2、用CSS实现单行居中显示文字，多行居左显示效果，如图：
答案:
只有一行时居中显示文字，多行居左显示多行居左显示
body,p{ margin: 0; padding: 0;}
div{text-align: center;width: 400px;height: 400px; background: #ddd; margin: 30px auto; font-size: 20px;}
p{display: inline-block;text-align: left;}
3、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
答案：标准的盒模型是基于 doctype 正确书写的情况下，并且是高于 IE6 的浏览器才会有的。
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
4、什么是外边距重叠？重叠的结果是什么？
答案：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3）两个外边距一正一负时，折叠结果是两者的相加的和。
5、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
答案：一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。在布局上有了比以前更加灵活的空间。