iT邦幫忙

2023 iThome 鐵人賽

DAY 29
0
Software Development

關於我轉生變成 Go 初學者的這檔事系列 第 29

Day29-[第二十八站 : 用Go語言架設一個網站前端架構 (二) ]<GOO~

  • 分享至 

  • xImage
  •  

前言

上一站跟大家分享如何架設 IRIS 的框架以及如何去啟動它,這一站我來跟大家分享如何撰寫程式並呈現在網頁上,話不多說我們就開始吧~

開始撰寫程式碼

Hello World

這是我們這一段網頁前端的程式碼,裡面包著的這些是你可以撰寫的部分
那我們先簡單寫個 "Hello World !"

package main

import (
	"github.com/kataras/iris/v12"
)

func main() {
	webp := iris.New()

	webp.Get("/", func(ctx iris.Context) {
		ctx.JSON(struct {}{})
	})
	
	webp.Get("/hello", func(ctx iris.Context) {
		ctx.JSON(struct {
			Message string
		}{
			Message: "Hello World!",
		})
	})

	webp.Listen(":8080")
}

接著我們只要回到終端機啟動我們的伺服器後,接著輸入網址 ==http://localhost:8080/hello==,就會出現以下畫面就代表成功了

https://ithelp.ithome.com.tw/upload/images/20231009/20161224VoMEPtE5L8.png

簡單的指名打招呼

此外除了簡單的 "Hello World",還有可以利用網址的輸入,來讓網頁呈現簡單的指名打招呼方式,我們直接來看程式碼

package main

import (
	"github.com/kataras/iris/v12"
)

func main() {
	webp := iris.New()
		
	webp.Get("/greeting/{name}", func(ctx iris.Context) {
		name := ctx.Params().Get("name")
	
		ctx.JSON(struct {
			Message string
		}{
			Message: "Hello" + " " + name,
		})
	})

	webp.Listen(":8080")
}

這程式碼就是當你啟動伺服器時,在網址的部分 greeting/{name},把 name 換成自己想輸入的名字,如以下
https://ithelp.ithome.com.tw/upload/images/20231009/201612243UUo8rEy1g.png

可以看到我在 greeting/{name} 改成了自己想打得文字,然後就會進行變更了

不同國家的 Hello

除了可以輸入指定名稱,你還可以更改其他國家的 Hello ! 話不多說我馬上直接展示給大家看,首先是 法語
https://ithelp.ithome.com.tw/upload/images/20231009/201612241EyIlp5cNw.png

接著是 中文
https://ithelp.ithome.com.tw/upload/images/20231009/20161224HBRtMZKEkk.png

最後是 西班牙語
https://ithelp.ithome.com.tw/upload/images/20231009/20161224xRE3DZrd93.png

以下是程式碼

	webp.Get("/greeting/{name}", func(ctx iris.Context) {
		name := ctx.Params().Get("name")
		language := ctx.URLParam("language")
		hi := "Hello"
	
		if language == "spanish" {
			hi = "Hola"
		}
		
		if language == "french" {
			hi = "Bonjour"
		}

		if language == "chinese" {
			hi = "你好"
		}
	
		ctx.JSON(struct {
			Message string
		}{
			Message: hi + " " + name,
		})
	})

可以看到我們的網址需要在{name}後面加上一個 ? 然後才可以寫上 language == {各國語言}

(Go IRIS) + HTML = ?

相信說到前端,一定會有很多人第一反應就是 HTML,那這邊我來跟大家簡單分享一下,Go 的 IRIS 框架該如何跟 HTML 做結合

第一步

首先完成前置作業,以下程式碼是前置成功的程式碼

package main

import (
	"fmt"

	"github.com/kataras/iris/v12"
	"github.com/kataras/iris/v12/middleware/recover"
)

func main() {
    app := iris.New()
    app.UseRouter(recover.New())
    app.HandleDir("/", iris.Dir("./setfolder"))

    app.Get("/", func(ctx iris.Context) {
        ctx.JSON(struct{}{})
    })

    app.Listen(":8080")
}

第二步

創建 HTML 以及 CSS 的資料表

首先要創建一個資料夾
https://ithelp.ithome.com.tw/upload/images/20231009/20161224ZqqK7XSCJm.png

這個資料夾的名稱要跟你設定的名稱一樣
https://ithelp.ithome.com.tw/upload/images/20231009/20161224eCAlbGy71v.png

接著創建完成後你要在該資料夾裡面再創一個新的資料夾
https://ithelp.ithome.com.tw/upload/images/20231009/20161224lQ8DzIwUZz.png

完成後會變成這樣
https://ithelp.ithome.com.tw/upload/images/20231009/20161224i1sTqoSsXl.png

接著我們把開始著手 css 的部分,請先把鼠標移動到 wallpaper 中並點擊右鍵且點選新增檔案 style.css
https://ithelp.ithome.com.tw/upload/images/20231009/20161224uyQWNatKyV.png

接著開始設定 css 檔案

* {
    margin: 0;
    padding: 0;
}

完成 css 的設定後,輪到 Template rendering 的部分,請在 main() 的部分加上以下這些程式碼

tmpl := iris.HTML("./views", ".tmpl")
app.RegisterView(tmpl)

完整的程式碼如下:

package main

import (
	"github.com/kataras/iris/v12"
	"github.com/kataras/iris/v12/middleware/recover"
)

func main() {
    tmpl := iris.HTML("./views", ".tmpl")
    app := iris.New()
    app.UseRouter(recover.New())
    app.HandleDir("/", iris.Dir("./setfolder"))
    app.RegisterView(tmpl)

    app.Get("/", func(ctx iris.Context) {
        ctx.JSON(struct{}{})
    })

    app.Listen(":8080")
}

完成這些設定後,接著再新增一個資料夾,檔名就取跟當初設定的一樣
https://ithelp.ithome.com.tw/upload/images/20231009/20161224LjK59UiOaz.png

如以下:
https://ithelp.ithome.com.tw/upload/images/20231009/20161224ryFj9SEL08.png

接著你請在 views 中再創建一個新的檔案html(greeting.html)
https://ithelp.ithome.com.tw/upload/images/20231009/20161224xfdibtkuiF.png

然後開始設定 html 檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IRIS WEB</title>
    <link rel="stylesheet" href="/wallpaper/style.css">
</head>
<body>
    <h1>哈囉,世界</h1>
</body>
</html>

第三步

接著回到 .go 的檔案中設定一下 greeting 的 Route

    app.Get("/", func(ctx iris.Context) {
        ctx.View("greeting.html")
    })

設定好後要記得把 greeting.html 改成 greeting.tmpl 這樣程式碼才能找到檔案
https://ithelp.ithome.com.tw/upload/images/20231009/20161224bLAO4RXoGL.png

啟動伺服器

接著用終端機進入到 .go 中的資料夾並且輸入 go run irisweb.go 來啟動伺服器
https://ithelp.ithome.com.tw/upload/images/20231009/20161224j7na5EYMeN.png

接著只要把 Local 中的網址輸入在網頁中就會顯示剛剛撰寫的,大功告成!!!
https://ithelp.ithome.com.tw/upload/images/20231009/20161224IEXfSxMqKo.png

結言&預告

以上就是 Go IRIS 框架的各種功能與介紹,那下一站就是最後一站了 !!!

下一站~ 終點站:Go 完賽心得

資料來源

https://ithelp.ithome.com.tw/articles/10245889
https://www.youtube.com/watch?v=UeUDGEa0AX4
https://www.youtube.com/watch?v=Uo9MSE2Gbzs
https://www.youtube.com/watch?v=YMFkgN9r_jg
https://www.youtube.com/watch?v=2oe5xwZlbJk&t=837s


上一篇
Day28-[第二十七站 : 用Go語言架設一個網站前端架構 (一)]<GOO~
下一篇
Day30-[終點站 : 完賽心得 ]<GOO~
系列文
關於我轉生變成 Go 初學者的這檔事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言