054: vue tool --- BASE64 encryption and decryption conversion

No. 054

View here: VUE ------ element UI

Column goal

Under the control of the joint technology stack of vue and element UI, this column provides effective source code examples and information point introductions for flexible use.

(1) Provide some basic operations of vue2: installation, reference, template use, computed, watch, life cycle (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, errorCaptured, components,), $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else ,v-else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slot-scope, filters, v-bind,. stop, .native, directives, mixin, render, internationalization, Vue Router, etc.

(2) 提供element UI的经典操作: -cascader, el-input-number, el-switch, el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form , el-table, el-tree, el-pagination, el-badge, el-avatar, el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $ message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header, el-tabs, el-dropdown, el-steps, el-dialog, el-tooltip, el-popover, el- popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

Application scenarios

In the vue project, how to convert BASE64 encryption and decryption to each other? The following example is such a small tool. See the source code for details.

Example effect

Sample source code (136 lines in total)

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-17
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>vue工具：BASE64加密解密互相转换 </h3>
			<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div class="dajianshi">
			<el-input type="textarea" :rows="10" v-model="textdata" style="font-size: 18px;"></el-input>
		</div>
		<h4>
			<el-button type="success" size="small" @click="encode64(textdata)">BASE64加密</el-button>
			<el-button type="primary" size="small" @click="decode64(textdata)">BASE64解密</el-button>
		</h4>
	</div>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				textdata: 'Dajianshi',
			}
		},
		mounted() {
    
    

		},
		methods: {
    
    
			encode64(input) {
    
    				
				var keyStr = "ABCDEFGHIJKLMNOP" +
				"QRSTUVWXYZabcdef" +
				"ghijklmnopqrstuv" +
				"wxyz0123456789+/" +
				"=";
				
				input = escape(input);
				var output = "";
				var chr1, chr2, chr3 = "";
				var enc1, enc2, enc3, enc4 = "";
				var i = 0;
				do {
    
    
					chr1 = input.charCodeAt(i++);
					chr2 = input.charCodeAt(i++);
					chr3 = input.charCodeAt(i++);
					enc1 = chr1 >> 2;
					enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
					enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
					enc4 = chr3 & 63;
					if (isNaN(chr2)) {
    
    
						enc3 = enc4 = 64;
					} else if (isNaN(chr3)) {
    
    
						enc4 = 64;
					}
					output = output +
						keyStr.charAt(enc1) +
						keyStr.charAt(enc2) +
						keyStr.charAt(enc3) +
						keyStr.charAt(enc4);
					chr1 = chr2 = chr3 = "";
					enc1 = enc2 = enc3 = enc4 = "";
				} while (i < input.length);
				this.textdata=output;

			},
			decode64(input) {
    
    							
				var keyStr = "ABCDEFGHIJKLMNOP" +
				"QRSTUVWXYZabcdef" +
				"ghijklmnopqrstuv" +
				"wxyz0123456789+/" +
				"=";
				
				var output = "";
				var chr1, chr2, chr3 = "";
				var enc1, enc2, enc3, enc4 = "";
				var i = 0;
				// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
				var base64test = /[^A-Za-z0-9\+\/\=]/g;
				if (base64test.exec(input)) {
    
    
					alert("There were invalid base64 characters in the input text.\n" +
						"Valid base64 characters are A-Z, a-z, 0-9, '+', '/', and '='\n" +
						"Expect errors in decoding.");
				}
				input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
				do {
    
    
					enc1 = keyStr.indexOf(input.charAt(i++));
					enc2 = keyStr.indexOf(input.charAt(i++));
					enc3 = keyStr.indexOf(input.charAt(i++));
					enc4 = keyStr.indexOf(input.charAt(i++));
					chr1 = (enc1 << 2) | (enc2 >> 4);
					chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
					chr3 = ((enc3 & 3) << 6) | enc4;
					output = output + String.fromCharCode(chr1);
					if (enc3 != 64) {
    
    
						output = output + String.fromCharCode(chr2);
					}
					if (enc4 != 64) {
    
    
						output = output + String.fromCharCode(chr3);
					}
					chr1 = chr2 = chr3 = "";
					enc1 = enc2 = enc3 = enc4 = "";
				} while (i < input.length);
				this.textdata= unescape(output);
			},
		}

	}
</script>
<style scoped>
	.djs-box {
    
    
		width: 900px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid seagreen;
	}

	.topBox {
    
    
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: #666;
		color: #fff;
	}

	.dajianshi {
    
    
		width: 90%;
		height: 300px;
		margin: 50px auto 0;
	}
</style>