Go Web 框架 Gin 学习3 - 模板渲染多级

Go Web 框架 Gin 学习3 - 模板渲染多级目录与模板传参

、LoadHTMLGlob多级目录

	engine.LoadHTMLGlob("template1/**/*")

	func (engine *Engine) LoadHTMLGlob(pattern string)

LoadHTMLGlob有1个参数，可以使用通配符，"template1/*"表示template1目录下的所有文件

当模板目录template1结构如下：

	└─template1
    ├─admin
    │      index.html
    │
    ├─index
    │      index.html
    │
    └─users
            index.html

那么需要注意的是，每个index.html都要有{{define "..."}}......{{end}}，将html包裹起来，

可以理解为给index.html起个别名，用于区分不同文件夹下相同名字文件的别名。

因为c.HTML(http.StatusOK, "index2", nil)中的index2就是所定义的别名

define "..."：中的...就是别名

......：是html内容

2、模板传参

	func admin(c *gin.Context) {
		c.HTML(http.StatusOK, "admin_index", gin.H{
			"user": "admin",
			"pass": "123456",
		})
	}

其中gin.H是map[string]interface{}的别名，

c.HTML有3个参数，

	func (c *Context) HTML(code int, name string, obj interface{})

HTML renders the HTTP template specified by its file name. It also updates the HTTP code and sets the Content-Type as "text/html".

作用是渲染模板文件，将响应头的Content-Type设置为 "text/html"

code int：响应码，可以写成http.StatusOK这样的常量，也可以直接写成200，因为http.StatusOK的常量值就是200，当然有可以写成相匹配的响应码，这里只是以正常响应的200举例

name string：这里就是模板名，默认是文件名，如果使用{{define "..."}}......{{end}}进行了定义，那么就可以写成别名。

obj interface{}：这里就是传入模板的对象，类型是空接口类型，也就是说，可以传入任意类型的值，模板都是可以接受的，在func admin(c *gin.Context)示例中，传入了gin.H这样的map类型，那么就可以在模板文件中进行使用。

示例代码：

package main

import (
   "github.com/gin-gonic/gin"
   "net/http"
)

func main() {
   engine :=gin.Default()
   engine.LoadHTMLGlob("template1/**/*")
   engine.GET("/admin", admin)
   engine.GET("/index", index)
   engine.GET("/users", users)
   _=engine.Run("127.0.0.1:80")
}

func admin(c *gin.Context) {
   c.HTML(http.StatusOK, "admin_index", gin.H{
      "user": "admin",
      "pass": "123456",
   })
}
func index(c *gin.Context) {
   c.HTML(http.StatusOK, "index_index", nil)
}

func users(c *gin.Context) {
   c.HTML(http.StatusOK, "users_index", nil)
}

模板文件：

执行结果：

ello家人们...本人熟悉PS、Xd、Ai、Sketch、Figma、墨刀、即时设计、mastergo、Pixso等行业设计软件以及前端开发等技能，拥有10年+的UI经验，我们可以通过关注评论私信交流以帮助到您解决UI工作中的烦恼！谢谢

标题：前端数据服务端渲染与客户端渲染：详细剖析

前端数据渲染主要有两种方式：服务端渲染（Server-Side Rendering，简称SSR）和客户端渲染（Client-Side Rendering，简称CSR）。这两种渲染方式各有优缺点，适用于不同的应用场景。本文将详细介绍这两种渲染方式的原理、优缺点以及如何根据实际需求选择合适的渲染策略。

一、服务端渲染（SSR）

1. 原理：

服务端渲染是指在服务器端生成HTML页面，并将生成的HTML页面发送给客户端。客户端接收到HTML页面后，可以直接展示给用户，无需再进行额外的渲染操作。这种方式可以实现搜索引擎友好，提高页面加载速度，降低服务器压力。

2. 优点：

- 更好的SEO：服务端渲染生成的HTML页面包含了完整的页面内容，有利于搜索引擎抓取和索引。

- 更快的首屏加载速度：由于HTML页面在服务器端生成，客户端无需等待JavaScript执行完成即可展示页面内容，从而提高首屏加载速度。

- 减轻客户端压力：服务端渲染将渲染工作集中在服务器端，降低了客户端的计算负担。

3. 缺点：

- 服务器压力较大：服务端渲染需要在服务器端生成完整的HTML页面，可能导致服务器压力增加。

- 客户端与服务端通信延迟：服务端渲染需要客户端与服务器端进行多次通信，可能导致延迟增加。

- 不适用于高交互性的应用：服务端渲染难以实现复杂的用户交互和实时更新。

二、客户端渲染（CSR）

1. 原理：

客户端渲染是指在客户端通过JavaScript加载页面数据，并在浏览器中动态生成HTML页面。这种方式可以实现高度的交互性和实时更新，但可能导致首屏加载速度较慢。

2. 优点：

- 高度的交互性：客户端渲染可以实现丰富的用户交互和实时更新，适用于高交互性的应用。

- 减轻服务器压力：客户端渲染将渲染工作分散到各个客户端，降低了服务器端的压力。

- 支持前后端分离：客户端渲染可以实现前后端分离，便于开发和维护。

3. 缺点：

- SEO问题：客户端渲染生成的HTML页面在页面加载初期为空，可能导致搜索引擎无法抓取和索引页面内容。

- 首屏加载速度较慢：客户端渲染需要等待JavaScript执行完成才能展示页面内容，可能导致首屏加载速度较慢。

- 客户端计算负担较重：客户端渲染将渲染工作集中在客户端，可能导致客户端计算负担增加。

三、如何选择合适的渲染策略

根据实际需求和场景，可以选择合适的渲染策略。以下是一些建议：

1. 对于以内容为主的网站，如博客、新闻等，建议采用服务端渲染，以提高SEO和首屏加载速度。

2. 对于高交互性的应用，如电商、社交等，建议采用客户端渲染，以实现丰富的用户交互和实时更新。

3. 对于既需要SEO优化，又需要高交互性的应用，可以考虑采用同构渲染（Isomorphic Rendering）方案，即在服务器端和客户端共享一套代码，实现服务端渲染和客户端渲染的结合。

总之，服务端渲染和客户端渲染各有优缺点，应根据实际需求选择合适的渲染策略。在实际开发中，也可以根据业务场景灵活运用这两种渲染方式，以达到最佳的性能和用户体验。

hello家人们...本人熟悉PS、Xd、Ai、Sketch、Figma、墨刀、即时设计、mastergo、Pixso等行业设计软件以及前端开发等技能，拥有10年+的UI经验，我们可以通过关注评论私信交流以帮助到您解决UI工作中的烦恼！谢谢

网地址：https://gojs.net/latest/

官网包含了200多个例子，api及介绍，学习入门等。

Go.js属于功能丰富的JS库，在Web浏览器和平台上可实现自定义交互图和可视化效果，Go.js用自定义模板和布局组件简化了节点、链接和分组等复杂的js图表。

它给用户交互提供了许多先进的功能：

例如：拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统等等。

无需切换服务器和插件，Go.js就能实现用户交互并在浏览器中完全运行，呈现HTML5 Canvas元素或SVG，也不用服务器端请求。Go.js不依赖于任何JS库或框架，可与任何HTML或JS框架配合工作，甚至可以不用框架。

用功能强大的Go.js可以构建自定义建模环境和特定的可视化语言，使用共享代码和模板提供一个系统编辑器和只读状态监控，在不同的图表中显示相同数据的可视化替代，实现子图或其它图表的详细视图扩展。

Go.js是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架。它采用了面向对象的编程模式，以图形对象表示绘图模板，以用普通js对象存储数据作为数据模型，然后赋值给图形对象的属性作为数据绑定的模式。

Go.js同样提供了大量工具类来代表我们的交互行为。我们需要做的就是创建图形对象、构建数据模型、设置属性、绑定数据模型、使用工具类添加行为即可创建出具有丰富交互性能的各种图表。

——GO.js概念来源

https://blog.csdn.net/zy0412326/article/details/128890317

1回顾

下文将以Vue2项目为例，进行动态显示效果的快速入门学习。

我们以实现图中效果为例——静态展示链路日志：

（1） js或者csdn引入

（2）指定容器

const go=window.go

const $=go.GraphObject.make

这里go是所有GoJS类型所在的“命名空间” 。所有使用GoJS类的代码，例如 Diagram 或 Node 或 Panel 或 Shape 或 TextBlock 都将以“ go.”为前缀。

（3）引入icon

（4）创建图表

this.myDiagram=$(go.Diagram, self.id, {})

（5）设置节点,自定义tooltip

const tooltiptemplate=

this.myDiagram.nodeTemplate=$(go.Node,'Horizontal',{toolTip:tooltiptemplate, background: '#fff' })

（6）设置连接线,linklabel等

this.myDiagram.linkTemplate=

（7）鼠标移入移出线条样式

（8）设置数据

this.myDiagram.model=new go.TreeModel(data)

（9）渲染

this.myDiagram.layoutDiagram(true)

二、Comparator接口

动态展示节点信息，查找节点进行高亮，根据节点的广度深度进行横纵展示，示意如下：

1动态显示节点

每个要动态显示的元素绑定一个visible属性：

<el-checkbox v-model="isURL" @change="isChange($event, 'URL')">URL</el-checkbox>
<el-checkbox v-model="isTraceID" @change="isChange($event, 'TRACEID')">TraceID</el-checkbox>
<el-checkbox v-model="isSpanID" @change="isChange($event, 'SPANID')">SpanID</el-checkbox>
// 数据动态渲染
isChange(val, key) {
  this.myDiagram.commit(d=> {
    d.nodes.each(node=> {
      const name=node.findObject(key)
      name.visible=val
    })
  })
}
// spanId
$(go.TextBlock,
  {
    margin: new go.Margin(0, 10, 4, 15),
    stroke: '#0076FF',
    font: 'normal 12px helvetica neue',
    width: 160,
    textAlign: 'left',
    maxLines: 3,
    overflow: go.TextBlock.OverflowEllipsis, // 最大行数和溢出
    cursor: 'pointer',
    name: 'SPANID', // 方便查找元素
    visible: false
  },
  new go.Binding('text', 'spanId')
)

2高亮效果

<el-checkbox v-model="faultLight" @change="faultLightChange">异常高亮</el-checkbox>
<el-checkbox v-model="faultLightRoot" @change="faultLightRootChange">高亮当前应用及到根部的分支</el-checkbox>

A异常高亮效果

给满足条件的node节点添加透明度即可：

// 异常高亮
faultLightChange(val) {
  // code>=400为异常
  this.myDiagram.commit(d=> { // d===myDiagram
    // iterate over all nodes in Diagram
    d.nodes.each(node=> {
      if (val) {
        this.faultLightRoot=false
        // console.log(node.data.code)
        if (node.data.code >=400) return
        node.opacity=0.5
      } else {
        node.opacity=1
      }
    })
  })
}

B高亮当前应用及分支

先获取当前选中节点的所有父节点，给这些节点设置透明度为1，其他的设置为0.5：

faultLightRootChange(val) {
  const parentKeys=this.findPatentValue(this.copyTreeData, this.selectedKey, 'key', 'children')
  this.myDiagram.commit(d=> {
    d.nodes.each(node=> {
      if (val) {
        this.faultLight=false
        node.opacity=parentKeys.includes(node.data.key) ? 1 : 0.5
      } else {
        node.opacity=1
      }
    })
  })
},
// 获取当前节点的所有父节点
findPatentValue(array, targetId, valueKey, childrenKey) {
  if (!targetId || !Array.isArray(array)) return []
  const result=[]
  let valid=false
  const seek=(_array, _targetId)=> {
    let parentValue=''
    const up=(_array_, _targetId_, lastValue)=> {
      _array_.forEach(v=> {
        const val=v[valueKey]
        const child=v[childrenKey]
        if (val===_targetId_) {
          valid=true
          parentValue=lastValue
          return
        }
        child ? child.length && up(child, _targetId_, val) : null
      })
    }
    up(_array, _targetId)
    if (parentValue) {
      result.unshift(parentValue)
      seek(_array, parentValue)
    }
  }
  seek(array, targetId)
  return valid ? [...result, targetId] : []
}

3根据节点的广度深度进行横纵展示

Java 集合接口 java.util.Collection 中包含一个称为 iterator() 的方法。通过调用 iterator()，可以从给定的 Collection 中获取迭代器。Java 集合框架中实现了 Collection 接口的数据结构，比如列表、集合(Set)、队列、双端队列等等，它们都实现了iterator() 方法。

横纵展示只需要设置angle，0度或者90度即可：

const widthDeepth=self.handleGetTreeDeep(self.copyTreeData) // 深度
const heightDeepth=self.handleGetTreeExtent(self.copyTreeData) // 广度
self.direct=widthDeepth >=heightDeepth ? 'Horizontal' : 'Vertical' // 判断横向纵向
self.myDiagram=$(go.Diagram, self.id,
    {
layout:
    $(go.TreeLayout,
      {
        angle: self.direct==='Horizontal' ? 0 : 90
      }
    ) 
}

以上就是Go.js的高级使用之动态显示效果，更多内容欢迎关注之后的文章。

在线咨询

上一篇：html5 canvas 绘图
下一篇：35.3K星标，不仅是数字，更是独立开发者的荣耀(程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Go Web 框架 Gin 学习3 - 模板渲染多级

一、服务端渲染（SSR）

二、客户端渲染（CSR）

三、如何选择合适的渲染策略

您的项目需求