Mux + embed files

@alhaos · Регистрация: 20.02.2019

Студворк — интернет-сервис помощи студентам

Доброго дня уважаемые, прошу помочь, скорее всего что то неправильно понимаю.

Внутри утилиты для работы с веб сервисом отправки факсов мне нужна страничка которая будет отображать состояние отправки. Хочу сделать через embed файлы. Не читается main.css, точнее как не читается, по ссылке он доступен но подключенный как link недоступен. Может кто видит очевидную ошибку? или предложит другое решение.

Кликните здесь для просмотра всего текста

Go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
package webface
 
import (
    "embed"
    "fmt"
    "github.com/alhaos/cfax/internal/dbAdapter"
    "html/template"
    "log"
    "net/http"
)
 
//go:embed index.tmpl.html
var b embed.FS
 
//go:embed main.css
var css string
 
func Start() {
 
    mux := http.NewServeMux()
 
    mux.HandleFunc("/main.css", cssHandler)
    mux.HandleFunc("/", HomeHandler)
 
    http.Handle("/", mux)
    err := http.ListenAndServe("127.0.0.1:8080", mux)
 
    if err != nil {
        log.Fatalln(err)
    }
}
 
func cssHandler(writer http.ResponseWriter, request *http.Request) {
    fmt.Fprint(writer, css)
}
 
func HomeHandler(writer http.ResponseWriter, request *http.Request) {
 
    templ, err := template.ParseFS(b, "*.tmpl.html")
    if err != nil {
        log.Fatalln(err)
    }
    err = templ.Execute(writer, dbAdapter.GetRows())
    if err != nil {
        log.Fatalln(err)
    }
}

@sqltd1 · 21.02.2023, 16:07

может импортировать с инициализацией?

Go
1
import _ "embed"

@alhaos · 21.02.2023, 18:47 **[ТС]**

sqltd1, м... не.

После старта сервиса таблица доступна по адресу http://127.0.0.1:8080/main.css

вижу

CSS
1
2
3
h1 {
    color: red;
}

а при загрузке страницы он недоступен

Code
1
2
3
4
5
<head>
    <meta charset="UTF-8">
    <title>Fax Confirmation Page</title>
    <link rel="stylesheet" href="/main.css">
</head>

@sqltd1 · 21.02.2023, 19:14

уберите

Go
1
mux.HandleFunc("/main.css", cssHandler)

и отдавайте main.css из HomeHandler проанализровав r.URL

Конечно тупое решение, но должно работать

@alhaos · 21.02.2023, 19:48 **[ТС]**

sqltd1, Тупое решение я уже придумал я css в хедер засунул. Мне бы суть понять.

@sqltd1 · 21.02.2023, 20:28

У меня работает вариант с заменой порядка вложенных ресурсов

Go
1
2
3
4
5
//go:embed main.css
var css string
 
//go:embed index.tmpl.html
var b embed.FS

дополнение - go version go1.18.4 linux/amd64

@alhaos · 21.02.2023, 20:48 **[ТС]**

у меня поведение не изменилось

index.tmpl.html

Кликните здесь для просмотра всего текста

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Fax Confirmation Page</title>
    <link rel="stylesheet" href="/main.css">
</head>
 
<body>
 
<table>
    <caption>Fax Confirmation Page</caption>
    <tr>
        <th>Date</th>
        <th>Filename</th>
    <th>Client Name</th>
    <th>Status</th>
    <th>JobID</th>
    </tr>
    {{range . }}
    <tr>
        <td>{{.Date}}</td>
    <td>{{.Filename}}</td>
    <td>{{.ClientName}}</td>
    <td>{{.Status}}</td>
    <td>{{.JobID}}</td>
    </tr>
    {{end}}
</table>
</body>
</html>

main.css

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
table {
    width: 100%;
    border: none;
    margin-bottom: 20px;
}
table thead th {
    padding: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    color: #444441;
    border-top: 2px solid #716561;
    border-bottom: 2px solid #716561;
}
table tbody td {
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #444441;
    border-top: 1px solid #716561;
}
table caption {
    padding: 20px;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #444441;
    border-top: 2px solid #716561;
    border-bottom: 2px solid #716561;
}

webface.go

Кликните здесь для просмотра всего текста

Go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package webface
 
import (
    "embed"
    _ "embed"
    "fmt"
    "github.com/alhaos/cfax/internal/dbAdapter"
    "html/template"
    "log"
    "net/http"
)
 
//go:embed main.css
var css string
 
//go:embed index.tmpl.html
var b embed.FS
 
func Start() {
 
    mux := http.NewServeMux()
 
    mux.HandleFunc("/main.css", cssHandler)
    mux.HandleFunc("/", HomeHandler)
 
    http.Handle("/", mux)
    err := http.ListenAndServe("127.0.0.1:8080", mux)
 
    if err != nil {
        log.Fatalln(err)
    }
}
 
func cssHandler(writer http.ResponseWriter, request *http.Request) {
    fmt.Fprint(writer, css)
}
 
func HomeHandler(writer http.ResponseWriter, request *http.Request) {
 
    templ, err := template.ParseFS(b, "*.tmpl.html")
    if err != nil {
        log.Fatalln(err)
    }
    err = templ.Execute(writer, dbAdapter.GetRows())
    if err != nil {
        log.Fatalln(err)
    }
}

Code
1
Microsoft Windows [Version 10.0.22621.1265]

Code
1
go version go1.20 windows/amd64

@sqltd1 · 21.02.2023, 21:05

во вложении исходники и скриншот для демонстрации того, что при открытии страницы подгружается и стилевой файл тоже

@alhaos · 21.02.2023, 21:19 **[ТС]**

sqltd1, Ваш код у меня работает, кроме как на разность структуры проекта на знаю на что грешить...

@korvin_ · 23.02.2023, 11:12

DEL

Добавлено через 19 минут
alhaos, у меня вроде всё нормально работает. Сделай копию проекта, без всего остального. Оставь только
– go.mod
– cmd/CFax/main.go
– internal/webface (с файлами)

Вместо шаблона index можно просто статичную страничку с body <h1>Test</h1> и подключением CSS.
Если не заработает — скинь сюда архивом.

@alhaos · 23.02.2023, 20:08 **[ТС]**

korvin_, На копии то же поведение, что то делаю не так...

https://github.com/alhaos/CFax_

@korvin_ · 23.02.2023, 23:27

alhaos, нужно Content-Type выставить:

Go
1
2
3
4
5
6
7
func cssHandler(writer http.ResponseWriter, request *http.Request) {
    writer.Header().Set("Content-Type", "text/css") // <--- HERE
    _, err := fmt.Fprint(writer, css)
    if err != nil {
        log.Fatalln(err)
    }
}

Иначе используется по-умолчанию text/plain и браузер не воспринимает его как таблицу стилей.

Before:

After:

С темплейтом всё работает, потому что это template/html, он сам проставляет правильный content-type text/html.

Также всё бы работало с ServeStatic или как там эту функцию, которая директории со статикой шарит, потому что она сама определяет какого типа файл и выставляет нужный content-type.

А тут с css у тебя просто переменная string. Наверное, можно как-то попробовать её заэбеддить как шаблон, через FS и расшарить через ServeStatic, чтобы вручную не выставлять Content-Type. Ну, если тебе хочется позаморачиваться )

@alhaos · 24.02.2023, 08:27 **[ТС]**

korvin_, Благодарю, сам бы я ни за что не разобрался.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@alhaos 1929 / 545 / 154 Регистрация: 20.02.2019 Сообщений: 2,663 Записей в блоге: 65
	21.02.2023, 19:48 [ТС]
	sqltd1, Тупое решение я уже придумал я css в хедер засунул. Мне бы суть понять. 0

@alhaos 1929 / 545 / 154 Регистрация: 20.02.2019 Сообщений: 2,663 Записей в блоге: 65
	21.02.2023, 21:19 [ТС]
	sqltd1, Ваш код у меня работает, кроме как на разность структуры проекта на знаю на что грешить... 0

@korvin_ 4575 / 2774 / 491 Регистрация: 28.04.2012 Сообщений: 8,779
	23.02.2023, 11:12
	DEL Добавлено через 19 минут alhaos, у меня вроде всё нормально работает. Сделай копию проекта, без всего остального. Оставь только – go.mod – cmd/CFax/main.go – internal/webface (с файлами) Вместо шаблона index можно просто статичную страничку с body `<h1>Test</h1>` и подключением CSS. Если не заработает — скинь сюда архивом. 0

@alhaos 1929 / 545 / 154 Регистрация: 20.02.2019 Сообщений: 2,663 Записей в блоге: 65
	23.02.2023, 20:08 [ТС]
	korvin_, На копии то же поведение, что то делаю не так... https://github.com/alhaos/CFax_ 0

@alhaos 1929 / 545 / 154 Регистрация: 20.02.2019 Сообщений: 2,663 Записей в блоге: 65
	24.02.2023, 08:27 [ТС]
	korvin_, Благодарю, сам бы я ни за что не разобрался. 0

Mux + embed files

Решение