goframe开发一个企业网站 在vue-next-admin 显示验证码 19

index.go 文件中的代码，我将为该文件中的主要功能和方法添加注释，并生成一篇 Markdown 格式的文章。这将包括对每个函数的用途、输入参数和返回值的简要说明。

index.go

包和导入

package admin

import (
	"context"
	"errors"
	"gf_new_web/api/common"
	"gf_new_web/internal/service"

	"github.com/gogf/gf/v2/frame/g"
)

• 包名: admin
• 导入说明:
  • context: 用于传递请求上下文。
  • errors: 用于处理错误。
  • gf_new_web/api/common 和 gf_new_web/internal/service: 项目内部的 API 和服务层。
  • github.com/gogf/gf/v2/frame/g: GoFrame 框架的核心包。

登录功能

func (c *cIndex) Login(ctx context.Context, req *common.UserLoginReq) (*common.ReturnJsRes, error) {
	g.Log().Info(ctx, "收到登录请求", req)
	loginRes, err := service.User().Login(ctx, req)
	if err != nil {
		return nil, err
	}
	r := g.RequestFromCtx(ctx)
	loginRes.Msg = "登录成功"
	r.Response.WriteJson(loginRes)

	return loginRes, nil
}

• 功能: 处理用户登录请求。
• 参数:
  • ctx: 请求的上下文。
  • req: 用户登录请求的详细信息。
• 返回:
  • *common.ReturnJsRes: 登录操作的结果。
  • error: 错误信息。

注册功能

func (c *cIndex) Reg(ctx context.Context, req *common.UserRegisterReq) (*common.ResultRes[int64], error) {
	g.Log().Info(ctx, "收到注册请求", req)
	registerRes, err := service.User().Register(ctx, req)
	if err != nil {
		return nil, err
	}
	r := g.RequestFromCtx(ctx)
	r.Response.WriteJson(registerRes)
	return registerRes, nil
}

• 功能: 处理用户注册请求。
• 参数:
  • ctx: 请求的上下文。
  • req: 用户注册请求的详细信息。
• 返回:
  • *common.ResultRes[int64]: 注册操作的结果。
  • error: 错误信息。

获取用户信息

func (c *cIndex) GetInfo(ctx context.Context, req *common.UserInfoReq) (*common.ReturnJsRes, error) {
	g.Log().Info(ctx, "收到获取用户信息请求", req)
	infoRes, err := service.User().GetInfo(ctx, req)
	if err != nil {
		return nil, err
	}
	r := g.RequestFromCtx(ctx)
	infoRes.Msg = "获取用户信息成功"
	r.Response.WriteJson(infoRes)
	return infoRes, nil
}

• 功能: 获取用户的详细信息。
• 参数:
  • ctx: 请求的上下文。
  • req: 用户信息请求的详细信息。
• 返回:
  • *common.ReturnJsRes: 用户信息。
  • error: 错误信息。

获取验证码

func (c *cIndex) GetCaptcha(ctx context.Context, req *common.CodeReq) (*common.ReturnJsRes, error) {
	g.Log().Info(ctx, "收到获取验证码请求", req)
	captchaId, base64Image := service.Captcha().Get()
	if captchaId == "" || base64Image == "" {
		return nil, errors.New("获取验证码失败")
	}
	return &common.ReturnJsRes{
		Code: 0,
		Msg:  "获取验证码成功",
		Data: g.Map{
			"captchaId": captchaId,
			"image":     base64Image,
		},
	}, nil
}

• 功能: 生成并返回验证码。
• 参数:
  • ctx: 请求的上下文。
  • req: 验证码请求的详细信息。
• 返回:
  • *common.ReturnJsRes: 验证码信息。
  • error: 错误信息。
    启动的端口为8555

vue-next-admin 中的相关配置 ：

改为对应的端口。
api中进行改变：

import request from '/@/utils/request';

/**
 * （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
 *
 * 登录api接口集合
 * @method signIn 用户登录
 * @method signOut 用户退出登录
 */
export function useLoginApi() {
	return {
		signIn: (data: object) => {
			return request({
				url: '/admin/login',
				method: 'post',
				data,
			});
		},

		getCode: () => {
			return request({
				url: '/admin/code',
				method: 'get'
			});
		},


		signOut: (data: object) => {
			return request({
				url: '/admin/signOut',
				method: 'post',
				data,
			});
		},
	};
}

界面进行引入验证码：

相关代码：

以下是从您提供的文件中提取的 getLoginCode 和 onSignIn 函数的详细说明：

getLoginCode 函数

这个函数负责异步获取登录验证码。它首先尝试调用登录API的 getCode 方法来获取验证码。如果成功，它会更新状态中的 captchaImg 和 captchaId。如果失败，它会捕获错误并显示错误消息。

const getLoginCode = async () => {
    try {
        const res = await useLoginApi().getCode();
        if (res.data.data) {
            state.captchaImg = res.data.data.image;
            state.ruleForm.captchaId = res.data.data.captchaId;
        } else {
            throw new Error('验证码数据格式错误');
        }
    } catch (error: any) {
        ElMessage.error(error?.message || '获取验证码失败');
    }
};

onSignIn 函数

这个函数处理用户的登录操作。它首先验证用户输入的手机号和密码格式是否正确。如果格式验证失败，将显示相应的错误消息。如果格式验证成功，它将尝试通过API进行登录。登录成功后，会根据配置决定初始化前端或后端路由，并处理登录成功后的跳转和状态更新。如果登录失败，它会显示错误消息并重新获取验证码。

const onSignIn = async () => {
    state.loading.signIn = true;
    try {
        if (!verifyPhone(state.ruleForm.userName)) {
            ElMessage.error('手机号格式错误');
            return;
        }
        if (!verifyPasswordLengthNoSpaces(state.ruleForm.password)) {
            ElMessage.error('密码格式错误');
            return;
        }
        const res = await useLoginApi().signIn({
            username: state.ruleForm.userName,
            password: state.ruleForm.password,
            code: state.ruleForm.code,
        });

        if (res.code === 200) { // 假设200是成功状态码
            Session.set('token', res.data.token);
            Cookies.set('userName', state.ruleForm.userName);

            let isNoPower;
            if (!themeConfig.value.isRequestRoutes) {
                isNoPower = await initFrontEndControlRoutes();
            } else {
                isNoPower = await initBackEndControlRoutes();
            }
            signInSuccess(isNoPower);
        } else {
            ElMessage.error(res.msg || '登录失败');
            getLoginCode();
        }
    } catch (error) {
        ElMessage.error('登录失败，请重试');
        getLoginCode();
    } finally {
        state.loading.signIn = false;
    }
};

这两个函数是登录流程的核心部分，处理验证码获取和用户身份验证的逻辑。