码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-03-17 14:21:40      阅读:497      评论:0      收藏:0      [点我收藏+]

标签: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放字符串

  <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>
参数:
 
PropertyDescriptionDefault
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

 

 技术图片

 

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

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

原文地址:https://www.cnblogs.com/liruilong/p/12510089.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!