需求是这样的：
- 嗯，我想把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放字符串
<json-viewer :value="showtext" :expand-depth=4 copyable sort></json-viewer>
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)
使用
<json-viewer :value=”showtext” :expand-depth=4 copyable sort></json-viewer>
参数:
| 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 |
