Springboot+Vue实现Base64编码与解码

HTML

<template>
  <nav-bar/>
  <div class="body">

    <div style="margin: 0 auto;width: 100%;height: auto;text-align: center">
      <h2>Base64加密</h2>
    </div>
    <div class="request_outer">
      <el-input
          v-model="requestContent"
          :autosize="{ minRows: 10, maxRows: 20 }"
          type="textarea"
          placeholder="编码内容"
      />
    </div>

    <div style="margin: 15px auto 15px auto;width: 100%;height: auto;text-align: center">
      <el-button type="danger" @click="fun_Base64_Encode()">编码</el-button>
      <el-button type="primary" @click="fun_Base64_Decoder()">解码</el-button>
      <el-button type="info" @click="fun_QingKong()">清空</el-button>
    </div>


    <div class="response_outer">
      <el-input
          v-model="responseContent"
          :autosize="{ minRows: 20, maxRows: 40 }"
          type="textarea"
          placeholder="解码结果"
      />
    </div>

  </div>
</template>

axios请求

<script>
import {ElLoading} from "element-plus";
import axios from "axios";

export default {
  name: "Base64",
  data() {
    return {
      requestContent: "",
      responseContent: ""
    }
  },
  methods: {

    //编码
    fun_Base64_Encode() {

      if (this.requestContent.trim() === '') {
        this.$message.error('输入不能为空')
      } else {
        //全屏加载
        const loading = ElLoading.service({
          lock: true,
          text: '请求中...',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        //提交
        const _this = this;
        axios({
          method: "post",
          url: "http://localhost:8080/tools/encryption/Base64_Encode",
          data: {input: _this.requestContent},
          headers: {
            "Content-Type": "application/json"
          }
        }).then(result => {
          if (result.status === 200) {
            console.log(result);
            loading.close();//关闭全屏加载
            _this.responseContent = String(result.data.result);
          }
        }).catch(error => {
          console.log(error);
          loading.close();//关闭全屏加载
          _this.responseContent = error.toString();
        });
      }

    },

    //解码
    fun_Base64_Decoder() {
      if (this.requestContent.trim() === '') {
        this.$message.error('输入不能为空')
      } else {
        //全屏加载
        const loading = ElLoading.service({
          lock: true,
          text: '请求中...',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        //提交
        const _this = this;
        axios({
          method: "post",
          url: "http://localhost:8080/tools/encryption/Base64_Decoder",
          data: {input: _this.requestContent},
          headers: {
            "Content-Type": "application/json"
          }
        }).then(result => {
          if (result.status === 200) {
            console.log(result);
            loading.close();//关闭全屏加载
            _this.responseContent = result.data.result;
          }
        }).catch(error => {
          console.log(error);
          loading.close();//关闭全屏加载
          _this.responseContent = error.toString();
        });
      }
    },

    //清空
    fun_QingKong() {
      this.responseContent = '';
      this.requestContent = '';
    }
  }
}
</script>

后端Interface

public interface IEncryptionService {

    //Base64编码
    public String Base64_Encode(String input) throws UnsupportedEncodingException;

    //Base64解码
    public String Base64_Decoder(String input) throws IOException;
}

后端实现类impl

package com.example.demo.itkb.tools.encryption.service.impl;

import com.example.demo.itkb.tools.encryption.service.IEncryptionService;
import org.springframework.stereotype.Service;
import java.nio.charset.StandardCharsets;
import java.util.Base64;


@Service
@SuppressWarnings("all")
public class EncryptionServiceImpl implements IEncryptionService {
    final static Base64.Encoder encoder = Base64.getEncoder();
    final static Base64.Decoder decoder = Base64.getDecoder();

    /**
     * Base64编码
     *
     * @param input
     * @return
     */
    @Override
    public String Base64_Encode(String input) {
        String result = null;
        try {
            result = encoder.encodeToString(input.getBytes(StandardCharsets.UTF_8));
        } catch (Exception e) {
            e.printStackTrace();
            result = e.getMessage().toString();
        }
        return result;
    }


    /**
     * Base64解码
     *
     * @param input
     * @return
     */
    @Override
    public String Base64_Decoder(String input) {
        String result = null;
        try {
            byte[] decodedBytes = Base64.getDecoder().decode(input);
            result = new String(decodedBytes);
        } catch (Exception e) {
            e.printStackTrace();
            result = e.getMessage().toString();
        }
        return result;
    }
}

后端Controller

package com.example.demo.itkb.tools.encryption.controller;

import com.alibaba.fastjson.JSONObject;
import com.example.demo.itkb.tools.encryption.service.IEncryptionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.Map;

@CrossOrigin //支持跨域
@SuppressWarnings("all")
@RestController
@RequestMapping("/tools/encryption")
public class EncryptionController {

    @Autowired
    IEncryptionService iEncryptionService;


    /**
     * Base64编码
     *
     * @param jsonObject
     * @return
     * @throws UnsupportedEncodingException
     */
    @PostMapping(value = "Base64_Encode")
    public Map<String, String> Base64_Encode(@RequestBody JSONObject jsonObject) throws UnsupportedEncodingException {
        System.out.println(jsonObject);
        String input = jsonObject.getString("input");
        String result = iEncryptionService.Base64_Encode(input);
        Map<String, String> resultMap = new HashMap<String, String>();
        resultMap.put("result", result);
        return resultMap;
    }


    /**
     * @param jsonObject
     * @return
     * @throws IOException
     * @RequestBody注解，接收json数据，请求时使用“data" 不能使用parms参数
     */
    @PostMapping(value = "Base64_Decoder")
    public Map<String, String> Base64_Decoder(@RequestBody JSONObject jsonObject) throws IOException {
        System.out.println(jsonObject);
        String input = jsonObject.getString("input");
        String result = iEncryptionService.Base64_Decoder(input);
        Map<String, String> resultMap = new HashMap<String, String>();
        resultMap.put("result", result);
        return resultMap;
    }
}

运行效果（编码）

 

运行效果（解码）