Aula 06 - Golang para Web - Arquivos Estáticos

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no Facebook

Link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Código da aula: Github

Melhore seu NETWORKING

Participe de comunidades de desenvolvedores:

Fiquem a vontade para me adicionar ao linkedin.

E também para me seguir no GITHUB.

Ah, se puder, clica na estrela nos meus repositórios pra dá uma força ao meu perfil no GITHUB.

Arquivos Estáticos

Vamos ver agora a parte de arquivos estáticos, nossos assets, onde são colocados os arquivos css, js e imagens. Iremos permitir que nossos arquivos estáticos sejam servidos, sem ter que criar um manipulador(handler) diferente para cada arquivo. A primeira coisa a fazer é importar um objeto do tipo http.FileServer(). Agora a gente tem que dizer pra ele, de qual diretório o servidor de arquivos estáticos vem, ou seja, o caminho para a pasta de arquivos estáticos: http.FileServer( http.DIR("/static/") ) Em seguida, vamos dizer ao nosso roteador(routes) para usar esse servidor de arquivos estáticos, para todos os paths que comece com o prefixo static. O gorilla mux tem um método chamado PathPrefix() que faz exatamente isso. Com ele iremos remover o prefixo static do path, porque o servidor de arquivos estático pressupõe que os arquivos estão dentro desse diretório e em possíveis subpastas. Vamos também, criar uma pasta no mesmo nível do arquivo main.go, chamada static. Dentro dela crie um arquivo chamado index.css. No web_app/templates/index.html import o css: <link rel="stylesheet" type="text/css" href="/static/index.css"> Então, mão a obra, iremos mexer em 3 arquivos, o web_app/templates/index.html, /main.go e o que iremos criar, o /static/index.css.

O web_app/templates/index.html vai ficar assim:


<html>
  <head>
    <title>Comments</title>
    <link rel="stylesheet" type="text/css" href="/static/index.css">
  </head>
  <body>
    <h1>Comentários</h1>
    <form method="POST">
      <textarea name="comment"></textarea>
      <div>
        <button type="submit">Post Comment</button>
      </div>
    </form>
    {{ range . }}
      <div>{{ . }}</div>
    {{ end }}
  </body>
</html>

Seguindo

O /main.go assim:


package main

import(
	"log"
	"net/http"
	"github.com/gorilla/mux"
	"github.com/go-redis/redis"
	"html/template"
 )	
//globals variables 
var client *redis.Client
var templates *template.Template

func main(){
	client = redis.NewClient(&redis.Options{ Addr: "localhost:6379", })
	templates = template.Must(template.ParseGlob("templates/*.html"))
	r := mux.NewRouter()
	r.HandleFunc("/contact", contactHandler).Methods("GET")
	r.HandleFunc("/about", aboutHandler).Methods("GET")
	r.HandleFunc("/", indexGetHandler).Methods("GET")
        r.HandleFunc("/", indexPostHandler).Methods("POST")
        fs := http.FileServer(http.Dir("./static/"))
        r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", fs))
	http.Handle("/", r)
	log.Fatal(http.ListenAndServe(":8000", nil))
}

 //request hello handle
 func indexGetHandler(w http.ResponseWriter, r *http.Request){
 	comments, err := client.LRange("comments", 0, 10).Result()
 	if err != nil{
 		return
 	}
 	templates.ExecuteTemplate(w, "index.html", comments)
 }

//request index page POST handle
  func indexPostHandler(w http.ResponseWriter, r *http.Request){
	r.ParseForm()
	//get the comment in html tag comment
	comment := r.PostForm.Get("comment")
	//push the comment to the comments list
	client.LPush("comments", comment)
	 // redirect to / when the submit form
 	http.Redirect(w, r, "/", 302)
 }

 //request contact page handle
func contactHandler(w http.ResponseWriter, r *http.Request){
	templates.ExecuteTemplate(w, "contact.html", "This is the contact page!")
 }
 
 //request about page handle
 func aboutHandler(w http.ResponseWriter, r *http.Request){
	templates.ExecuteTemplate(w, "about.html", "This is the about page!")
 }

E por fim o /static/index.css


body > div {
    padding: 0.5em;
    width: 200px;
    margin: 1em 0em;
    background: #ccc;
    border: 1px solid #aaa;
}

Agora vamos rodar nossa aplicação:


go run main.go

Acesse:

localhost:8000/

Viu que a área de comentários mudou?

Por agora é só, nos vemos próxima. ;)

Código da aula: Github

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no Facebook

Link do código fluente no Pinterest

Novamente deixo meus link de afiliados:

Hostinger

Digital Ocean

One.com

Obrigado, até a próxima e bons estudos. ;)