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

文章目录

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

加密解密

JsEncrypt
node-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),

公钥解密私钥加密

安装模块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();
      }
    },
  },

1. 第二种写法

  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,
    },
  },