gin框架的使用（七）——用户注册的页面和登录的页面

最新推荐文章于 2024-04-19 18:34:57 发布

今天有怪兽

最新推荐文章于 2024-04-19 18:34:57 发布

阅读量2.3k

点赞数 2

分类专栏： golang gin 文章标签： golang web

本文链接：https://blog.csdn.net/qq_44108469/article/details/121701739

版权

golang 同时被 2 个专栏收录

11 篇文章 8 订阅

订阅专栏

gin

9 篇文章 7 订阅

订阅专栏

在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" >密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>

<!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" >用户名&nbsp;&nbsp;&nbsp;&nbsp;</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" >密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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首页。
继续搞