H5UI库、加密技术和二维码

鸣鲷有柒

已于 2023-01-05 09:57:22 修改

阅读量680

点赞数 1

文章标签： ui 前端 javascript

于 2023-01-03 19:11:21 首次发布

本文链接：https://blog.csdn.net/m0_74343097/article/details/128537718

版权

一、H5UI库

1. 使用方法：

（1）页面中引入css文件

h5ui.css （h5ui.min.css）

（2）页面中引入js文件

jquery.min.js

h5ui.min.js

2. 组件的用法

（1）消息框的使用：alert

（2）按钮的使用：button

有三种类型（primary、danger、default）

（3）对话框的使用：dialog

对话框的类型：

a. 模式对话框：该类型的对话框弹出后，用户再不能进行其他的操作。

b. 非模式对话框：该类型的对话框弹出后，用户可以进行其他的操作，该对话框可以停留在窗口的某个位置。

（4）表单的使用：form

（5）复选框的使用：chedkbox

（6）单选按钮：radio

（7）下拉列表框：select

<!-- 下拉列表框 -->
    <div class="h5ui-form">
        <label for="province" class="h5ui-form-label">选择省份</label>
        <div class="h5ui-select">
            <select name="provine" id="province">
                <option value="#">请选择</option>
                <option value="101">北京市</option>
                <option value="102">上海市</option>
                <option value="103">天津市</option>
                <option value="104">重庆市</option>
                <option value="105">陕西省</option>
            </select>
        </div>
    </div>

（8）导航条：navbar

（9）标签：tab

练习：用h5ui做省-市-县区级联

    <link rel="stylesheet" href="./h5ui_2.2/h5ui_2.2/css/h5ui.min.css">

<body>
    <div class="h5ui-form">
        <label class="h5ui-form-label" for="province">选择省份</label>
        <div class="h5ui-select">
            <select name="province" id="province">
                <option value="0">请选择</option>
            </select>
        </div>
    </div>

    <div class="h5ui-form">
        <label class="h5ui-form-label" for="city">选择城市</label>
        <div class="h5ui-select">
            <select name="city" id="city">
                <option value="0">请选择</option>
            </select>
        </div>
    </div>

    <div class="h5ui-form">
        <label class="h5ui-form-label" for="district">选择区县</label>
        <div class="h5ui-select">
            <select name="district" id="district">
                <option value="0">请选择</option>
            </select>
        </div>
    </div>

    <script src="./h5ui_2.2/h5ui_2.2/js/jquery.min.js"></script>
    <script src="./h5ui_2.2/h5ui_2.2/js/h5ui.min.js"></script>
    <script src="./ProJson.js"></script>
    <script src="./CityJson.js"></script>
    <script src="./DistrictJson.js"></script>

    <script>
        $(function () {
            //调用jquery的each方法，遍历province数组
            $.each(Province, function (index, item) {
                //将省份添加到对应的下拉列表中
                $('#province').append(`<option value=${item.provinceId}>${item.proName}</option>`)
            })

            //给省份注册change事件：当省份发生改变时，将对应的城市放到城市的下拉列表中
            $('#province').change(function () {
                let pro_id = $(this).val()//2.1获取选择的省份的value(provinceId)
                //2.2删除city下拉列表中原有的数据
                $('#city option:gt(0)').remove()
                //2.3遍历City数组，找到省份对应的城市
                $.each(City, function (index, item) {
                    if (item.provinceId == pro_id) {
                        //将省份添加到对应的下拉列表中
                        $('#city').append(`<option value=${item.cityId}>${item.cityName}</option>`)
                    }
                })
            })

            //3.给城市注册change事件：当城市发生改变时，将对应的县区放到城市的下拉列表中
            $('#city').change(function () {
                let city_id = $(this).val()
                $('#district option:gt(0)').remove()
                $.each(District, function (index, item) {
                    if (item.cityId == city_id) {
                        //将省份添加到对应的下拉列表中
                        $('#district').append(`<option value=${item.districtId}>${item.districtName}</option>`)
                    }
                })
            })
        })
    </script>
</body>

二、加密技术

为了保证数据的安全性和防篡改，很多数据在传输中都进行了加密。例如，很多网站升级到 https 协议， https 协议就是使用了非对称加密和 hash 签名，还有 github使用的 ssh ，也是非对称加密。还有大部分登录时密码采用的 MD5 加密等等

1. 对称加密：单密钥加密。同一个密钥可以同时用作信息的加密和解密，这种加密方法称为对称加密，也称为单密钥加密。

对称加密目前主流的有 AES 和 DES ， AES 是新一代的标准，速度快，安全级别更高。

1）AES
AES 的加密模式有五种: CBC、ECB、CTR、OCF、CFB

ECB: 电子密本方式，需要一个密钥即可，特点是简单，利于并行计算。
CBC: 密文分组链接方式，除了需要一个密钥之外，还需要一个向量，向量的作用也是用于数据的加密，所以这个的安全性要好于 ECB
CTR、OCF、CFB:具体算法的实现方式不一样,优缺点也各不相同,而这几个都同 CBC一样，都需要密钥和向量。

AES 有三种长度 128 位、192 位、256 位，这三种的区别，主要来自于密钥的长度，16 字节密钥=128 位，24 字节密钥=192 位，32 字节密钥=256 位。如下表格:

长度	密钥长度	向量长度
128 位	16	16
192位	24	16
256 位	32	16

2）DES
加密默认与 AES 相同，也有五种模式，除了 ECB 只需要密钥，其他模式需要密钥和向量。与 AES 不同的是， DES 的密钥长度只有 8 字节，向量也是 8 字节。
3）编码实现
a. 安装 crypto-js 模块
npm install crypto-js
b. 在js 文件中引入 crypto-js 模块

2. 非对称加密：有两把密码，公钥(用于加密)，私钥(用于解密)

3. 摘要算法(HASH)：把任意长度的输入，根据算法生成一串固定长度的伪随机数 —- MD5

特点：

不需要密钥，加密出来的数据无法被解密，具有不可逆性。
生成的摘要长度是固定的，与输入无关。
相同的输入，使用相同的实现，生成的摘要一定相同:不同的输入，生成的摘要是大相径庭的，即不会发生碰撞。

4. 前端的加密：

（1）使用AES加密、解密：

（2）使用MD5加密：

三、二维码

1. 什么是二维码
二维码又称 QR Code，QR 全称 Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的 BarCode 条形码能存更多的信息，也能表示更多的数据类型。
二维条/二维码(2-dimensional bar code) 是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的，在代码编制上巧妙地利用构成计算机内部逻辑基础的"0"、"1"比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理。

二维条/二维码具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度，具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。
2. 二维码优势

信息容量大,可以容纳多达 1850 个大写字母或 2710 个数字或 500 多个汉字
应用范围广，支持文字,声音,图片,指纹等等..
容错能力强，即使图片出现部分破损也能使用
成本低容易制作

3. 二维码容错级别

L 级(低)7%的码字可以被恢复。
M 级 (中) 的码字的 15%可以被恢复。
Q 级(四分) 的码字的 25%可以被恢复
H级 (高) 的码字的 30%可以被恢复

4. qrious 是一款基于 HTML5 Canvas 的纯 JS 二维码生成插件。通过 qrious.js 可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行 Base64 编码。

参数	类型	默认值	描述
background	String	"white"	二维码的背景色
foreground	String	"black"	二维码的前景色
level	String	"L”	二维码的误差校正级别(L.M,Q,H)
mime	String	"image/png"	二维码输出为图片时的 MIME 类型
size	Number	100	二维码的尺寸，单位像素
value	String	" "	需要编码为二维码的值