框架的基礎學會了，要實做才能更加精熟，所以用一下目前學到的所有東西來實做一個計算機吧。

目標

有個目標做的時候比較不會亂跑。

計算機

• 基礎的＋－＊／功能

• 取餘數、次方

• AC（All Clear）功能

• 以網頁顯示

• 算術部分用Go完成

• 前端用html、css、js

應該就這樣吧？看起來沒有很難，不過通常做下去都會超出想像時間，先預計做個兩小時吧？

做完了，原本以為html什麼的我還很熟，結果該忘的全忘，bootstraps用不順，css也寫不好，版面就花了我三小時了哈哈哈哈，最後五小時完成一個計算機ˊˇˇˋ

從零製作一個計算機

先附上程式碼，其實程式有一些漏洞啦，但只是做為小練習我就不修掉了，邏輯判斷的地方也有點亂。

開頭

畢竟主軸是練習Go，所以從Go這邊先吧！

1. 創立新環境，建立資料夾calculator-app與檔案main.go
2. go mod init calculator-app

運算功能

將計算機的運算功能丟到package裡面做。

package caculate

func Add(a, b float64) float64{
	return a+b
}
.
.
.

主程式main.go

例行import一些東西。

import (
	math "calculator-app/calculate"
	"fmt"
	"net/http"
	"strconv"
	"github.com/gin-gonic/gin"
)

呼叫html

跟前面的基本上沒差多少，計算機只有答案的部分需要動態更動，因此在Data結構中只有一個Ans變數，用來渲染計算機中答案的部分，

type Data struct {
	Ans float64
}

func index(c *gin.Context) {
	value := temp
	data := Data{value}
	c.HTML(http.StatusOK, "index.html", data)
}

這邊先把html的部分做完

要將資料傳回去會用到form與submit，深色底的是需要後端幫忙做運算的，那幾個按鈕在在html中type=submit。

用Go串接

func main() {
	r := gin.Default()
	r.LoadHTMLGlob("template/html/*")
	r.Static("/assets", "./template/assets")
	r.GET("/", index)
	r.POST("/", add)
	r.Run(":8080")
}

• 第1、2行都與之前一樣，一個Gin模板與讀取html檔案。
• 第3行為讀取靜態檔案，css、js檔都在這個資料夾中。
• 第4行r.GET是首頁位置。
• 第5行，當監聽的port收到POST資料時會呼叫add方法，進行運算相關的判斷。
• 第6行，運行服務在port:8080上。

表單資料

上面的第5行接收到POST資料會呼叫add方法，而POST資料是html中由form回傳的資料，看一下相關的程式碼。

觀看表單資料

可使用這種方式觀看所有form中回傳的資料。

_ = c.Request.ParseForm()
fmt.Println(c.Request.Form)

• 第一行用來先解析Request.Form中的資料。
• 第二行觀看所有資料。

這篇文章有解釋為什麼不能直接使用第二行觀看資料。

接收數字

a, _ := c.GetPostForm("value")

• 這邊會接收表單中name="value"的資料，並取得value欄位內的值。
• 後面省略符號是一個bool值，若沒接收到資料會是false，本例沒有用到就忽略了。

接收運算子

由於運算子是跟著submit送進來的，在php內是以$_request[]的方式接收submit資料，但Gin在接收form資料時會同時將input與submit一併傳入。

operator_temp, _ := c.GetPostForm("submit")

• 接收html中type=submit name="submit"的資料。

邏輯判斷

1. 設置temp與operator暫存資料。
2. 在頁面按下數字與運算子時存入Go程式中。
3. 進行判斷，不是次方的話才暫存，次方的話要直接回傳答案。
4. 再次按數字與=時回傳運算答案與歸零。

這邊都是簡單的邏輯判斷，就不放程式碼上來了ˊˇˋ

完成

{%youtube b9Wnes4Folk %}

耶，小成品，稍微有點在學Go的感覺了，嗎？明天預計的內容是API與RestfulAPI的概念，程式碼的部分一開始附上了，有問題的話可以在留言問，感謝各位。

參考資料

Day6 | 透過 golang 實作一個簡單的登入功能
https://ithelp.ithome.com.tw/articles/10234298

Day21 Golang 網頁框架 gin 使用教學(GET、POST、ANY)
https://ithelp.ithome.com.tw/articles/10244985

gin-gonic
https://github.com/gin-gonic/gin