给后台写了一个优雅的自定义风格的数据日志上报页面

查看后台数据日志是非常常见的场景,经常看到后台的小伙伴从服务器日志复制一段json数据字符串,然后找一个JSON工具网页打开,在线JSON格式化校验。有的时候,一些业务需要展示mqtt或者socket的实时信息展示,如果不做任何修改直接展示一串字符串,可以说相当不优雅了,后台同学看了,青光眼都待变成老花眼。比如下面这一串,能看是能看,就是看起来贼费劲,所有类型的字体样式都一样。。。

这个问题,不难解决,也就是前端同学,一首歌的时间,就能帮你画出根据你喜好的自定义的数据日志展示页面。可以自定义标记出,不同数据类型的自定义颜色,字体大小展示,都是可以设置的。

如果你觉得默认的代码高亮样式不合适,可以更换 Highlight.js 提供的主题样式。Highlight.js 提供了多种主题样式,你可以选择一种更适合你的项目的样式。

1.自定义自己喜欢的 Highlight.js 主题

  1. 选择合适的主题 :Highlight.js 提供了多种主题样式,你可以在 Highlight.js 官方文档 上查看和选择。首先安装highlight.js组件库。

    js 复制代码
    npm install highlight.js
  2. 导入新的主题样式 :根据选择的主题样式,如果是vue框架,在 main.js 中导入相应的 CSS 文件。例如,如果你选择了 atom-one-dark 主题,修改 main.js文件,确保 main.js 文件导入了新的主题样式:

javascript 复制代码
import Vue from 'vue';
import App from './App.vue';
import 'highlight.js/styles/atom-one-dark.css';  // 使用 atom-one-dark 主题

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

2.如果仍然不满意,可以自定义样式

你可以在 CodeDisplay.vue 的样式部分添加自定义样式来覆盖默认的主题样式。例如,修改字体颜色、背景颜色。CodeDisplay.vue组件代码如下

js 复制代码
<template>
  <div class="code-container">
    <pre><code :class="language" v-html="highlightedCode"></code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js';

export default {
  name: 'CodeDisplay',
  props: {
    code: {
      type: String,
      required: true
    },
    language: {
      type: String,
      default: 'plaintext'
    }
  },
  computed: {
    highlightedCode() {
      return hljs.highlight(this.language, this.code).value;
    }
  },
  watch: {
    code() {
      this.updateHighlightedCode();
    },
    language() {
      this.updateHighlightedCode();
    }
  },
  methods: {
    updateHighlightedCode() {
      this.$forceUpdate();
    }
  }
};
</script>

<style>
.code-container {
  max-width: 800px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
pre {
  background: #282c34; /* 自定义背景颜色 */
  color: #abb2bf; /* 自定义字体颜色 */
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
}
code {
  font-family: 'Fira Code', 'Courier New', Courier, monospace; /* 自定义字体 */
  font-size: 14px; /* 自定义字体大小 */
  color: #e5e9f0; /* 自定义代码字体颜色 */
}
.hljs-keyword {
  color: #c678dd; /* 自定义关键字颜色 */
}
.hljs-string {
  color: #98c379; /* 自定义字符串颜色 */
}
.hljs-comment {
  color: #5c6370; /* 自定义注释颜色 */
}
.hljs-function {
  color: #61afef; /* 自定义函数名颜色 */
}
</style>

如果不生效是渲染的声明周期问题,可以把样式放到index.css文件中,在main.js中导入index.css文件 index.css文件

css 复制代码
code {
  font-family: 'Fira Code', 'Courier New', Courier, monospace; /* 自定义字体 */
  font-size: 14px; /* 自定义字体大小 */
  color: #e0ecd7; /* 自定义代码字体颜色 */
}
.hljs-attr{
  color: #dfcf18;
  font-weight: bold;
}
.hljs-number{
  font-weight: bolder;
}
.hljs-keyword {
  color: #c678dd; /* 自定义关键字颜色 */
  font-weight: bold;
}
.hljs-string {
  color:#5af146 ; /* 自定义字符串颜色 */
}
.hljs-comment {
  color: #5c6370; /* 自定义注释颜色 */
}
.hljs-function {
  color: #61afef; /* 自定义函数名颜色 */
}

main.js中导入index.css文件

js 复制代码
import Vue from 'vue';
import App from './App.vue';
import 'highlight.js/styles/atom-one-dark.css';  // 使用 atom-one-dark 主题
import './index.css';  //导入自定义的样式


Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

3.最后一步,在页面中引入CodeDisplay组件:

js 复制代码
<template> 
     <CodeDisplay :code="code" language="javascript" />
</template> 
<script>
import CodeDisplay from './components/CodeDisplay.vue'; 
export default { 
name: 'App', 
components: { CodeDisplay }, 
data() { 
    return { 
    code: `// Example JavaScript code function greet(name) { return \`Hello, \${name}!\`; } 
    console.log(greet('World'));` }; } }; 
</script>

其他建议

  1. 浏览其他主题:可以多尝试几个主题,找到最适合你的项目的样式。
  2. 进一步自定义:如果默认的主题不完全满足需求,可以进一步自定义主题样式。
  3. highlight.js很强大,也支持很多其他语言的自定义识别展示,等很多类型的语言,以下都包括,但不限,具体请参照官网说明。
  • C

  • C++

  • C#

  • CIL

  • CSS

  • Dart

  • Diff

  • Django

  • Dockerfile

  • Dylan

  • Go

  • Gradle

  • HTML/XML

  • HTTP

  • JSON

  • Java

  • JavaScript

  • Makefile

  • Markdown

  • Nginx

  • PHP

  • Python

  • Ruby

  • Rust

  • SCSS

  • Shell Session

  • SQL

  • Swift

  • TypeScript

  • Vue.js Component

通过这些步骤,你可以更换或自定义代码高亮样式,使其符合你的项目需求并提供更好的视觉体验。

4.如果需要json字符串格式转换,也可以使用vue-json-viewer插件

js 复制代码
<template>
  <el-dialog class="cancelOpinions" :title="msg.title" :visible.sync="showDialog" :destroy-on-close="true" :close-on-click-modal="false"
    :width="dialogWidth" @close="handleClose" append-to-body>
    <div class="map_info">
      <vue-json-viewer :value="formInline.info" :expand-depth="depth"></vue-json-viewer>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import vueJsonViewer from 'vue-json-viewer'
export default {
  props: {
    addVisible: {
      type: Boolean,
      default: false
    },
    msg: {
      type: Object,
      default: () => { }
    }
  },
  components: { vueJsonViewer },
  data() {
    return {
      showDialog: false,
      loading: false,
      dialogWidth: '800px',
      title: 'map_info',
      formInline: {
        info: "",
      },
      depth: 1,
    }
  },
  mounted() {
    this.showDialog = this.addVisible
  },
  methods: {
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法,并传递参数
      this.$emit('moreShow', false)
    },
  },
  watch: {
    // 监听 showAddmoreVisible 改变
    addVisible(val) {
      this.showDialog = val
    },
    msg() {
      this.formInline.map_info = this.msg || {};
    }
  },
}
</script>
<style>
.cancelOpinions .el-dialog__header {
  text-align: left;
}

.cancelOpinions .el-dialog__body {
  padding: 0 32px;
}

.cancelOpinions .el-textarea__inner {
  padding: 9px 16px;
}

.cancelOpinions .el-form {
  margin: 0;
}

.cancelOpinions .el-form .el-input,
.cancelOpinions .el-form .el-select,
.cancelOpinions .el-form .el-textarea {
  width: 80px 0%;
}

.cancelOpinions .el-form--inline .el-form-item {
  width: 48%;
}

.cancelOpinions .el-form--inline .el-form-item__label {
  margin: 0;
  text-align: left;
}

#containerMap {
  width: 100%;
  height: 300px;
  border-radius: 4px;
  box-sizing: border-box;
}

.map_info {
  height: calc(70vh - 130px);
  overflow: auto;
}
</style>

下面再看下,json字符串看起来是不是清爽多了,数据格式一目了然:

相关推荐
hackeroink1 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者3 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-3 小时前
验证码机制
前端·后端
燃先生._.4 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖5 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235245 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240256 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar6 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人7 小时前
前端知识补充—CSS
前端·css