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）

三、如何選擇合適的渲染策略

您的項目需求