网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

58. 用模板实现网页展示的CSS和JS等静态文件

2020-06-10 03:01:50 admin 502

在网页制作中，需要对网页进行美化。除了美工制作图片之外，我们还需要用到  
css 和 js 等。而这些文件需要使用静态文件的方式才能加载到页面中。  
继续在上一篇中的例子，补充这些内容。  
首先我们需要一个专门存放 css 和 js 文件的文件夹。这里我们只实现 css 文件。js 文件的方式雷同，你可以自己试验。  
新建一个文件夹在根目录上。

css静态文件

为了醒目和简单的演示，我们只在 css 中设置页面的背景色为“蓝色”。

样式表文件

修改模板文件 edit.html ，增加样式表文件连接。

模板文件的样式表文件连接

剩下的就是在 main 函数中增加静态文件路径的设置

http.Handle("/static/", http.StripPrefix("/static/",http.FileServer(http.Dir("static"))))   //启动静态文件

运行项目，可以发现表单页已经变了样子了。这里要注意的是 http.FileServer(http.Dir("")) 引号中存放的是静态文件的真实路径。

css设置起了作用的表单页

下面给出全部的代码  
main.go

/**
    * MyWebserver03
    * @Author:  Jian Junbo
    * @Email:   junbojian@qq.com
    * @Create:  2017/9/27 10:21
    * Copyright (c) 2017 Jian Junbo All rights reserved.
    *
    * Description:  内容展示 web 方式
    */
    package main
    
    import (
        "time"
        "net/http"
        "fmt"
        "html/template"
    )
    
    type Article struct {
        Title   string              //标题
        Content string              //内容
        Author  string              //作者
        Tab     []string            //标签
        PublishTime string          //发表时间
        ViewNum int                 //浏览量
    }
    
    func main() {
        http.HandleFunc("/", Index)
        http.HandleFunc("/edit/", editHandler)
        http.HandleFunc("/save/", saveHandler)
        http.Handle("/static/", http.StripPrefix("/static/",http.FileServer(http.Dir("static"))))   //启动静态文件
        http.ListenAndServe(":9090", nil)
    }
    func saveHandler(w http.ResponseWriter, r *http.Request) {
        title := r.FormValue("title")
        author := r.FormValue("author")
        content := r.FormValue("content")
    
        var article Article
        article.Title = title
        article.Author = author
        article.Content = content
        article.PublishTime = time.Now().Format("2006-01-02 15:04:05.0000000")
        article.Tab = []string{""}
        article.ViewNum = 0
    
        fmt.Fprintf(w, "我接到了 %s\n", article.Title)
        fmt.Fprintf(w, "标题：%s\n", article.Title)
        fmt.Fprintf(w, "作者：%s\n", article.Author)
        fmt.Fprintf(w, "内容：%s\n", article.Content)
        fmt.Fprintf(w, "发布时间：%s\n", article.PublishTime)
        fmt.Fprintf(w, "标签：%s\n", article.Tab)
        fmt.Fprintf(w, "浏览：%d\n", article.ViewNum)
    }
    func editHandler(w http.ResponseWriter, r *http.Request) {
        article := Article{Title:"我的标题", Content:"这是文章的内容", Author:"厚土", Tab:[]string{"练习","实践"}, PublishTime:time.Now().Format("2006-01-02 15:04:05"), ViewNum:25}
        t, err := template.ParseFiles("tmpl/edit.html")
        if err != nil{
            fmt.Println(err)
            fmt.Fprintf(w, "页面没有准备好，请稍后再访问 ...")
            return
        }
        t.Execute(w, article)
    }
    func Index(w http.ResponseWriter, r *http.Request) {
        fmt.Printf("%d (%s)访问了地址 %s\n", time.Now().Unix(), time.Now().Format("2006-01-02 15:04:05.0000000"), r.URL.Path)
        fmt.Fprintf(w,"<div>你访问了地址, %s</div>", r.URL.Path)
        fmt.Fprintf(w, "你可以在<a href='/edit'>这里编辑信息</a>")
    }

edit.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="/static/css/main.css" type="text/css">
    </head>
    <body>
    <h1>{{.Title}}</h1>
    <form action="/save/" method="post">
        <div>标题<input type="text" name="title"></div>
        <div>作者<input type="text" name="author"></div>
        <div>内容<textarea name="content" rows="20" cols="80"> {{.Content}} </textarea></div>
        <div><input type="submit" value="Save"></div>
    </form>
    <ul>
        <li>标题：{{.Title}}</li>
        <li>内容：{{.Content}}</li>
        <li>作者：{{.Author}}</li>
        <li>发布时间：{{.PublishTime}}</li>
        <li>标签：{{range .Tab}}{{.}}、{{end}}</li>
        <li>浏览量：{{.ViewNum}}</li>
    </ul>
    </body>
    </html>

main.css

body {background-color: cornflowerblue}

转载文章，原文链接： 58. 用模板实现网页展示的CSS和JS等静态文件

关键字词CSS JS

分享到：

上一篇：57. 用模板实现网页展示（template包）

下一篇：59. 获取本机IP地址

如需留言，请登录，没有账号？请注册

0 条评论 0 人参与

网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

58. 用模板实现网页展示的CSS和JS等静态文件

admin 1年前

zhou 2年前

zhou 2年前

zhou 2年前

zhou 2年前

网站首页 返回列表 像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

58. 用模板实现网页展示的CSS和JS等静态文件

admin 官方 1年前

zhou 2年前

zhou 2年前

zhou 2年前

zhou 2年前

网站首页返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

admin 1年前