WedX - журнал о программировании и компьютерных науках

Как запустить html с css с помощью golang

всем, у меня проблема с включением css в html файлы через файл golang. На локальном сервере выводится только html-файл, но не css, как это исправить?

Возможно, проблема в том, как я использую пакет шаблонов, поэтому не могли бы вы объяснить, как сделать маршрутизацию по-другому? Пример. Когда вы переходите по https://localhost:8080/login, показать login.html. Я видел документацию по сети/http об этом, но либо я слепой, либо просто пытаюсь найти там что-то не то. Все файлы находятся в одном каталоге

welcome.html

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
    <link rel="stylesheet" href="style.css" >
</head>

<body>
    <link rel="stylesheet" href="style.css">
<form action="">
    <center><h1>Enter</h1></center>
        <div class="group">
            <label for="">Login:</label>
            <input type="text">
        </div>
        <div class="group">
            <label for="">Password:</label>
            <input type="password">
        </div>
    <div class="group">
            <center><button>Come in</button></center>
        </div>
    <center><a href="regist.html" class="link">Registration</a></center>
    </form>

</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
body
{
    font-family: "Comic Sans MS";
    background-image: url(images/bg.jpg);
    background-repeat: repeat ;
    background-size: 80px 80px ;
}
h1
{
margin: 0;
text-transform: uppercase;
padding-bottom: 5px;
border-bottom: 3px solid rgba(58,87,15,0.80);
}
form 
{
    margin : 0 auto;
    background: rgba(123,170,52,0.76);
    width: 450px;
    height: 350px;
    padding: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}
.group
{
    margin: 16px ;
    padding: 5px;

}
label
{
    padding-left: 10px;
    text-transform: uppercase;
}
input
{
    margin-top: 5px;
    height: 30px;
    width: 400px;
    border-radius:20px/20px;
    border: none;
    padding-left: 15px;
    font-size: 18px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}

input:focus{
    border: 2px solid #264503;
    transform: translateX(15px);
    width: 385px;
}
button{
    font-family: "Comic Sans MS";
    cursor: pointer;
    padding: 10px 20px;
    height: 40px;
    color:aliceblue;
    background: rgba(21,73,3,1.00);
    border: none;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}
button:hover{
    font-weight: bold;
    transform: scale(1.1);
}

.link{
    font-family: "Comic Sans MS";
    cursor: pointer;
    padding: 10px 20px;
    height: 40px;
    color:aliceblue;
    background: rgba(21,73,3,1.00);
    border: none;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
    text-decoration: none; 

}

goFile.go

package main

import (
    "fmt"
    "html/template"
    "net/http"
)

func welcome(w http.ResponseWriter, r *http.Request) {

    tmpl := template.Must(template.ParseFiles("welcome.html"))

    tmpl.Execute(w, nil)
}

func login(w http.ResponseWriter, r *http.Request) {
    tmpl := template.Must(template.ParseFiles("login.html"))

    tmpl.Execute(w, nil)
}

func main() {
    http.HandleFunc("/", welcome)
    http.HandleFunc("/login", login)

    fmt.Println("Listening...")
    http.ListenAndServe(":8080", nil)
}

** Вывод следующий: ** output

Подведение итогов: как отобразить страницу с помощью css, используя пакеты golang net/http или html/template? Как правильно сделать маршрутизацию между страницами? Простите за ошибки. Заранее спасибо, ребята!

06.04.2020

  • Итак, вы открыли инструменты разработчика в своем браузере (в любой из них они теперь встроены), очистили кеш и повторили запрос с активной вкладкой «Сеть», верно? Это показало вам, что запрос файла CSS не удался с ошибкой 404? Я имею в виду, что вы либо не выполнили самую простую проверку, либо не сообщили нам все подробности. Любой из них не слишком хорош, вы знаете ;-) 06.04.2020

Ответы:


1

Ваш сервер Go не знает, что он должен обслуживать style.css, потому что вы никогда не говорили ему об этом. Если вы переместите этот файл в подкаталог assets/, вы можете зарегистрировать обработчик для обслуживания этого каталога:

http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))

Также см. этот ответ.

06.04.2020
  • Это не будет работать без обновления html hrefs или будет? hrefs также должны быть абсолютными, а не относительными, иначе браузер будет искать /login/assets/styles.css при обслуживании /login. 06.04.2020
  • Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]