目標
- 1.下載安裝好gin-vue-admin.
- 2.把項目上傳到自己的github，並跟蹤自己的開發分支。
- 3.更新源項目的代碼
視頻教程地址：
-
GIN-VUE-ADMIN手冊
https://www.gin-vue-admin.com/ -
在線演示地址 賬號:admin 密碼：123456
http://qmplus.henrongyi.top/#/login?redirect=%23%2Flayout%2Fdashboard -
項目的安裝
https://www.bilibili.com/video/BV1eQ4y1P7nn 海馬的視頻(內含如何git管理代碼)
https://www.bilibili.com/video/BV1Fg4y187Bw 官網作者的視頻 -
開發示例：后台管理系統腳手架gin-vue-admin簡介及開發示例
https://www.bilibili.com/video/BV16K4y1r7BD -
2.0目錄介紹和自動化開發模式(代碼生成器)
https://www.bilibili.com/video/BV1aV411d7Gm gin-vue-admin
環境要求
- node版本 > v8.6.0
- golang版本 >= v1.11
- IDE推薦：Goland
- 各位在clone項目以后，把db文件導入自己創建的庫后，最好前往七牛雲申請自己的空間地址。
- 替換掉項目中的七牛雲公鑰，私鑰，倉名和默認url地址，以免發生測試文件數據錯亂
前端環境安裝文檔：
安裝node npm cnpm yarn(選裝)
參考下面的安裝文檔
linux ubuntu安裝node npm cnpm nvm nrm yarn vue-cli vue-router
https://www.cnblogs.com/haima/p/11235640.html
后端環境安裝文檔：
Golang1.14.2 環境的安裝
https://www.cnblogs.com/haima/p/12057933.html
goland的配置
Goland 的配置
https://www.cnblogs.com/haima/p/12771770.html
gin-vue-admin下載安裝
下載項目
github地址：
https://github.com/flipped-aurora/gin-vue-admin
進入自己的工作目錄
cd /media/haima/34E401CC64DD0E28/site/go/src/test
git clone https://github.com/flipped-aurora/gin-vue-admin.git
或者直接下載zip包，然后解壓到自己的工作目錄里
導入數據庫
1.新建數據庫
2.導入gin-vue-admin/server/db/qmplus.sql
右鍵刷新
server端
用goland 打開 gin-vue-admin/server （一定打開server目錄）
gin-vue-admin/server/config.yaml里修改mysql的配置文件
# mysql connect configuration
mysql:
username: root
password: '123456'
path: '127.0.0.1:3306'
db-name: 'ginvueadmin'
config: 'charset=utf8mb4&parseTime=True&loc=Local'
max-idle-conns: 10
max-open-conns: 10
log-mode: true #true開啟mysql的調適模式 false關閉調適模式
# system configuration
system:
use-multipoint: false
env: 'public' # Change to "develop" to skip authentication for development mode
addr: 8887 #這里可以修改后台端口，如果這里改后 ，web前端的也需要修改為對應的
db-type: "mysql" # support mysql/sqlite
cmd里運行命令
cd gin-vue-admin/server
go mod tidy
go run main.go
web端
1.打開vscode打開gin-vue-admin/web目錄
2.修改訪問后的api端口為8887（根據自己需要）
a.修改gin-vue-admin/web/vue.config.js
proxy: {
// 把key的路徑代理到target位置
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { //需要代理的路徑 例如 '/api'
target: `http://127.0.0.1:8887`, //代理到 目標路徑
changeOrigin: true,
pathRewrite: { // 修改路徑數據
['^' + process.env.VUE_APP_BASE_API]: '' // 舉例 '^/api:""' 把路徑中的/api字符串刪除
}
}
},
b.修改 src/view/systemTools/formCreate/index.vue
<iframe width="10%" height="100%" src="http://127.0.0.1:8887/form-generator/#/" frameborder="0"></iframe>
cmd里運行命令
cd gin-vue-admin/web
yarn install
yanr run serve
看到下面目錄就已經成功了
賬號：admin 密碼：123456
目錄結構
├─server （后端文件夾）
│ ├─api （API）
│ ├─config （配置包）
│ ├─core （內核）
│ ├─db （數據庫腳本）
│ ├─docs （swagger文檔目錄）
│ ├─global （全局對象）
│ ├─initialiaze （初始化）
│ ├─middleware （中間件）
│ ├─model （結構體層）
│ ├─resource （資源）
│ ├─router （路由）
│ ├─service (服務)
│ └─utils （公共功能）
└─web （前端文件）
├─public （發布模板）
└─src （源碼包）
├─api （向后台發送ajax的封裝層）
├─assets （靜態文件）
├─components（組件）
├─router （前端路由）
├─store （vuex 狀態管理倉）
├─style （通用樣式文件）
├─utils （前端工具庫）
└─view （前端頁面）
主要功能
權限管理：基於jwt和casbin實現的權限管理
文件上傳下載：實現基於七牛雲的文件上傳操作（為了方便大家測試，我公開了自己的七牛測試號的各種重要token，懇請大家不要亂傳東西）
分頁封裝：前端使用mixins封裝分頁，分頁方法調用mixins即可
用戶管理：系統管理員分配用戶角色和角色權限。
角色管理：創建權限控制的主要對象，可以給角色分配不同api權限和菜單權限。
菜單管理：實現用戶動態菜單配置，實現不同角色不同菜單。
api管理：不同用戶可調用的api接口的權限不同。
配置管理：配置文件可前台修改（測試環境不開放此功能）。
富文本編輯器：MarkDown編輯器功能嵌入。
條件搜索：增加條件搜索示例。
restful示例：可以參考用戶管理模塊中的示例API。
前端文件參考: src\view\superAdmin\api\api.vue
后台文件參考: model\dnModel\api.go
多點登錄限制：需要在config.yaml中把system中的useMultipoint修改為true(需要自行配置Redis和Config中的Redis參數，測試階段，有bug請及時反饋)。
分片長傳：提供文件分片上傳和大文件分片上傳功能示例。
表單生成器：表單生成器借助 @form-generator。
代碼生成器：后台基礎邏輯以及簡單curd的代碼生成器。
把項目上傳到自己的github
把自己的代碼推到github上管理
1.在github上創建自己的倉庫
2.在本地初使化自己的倉庫
在gin-vue-admin根目錄里
git init
3.推送代碼到自己的倉庫上
git remote add origin git@github.com:haimait/ginvueadmintest.git # 設置並聯到自己的master分支上
git add . #添加代碼到運送車
git commit -m"第一次提交代碼到master倉庫" #提交運送車上所有代碼到本地倉庫
git push -u origin master
此時已經把自己的代碼推到自己github的倉庫的master分支上了
4.創建master_dev開發分支
在master分支上創建並切換到master_dev支付
git checkout -b master_dev #創建並切換到master_dev分支上
git push --set-upstream origin master_dev # 設置並聯到自己的分支上
git add . #添加代碼到運送車
git commit -m"第一次提交代碼到master_dev" #提交運送車上所有代碼到本地倉庫
git push #推送代碼到線上倉庫
此時已經把自己的代碼推到自己github的master_dev分支上了
更新作者源項目代碼
如果作者的項目有更新了，我們想pull到作者新的代碼。可以按下面的操作
git remote add upstream https://github.com/piexlmax/gin-vue-admin.git //關聯源分支,並啟別名為upstream
git remote -v #查看已經關連上的項目
git fetch upstream #下載作者源項目的所有分支
git branch -a #查看自己本地所有的分支
git merge upstream/master #合並作者master分支的代碼到自己的當前所在的分支上
合並完代碼后，如果有沖突就解決一下沖突，再提交一下代碼到自己的本地創建，再push到自己github的線上倉庫
git status //查看自己的本沒有提交的代碼，如果有沖突用這個命令也可以看到是哪個文件沖突了，然后自己修改一下沖突
git add . #添加代碼到運送車
git commit -m"合並沖突" #提交運送車上所有代碼到本地倉庫
git pull #更新一下自己線上的代碼,如果有沖突再解決一下沖突 再執行一下 git add . git commit -m
git push #推送到代碼到自己的線上倉庫里
到此就完成了更新作者代碼合並到自己的指定的代碼分支上，並提交到自己github的倉庫上。
希望對大家有幫助
聯系方式
技術群
QQ群
QQ交流群：622360840
微信交流群：可以添加上面任意一位開發者，備注"加入gin-vue-admin交流群"
海馬整理