js逻辑封装_加密解密

Posted 乖女子@@@

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js逻辑封装_加密解密相关的知识，希望对你有一定的参考价值。

目录

加密的本质是对原来为明⽂的⽂件或数据按某种算法进⾏处理，使其成为不可读的⼀段代码。

知识点1 - 加密分类

[1] 对称加密

  • 定义： 对称加密指加密和解密使⽤相同密钥的加密算法，也称为单密钥加密。
  • 特点：算法公开、计算量量少、 加密速度快，对于同样⼤小的传输对象，对称加密效率通常为非对称加密的千倍左右，因此通常被广泛应。eg:https在真正数据通信时就是使⽤的对称加密算法
  • 缺点：
    • 加解密使⽤同一把密钥，一旦一⽅密钥泄露，传输的数据就存在安全⻛风险。
    • 与多方的通信需要 使⽤不同的密钥，通信双方需要管理大量的密钥。
  • 常⻅的对称加密算法:ESC，DES、3DES、TDEA、Blowfish、RC2、RC4、RC5、IDEA、SKIPJACK等

[2] ⾮对称加密

  • 定义：非对称加密使⽤一对公钥和私钥来加密通信数据，也称为双密钥加密。
    • 公钥和私钥是成对出现的，通信数据使⽤公钥加密后，只能通过对应私钥来解密，同样使⽤私钥加密后也只能通过公钥来解密查看。公钥是对外公开的，外界通信方可以很容易获取到，而私钥是不公开的，只存在于己方。服务器器使⽤私钥加密数据往外传输时，可以被持有公钥的客户端解密查看，但客户端使用公钥加密数据传输给服务端时，数据是严格安全的，只有服务器使用私钥才能解密查看。
  • 特点：非对称密钥数据通信是单向安全的，客户端使⽤服务端的公钥加密数据传向服务端是严格加密安全的。
  • 使用场景
    • 单向传输加密数据，防止中间人攻击。使⽤公钥加密数据并传输给接受者，可以确保只接受者才能获得明文信息，一般⽤于交换对称密钥;
    • 身份验证和数据校验。发送方使用私钥加密明文数据的hash值，并将明文加密后的数据和公钥⼀一起发送给接收方，接收方只需要通过公钥解密文，然后与相同hash算法获取明⽂文的hash值进⾏行行⽐比较， ⼀一致则说明明⽂文数据没有被篡改，⼀一般⽤用于数字签名。
  • 常⻅见的⾮非对称加密算法:RSA、DSA、Diffie-Hellman、ECC等

[3] 摘要算法

  • 定义： 摘要算法也称为哈希算法、散列算法，可以将任意长度的数据转换成一个定长的、不可逆的数字。只要原⽂本不同，计算的结果必然不同(几乎不⽤考虑重复的情况)。
  • 作用：摘要算法用于对比信息源是否一致，因为只要数据源发生变化，得到的摘要信息必然不同，通常⽤用于签名校验。
  • 特点:
    • ⽆论输入的消息有多长，计算出来的消息摘要的长度总是固定的。
    • 消息摘要不是真正的随机,因为⽤相同的算法对相同的消息求两次摘要，其结果必然相同
    • 消息摘要函数是单向函数，即只能进行正向的信息摘要，而无法从摘要中恢复出任何的消息，甚至根本就找不不到任何与原信息相关的信息
  • 常⻅见的摘要算法：MD5、SHA-1、MAC、CRC等; ⼴广泛应⽤用于校验数据的完整性和敏敏感信息的传输和保存

知识点2- 加密算法

md5加密

在计算机中所有的信息都是使用二进制进行存储的，1个二进制位(0或1)也称为1个比特，是信息量的最小单位。

js-md5插件实现md5加密
  • 下载
      npm i --save js-md5
  • 封装
       import md5 from 'js-md5'

   const md5 = (str) => ( md5(str) )
crypto-js插件实现md5加密
  • 下载
     npm install crypto-js
  • 封装
    import CryptoJS from 'crypto-js'
// md5加密
export const md5 = (str) => (CryptoJS.MD5(str).toString())

esc加密解密

crypto-js插件实现esc加解密

  • [1] 安装插件

     npm install crypto-js

  • [2] 使用

    import CryptoJS from 'crypto-js'
// esc解密
export const decrypt = (encrypted, key = '3c056d95e902a4e0ab19a2cc308ac8f3', iv = 'b231f04a1349aaaa') => 
  const decrypted = CryptoJS.AES.decrypt(encrypted, CryptoJS.enc.Utf8.parse(key), 
    iv: CryptoJS.enc.Utf8.parse(iv),
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  )
  return decrypted.toString(CryptoJS.enc.Utf8)

WechatPro_页面创建

 

1. 全局三个文件，app.js, app.json, app.wxss（名称不可更改）

2.创建Pages目录文件，用来放置各个页面

3.创建页面（页面命名，创建四个文件）

　　（1）js:页面逻辑实现

　　（2）json:负责标题栏和一些状态栏

　　（3）wxml:管理页面有什么

　　（4）wxss:页面布局

技术图片

 

 

4.在pages内的index页面的wxml中：

　　把内容单元封装在view内部，<view></view> ，用class方式进行样式更改，类比html

5.标签

　　图片<image src=‘图片路径‘></image>

　　文字<text></text>

　　按钮<button></button>

6.布局

<!-- index.wxml -->
<view class=‘container‘>
  <image src="/images/wechat_icon.jpg"></image>
  <text>hello world</text>
  <button>点击获取昵称和头像</button>
</view>

 


/* 样式设计 index.wxss*/
.container{
  height: 100vh; /*高100视窗，100%是无效的*/
  display: flex; /*flex布局方法*/
  flex-direction: column; /*垂直布局*/
  align-items: center; /* 水平方向居中 */
  justify-content: space-around; /*垂直方向分散布局*/
}

 

7.button属性 点击获取用户信息

<!-- index.wxml -->
<button open-type="getUserInfo" bindgetuserinfo=‘getMyInfo‘>点击获取昵称和头像</button>
  <!-- open-type="getUserInfo" 表示激活获取微信用户信息功能
      bindgetuserinfo=‘getMyInfo（可自定义）‘ 表示获得的数据将传递给自定义函数getMyInfo，名称可自定义-->
// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
　/**
   * 获取用户信息，切记 逗号 ，
   */
  getMyInfo:function(e){
    console.log(e.detail.userInfo)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

8.wxml定义变量 ：{{变量名称}} 即表示变量的内容

9.js：文件中定义变量的方法：data:{变量名称: ‘变量内容‘, 变量名称: ‘变量内容‘},

10.修改data变量 ：this.setData({变量名称:变量内容, 变量名称:变量内容})

data: {
    name: ‘Hello World‘,
    src:‘/images/wechat_icon.jpg‘
  },
  getMyInfo:function(e){
    console.log(e.detail.userInfo)
    let info = e.detail.userInfo;
    this.setData({
      name:info.nickName,//更新名称
      src:info.avatarUrl//更新图片来源
    })
  },

11.修改标题栏app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#663399",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "试一试",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "sitemapLocation": "sitemap.json"
}

12.发布

  1. 点击右上角上传
  2. 打开微信公众平台，填写小程序信息后才可以发布，然后点击发布
  3. 体验版本只能开发者使用，可以在”成员管理“中添加“体验成员”即可

以上是关于js逻辑封装_加密解密的主要内容，如果未能解决你的问题，请参考以下文章

jquery 与 javascript 有啥关系？jquery 干啥用的？

前端Util.js-ES6实现的常用100多个javaScript简短函数封装合集（持续更新中）

angular.js_$scope

微信小程序——3逻辑js文件

md5加密

jQuery