GO後端開發+VUE實列

Liurrr發表於2022-03-24

因為我是從java轉到go,程式碼結構跟我之前用java的很像

在這裡只淺顯的實戰運用,沒有過多理論講解

工作環境:IDE:Goland , Go 1.17.7 框架 Gin+Gorm ,前端VUE

這裡不過多講前端,可以到我的github或者gitee拉取

Go的安裝配置

在官網下載完,安裝後需要配置兩個環境變數

一個是GOROOT,也就是Go安裝的資料夾,注意不要定位到 /bin裡面

還有一個是GOPATH,這個就是存放工作空間的資料夾

image-20220307225944541

image-20220307230024326建議在工作空間裡先創多一個pkg資料夾,裡面就會存放下載的庫,gin_vue是我的專案

我用的IDE是Goland,所以裡面還需要配置,建議將Goland自動配置的Go環境變數刪掉,除非你的庫想安裝在C盤

image-20220307230313843快捷鍵 Crtl+shift+s 進入設定點選GOPATH配置工作環境

安裝框架

在專案資料夾路徑裡輸入 cmd 調出黑視窗輸入,或者在Goland下面點選Triminal

go get github.com/gin-gonic/gin //後端框架
go get github.com/jinzhu/gorm //資料庫框架

專案開始

結構

首先是確定好專案結構,因為之前用過java寫後端所以就沿用了一些風格

image-20220324120820181

其中bin是放go編譯後的檔案的,src就是程式碼存放的檔案。config就是存放一些配置資訊的檔案

controller是對資料庫各個表的操作,一個go檔案代表一個表的操作

dbUtils是資料庫連線初始化的檔案

entiy就是存放資料庫各個表裡面的欄位結構

router就是定義後端給前端的介面檔案

utils就是工具類

配置檔案

config.yml

ip: 127.0.0.1 #ip地址
user: root #資料庫使用者的名字
pwd: 123456 #這裡資料庫使用者的密碼
db_name: gotest #所連線資料庫的名字
db_port: 3306 #連線資料庫的埠號

資料庫連線

這是我gotest資料庫的一個表user的欄位,下面基本就是對這個表的操作

image-20220324123003641

var AdminT, UserT, Db *gorm.DB

func Init() {
   var c ymlConfig
   var dbConfig string
   config := c.getYml()
   //"root:root123@tcp(127.0.0.1:3306)/test_gorm?charset=utf8mb4&parseTime=True&loc=Local"
   dbConfig = config.User + ":" + config.Pwd + "@tcp(" + config.Ip + ":" + config.Db_port + ")/" + config.Db_name + "?charset=utf8mb4&parseTime=True&loc=Local"
   db, err := gorm.Open("mysql", dbConfig)
   if err != nil {
      panic(err)
   }

   AdminT = db
   UserT = db
   //繫結資料庫表名
   UserT.AutoMigrate(&entiy.User{})

}

定義表的結構

我建立了一個表叫做User,struct作為一個對映物件,對應著user裡面的欄位

image-20220324122416069

對資料庫表的操作

這裡的c *gin.Context是後端介面傳來的資訊

ShouldBindJSON就是將結構體傳進去,會將前端傳送的JSON資料按照結構體進行資料繫結

image-20220324122359174

建立介面

這裡就是後端介面的建立,前端訪問/user/login 就會訪問到這個介面對應的處理函式

image-20220324122703537

初始化

確定後端埠號

image-20220324124703649

拉取專案

目的是vue專案(後端給他配置好的埠號是9292,要是大家改了前面後端的埠號就會通不了),需要提前安裝node.js,

https://nodejs.org/en/

image-20220324123404342

一直點選,安裝到你指定的資料夾就行了

系統環境 配置 這裡的地址是你安裝nodejs的地址裡面的node_modules

image-20220324123443214

在系統環境變數裡雙擊path 將你的nodejs地址放進去即可

image-20220324123628813

這是我的工程專案,下面放著vue的專案

image-20220324123729658

現在為vue新增構造器 點選畫圈地方

image-20220324124125115

按Edit Configuration 進入,點選左上角的+號 找到npm

image-20220324124253177

按照我這裡配置一下,基本都是上面涉及到的路徑,點選確定

image-20220324124408699

在Goland的命令列中

cd vue
npm install

image-20220324124011950

等安裝完就可以點選這裡切換前後端執行了 image-20220324124508698

若有其他問題可以在評論區討論

相關文章