簡介
goadmin-ui 是一個后台基礎模塊的前端的實現,它基於 vue-element-admin實現。它實現了一套最基本的后台權限管理前端的基礎模塊。可以很快捷的開啟自己的項目,不用考慮權限功能如何實現,操作頁面如何設計,這里基本上已經滿足了,希望能夠為大家提供便利。
基於Gin + Vue + Element UI的前后端分離權限管理系統
系統初始化極度簡單,只需要配置文件中,修改數據庫連接,系統啟動后會自動初始化數據庫信息以及必須的基礎數據
一 編寫go-admin應用,第1步
讓我們通過示例來學習。
通過這個教程,我們將帶着你創建一個基本的文章管理程序。
它由兩部分組成:
- 前端頁面。
- 后端api服務。
我們假設你已經閱讀了開始
二.開始項目
如果這是你第一次使用 go-admin 的話,你需要一些初始化設置。也就是說,你需要配置一個 go-admin 即一個項目實例需要的設置數據庫或者也可以使用細目本身提供的sqlite3的體驗數據庫(部分功能不支持,如代碼生成),目前推薦大家使用mysql數據庫。
三.建議開發目錄
├── project
│ ├── go-admin #后端go代碼
│ ├── go-admin-ui #前端vue代碼
四.修改配置
進入項目后台代碼工作路徑,
打開 /project/go-admin/config/settings.yml
修改配置#注釋的地方:
database:
driver: mysql
source: root:123456@tcp(127.0.0.1:3306)/goadmindb?charset=utf8&parseTime=True&loc=Local&timeout=1000ms #數據配置 utf8改為utf8mb4 可以支持emoji表情
gen:
dbname: goadmindb #數據庫名
frontpath: ../go-admin-ui/src #前端vue/js代碼的生成路徑 ..是指在go-admin同級目錄的go-admin-ui里生成前端代碼 參考上面一.建議開發目錄
五.代碼生成
1. 導入表
先在數據庫里創建好自己的表信息
CREATE TABLE `hm_article` (
`article_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
`article_sn` varchar(60) NOT NULL DEFAULT '' COMMENT '文章編號',
`cid` int(10) unsigned NOT NULL COMMENT '分類ID',
`title` varchar(200) NOT NULL COMMENT '標題',
`keywords` varchar(100) DEFAULT NULL COMMENT '關鍵字',
`description` varchar(255) DEFAULT NULL COMMENT '摘要',
`image_url` varchar(200) DEFAULT NULL COMMENT '圖片',
`video_url` varchar(200) DEFAULT NULL COMMENT '視頻地址',
`href_url` varchar(200) DEFAULT NULL COMMENT '跳轉地址',
`content` text CHARACTER SET utf8mb4 COMMENT '內容',
`author` varchar(20) DEFAULT NULL COMMENT '文章作者',
`source` varchar(30) DEFAULT NULL COMMENT '文章來源',
`hits` int(10) unsigned DEFAULT '0' COMMENT '點擊量',
`is_tj` varchar(1) DEFAULT '1' COMMENT '是否推薦 0:是 1:否',
`is_top` varchar(1) DEFAULT '1' COMMENT '是否置頂 0:是 1:否',
`url` varchar(250) DEFAULT NULL COMMENT '文章鏈接',
`tags` varchar(255) DEFAULT NULL COMMENT '標簽',
`comment_nums` int(11) NOT NULL DEFAULT '0' COMMENT '評論數量',
`status` varchar(1) NOT NULL DEFAULT '1' COMMENT ' 狀態: 1 正式發布 2 下架 3草稿',
`create_by` varchar(128) DEFAULT NULL,
`update_by` varchar(128) DEFAULT NULL,
`created_at` timestamp NULL DEFAULT NULL COMMENT '添加時間',
`updated_at` timestamp NULL DEFAULT NULL COMMENT '更新時間',
`deleted_at` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`article_id`),
UNIQUE KEY `article_sn` (`article_sn`) USING BTREE,
KEY `status` (`status`) USING BTREE,
KEY `cid` (`cid`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=44 DEFAULT CHARSET=utf8 COMMENT='文章';
啟動
go-admin
,進入系統
打開以上程序畫面,程序左側有兩個菜單,
系統工具-->代碼生成-->導入
這里的導入是要將我們剛剛創建的表導入到系統中,這樣我們就可以根據表來生成代碼了。
2.編輯模板字段
確定后,表結構存儲到了代碼生成工具里,此時我們需要對導入數據進行編輯。
按需編輯選項,之后點擊保存。
3. 生成代碼和配置
注意
注意
注意
點擊生成代碼前,一定要在
四.修改配置
里配置好前端的代碼生成路徑.
解釋說明:
- 預覽:可查看生成的代碼
- 代碼生成:生成不帶權限的代碼
- 代碼生成[帶權限]:生成帶權限的代碼
- 配置生成:菜單和api權限生成到db數據庫里(注意:重復點擊,會多次插入
sys_menu
表里數據)
代碼生成
和代碼生成[帶權限]
選擇其一即可.
下面以代碼生成[帶權限]
操作說明
注意
點擊代碼生成[帶權限]
后,會同時生成前端代碼
和后端代碼
到項目里,無須手動復制代碼到項目
生成的文件
前端代碼生成的文件:
/project/go-admin-ui/src/api/article.js
/project/go-admin-ui/srcsrc/views/article/index.vue
后端代碼生成的文件:
/project/go-admin/apis/article/article.go
/project/go-admin/models/article.go
/project/go-admin/router/article.go
路由
路由里router.go
里會自動插入文章的路由
/project/go-admin/router/router.go
// 無需認證的路由示例
func examplesNoCheckRoleRouter(r *gin.Engine) {
v1 := r.Group("/api/v1")
v1.GET("/nilcheckrole", nil)
// {{無需認證路由自動補充在此處請勿刪除}}
}
// 需要認證的路由示例
func examplesCheckRoleRouter(r *gin.Engine, authMiddleware *jwtauth.GinJWTMiddleware) {
v1 := r.Group("/api/v1")
v1.GET("/checkrole", nil)
// {{認證路由自動補充在此處請勿刪除}}
registerHmArticleRouter(v1, authMiddleware) #這里是新生成的文章路由代碼
}
注意:
上面兩處// {{認證路由自動補充在此處請勿刪除}}
一定不可刪除,這是插入路由的標識位
4.重啟前后台服務
格式化前后台代碼,重啟前后台服務.
六.配置角色權限
進入角色管理->角色列表->修改
選擇系統管理員,點擊修改,勾選我們剛才添加的菜單以及api接口,保存。
刷新頁面,剛剛授權的菜單就出來了。
七.操作內容管理
這個時候我們的內容管理已經添加完成了,里邊已經具備了增刪改查功能。
列表
新增
修改
刪除
八.結束語
OK!,內容到這里已經介紹了開始第一個go-admin應用的全部過程,雖然圖片居多,主要也是編碼內容比較少,希望大家能夠掌握,如在使用中遇到了什么問題都可以在qq群或者微信群中溝通交流!謝謝!
從哪里獲得幫助:
如果你在閱讀本教程的過程中有任何疑問,可以前往提交建議