本文将介绍前端代码防爬的基本实现方式,大致分为两个大的关键步骤。 其一是将自定义字体设置为全局css样式。其二是将从后端获取来的原始数据变成咱们需要展示的样子(类似于密码本翻译)。
第一步——设置全局css样式
1.在项目前端文件的src/asccets下创建文件base.css(名字可自定义,外层CSS文件夹可以没有)
2.在base.css文件中将需要全局使用的样式放入
@font-face {
font-family: stonefont;
src: url('@/assets/movie.woff') format('woff');
}
.stonefont {
font-family: stonefont;
}
3.在main.js文件中,导入此文件,将stonefont注册成全局样式
import './assets/css/base.css'
4. 给需要展示加密数据的标签设置class="stonefont"
以上是如何设置全局属性,接下来说一下处理原始数据的方法
第二步——原始数据处理
1.在项目前端文件的src/utils下创建文件fontsize.js(名字可以自定义)
2.在fontsize.js文件中将需要使用的方法函数放入
export function changeNumStrToCodeStr(numStr) {
// numStr是原始的字符串
// 不要处理原始的字符串
const numStrArr = numStr.split('') // 将原有的numStr逐位打散成数组
const resultArr = [] // 新建一个空数组用来存,逐位转换的结果
// 创建一个对象,用来存储各数字对应字符关系
const numToCodeMap = {
0: '໧',
1: 'བྷ',
2: '๽',
3: '༙',
4: 'ཙ',
5: 'ມ',
6: 'ำ',
7: 'ຜ',
8: '໴',
9: '๢'
// ....剩余的补上
}
numStrArr.forEach((element) => {
if (Object.hasOwnProperty.call(numToCodeMap, element)) {
// 以逐位做key,如果找到就把翻译结果放进去
resultArr.push(numToCodeMap[element])
} else {
// 如果没获取到翻译,就放空,或其他 错误处理
console.log('未获取到对应关系,请检查对应关系或数据')
resultArr.push('')
}
})
return resultArr.join('')
}
注:上述对应关系(如:0: '') 来自于movie.woff文件,如果有需求改变对应规则那么只需要维护对应关系并且替换.woff文件即可
3.在需要做加密处理的文件中,导入此文件,导入方式及位置如下
4.在需要使用的位置直接调用即可
注:在函数中咱们需要的是处理之后的函数返回值,所以需要接收一下(比如图中的this.one,此处建议在data中定义一个变量接收一下)
5.在使用时可以将v-html后的one换成使用时定义的变量