Cool Admin5(Go版)后台管理系统开发框架搭建使用记录
一、环境说明
nodejs建议版本：18
二、安装
-
安装框架
github下载最新的zip压缩包，然后解压。
# 进入解压缩后的目录
cd cool-admin5
# 直接修改go.mod里面的模块名（或删除原go.mod文件，重新初始化：Go mod init cool-admin5）
# 根据需要调整man.go文件里的导入路径
# 安装依赖
go mod tidy
# 运行后端项目
Go run .
# 进入前端目录
Cd frontend
# 安装依赖Yarn或npm install
# 运行前端项目
Yarn dev 或 npm run dev
-
其它
安装mysql
安装redis
三、使用
-
配置使用mysql数据库
前置说明：
解决初始化提示mysql数据库驱动问题
找到如下目录：
\github.com\cool-team-official\cool-admin-go\[email protected]
编辑该目录下的Initdb.go文件，添加MySQL数据库驱动如下：
_ "github.com/cool-team-official/cool-admin-go/contrib/drivers/mysql"
修改配置文件：
在“manifest\config”文件夹下找到config.yaml文件，修改myql配置信息：
default:
type: "mysql"
host: "127.0.0.1"
port: "3306"
user: "root"
pass: "Yss12345"
name: "cool6"
charset: "utf8mb4"
timezone: "Asia/Shanghai"
debug: true
createdAt: "createTime"
updatedAt: "updateTime"
-
代码生成
后端代码生成：
在程序根目录命令行执行以下命令：
cool-tools m news
在modules目录下的modules.go文件配置模块信息：
_ “p1/modules/news”
在news模块下，先找到model文件夹，新建数据库表文件，如news_article.go
在文件里输入cool-model即可将代码带入文件
在结构体加入字段信息，示例如下：
type NewsArticle struct {
*cool.Model
Title string `gorm:"column:title;not null;comment:标题" json:"title"`
}
切换到service文件夹，新建文件，如news_article.go
在文件里输入cool-service即可将代码带入文件
切换到controller/admin文件夹，新建文件，如news_article.go
在文件里输入cool-controller即可将代码带入文件（注意修改prefix里的路径）
重启后，可自动在数据库生成数据表
前端代码生成：
在frontend目录下点击打开src目录，右击modules目录，新建与后端模块同名的目录
点击系统菜单列表，然后单击“快速创建”按钮进行菜单配置：
选择模块：选择前端创建的文件夹
数据结构：选择后端创建的模块
-
开发实战
登录页及加载信息调整：
1）项目目录下找到frontend/index.html进行调整即可
2）找到frontend/src/main.ts进行调整
3）找到frontend/public调整logo
4）找到frontend/cool/config/index.ts进行调整
5）找到frontend/src/modules/pages/login/index.vue进行调整
配置按关键字检索：
在后端模块service文件夹找到对应的service文件，添加如下配置项（按数据库字段content检索）：
PageQueryOp: &cool.QueryOp{
KeyWordField: []string{"content"},
},
完整代码如下：
func NewWeeklyworkService() *WeeklyworkService {
return &WeeklyworkService{
&cool.Service{
Model: model.NewWeeklywork(),
PageQueryOp: &cool.QueryOp{
KeyWordField: []string{"content"},
},
},
}
}
去除表格显示富文本数据时的html标签：
找到对应的前端vue页面，如：frontend/src/modules/weekwork/views/weeklywork.vue
在script代码里找到cl-table配置区域，调整如下代码：
// cl-table 配置
const Table = useTable({
columns: [
{ type: "selection" },
{ label: "本周工作", prop: "content",formatter(row, column, value, index) {
// return value.replaceAll("
","").replaceAll("
","");return value.replaceAll(/<.>/ig,"").replaceAll(/<\/.>/ig,"");
}},
{ label: "下周计划", prop: "plan" },
{ label: "提交人", prop: "subName" },
{ label: "创建时间", prop: "createTime" },
{ label: "更新时间", prop: "updateTime" },
{ type: "op", buttons: ["edit", "delete"] }
]
});
上述方法存在弊端，最好的处理方式为将表单字段属性由富文本改为多行文本框，代码如下：
// cl-upsert 配置
const Upsert = useUpsert({
items: [
{
label: "本周工作",
prop: "content",
component:{ name: "el-input",props:{
type:"textarea",
rows:"3"
} },
required: true
},
{ label: "下周计划", prop: "plan", required: true, component:{ name: "el-input",props:{
type:"textarea"
} } },
{ label: "提交人id", prop: "subId", required: true, component: { name: "el-input" } },
{ label: "提交人", prop: "subName", required: true, component: { name: "el-input" } }
]});
取消登录验证码：
前端操作：
找到frontend/src/modules/base/pages/login/index.vue 注释相应代码（或给默认值后注销）
后端操作：
1）找到modules/base/service/base_sys_login.go注释验证码部分代码
2）找到
D:/Project/Go/pkg/mod/github.com/cool-team-official/cool-admin-go/modules/[email protected]/service/base_sys_login.go注释验证码部分代码
若出错，按照提示修改即可
修改字段控件:
在前端页面，修改cl-upsert配置即可，代码如下：
// cl-upsert 配置
const Upsert = useUpsert({
items: [
{
label: "本周工作",
prop: "content",
component: { name: "cl-editor-wang" },
required: true
},
{ label: "下周计划", prop: "plan", required: true, component: { name: "cl-editor-wang" } },
{ label: "提交人id", prop: "subId", required: true, component: { name: "el-input" } },
{ label: "提交人", prop: "subName", required: true, component: { name: "el-input" } }