编解码

编解码在计算机中用于不同信息间的相互转化.

编码和解码过程互逆.

以生活中的场景来举例:

英文大小写转换, 中文简体繁体转换, 进制转换, 汇率转换, 字符编码转换(ASCII, UTF, GBK 等等)...

Base64

Base64 是基于 64 个字符来表示二进制数据的编码方法.

编码原理:

准备 64 个字符: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

准备一个待编码信息: abcde

按以下步骤

将信息以 3 个字节为一组: [abc, de]
将每组的信息转化成 8 位二进制, 每 6 位二进制数为一组, 然后每组前面补两个 0, 补完不足 8 位的在后面补满: [['01100001', '01100010', '01100011'] ['01100100', '01100101']] -> [['00011000', '00010110', '00001001', '00100011'], ['00011001', '00000110', '00010100']]
将每组的二进制转化为10进制并从字符表中映射出来, 每组长度不足4的补=号补到4: [['24', '22', '9', '35'], ['25', '6', '20']] -> [['Y', 'W', 'J', 'j'], ['Z', 'G', 'U', '=']]

解码原理: 解码是编码的逆过程

123456789101112131415161718192021222324252627282930313233343536

<template>
  <div>
    <textarea class="input" placeholder="输入" v-model="input" />

    <span style="display: inline-block; width: 100px; text-align: center">
      <v-button class="button" @click="handleEncode">编码</v-button>
      <br />
      <v-button class="button" @click="handleDecode">解码</v-button>
    </span>

    <textarea class="input" placeholder="输出" readonly :value="output" />
  </div>
</template>

<script lang="ts" setup>
import { base64 } from '@cat-kit/fe'
import { shallowRef } from 'vue'

const input = shallowRef('')
const output = shallowRef('')

const handleEncode = () => {
  output.value = base64.encode(input.value)
}
const handleDecode = () => {
  output.value = base64.decode(input.value)
}
</script>

<style scoped>
textarea {
  border: 1px solid #ccc;
  vertical-align: top;
}
</style>

编解码 ​

Base64 ​

编解码

Base64