[終極巨坑]golang+vue開發日記【三】,登陸界面制作(二)


寫在前面

本期內容是承接上期已經做好了登陸界面來寫的,不過本期是以golang為主,可能需要大家把最基本的語法結構熟悉一下:菜鳥教程。這樣的話方便展開,自然而然的,本篇也是直接實戰為主。這次需要依賴mysql,這個必須安裝,redis最好也安裝一下,以后會用到。

啟動一個go項目

這里我打算啟動一個go的web application,那么很多人的話都會自己從頭開始,不過這的確有點麻煩,網上其實很多大佬寫了一些腳手架,這里我打算直接使用bydmm大佬的singo項目來開發,可以看他的B站空間的系列教程:bydmm的個人空間

所以首先在github把項目弄下來把:

git clone https://github.com/Gourouting/singo.git

然后把項目文件夾目錄改稱自己的項目名稱把,就是把singo這個文件夾名字給改了,然后對應里面的所有文件import都需要把singo改成你的項目名稱。

我們可以順便看一看項目結構,說明一下:

這些文件夾的名字都很明顯暴露意圖,這里我打算暫時不一個個去講,因為這里我打算說一些所有go項目應該都有的基礎東西,就是main.go。如果學過編程都明白,有且只有一個程序的入口,因此這個入口就是main.go,並且他只需要滿足他的package是main,並且有一個func main()就可以了:

package main

func main() {
}

項目環境配置

這個腳手架他的環境配置使用.env來配置的,他也有一個.env exmaple,如果你想知道在哪里實現的可以看conf文件夾下面的conf.go,就是通過.env設置項目下的環境變量,然后在conf.go獲取而已,所以你修改一下文件名和把MYSQL_DSN修改成自己的即可,如果不懂DSN的,可以參考如下格式寫:

username:password@protocol(address)/dbname?param=value
一個例子,因為默認的localhost:3306,可以不用寫protocol字段
root:123456@/ysyh?charset=utf8&parseTime=True&loc=Local

go mod怎么用

go mod在這里面是包管理器,在第一篇應該已經配好了goproxy和go111module,這個包管理器在如今版本很牛逼,你只需要做2件事情就可以完成,為了演示,我們先把原來項目中的go.mod和go.sum給刪了,然后在shell輸入:

go mod init your_projectname

這樣你就弄好了go mod,之后你在運行項目的時候他會自動檢測你缺少的依賴,並且安裝,你可以直接試一試:

go run main.go

本來你只有一行的go.mod文件多了一堆依賴聲明,並且可以運行項目。

路由

后端第一件事是做接收請求,只有你能接受了請求,並且把他發到對應的地址才有接下來的操作,所以我們從路由看起。對於gin的路由,官方已經寫的很清楚了,在項目里面就是server下的router.go,下面是關鍵的幾個代碼

func NewRouter() *gin.Engine {
	r := gin.Default()

	r.Use(middleware.Cors())

	v1 := r.Group("/api/v1")
	{
		v1.POST("ping", api.Ping)
		auth := v1.Group("")
		auth.Use(middleware.AuthRequired())
		{
			auth.GET("user/me", api.UserMe)
                }
        }
}

我只截取了幾個知識點,首先 gin.Default()就是路由了,你直接r.Run(":port")就可以直接在該端口上執行該路由。

接下來有個r.Use,這個是中間件的意思,中間件其實就是到你路由的方法前,他會做這個方法里面的內容,例如例子中的Cors,因為我幾乎所有的請求都要做Cors,所以我不可能在每個方法里面都寫一遍這段代碼,因此我們放在中間件里面就省事了。可以看一下gin的middlerware的格式:

import(
	"github.com/gin-contrib/cors"
)
func Cors() gin.HandlerFunc {
	config := cors.DefaultConfig()
        return cors.New(config)
}

拿Cors為例子,只是把一個gin.HandlerFunc傳入Use方法里面就可以實現中間件注冊。

Group方法,其實Group方法就是把他下面的地址加上一段地址,例如上例子,v1下面的post方法呢,他的地址就是/api/v1/ping,調用的三api.ping這個方法。其實單看這個功能感覺也一般,但是可以看一下下面的auth的例子,他在auth下面直接Use,做了個登陸認證,所以在auth下面的地址都有一個middlerware,沒有登陸的都沒辦法訪問。因此分組之后可以給組內成員加上middlerware,這樣就可以節省很多代碼量。

處理函數

路由之后呢,就會到達你想要處理這個請求的函數,我直接拿注冊為例子來說明。

func UserRegister(c *gin.Context) {
	var service service.UserRegisterService
	if err := c.ShouldBind(&service); err == nil {
		res := service.Register()
		c.JSON(200, res)
	} else {
		c.JSON(200, ErrorResponse(err))
	}
}

這個就是注冊的處理函數,但是這個是這個腳手架做了封裝的,但是已經有靈魂了。首先可以函數有個參數進來,是gin.Context指針的值。Context顧名思義的上下文,其實就是請求的cookie,headers,content之類的。所以我們請求的信息都要從這里面拿到。

之后有個這個c.ShouldBind(&service),這個意思是可以對請求的內容做一個驗證,如果符合service這個strcut呢,他就告訴你請求的內容是沒有問題的,這里可以看一看這個struct的寫法

type UserRegisterService struct {
	Email           string `form:"email" json:"email" binding:"required,email"`
	UserName        string `form:"user_name" json:"user_name" binding:"required,min=5,max=30"`
	Password        string `form:"password" json:"password" binding:"required,min=8,max=40"`
	PasswordConfirm string `form:"password_confirm" json:"password_confirm" binding:"required,min=8,max=40"`
}

除了最后的字段應該都可以看得懂的。就是最后面有段內容,gin可以讀取到那里,並且根據這里的內容去判斷傳入的參數是否有問題,可以看一下Email這個例子,他要求前段可以用form提交或者json提交,他對應的字段是email,並且后面有個binding,這個是驗證的規則了,required代表他必須存在,第二個email是代表他是一個email格式的文本。

最后呢,我們處理完了就要返回結果了,這里直接c.JSON就可以以json的格式返回了。

數據庫操作

后端操作不可避免要與數據庫交互的,所以這里數據庫操作也是很重要的,我們這里用到的數據庫叫做gorm,可以看看gorm官方文檔。不過gorm只支持mysql,PostgreSQL和Sqlite3,其他的數據庫可能要用別的orm。這里可以在model下init.go看到數據庫的基本操作

func Database(connString string) {
	db, err := gorm.Open("mysql", connString)
	if err != nil {
		util.Log().Panic("連接數據庫不成功", err)
	}
	//設置連接池
	//空閑
	db.DB().SetMaxIdleConns(50)
	//打開
	db.DB().SetMaxOpenConns(100)
	//超時
	db.DB().SetConnMaxLifetime(time.Second * 30)

	migration()
}

我這里也是把跟數據庫鏈接比較重要的代碼拿出來了,這里用單例我就沒貼了。首先怎么去鏈接數據庫,就是gorm.Open就完事了,然后第一個參數是數據庫種類,第二個是DSN,DSN上面已經講過了。

之后呢我們就要設置一些參數,上面也寫的很清楚了,最后有個migration,這個是gorm的很厲害的功能,他可以自動的去生成表和修改表結構。其實就是DB.AutoMigrate這個方法,每次運行的時候,他都會先去把里面的struct加入到數據庫中,例如這里的user表,就是用如下的stcut自動遷移:

// User 用戶模型
type User struct {
	gorm.Model
	UserName       string
	PasswordDigest string
	Email       string
	Status         string
	Avatar         string `gorm:"size:1000"`
}

這里面的gorm.Model是這樣的,這里面可能會涉及到gorm的軟刪除的內容,所以建議加上gorm.Model在你任意的表結構中:

type Model struct {
	ID        uint `gorm:"primary_key"`
	CreatedAt time.Time
	UpdatedAt time.Time
	DeletedAt *time.Time `sql:"index"`
}

前端請求

我們已經把最基本的后端邏輯給弄懂了,雖然沒有弄實現邏輯。但是我們Vue怎么給后端發請求?可能懂得人應該知道是ajax了,在Vue里面的話大家常用的是axios,是基於Promise機制的,首先可以安裝一下。

npm install axios

然后呢在main.js里面加上(其中第二行是為了防止做Cors的時候出問題):

import axios from 'axios';
axios.defaults.withCredentials=true
Vue.prototype.$axios = axios;

之后我們在我們的項目文件做請求就可以:

this.$axios.get("http://127.0.0.1:3000/api/v1/user/me").then((res) => {
    //todo
}).catch(err => {
    //todo
}).finally(() => {
})

如果是post請求就在后面把請求的參數加上去。這個請求發送之后如果正確了,就會到then里面,結果就是用一個變量去接受即可。出現問題就可以catch錯誤,最后也可以用finally,這個函數不管成功與否都會去做。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM