使用GoAdmin极速搭建golang应用管理后台(二)——自定义登录页面

cg33 · · 1398 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

前面我们介绍怎么快速上手搭建一个管理后台,这一节就介绍一下怎么自定义登录的页面。

框架内置提供了一个登陆界面,但有时候我们想要自定义一个,这时我们需要自定义一个组件去引入。线上的demo的登录页面就是自定义的组件。其代码这里:https://github.com/GoAdminGro...

我们想要自定义一个登录界面,可以照葫芦画瓢,先将demo的这个登录组件下载下来,放到我们的项目目录下:

.
├── login
│   ├── Makefile           Makefile命令
│   ├── assets
│   │   ├── login
│   │   │   └── dist       前端资源文件合并
│   │   └── src
│   │       ├── css        前端css文件
│   │       └── js         前端js文件
│   ├── assets.go          前端资源文件编译的go文件
│   ├── assets_list.go     前端资源文件列表
│   ├── login.go           组件定义
│   ├── login.tmpl         前端html
│   └── template.go        前端html编译的go文件
├── ...
└── main.go

接下来我们要做的就是修改html,css以及js并编译成go文件,其实大部分时候我们只要改css/html即可,如果只是修改样式的话。

....省略修改过程,大家可以根据自(ling)己(dao)的喜好进行修改。

修改完后,linux/mac的用户可以进入login文件夹中直接执行 Makefile 的命令,即:

make

并将tmpl文件内容复制到template.go中,就可以完成生成资源文件对应的go文件了。

而我们的windows用户,则可以进入login文件夹中依次执行:

adm.exe combine js --src=./assets/src/js/combine/ --dist=./assets/login/dist/all.min.js
adm.exe combine css --src=./assets/src/css/ --dist=./assets/login/dist/all.min.css
adm.exe compile asset --src=./assets/login/dist/ --dist=./ --package=login

并将tmpl文件内容复制到template.go中,就可以完成生成资源文件对应的go文件了。

到这里离成功狠接近了!

现在只需要在我们的main.go中,增加这一步:

package main

import (
    ...
)

func main() {
    r := gin.Default()

    eng := engine.Default()

    // 引入我们定义的login组件
    template.AddLoginComp(login.Get())
    
    if err := eng.AddConfig(cfg).
        AddGenerators(tables.Generators).
        Use(r); err != nil {
        panic(err)
    }

    ...    
}

记住!要加engine.Use前面加上。至此就已经完成了,重新启动可以看到效果。


有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1398 次点击  ∙  1 赞  
加入收藏 微博
1 回复  |  直到 2024-11-05 00:50:43
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传