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

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

2020-09-17 23:59:45 後端開發

寫在前面

本期內容是承接上期已經做好了登陸界面來寫的,不過本期是以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,這個函式不管成功與否都會去做,

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/69319.html

標籤:Go

上一篇:若依框架求問

下一篇:Go切片去掉重復元素

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • Rust中的智能指標:Box<T> Rc<T> Arc<T> Cell<T> RefCell<T> Weak

    Rust中的智能指標是什么 智能指標(smart pointers)是一類資料結構,是擁有資料所有權和額外功能的指標。是指標的進一步發展 指標(pointer)是一個包含記憶體地址的變數的通用概念。這個地址參考,或 ” 指向”(points at)一些其 他資料 。參考以 & 符號為標志并借用了他們所 ......

    uj5u.com 2023-04-20 07:24:10 more
  • Java的值傳遞和參考傳遞

    值傳遞不會改變本身,參考傳遞(如果傳遞的值需要實體化到堆里)如果發生修改了會改變本身。 1.基本資料型別都是值傳遞 package com.example.basic; public class Test { public static void main(String[] args) { int ......

    uj5u.com 2023-04-20 07:24:04 more
  • [2]SpinalHDL教程——Scala簡單入門

    第一個 Scala 程式 shell里面輸入 $ scala scala> 1 + 1 res0: Int = 2 scala> println("Hello World!") Hello World! 檔案形式 object HelloWorld { /* 這是我的第一個 Scala 程式 * 以 ......

    uj5u.com 2023-04-20 07:23:58 more
  • 理解函式指標和回呼函式

    理解 函式指標 指向函式的指標。比如: 理解函式指標的偽代碼 void (*p)(int type, char *data); // 定義一個函式指標p void func(int type, char *data); // 宣告一個函式func p = func; // 將指標p指向函式func ......

    uj5u.com 2023-04-20 07:23:52 more
  • Django筆記二十五之資料庫函式之日期函式

    本文首發于公眾號:Hunter后端 原文鏈接:Django筆記二十五之資料庫函式之日期函式 日期函式主要介紹兩個大類,Extract() 和 Trunc() Extract() 函式作用是提取日期,比如我們可以提取一個日期欄位的年份,月份,日等資料 Trunc() 的作用則是截取,比如 2022-0 ......

    uj5u.com 2023-04-20 07:23:45 more
  • 一天吃透JVM面試八股文

    什么是JVM? JVM,全稱Java Virtual Machine(Java虛擬機),是通過在實際的計算機上仿真模擬各種計算機功能來實作的。由一套位元組碼指令集、一組暫存器、一個堆疊、一個垃圾回收堆和一個存盤方法域等組成。JVM屏蔽了與作業系統平臺相關的資訊,使得Java程式只需要生成在Java虛擬機 ......

    uj5u.com 2023-04-20 07:23:31 more
  • 使用Java接入小程式訂閱訊息!

    更新完微信服務號的模板訊息之后,我又趕緊把微信小程式的訂閱訊息給實作了!之前我一直以為微信小程式也是要企業才能申請,沒想到小程式個人就能申請。 訊息推送平臺🔥推送下發【郵件】【短信】【微信服務號】【微信小程式】【企業微信】【釘釘】等訊息型別。 https://gitee.com/zhongfuch ......

    uj5u.com 2023-04-20 07:22:59 more
  • java -- 緩沖流、轉換流、序列化流

    緩沖流 緩沖流, 也叫高效流, 按照資料型別分類: 位元組緩沖流:BufferedInputStream,BufferedOutputStream 字符緩沖流:BufferedReader,BufferedWriter 緩沖流的基本原理,是在創建流物件時,會創建一個內置的默認大小的緩沖區陣列,通過緩沖 ......

    uj5u.com 2023-04-20 07:22:49 more
  • Java-SpringBoot-Range請求頭設定實作視頻分段傳輸

    老實說,人太懶了,現在基本都不喜歡寫筆記了,但是網上有關Range請求頭的文章都太水了 下面是抄的一段StackOverflow的代碼...自己大修改過的,寫的注釋挺全的,應該直接看得懂,就不解釋了 寫的不好...只是希望能給視頻網站開發的新手一點點幫助吧. 業務場景:視頻分段傳輸、視頻多段傳輸(理 ......

    uj5u.com 2023-04-20 07:22:42 more
  • Windows 10開發教程_編程入門自學教程_菜鳥教程-免費教程分享

    教程簡介 Windows 10開發入門教程 - 從簡單的步驟了解Windows 10開發,從基本到高級概念,包括簡介,UWP,第一個應用程式,商店,XAML控制元件,資料系結,XAML性能,自適應設計,自適應UI,自適應代碼,檔案管理,SQLite資料庫,應用程式到應用程式通信,應用程式本地化,應用程式 ......

    uj5u.com 2023-04-20 07:22:35 more