修改或自定义GoAdmin的登录界面

cg33 · April 22, 2020, 5:26am

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

我们可以使用登录组件更换登录界面，增加图形验证码或拼图验证码。十分简单。如下代码修改main.go文件：

package main

import (
	_ "github.com/GoAdminGroup/go-admin/adapter/gin"	    
    _ "github.com/GoAdminGroup/go-admin/adapter/gin"
    _ "github.com/GoAdminGroup/go-admin/modules/db/drivers/mysql"

    // 引入theme2登录页面主题，如不用，可以不导入
    _ "github.com/GoAdminGroup/components/login/theme2"
	
	"github.com/GoAdminGroup/components/login"
	"github.com/GoAdminGroup/go-admin/engine"
	"github.com/GoAdminGroup/go-admin/examples/datamodel"
	"github.com/GoAdminGroup/go-admin/plugins/admin"
	"github.com/gin-gonic/gin"
	"io/ioutil"
)

func main() {
	gin.SetMode(gin.ReleaseMode)
	gin.DefaultWriter = ioutil.Discard

    r := gin.Default()

	eng := engine.Default()
	adminPlugin := admin.NewAdmin(datamodel.Generators)
	adminPlugin.AddGenerator("user", datamodel.GetUserTable)

        // 使用登录页面组件
        login.Init(login.Config{
            Theme: "theme2",
            CaptchaDigits: 5, // 使用图片验证码，这里代表使用多少个验证码数字
            // 使用腾讯验证码，需提供appID与appSecret
            // 了解更多：https://cloud.tencent.com/product/captcha
            // TencentWaterProofWallData: login.TencentWaterProofWallData{
            //    AppID:"",
            //    AppSecret: "",
            // }   
        })

	if err := eng.AddConfigFromJson("./config.json").
		AddPlugins(adminPlugin).
		Use(r); err != nil {
		panic(err)
	}

	// 载入对应验证码驱动（默认或腾讯），如没使用不用载入
	adminPlugin.SetCaptcha(map[string]string{"driver": login.CaptchaDriverKeyDefault})

	r.Static("/uploads", "./uploads")

	_ = r.Run(":9033")
}

自定义页面

框架内置提供了不同登陆界面主题，但有时候我们想要自定义一个，这时我们需要自定义一个组件去引入。线上的demo的登录页面就是自定义的组件。其代码这里：https://github.com/GoAdminGroup/demo.go-admin.cn/tree/master/login。

我们想要自定义一个登录界面，可以照葫芦画瓢，先将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前面加上。至此就已经完成了，重新启动可以看到效果。