golang将JSON数据渲染为HTML的插件库htmljson的使用

Golang将JSON数据渲染为HTML的插件库htmljson的使用

htmljson是一个纯Go语言实现的库，用于将JSON数据渲染为格式化的HTML页面。它具有以下特点：

  • 纯Go实现
  • 不需要JavaScript
  • 无外部依赖
  • 不使用reflect包
  • 不使用fmt包
  • 仅300行代码
  • 可自定义渲染方式
  • 支持JSON Path访问元素

基本使用示例

// JSON数据需要先解析为any类型
var v any
json.Unmarshal(exampleJSON, &v)

// 使用默认渲染器生成HTML页面
htmlPage := htmljson.DefaultPageMarshaler.Marshal(v)

自定义渲染示例

// JSON数据需要先解析为any类型
var v any
json.Unmarshal(exampleJSON, &v)

// 自定义HTML元素渲染方式
s := htmljson.Marshaler{
    Null:   htmljson.NullHTML,
    Bool:   htmljson.BoolHTML,
    String: htmljson.StringHTML,
    Number: func(k string, v float64, s string) string {
        // 根据JSON Path特定字段设置红色
        if k == "$.cakes.strawberry-cake.size" {
            return `<div class="json-value json-number" style="color:red;">` + s + `</div>`
        }
        // 数值大于10的设置蓝色
        if v > 10 {
            return `<div class="json-value json-number" style="color:blue;">` + s + `</div>`
        }
        // 默认样式
        return `<div class="json-value json-number">` + s + `</div>`
    },
    Array: htmljson.DefaultArrayHTML,
    Map:   htmljson.DefaultMapHTML,
    Row:   htmljson.DefaultRowHTML{Padding: 4}.Marshal,
}

// 使用自定义渲染器
m := htmljson.DefaultPageMarshaler
m.Marshaler = &s

// 生成HTML页面
htmlPage := m.Marshal(v)

这个库提供了灵活的渲染方式，可以通过自定义Marshaler来控制不同类型值的HTML输出格式，包括数字、字符串、布尔值、数组和对象等。


更多关于golang将JSON数据渲染为HTML的插件库htmljson的使用的实战教程也可以访问 https://www.itying.com/category-94-b0.html

1 回复

更多关于golang将JSON数据渲染为HTML的插件库htmljson的使用的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


使用htmljson库将JSON数据渲染为HTML

htmljson是一个Go语言的库，它可以将JSON数据渲染为格式化的HTML，非常适合在Web应用中展示JSON数据。下面我将详细介绍如何使用这个库。

安装htmljson

首先，你需要安装htmljson库：

go get github.com/raff/htmljson

基本用法

简单示例

package main

import (
	"fmt"
	"github.com/raff/htmljson"
	"log"
)

func main() {
	// 示例JSON数据
	jsonData := `{
		"name": "John Doe",
		"age": 30,
		"isActive": true,
		"address": {
			"street": "123 Main St",
			"city": "New York"
		},
		"hobbies": ["reading", "swimming", "coding"]
	}`

	// 将JSON渲染为HTML
	html, err := htmljson.Render([]byte(jsonData))
	if err != nil {
		log.Fatal(err)
	}

	fmt.Println(string(html))
}

完整Web应用示例

下面是一个完整的Web应用示例，展示如何在HTTP服务中使用htmljson：

package main

import (
	"encoding/json"
	"github.com/raff/htmljson"
	"log"
	"net/http"
)

type Person struct {
	Name    string   `json:"name"`
	Age     int      `json:"age"`
	Hobbies []string `json:"hobbies"`
}

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		// 创建示例数据
		person := Person{
			Name:    "Alice",
			Age:     28,
			Hobbies: []string{"reading", "hiking", "photography"},
		}

		// 将结构体转为JSON
		jsonData, err := json.Marshal(person)
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}

		// 渲染为HTML
		html, err := htmljson.Render(jsonData)
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}

		// 设置响应头并返回HTML
		w.Header().Set("Content-Type", "text/html; charset=utf-8")
		w.Write(html)
	})

	log.Println("Server started on :8080")
	log.Fatal(http.ListenAndServe(":8080", nil))
}

自定义样式

htmljson生成的HTML包含了一些CSS类，你可以自定义样式：

<style>
  .htmljson-object {
    border-left: 2px solid #ccc;
    padding-left: 10px;
    margin-left: 5px;
  }
  .htmljson-array {
    border-left: 2px solid #eee;
    padding-left: 10px;
    margin-left: 5px;
  }
  .htmljson-key {
    color: #905;
    font-weight: bold;
  }
  .htmljson-string {
    color: #690;
  }
  .htmljson-number {
    color: #905;
  }
  .htmljson-boolean {
    color: #07a;
  }
  .htmljson-null {
    color: #999;
  }
</style>

高级选项

htmljson提供了一些选项来自定义渲染：

// 使用Options自定义渲染
options := &htmljson.Options{
    Collapsible: true,  // 使对象和数组可折叠
    Indent:      "    ", // 缩进使用4个空格
}

html, err := htmljson.RenderWithOptions([]byte(jsonData), options)
if err != nil {
    log.Fatal(err)
}

与其他模板引擎结合

你可以将htmljson与标准html/template或其他模板引擎结合使用：

package main

import (
	"encoding/json"
	"github.com/raff/htmljson"
	"html/template"
	"log"
	"net/http"
	"os"
)

func main() {
	tmpl := template.Must(template.New("").Parse(`
<!DOCTYPE html>
<html>
<head>
    <title>JSON Viewer</title>
    <style>
        /* 自定义样式 */
        .htmljson-key { color: #d63384; }
    </style>
</head>
<body>
    <h1>JSON Data</h1>
    <div>{{.}}</div>
</body>
</html>
`))

	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		data := map[string]interface{}{
			"name": "Example",
			"values": []int{1, 2, 3},
			"nested": map[string]interface{}{
				"field": "value",
			},
		}

		jsonData, _ := json.Marshal(data)
		htmlData, _ := htmljson.Render(jsonData)

		// 使用template.HTML防止转义
		err := tmpl.Execute(w, template.HTML(htmlData))
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
		}
	})

	log.Println("Server started on :8080")
	log.Fatal(http.ListenAndServe(":8080", nil))
}

总结

htmljson是一个简单易用的库，它可以帮助你将JSON数据转换为格式化的HTML展示。主要特点包括：

  1. 自动格式化JSON数据为可读的HTML
  2. 支持嵌套对象和数组
  3. 可通过CSS自定义样式
  4. 提供可折叠等高级选项
  5. 易于与其他Go Web框架集成

对于需要在前端展示JSON数据的Web应用，htmljson是一个很好的选择。

回到顶部