# 编写 go-admin 应用,第 2 步
这部分教程从 教程第 1 步 结尾的地方继续讲起。我们将建立数据库,创建您的第一个模型。
从哪里获得帮助:
如果你在阅读本教程的过程中有任何疑问,可以前往提交建议。
# 数据库配置
现在,打开 config/settings.yml
。这是个包含了 go-admin
项目的配置信息。
database:
database: dbname
dbtype: mysql
host: 127.0.0.1
password: password
port: 3306
username: root
修改数据库配置信息。
当前我们先通过 sql 脚本的方式来创建数据库表信息。
CREATE TABLE `article` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '编码',
`title` varchar(128) DEFAULT NULL COMMENT '标题',
`author` varchar(128) DEFAULT NULL COMMENT '作者',
`content` varchar(255) DEFAULT NULL COMMENT '内容',
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
`deleted_at` timestamp NULL DEFAULT NULL,
`create_by` int(11) unsigned DEFAULT NULL,
`update_by` int(11) unsigned DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `idx_article_deleted_at` (`deleted_at`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='文章';
数据库表创建以后,启动项目
# 代码生成
启动go-admin
,进入系统
打开以上程序画面,程序左侧有两个菜单,
- 系统管理
- 系统工具
# 表结构导入
现在我们打开系统工具,进入 代码生成
,下边的画面请点击导入
TIP
这里的导入是要将我们刚刚创建的表导入到系统中,这样我们就可以根据表来生成代码了。
选择刚才创建的 article
并点击 确认
按钮,将表结构导入系统。
# 编辑模板字段
确定后,表结构进存储到了代码生成工具里,此时我们需要对导入数据进行编辑。
编辑红框里边的选项,之后点击保存。
# 预览代码
可以在预览处看到工具生成的代码。
# 编写代码
到这里我们的第一个程序进行的很顺利,下一步我们在项目中创建文件,找到apis
文件夹和models
文件夹,分别创建 demo.go(注意:实际项目中根据业务确定命名)。
models/demo.go 文件我们需要稍作修改,修改内容如下:
当前文件
全部
if e.ArticleId != "" {
替换成if e.ArticleId != 0 {
。删除以下内容:
CreatedAt string `json:"createdAt" gorm:"type:timestamp;"` //
UpdatedAt string `json:"updatedAt" gorm:"type:timestamp;"` //
DeletedAt string `json:"deletedAt" gorm:"type:timestamp;"` //
这个时候,models 和 apis 已经创建好了。
# 添加路由
打开 router/router.go 文件,找到
auth.Use(authMiddleware.MiddlewareFunc()).Use(middleware.AuthCheckRole()) {
添加一下内容:
auth.GET("/articleList",apis.GetArticleList)
auth.GET("/article/:articleId",apis.GetArticle)
auth.POST("/article",apis.InsertArticle)
auth.PUT("/article",apis.UpdateArticle)
auth.DELETE("/article/:articleId",apis.DeleteArticle)
到这一步我们的业务 api 已经写好了,重启前端服务,接下来开始处理页面显示。
# 创建 VIEWS 和 JS
- 打开前端项目
src/api
目录下,创建article.js
,并把预览内容直接复制到文件; - 打开
src/views
目录,创建article
文件夹,并在里边创建index.vue
,并把预览内容直接复制到文件;
index.vue 文件中需要对编辑对话框进行修改 删除
<el-form-item label="编码" prop="articleId">
<el-input v-model="form.articleId" placeholder="编码" />
</el-form-item>
和
<el-form-item label="" prop="createdAt">
<el-input v-model="form.createdAt" placeholder="" />
</el-form-item>
<el-form-item label="" prop="updatedAt">
<el-input v-model="form.updatedAt" placeholder="" />
</el-form-item>
<el-form-item label="" prop="deletedAt">
<el-input v-model="form.deletedAt" placeholder="" />
</el-form-item>
<el-form-item label="" prop="createdBy">
<el-input v-model="form.createdBy" placeholder="" />
</el-form-item>
<el-form-item label="" prop="updatedBy">
<el-input v-model="form.updatedBy" placeholder="" />
</el-form-item>
此时前端项目已经开发完成。
# 配置系统菜单
- 打开系统进入
系统管理
,点击菜单管理
,添加
菜单;首先创建目录。内容如下图:
先添加一个目录:

刷新一下列表中:

再添加一个菜单:

# 配置系统 api
选择
接口权限
添加内容管理
和文章管理
添加 内容管理
目录

添加 文章管理
菜单

分别创建增删改查以及列表接口,如下图
添加 创建
接口

添加 修改
接口

添加 删除
接口

添加 分页
接口

添加 通过id查询
接口,注意这里的路由地址配置

# 配置角色权限
首先进入角色管理,打开角色列表。

选择超级管理员,点击修改,勾选我们刚才添加的菜单以及 api 接口,保存。

刷新页面,刚刚授权的菜单就出来了。

# 操作内容管理
这个时候我们的内容管理已经添加完成了,里边已经具备了增删改查功能。
列表

新增

修改

删除

# 结束语
OK!,内容到这里已经介绍了开始第一个 go-admin 应用的全部过程,虽然图片居多,主要也是编码内容比较少,希望大家能够掌握,如在使用中遇到了什么问题都可以在 qq 群或者微信群中沟通交流!谢谢!
从哪里获得帮助:
如果你在阅读本教程的过程中有任何疑问,可以前往提交建议。