在gin-demo下创建staitc文件夹
到bootstrap的官网下载boostrap的压缩包,解压复制到static下,还需要有jquery.min.js文件。如下图所示。
然后在gin-demo下创建文件夹user,在user下写Login.html,Register.html
代码如下:
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>登录页</title>
<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
</head>
<style>
.login-block {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<body style="background:url(../../static/img/background.jpg) no-repeat center; background-position: center 0; background-size: cover; margin: 0px;">
<div>
<form action="/user/login" method="post" >
<div class="col-md-4 col-lg-4 col-lg-offset-4 col-md-offset-4 login-block" style="background-color: white; opacity: 0.8; padding: 50px; border-radius: 15px">
<h3 style="text-align: center;padding-bottom:20px;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 40px">用户登录</h3>
<div class="form-group input-group input-group-lg" >
<span class="input-group-addon" id="mobile" >手机号码</span>
<input type="text" name="Mobile" class="form-control" placeholder="手机号码">
</div>
<div class="form-group input-group input-group-lg">
<span class="input-group-addon" id="password" >密码 </span>
<input type="password" name="Password" class="form-control" placeholder="密码">
</div>
<div class="form-group center-block">
<button type="submit" class="btn btn-success center-block" style="width: 80px;height: 40px;font-size: 20px">登 录</button>
<a href="/user/register">没有账户?点击注册</a>
</div>
</div>
</form>
</div>
</body>
<script>
</script>
</html>
Register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>注册页</title>
<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
</head>
<style>
.login-block {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<body style="background:url(../../static/img/background.jpg) no-repeat center; background-position: center 0; background-size: cover; margin: 0px;">
<div>
<form action="/user/register" method="post" >
<div class="col-md-4 col-lg-4 col-lg-offset-4 col-md-offset-4 login-block" style="background-color: white; opacity: 0.8; padding: 50px; border-radius: 15px">
<h3 style="text-align: center;padding-bottom:20px;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 40px">用户注册</h3>
<div class="form-group input-group input-group-lg" >
<span class="input-group-addon" id="username" >用户名 </span>
<input type="text" name="Username" class="form-control" placeholder="用户名">
</div>
<div class="form-group input-group input-group-lg" >
<span class="input-group-addon" id="mobile" >手机号码</span>
<input type="text" name="Mobile" class="form-control" placeholder="手机号码">
</div>
<div class="form-group input-group input-group-lg">
<span class="input-group-addon" id="password" >密码 </span>
<input type="password" name="Password" class="form-control" placeholder="密码">
</div>
<div class="form-group center-block">
<button type="submit" class="btn btn-success center-block" style="width: 80px;height: 40px;font-size: 20px">注 册</button>
<a href="/user/login">已有账户?点击登录</a>
</div>
</div>
</form>
</div>
</body>
<script>
</script>
</html>
其实一模一样哈。这些都是可以整合的。
然后在gin-demo/router/router.go下加入
package router
import (
"gin-demo/controller"
"github.com/gin-gonic/gin"
)
func InitRouter(r *gin.Engine) *gin.Engine{
//必加才可以访问到
r.LoadHTMLGlob("template/**/*")
//加载静态资源
r.Static("/static", "./static")
//首页页面
r.GET("/index",controller.IndexPage) //加入的页面
//注册
r.POST("/user/register",controller.Register)
r.GET("/user/register",controller.RegisterPage)//加入的页面(注意是get)
//登录
r.POST("/user/login",controller.Login)
r.GET("/user/login",controller.LoginPage)//加入的页面(注意是get)
return r
}
在对应的controller下加入
package controller
import "C"
import (
"gin-demo/common"
"gin-demo/model"
"gin-demo/response"
"gin-demo/util"
"github.com/gin-gonic/gin"
"github.com/jinzhu/gorm"
"golang.org/x/crypto/bcrypt"
"net/http"
)
// Register 用户注册
func Register(c *gin.Context){
//省略
}
// Login 用户的登录接口
func Login(c *gin.Context){
//省略
}
//对应的注册页面的方法
func RegisterPage(c *gin.Context){
c.HTML(http.StatusOK,"Register.html",gin.H{})
}
//对应的登录页面的方法
func LoginPage(c *gin.Context){
c.HTML(http.StatusOK,"Login.html",gin.H{})
}
func isMobileExist(db *gorm.DB, mobile string) bool {
//省略
}
然后运行后。
浏览器输入127.0.0.1:8888/user/register
127.0.0.1:8888/user/login
然后登录成功和注册成功暂时返回的都是{code:…}这样的。
这里需要对注册和登录的方法改造,注册成功自动跳转到登录页面
登录成功自动跳转到index首页。
继续搞