增加base64编码/解码

Author: lizl6

README.md

@@ -10,12 +10,12 @@
 
 - [x] 中文/UTF-8互转
 
+- [x] Base64编码/解码
+
 - [ ] AES/DES加解密
 
 - [ ] MD5、SHA加密
 
-- [ ] Base64编码/解码
-
 # 开发
 
 ```bash
@@ -32,7 +32,7 @@ Bootstrap5终于不再需要jquery了，可以和Vue一起用：
 
 ```bash
 npm i -D electron
-npm i vue bootstrap @popperjs/core
+npm i vue bootstrap @popperjs/core crypto-js
 ```
 
 # 发行版打包
@@ -58,6 +58,10 @@ npm run build-dist:win
 
 ![image-20220913162817293](https://imgbd.r-xnoro.com//image-20220913162817293.png)
 
+## Base64编码/解码
+
+![image-20220913170027407](https://imgbd.r-xnoro.com//image-20220913170027407.png)
+
 ## 随机数/密码生成器
 
 ![image-20220913152551500](https://imgbd.r-xnoro.com//image-20220913152551500.png)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coderbox",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "基于electron的跨平台的程序员小工具集",
   "main": "main.js",
   "scripts": {
@@ -30,7 +30,8 @@
   "keywords": [
     "coderbox",
     "加密",
-    "编码"
+    "编码",
+    "base64"
   ],
   "author": "lizl6",
   "license": "Apache-2.0",
@@ -40,6 +41,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "bootstrap": "^5.2.0",
+    "crypto-js": "^4.1.1",
     "vue": "^3.2.38"
   }
 }

src/component/base64.html

@@ -0,0 +1,48 @@
+<link rel="stylesheet" href="../index.css">
+<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
+<div class="container-fluid" id="app">
+    <div class="card bg-light text-gray">
+        <div class="card-head text-muted">Base64编码/解码</div>
+    </div>
+    <div class="row pt-2">
+        <div class="col-1 text-end">原文：</div>
+        <div class="col"><textarea class="form-control" style="resize:none;" v-model="strNative" cols="30" rows="10"></textarea></div>
+    </div>
+    <div class="row mt-3">
+        <div class="col-1"></div>
+        <div class="col">
+            <button type="button" class="btn btn-primary" @click="encode">Base64编码⇩</button>
+            <button type="button" class="btn btn-primary" style="margin-left:15px;" @click="decode">Base64解码⇧</button>
+        </div>
+    </div>
+    <div class="row mt-3">
+        <div class="col-1 text-end text-nowrap">密文：</div>
+        <div class="col"><textarea class="form-control" style="resize:none;" v-model="strCypher" cols="30" rows="10"></textarea></div>
+    </div>
+</div>
+<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+<script src="../../node_modules/crypto-js/crypto-js.js"></script>
+<script src="../../node_modules/vue/dist/vue.global.prod.js"></script>
+<script>
+const app = {
+    data() {
+        return {
+            strNative: '',
+            strCypher: ''
+        }
+    },
+    methods: {
+        encode() {
+            if(this.strNative == '') return;
+            let str = CryptoJS.enc.Utf8.parse(this.strNative);
+            this.strCypher = CryptoJS.enc.Base64.stringify(str);
+        },
+        decode() {
+            if(this.strCypher == '') return;
+            let words  = CryptoJS.enc.Base64.parse(this.strCypher);
+            this.strNative = words.toString(CryptoJS.enc.Utf8);
+        }
+    }
+}
+Vue.createApp(app).mount('#app');
+</script>

src/index.html

@@ -21,9 +21,9 @@
                         <div class="dropdown-menu">
                             <a href="#" class="dropdown-item" @click="to('ascii')">中文/ASCii互转</a>
                             <a href="#" class="dropdown-item" @click="to('utf8')">中文/UTF-8互转</a>
-                            <a href="#" class="dropdown-item">Base64编码/解码</a>
-                            <a href="#" class="dropdown-item">MD5、SHA加密</a>
-                            <a href="#" class="dropdown-item">AES/DES加解密</a>
+                            <a href="#" class="dropdown-item" @click="to('base64')">Base64编码/解码</a>
+                            <!-- <a href="#" class="dropdown-item">散列/哈希加密</a>
+                            <a href="#" class="dropdown-item">AES/DES加解密</a> -->
                         </div>
                     </li>
                     <li class="nav-item">

src/index.js

@@ -21,6 +21,11 @@ const app = {
                     name: 'utf8',
                     path: './component/utf8.html',
                     state: 0
+                },
+                {
+                    name: 'base64',
+                    path: './component/base64.html',
+                    state: 0
                 }
             ],
             dataPwd: {