Goweb开发之Beego框架实战：第六节实战开发登录功能

最新推荐文章于 2024-09-16 07:21:54 发布

Steven老师

最新推荐文章于 2024-09-16 07:21:54 发布

阅读量409

点赞数

原文链接：https://www.zhihu.com/org/qian-feng-jiao-yu-39

版权

上一章节我们已经实现了注册用户名和密码。接下来我们实现登录。

一、定义Controller

先创建一个新的go文件，用来定义新的Controller：


type LoginController struct {
    beego.Controller
}

func (this *LoginController) Get() {
    this.TplName = "login.html"
}

然后注册一个新的路由：

func init() {
    beego.Router("/", &controllers.MainController{})
    beego.Router("/register", &controllers.RegisterController{})
    beego.Router("/login", &controllers.LoginController{})
}

然后添加一个Post方法：


func (this *LoginController) Post() {
    username := this.GetString("username")
    password := this.GetString("password")
    fmt.Println("username:", username, ",password:", password)

    id := models.QueryUserWithParam(username, utils.MD5(password))
    fmt.Println("id:",id)
    if id > 0 {
        this.Data["json"] = map[string]interface{}{"code": 1, "message": "登录成功"}
    } else {
        this.Data["json"] = map[string]interface{}{"code": 0, "message": "登录失败"}
    }
    this.ServeJSON()
}

二、Model操作

在之前的Post方法中，我们已经接收页面传来的用户名和密码，然后user_model.go中添加一个方法，用于根据用户名和密码来查询id，表示用户登录的用户名和密码是否正确。

//根据用户名和密码，查询id
func QueryUserWithParam(username ,password string)int{
    sql:=fmt.Sprintf("where username='%s' and password='%s'",username,password)
    return QueryUserWightCon(sql)
}

三、View页面

我们重新再views包下创建一个html页面，login.html，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../static/css/lib/login.css">
    <link rel="stylesheet" type="text/css" href="../static/css/blogsheet.css">
    <script src="../static/js/lib/jquery-3.3.1.min.js"></script>
    <script src="../static/js/lib/jquery.url.js"></script>
    <script src="../static/js/blog.js"></script>
</head>
<body>
<div id="nav">
    <div id="nav-login">
        <ul>
            <li><a href="/login">登录</a></li>
            <li><a href="/register">注册</a></li>

        </ul>

    </div>
</div>


<div class="htmleaf-container">
    <div class="wrapper">
    {{/*注册表单*/}}
        <div class="container">
            <h1>Welcome</h1>
            <form id="login-form" class="form">
                <input type="text" name="username" placeholder="请输入用户名">
                <input type="password" name="password" placeholder="请输入密码" id="login-password">
                <br>
                <button type="submit" id="login-button">登录</button>
            </form>
        </div>

    {{/*背景动画*/}}
        <ul class="bg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

</body>
</html>

因为内容和注册页类似，可以将注册页的内容复制过来，但是要注意标签id等的不同。

接下来我们实现js部分，在blog.js中添加代码，实现登录部分：


    //登录
    $("#login-form").validate({
        rules:{
            username:{
                required:true,
                rangelength:[5,10]
            },
            password:{
                required:true,
                rangelength:[5,10]
            }
        },
        messages:{
            username:{
                required:"请输入用户名",
                rangelength:"用户名必须是5-10位"
            },
            password:{
                required:"请输入密码",
                rangelength:"密码必须是5-10位"
            }
        },
        submitHandler:function (form) {
            var urlStr ="/login"
            alert("urlStr:"+urlStr)
            $(form).ajaxSubmit({
                url:urlStr,
                type:"post",
                dataType:"json",
                success:function (data,status) {
                    alert("data:"+data.message+":"+status)
                    if(data.code == 1){
                        setTimeout(function () {
                            window.location.href="/"
                        },1000)
                    }
                },
                error:function (data,status) {
                    alert("err:"+data.message+":"+status)
                }
            });
        }
    });