zoukankan      html  css  js  c++  java
  • Gin框架静态文件处理

    Gin框架静态文件处理

    一、静态文件处理

    当我们渲染的HTML文件中引用了静态文件时,我们只需要按照以下方式在渲染页面前调用gin.Static方法即可。

    func main() {
    	r := gin.Default()
    	r.Static("/static", "./static")
    	r.LoadHTMLGlob("templates/**/*")
       // ...
    	r.Run(":8080")
    }
    
    package main
    
    import (
    	"github.com/gin-gonic/gin"
    	"net/http"
    )
    
    func main() {
    	r := gin.Default()
    	// 加载静态文件
    	r.Static("/css", "../statics")
    
    	r.LoadHTMLFiles("../templates/index.tmpl")
    
    	r.GET("/index/css", func(c *gin.Context) {
    		c.HTML(http.StatusOK, "index.tmpl", gin.H{
    			// H is a shortcut for map[string]interface{}
    			//type H map[string]interface{}
    			// 渲染模板
    			"title": "gin渲染模板",
    		})
    	})
    
    	r.Run(":9999")
    }
    
    

    模板

    # index.css
    body{
        background-color: #ff002f;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        {{/*    引用css静态文件*/}}
        <link rel="stylesheet" href="/css/index.css">
        <title>users/index</title>
    </head>
    <body>
    {{.title}}
    </body>
    </html>
    
    

    image-20211115222531000

    image-20211115223150948

    二、script文件处理

    package main
    
    import (
    	"github.com/gin-gonic/gin"
    	"net/http"
    )
    
    func main() {
    	r := gin.Default()
    	// 加载静态文件
    	r.Static("/css", "../statics")
    
    	r.LoadHTMLFiles("../templates/index.tmpl")
    
    	r.GET("/index/css", func(c *gin.Context) {
    		c.HTML(http.StatusOK, "index.tmpl", gin.H{
    			// H is a shortcut for map[string]interface{}
    			//type H map[string]interface{}
    			// 渲染模板
    			"title": "gin渲染模板",
    		})
    	})
    
    	r.Run(":9999")
    }
    
    

    模板

    // index.js文件
    alert("js渲染")
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        {{/*    引用css静态文件*/}}
        <link rel="stylesheet" href="/css/index.css">
        <title>users/index</title>
    </head>
    <body>
    {{.title}}
    <script src="/css/index.js"></script>
    </body>
    </html>
    
    

    image-20211115223344428

    https://sc.chinaz.com/

  • 相关阅读:
    解决流氓软件的工具,做个记录
    目前使用较好的网盘搜索引擎
    网页截图分段保存
    国外统计学课程主页Statistical Books, Manuals and Journals
    notepad++ TextFX替代
    只用 4 个月打造机器学习必备技能,这位工程师成功翻转职涯人生
    时序差分学习
    来自NVIDIA开源的pix2pixHD,将Image-to-Image Translation带到了另一个境界
    关于HTML5,最牛逼的10本书!
    IDEA配置和插件
  • 原文地址:https://www.cnblogs.com/randysun/p/15626549.html
Copyright © 2011-2022 走看看