golang renderer.HTML无法从模板内部选择javascript文件

时间:2019-06-21 09:32:32

标签: go renderer go-templates

尝试使用“ github.com/thedevsaddam/renderer”包渲染器发布登录页面。无法从模板内部调用.js文件。尝试内联javascript时,它工作正常,但无法加载.js文件。

我的文件结构是

Project
|
+-main.go
|
+-handlers
| |
| +- routes.go
| |
| +- login.go
+-views
| |
| +- _login.html
| +- login.js

main.go

package main

import (
    "fmt"
    "log"
    "net/http"

    "github.com/gorilla/mux"
    "github.com/higuestssg/handlers"
)

func main() {
    router := mux.NewRouter().StrictSlash(true)

    // This will serve files under http://localhost:8000/static/<filename>
    router.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("views/"))))

    portalRouter := router.PathPrefix("/portal").Subrouter()
    handlers.HandleRoutes(portalRouter)
    fmt.Println("listening at localhost:10001")
    log.Fatal(http.ListenAndServe(":10001", router))
}

routes.go

package handlers

import (
  //"net/http"

  "github.com/gorilla/mux"
)

func HandleRoutes(r *mux.Router){
  r.HandleFunc("/login", loginHandler)
  r.HandleFunc("/healthTest", healthTestHandler)
}

login.go

package handlers

import (
    "fmt"
    "net/http"

    //"github.com/gorilla/mux"
    "github.com/thedevsaddam/renderer"
)

var rnd *renderer.Render

func init() {
    opts := renderer.Options{
        ParseGlobPattern: "./views/*.html",
    }
    rnd = renderer.New(opts)
}

// loginHandler renders login page
func loginHandler(w http.ResponseWriter, r *http.Request) {

    data := struct {
        Val1 string
        Val2 string
    }{
        "test100",
        "test2",
    }
    fmt.Println("login page hit")
    rnd.HTML(w, http.StatusOK, "_login", data)
}

_login.html

{{ define "_login" }}
<!--
https://medium.com/@thedevsaddam/easy-way-to-render-html-in-go-34575f858026
-->
<!DOCTYPE html>
<html lang="en">
<!-- Bootstrap import CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <body>
    <div class="container">
      <div class="starter-template jumbotron text-center">
        <h1>HI GUEST</h1>
        <div class="col-sm-4">
        <p class="lead">Welcome to <strong>HI_GUEST --ssg</strong> page</p>
        </div>
      </div>
    </div><!-- /.container -->
    <div class="row">
      <div class="col-sm-4"><p class="lead" id="idtest1">Test1</p></div>
      <div class="col-sm-4"><p class="lead">Test2</p></div>
      <div class="col-sm-4"><p class="lead"><button type="button" class="btn btn-info btn-lg" name="btn_ip" id="btn_id" onclick="myFunction()">{{.Val1}}</button></p></div>
    </div>
  </body>
  <script type='text/javascript' src='login.js'></script>
</html>
{{ end }}

login.js


function myFunction() 
{
 alert("Hello");
}

$(document).ready(function () {
  alert("Hello");
});

使用ViewSource在Chrome浏览器中选中后,点击login.js会显示404 not found

1 个答案:

答案 0 :(得分:1)

更新了_login.html,可以与@mkopriva建议配合使用

{{ define "_login" }}
<!--
https://medium.com/@thedevsaddam/easy-way-to-render-html-in-go-34575f858026
-->
<!DOCTYPE html>
<html lang="en">
<!-- Bootstrap import CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <body>
    <div class="container">
      <div class="starter-template jumbotron text-center">
        <h1>HI GUEST</h1>
        <div class="col-sm-4">
        <p class="lead">Welcome to <strong>HI_GUEST --ssg</strong> page</p>
        </div>
      </div>
    </div><!-- /.container -->
    <div class="row">
      <div class="col-sm-4"><p class="lead" id="idtest1">Test1</p></div>
      <div class="col-sm-4"><p class="lead">Test2</p></div>
      <div class="col-sm-4"><p class="lead"><button type="button" class="btn btn-info btn-lg" name="btn_ip" id="btn_id" onclick="myFunction()">{{.Val1}}</button></p></div>
    </div>
  </body>
  <script type='text/javascript' src='/static/login.js'></script>
</html>
{{ end }}