【前端】加密解密、数据处理、前端搜索

• 做前端项目中，对一些模块进行总结

加密解密

• JsEncrypt
• node-rsa
• 一般是使用公钥加密 私钥解密

参考博客：

• noderas 解密
• VUE内使用RSA加解密

公钥加密 私钥解密

安装模块 npm install jsencrypt

• 封装方法

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

// 密钥对生成 http://web.chacuo.net/netrsakeypair

// 公钥
const publicKey = ''

// 私钥
const privateKey = '
  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
  'UP8iWi1Qw0Y='

// 公钥加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}

// 私钥解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

• 这里的功能是选择了记住密码
• 这样我们就需要将密码记录在cookie中，有效期为30天
• 而密码需要加密【调用方法encrypt】记录

Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });

• 如果Cookie中不存在【即没有选择记住密码】就获取表格中的值
• 反之则记住了密码 从cookie中取值
• 取值需要解密【调用方法decrypt】密码

password === undefined ? this.loginForm.password : decrypt(password),

公钥解密 私钥加密

• vue字符串与数组，json字符串与json对象之间的相互转换
• Json和其他数据类型的转换

安装模块1 npm install node-rsa
安装模块2 npm install jsonwebtoken

• 调用方法

const key = rsaDecryptByPublicKey(getToken('Token'));

• 封装方法

import Cookie from 'js-cookie'

const pkcs8PublicKeyData =
  '-----BEGIN PUBLIC KEY-----'+
	-----+（公玥）
  '-----END PUBLIC KEY-----'

  let NodeRSA = require('node-rsa');
  export function rsaDecryptByPublicKey(data) {
    const publicKey = new NodeRSA(pkcs8PublicKeyData,{encryptionScheme: 'pkcs1'})

    data = data.split('Bearer ')[1] //将头部的bearer去除
    
    var list;
    
    // 引入加密包
    const jwt = require('jsonwebtoken')
    // 公钥解密token
    jwt.verify(data, pkcs8PublicKeyData, (error, decoded) => {
      if (error) {
        console.log("解析错误"+error)
        return
      }
      
      // 成功解析的decoded
      // 将内容解析成json模式
      list =eval('('+ decoded.user+ ')'); 
      
  	// Cookie里面只能放String 类型的键值对。 
  	// 将json模式变成纯字符串
    var str = JSON.stringify(list); 
	Cookie.set("userInfo",str); // 转换成字符串后将存入字符串
	
    return list // 返回数据的json模式
  }

数据处理

// 去掉前面和后面 留下中间的
 this.slist.data = this.slist.data.substring(3, length - 4);

// 将Bearer去掉
  data = data.split('Bearer ')[1]

// 取出JSON数据 将其切割
v-for="item in tableListFir.slice(7, 17)"

基于前端的模糊搜索

• 这种方式必须写监听方法【watch】
• 原参数【分页参数】

getAllNews() {
      getAllNews(this.currentPage, this.currentSize).then((res) => {
        this.data = res.data.rows;
        console.log(this.data);
        this.total = res.data.total * 1;
      });
    },

• 搜索时传入参数
• this.currentPage = 1
• this.currentSize = this.total

    search() {
      getAllNews(1, this.total).then((res) => {
        var datas = res.data.rows;
        var arr = [];
        if (this.title != "") {
        // 循环从后台获取的值
          for (var i = 0; i < datas.length; i++) {
          // 如果在数组中没找到指定元素则返回 -1。
          // indexOf进行对比
          // 只要不等于-1 证明有相同的值
          // 赋予到新的数组
            if (datas[i].title.indexOf(this.title) != -1) {
              arr.push(datas[i]);
            }
          }
        }
        // el-table中展示值变为新数组
        this.data = arr;
        this.total = arr.length;
      });
    },

• 1. 第一种写法

  watch: {
    // 监视用户名是否改变 当搜索为空 调用初始方法
    title: function (title) {
      if (title == null || title == "") {
        this.getAllNews();
      }
    },
  },

• 2. 第二种写法

  watch: {
    // 监视用户名是否改变 当搜索为空 调用初始方法
    "queryParams.userName": {
      handler() {
        if (
          this.queryParams.userName == null ||
          this.queryParams.userName == ""
        ) {
          this.getHealthList();
        }
      },
      immediate: true,
    },
    "queryParams.temperature": {
      handler() {
        if (
          this.queryParams.temperature == null ||
          this.queryParams.temperature == ""
        ) {
          this.getHealthList();
        }
      },
      immediate: true,
    },
  },