VUE中字符串实现JSON格式化展示。

2021-04-05 10:27

阅读：788

标签：dep str cin mode border bre his director initial

需求是这样的：

嗯，我想把JSON数据从文件中读取出来，读取为字符串，然后传到前端展示。

遇到的问题是这样的：

把JSON文件解析为字符串
把字符串传到前端在展示为JSON格式。

我是这样解决的：

使用IO流的知识,转换为字符串
使用vue-json-viewer插件展示读取的数据

技术图片

JSON文件转字符串:

 public static String readJson(File file) {
        String string = null;
        if (!file.exists() || file.isDirectory()) {
            System.out.println("输入路径不对");
        } else {
            FileInputStream fileInputStream = null;
            InputStreamReader inputStreamReader = null;
            BufferedReader bufferedReader = null;
            try {
                fileInputStream = new FileInputStream(file);
                inputStreamReader = new InputStreamReader(fileInputStream, "UTF-8");
                bufferedReader = new BufferedReader(inputStreamReader);
                String str = null;
                StringBuilder stringBuilder = new StringBuilder();
                while ((str = bufferedReader.readLine()) != null) {
                    stringBuilder.append(str);
                }
                string = stringBuilder.toString();
            } catch (IOException e) {
                e.printStackTrace();

            }
        }
        logger.info(string);
        return string;
    }

前端Vue处理: :value放字符串

vue-json-viewer教程:

官方: https://www.npmjs.com/package/vue-json-viewer

安装:

$ npm install vue-json-viewer --save

引用:

import JsonViewer from ‘vue-json-viewer‘

Vue.use(JsonViewer)

使用

:value="showtext" :expand-depth=4 copyable sort>

参数:

Property	Description	Default
`value`	JSON data (can be used with `v-model`)	Required
`expand-depth`	Collapse blocs under this depth	`1`
`copyable`	Display the copy button, you can customize copy text just set `{copyText: ‘copy‘, copiedText: ‘copied‘}` or set `true` use default copytext	`false`
`sort`	Sort keys before displaying	`false`
`boxed`	Add a fancy "boxed" style to component	`false`
`theme`	Add a custom CSS class for theming purposes	`jv-light`