### 【GoWeb开发实战Gin框架】微博项目实战-登录功能
# 登录功能实现
上一章节我们已经实现了注册用户名和密码。接下来我们实现登录。。。。。
## 一、定义Controller
先创建一个新的go文件，用来定义新的Controller，现在里面定义一个方法：
~~~go
func LoginGet(c *gin.Context) {
//返回html
c.HTML(http.StatusOK, "login.html", gin.H{"title": "登录页"})
}
~~~
然后注册一个新的路由：
~~~go
func InitRouter() *gin.Engine {
router := gin.Default()
router.LoadHTMLGlob("views/*")
//注册：
router.GET("/register",controllers.RegisterGet)
router.POST("/register",controllers.RegisterPost)
//登录
router.GET("/login",controllers.LoginGet)
router.POST("/login",controllers.LoginPost)
return router
}
~~~
然后添加一个Post方法：
~~~go
//登录
func LoginPost(c *gin.Context) {
//获取表单信息
username := c.PostForm("username")
password := c.PostForm("password")
fmt.Println("username:", username, ",password:", password)
id := models.QueryUserWithParam(username, utils.MD5(password))
fmt.Println("id:", id)
if id > 0 {
c.JSON(http.StatusOK, gin.H{"code": 0, "message": "登录成功"})
} else {
c.JSON(http.StatusOK, gin.H{"code": 0, "message": "登录失败"})
}
}
~~~
## 二、Model操作
在之前的Post方法中，我们已经接收页面传来的用户名和密码，然后user\_model.go中添加一个方法，用于根据用户名和密码来查询id，表示用户登录的用户名和密码是否正确。
~~~go
//根据用户名和密码，查询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，内容如下：
~~~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中添加代码，实现登录部分：
~~~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)
}
});
}
});
~~~
j
## 四、运行
启动项目后，打开浏览器输入以下访问路径：[http://127.0.0.1:8081/login](http://127.0.0.1:8081/login)
然后输入用户名和密码，并且登录，页面返回信息如下：
登录成功后，页面自动跳转到：[http://127.0.0.1:8081/](http://127.0.0.1:8081/)
因为我们还没有实现首页，所以显示404。
