山东大学软件学院项目实训——（五）base64编码解码工具

一、base64简介

Base64是一种编码方式，这个术语最初是在“MIME内容传输编码规范”中提出的。Base64不是一种加密算法，它实际上是一种“二进制转换到文本”的编码方式，它能够将任意二进制数据转换为ASCII字符串的形式，以便在只支持文本的环境中也能够顺利地传输二进制数据。
（1）base64编码：把二进制数据转为字符
（2）base64解码：把字符转为二进制数据

二、base64原理

上面就是Base64的索引表，字符选用了"A-Z、a-z、0-9、+、/" 64个可打印字符，这是标准的Base64协议规定。在日常使用中我们还会看到“=”或“==”号出现在Base64的编码结果中，“=”在此是作为填充字符出现。当字节的位总数不是6的倍数时，当剩下4位时，我们需要补2个=凑齐8的倍数；当剩下的是2位时，我们需要补齐1个 = 凑齐8的倍数。

大多数编码都是由字符串转化成二进制的过程，而Base64的编码则是从二进制转换为字符串。与常规恰恰相反。Base64编码主要用在传输、存储、表示二进制领域，不能算得上加密，只是无法直接看到明文。也可以通过打乱Base64编码来进行加密。
中文有多种编码（比如：utf-8、gb2312、gbk等），不同编码对应Base64编码结果都不一样。

代码实现

controller：

import com.sducsrp.csrp.common.Constants;
import com.sducsrp.csrp.common.Result;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

import java.io.*;

@RestController
public class Base64 {
    @RequestMapping("tools/Base64/encode")
    public @ResponseBody
    Result encode(@RequestParam("data") String data){
        System.out.println(data);
        String encodeData = null;
        encodeData = setEncryptionBase64(data);
        System.out.println(encodeData);
        Result res=new Result(Constants.CODE_200,null,encodeData);
        return res;
    }

    @RequestMapping("tools/Base64/decode")
    public @ResponseBody
    Result decode(@RequestParam("data") String data){
        String decodeData = null;
        decodeData = getDecodeBase64(data);
        System.out.println(decodeData);
        Result res=new Result(Constants.CODE_200,null,decodeData);
        return res;
    }

    //文件转字符串
    public static String file2String(File file){
        try {
            BufferedReader buffer = new BufferedReader(new FileReader(file));
            StringBuilder sb = new StringBuilder();
            String temp;
            while((temp = buffer.readLine()) !=null ){
                sb.append(temp);

            }
            return sb.toString();
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return null;
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return null;
        }
    }
    //加密
    public static String setEncryptionBase64(String str){
        byte[] b = null;
        String s = null;
        try {
            b = str.getBytes("utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        if( b != null){
            s = new BASE64Encoder().encode(b);
        }
        return s;

    }

    //解密
    public static String getDecodeBase64(String str){
        byte[] b = null;
        String result = null;
        if(str != null){
            BASE64Decoder decoder = new BASE64Decoder();
            try {
                b = decoder.decodeBuffer(str);
                result = new String(b, "utf-8");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return result;
    }
}

vue前端：

<template>
  <br>
  <br>
<!--  <p>Base64在线编码解码</p>-->
  <el-card shadow="always" style="text-align: center; margin-right: 100px;margin-left: 100px;height: 600px">
    <el-row>
      <el-col :span="8">

      </el-col>
      <el-col :span="8">
        <div style="font-size: x-large;background-color: darkgreen;color:white;margin: 5px;">
          BASE64在线编码解码
        </div>
        <el-button @click="visible=true"
            style="text-align: right;font-size: 20px;color: darkgreen" size="small" icon="el-icon-thumb" >
<!--          <el-link href="https://blog.csdn.net/local_752/article/details/121970823"-->
<!--                   target="_blank"-->
<!--                   style="font-size: 20px;color: darkgreen"-->

          什么是BASE64？
<!--          </el-link>-->
        </el-button>
        <el-drawer v-model="visible" :show-close="false">
          <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
            <el-button type="danger" @click="close">
              <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
              Close
            </el-button>
          </template>
          This is drawer content.
        </el-drawer>
      </el-col>
      <el-col :span="8">

      </el-col>
    </el-row>


    <div class="el-common-layout">
      <div class="text-area" style="margin: 10px">
        <!--    <textarea v-model="textdata" placeholder="请输入编码字符串或待解码字符串">-->
        <!--    </textarea>-->
        <el-input
            v-model="textdata"
            type="textarea"
            placeholder="Please input"
            style="width: 700px;font-size: 20px"
            :rows=5
        />
      </div>
    </div>

    <el-button @click="encode" type="info" style="margin: 20px">EnCode</el-button>
    <el-button @click="decode" type="info">DeCode</el-button>

    <el-card style="width: 40%;height: 100px;margin-left: 30%;margin-top: 5%">
      <p style="text-align: left">编码/解码结果:</p>
      <p>{{ myresult }}</p>
    </el-card>
  </el-card>


</template>

<script>
import request from "@/utils/request";

// import { ref } from 'vue'
// import { CircleCloseFilled } from '@element-plus/icons-vue'
// import type { ElButton, ElDrawer } from 'element-plus'
//
// const visible = ref(false)


export default {
  data() {
    return {
      textdata: '',
      myresult: ''
    }

  },
  methods: {
    encode() {
      // alert(this.textdata)
      request.get("/tools/Base64/encode", {
        params: {
          data: this.textdata
        }
      }).then(res => {
        //alert(res.data);
        this.myresult = res.data
      })
    },
    decode() {
      request.get("/tools/Base64/decode", {
        params: {
          data: this.textdata
        }
      }).then(res => {
        this.myresult = res.data
      })
    }

  }
}
</script>

<style scoped>