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);