时间戳

首页 > 解决方案 > 使用 Go 提供 HTML 页面

html - 使用 Go 提供 HTML 页面

问题描述

我正在尝试使用 golang API 提供 HTML 页面

这是html：

<!DOCTYPE HTML>
<html>
    
    <body>
      <section>
      <div class="login-box">
    <h2>Login into your account</h2>
    <form method="post" action="/login">
        <label for="name"></label>
        <input type="text" placeholder="Username" id="name" name="name"><br>
        <label for="password"></label>
        <input  type="password" placeholder="Password" id="password" name="password"> <br>
        <br>
        <button type="submit">Login</button>
    </form>
       
        </div>
      <br>
    <nav class="myNav">
        <ul>
            <li><a href="">Don't have an account?</a>
              <ul>
                <li><a href="">Sing Up</a></li>
                <li><a href="">Login with Google Account</a></li>
              </ul>
          </li>
        </ul>
      </nav>
      </section>
     </html>
<style>
  .login-box{
    font-size: large;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .login-box input{
    border:none;
    outline:none;
    font-size:20px;
    text-align: center;
  }
  
button{
  width:30%;
  position:absolute;
  left:70%;
  background:none;
  border: 2px solid white;
  padding: 4px;
  cursor:pointer;
  font-size: 18px;
  font-family: "Lucida Console", Courier, monospace;
}

label{
  color:black;
  font-family: 'Comfortaa';
  font-size:30px;
}
body {

  width:100%;
  height:100vh;
    background: linear-gradient(-45deg, #23D5AB, #23A6D5,#E73C7E);
    background-size:300% 300%; 
    position:relative;
    animation:change 10s ease-in-out infinite;
}
  @keyframes change{
    0%{
      background-position: 0 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
      background-position: 0 50%;
    }
  }
.myNav ul {
  margin:0;
  padding:0;
  list-style: none;

}
.myNav >ul {
  display:flex;
  flex-direction:column;

}
ul a{
    display: block;
    padding: .5rem;
    background: #262626;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
  }

 .myNav a:hover,
 .myNav a:focus 
  {
    background:crimson;
  }
 .myNav >ul ul a{
    padding-left: 3rem;
    /*flex-direction: column;*/
  }
@media (min-width: 500px){
  .myNav ul{
    flex-direction:row;
  }

  .myNav >ul ul{
    position:relative;
    display:none;
    transition: .4s ease opacity;
    /*display:none;*/
    
  }
  .myNav >ul>li:hover ul,
  .myNav >ul>li:focus-within ul{
    display:block; 
    position:absolute;
  }
 
  .myNav > li {
    position: relative;
   flex:1; 
  }
  .myNav >ul>li:hover ul,
  .myNav >ul>li:focus-within ul{
    display:block; 
  }

}
  h2{
      font-family: 'Comfortaa';
      font-size:45px;
      border-bottom: 2px solid #fff;
      
  }
</style>

    </body>
       
 </html>

我正在使用 golang 为这个 html 提供服务：router.HandleFunc("/", Utilities.LoginPage)

当我尝试在本机或在 codepen 上呈现 html 时，它可以工作，但是当我使用 Go API 提供文件时，html 页面看起来不一样！

任何帮助将不胜感激。谢谢 ！

标签： htmlcssgo

解决方案

要托管静态文件，您可以使用net/http 文件服务器。您可以在存储库中创建一个目录，并使用内置的 http.FileServer 指向您的处理程序。这是示例：

假设我们将上述文件保存index.html在 repo 下tmp

package main

import (
    "net/http"
)

func main() {
    http.Handle("/", http.FileServer(http.Dir("./tmp")))
    http.ListenAndServe(":8080", nil)
}

推荐阅读