1. 需求

后端传来一个base64编码后的json格式字符串，需要前端进行base64解码并格式化json数据进行展示，点击编辑表单后可以直接修改，修改完成后再转为base64传给后端进行修改。

实现效果：
展示：

编辑：

2. js-base64的使用

前端的应用场景一般在与后端联调的接口参数中体现，后端可能需要某个字段是base64编码的字符，这时候就需要用前端的方法进行转换，再作为参数传递到服务端。

2.1 安装依赖

npm install --save js-base64

由于我的项目是使用yarn在代码仓库的根目录下管理多个package的依赖，所以安装命令如下：

yarn workspace <package名称> add js-base64

2.2 引入js-base64

在需要的文件中引入js-base64：

import { Base64 } from "js-base64";

2.3 使用js-base64

后端传过来的数据如下：

在页面初始化时，将后端传来的base64字符串解码：

let LiveExampleContent = Base64.decode(ResInfo.SourceConfig.LiveExample.Content);

解码后的数据还是一个json格式的字符串，需要使用json-viewer来格式化并显示在页面上。

3. json-viewer的使用

简单易用的json内容展示组件，适配vue3和vite。

3.1 安装依赖

yarn workspace <package名称> add v-clipboard3

yarn workspace <package名称> add vue3-json-viewer

3.2 引入并全局注册

在main.ts文件中引入

import JsonViewer from "vue3-json-viewer";
import "./assets/vue3-json-viewer/index.css";
app.use(JsonViewer);

3.3 vue3-json-viewer参数

3.4 组件内使用

<json-viewer
	v-if="optionAllInfo.SourceConfig.LiveExample.Content"
	:value="optionAllInfo.SourceConfig.LiveExample.Content"
	theme="my-json-theme"
></json-viewer>

4. 数据格式处理

4.1 JSON.parse字符串转对象

做到这一步该使用的插件都使用了，内容也可以显示了但是显示的内容会是这样的：

可以看到显示的数据开头结尾都有双引号，这说明这不是json对象格式，而是一个字符串，所以我试验了一下，将数据不以正常的格式传输，发现确实没有进行json格式化。


所以需要进行JSON.parse处理一下，但是需求中说明也可以不传json格式，只传字符串，所以我分了一下情况，如果字符串数据是json格式的话，就进行转换，如果不是则直接赋值。

4.2 json格式字符串判断与转换

const isJSON = (str: string) => {
	if (typeof str == "string") {
		try {
			JSON.parse(str);
			return true;
		} catch (e) {
			return false;
		}
	} else {
        return false;
        }
    };

// 如果符合json格式，则转为对象数据，否则不做处理
if (isJSON(staticConfig)) {
	optionAllInfo.value.SourceConfig.StaticExample = JSON.parse(staticConfig);
} else {
	optionAllInfo.value.SourceConfig.StaticExample = staticConfig;
}

转换完成后便可以正常格式化了。

5. 编辑数据并提交

json数据编辑完成后，需要进行base64编码再提交

sourceConfigInfo.value.StaticExample = Base64.encode(sourceConfigInfo.value.StaticExample);