、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)。這兩種渲染方式各有優缺點,適用于不同的應用場景。本文將詳細介紹這兩種渲染方式的原理、優缺點以及如何根據實際需求選擇合適的渲染策略。
1. 原理:
服務端渲染是指在服務器端生成HTML頁面,并將生成的HTML頁面發送給客戶端。客戶端接收到HTML頁面后,可以直接展示給用戶,無需再進行額外的渲染操作。這種方式可以實現搜索引擎友好,提高頁面加載速度,降低服務器壓力。
2. 優點:
- 更好的SEO:服務端渲染生成的HTML頁面包含了完整的頁面內容,有利于搜索引擎抓取和索引。
- 更快的首屏加載速度:由于HTML頁面在服務器端生成,客戶端無需等待JavaScript執行完成即可展示頁面內容,從而提高首屏加載速度。
- 減輕客戶端壓力:服務端渲染將渲染工作集中在服務器端,降低了客戶端的計算負擔。
3. 缺點:
- 服務器壓力較大:服務端渲染需要在服務器端生成完整的HTML頁面,可能導致服務器壓力增加。
- 客戶端與服務端通信延遲:服務端渲染需要客戶端與服務器端進行多次通信,可能導致延遲增加。
- 不適用于高交互性的應用:服務端渲染難以實現復雜的用戶交互和實時更新。
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引入
<script src=”/static/go.js”></script>
(2) 指定容器
<div :id=”id” class=”myDiagram” style=”width:100%;height:100%”/>
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的高級使用之動態顯示效果,更多內容歡迎關注之后的文章。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。