基于gin框架的登录注册

最新推荐文章于 2024-05-28 17:39:19 发布
最新推荐文章于 2024-05-28 17:39:19 发布
阅读量3.3k 收藏 16
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49049914/article/details/113685571
版权

包含前端vue,后端gin框架的登录注册以及mysql数据库的连接使用，主要是练习后端框架的使用，前端简陋见谅。
一.前端vue部分
首先搭建vue框架，可以参考我的这篇博客https://blog.csdn.net/m0_49049914/article/details/112527510
前端登录页面展示如下

在这里插入图片描述
代码如下：主要是使用的vant组件库

<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="账号"
        placeholder="账号"
        :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
        <van-button type="primaty" to="signup">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from "../api/login";
import Cookies from 'js-cookie'
// import { login1 } from "../api/login";
export default {
  data() {
    return {
      username: "",
      password: ""
    }
  },
  methods: {
    async onSubmit(values) {
      var _this = this
      console.log("submit", values);
      await login(values).then(function(res) {
        if(res.data.code == 2000) {
           Cookies.set('token', res.data.data.token)
          _this.$router.replace("/list")
        } else {
          alert("账号或密码错误")
        }
      });
    }
  }
};
</script>

里面用到的知识有：后端接口的调用，cookie的设置，以及前后端交互
二.接口调用

import request from '../../utils/request'


export function login(param) {
    return request({
        url:'v1/login',
        method:'post',
        data: param,
    })
}

request.js文件如下：

import axios from 'axios'
import { getToken } from './auth'
import Cookies from 'js-cookie'
import Config from '../settings'
import qs from 'qs'

// 创建axios实例
const service = axios.create({
    baseURL: Config.baseURL, // api 的 base_url
    timeout: Config.timeout // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
    config => {
        if (getToken()) {
            config.headers['Authorization'] = "Bearer "+getToken() //让每个请求携带自定义token
                // config.headers['Authorization'] = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIzMGQ2NjU2Y2YwZTA0ZTFhODQ2Y2Q2ZGE0OTBhZmJlOCIsImF1dGgiOiJhZG1pbiIsInN1YiI6ImFkbWluIn0.owHaRwQYsSIBb8h5EjABbNsmNnjefVGemuR51iTdWw5cZDuwMd6BKzc5_RyV8STBZyPO_krte4qRZb3-D_n6zQ'; //让每个请求携带自定义token
        }
        config.headers['Content-Type'] = Config.contentType;
        console.log(config.data,"ddddawdawd")
        //对参数进行qs的序列化
        config.data = JSON.stringify(config.data);
        console.log(config.data,"ddddawdawd")
        return config;
    },
    error => {
        // 对请求错误做些什么，自己定义
        //...
        return new Promise(function(resolve, reject) {
            reject(error);
        }).catch(function(reason) {
            console.log('catch:', reason);
        });
    }
);
// response 拦截器
service.interceptors.response.use(

    response => {
        console.log(response.status);
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return new Promise(function(resolve, reject) {
                reject(response);
            }).catch(function(reason) {
                console.log('catch:', reason);
            });
        }
    },
    error => {
        if (error.response.data.status === 401) {
            console.log(123);
            Cookies.remove('TOEKN');
        }
        let code = 0;
        let message = error.response.data.message;
        //网络请求超时
        try {
            code = error.response.status;
        } catch (e) {
            if (error.toString().indexOf('Error: timeout') !== -1) {
                //...
                return new Promise(function(resolve, reject) {
                    reject(error);
                }).catch(function(reason) {
                    console.log('catch:', reason);
                });
            }
        }
        //其它有状态码的返回情况
        if (code) {
            return new Promise(function(resolve, reject) {
                    reject(message);
                })
                // .catch(function(reason) {
                // 	console.log('catch:', reason);
                // });
        }
        //网络断开情况
        if (error.toString().indexOf('Error: Network Error') !== -1) {
            //...
            return new Promise(function(resolve, reject) {
                reject(error);
            }).catch(function(reason) {
                console.log('catch:', reason);
            });
        }
        //其他情况
        //...
        return new Promise(function(resolve, reject) {
            reject(error);
        }).catch(function(reason) {
            console.log('catch:', reason);
        });
    }
);
export default service

在这里注意解决跨域问题，只需要在后端添加一个跨域中间件即可。
代码如下：

package middleware

import (
	"fmt"
	"net/http"

	"github.com/gin-gonic/gin"
)

func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		method := c.Request.Method
		fmt.Println(method)
		c.Header("Access-Control-Allow-Origin", "*")
		c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token")
		c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, PATCH, DELETE")
		c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
		c.Header("Access-Control-Allow-Credentials", "true")

		// 放行所有OPTIONS方法，因为有的模板是要请求两次的
		if method == "OPTIONS" {
			c.AbortWithStatus(http.StatusNoContent)
		}

		// 处理请求
		c.Next()
	}
}

三.进行mysql数据库连接并创建表
在这里我建了两张表

package Mysql

import (
  _ "github.com/go-sql-driver/mysql"
  "github.com/jinzhu/gorm"
)

type People struct {
  ID        uint                      `gorm:"primary_key" json:"id" db:"user_id"`
  Account   string                    `json:"account"`
  Password string                     `json:"password"  binding:"required" db:"password"`
  Signature string                    `json:"signature"`
  Username  string                    `json:"username"  binding:"required" db:"username"`
  Speaks []Speak                      `json:"speaks"`
}

type Speak struct {
  gorm.Model
  PeopleId uint
  Content string
  Path string
}
  var DB *gorm.DB
func Mysql1() (err error){
  DB,_ = gorm.Open("mysql","root:password@(localhost)/gin_demo?charset=utf8&parseTime=True&loc=Local")
  DB.AutoMigrate(&People{},&Speak{})
  return err
}

四.后端登录操作
controller层分为三部分：1.获取参数和参数校验 2.业务处理 3.返回响应

//登录
func LoginHandler(c *gin.Context){
	//1.获取参数和参数校验
	p := new(models.ParamLogin)
	//shouldbindjson只能检测类型对不对，是不是Json格式
	if err := c.ShouldBindJSON(&p);err != nil {
		//请求参数有误，直接返回响应
		c.JSON(http.StatusOK, gin.H{
			"msg": "请求参数有误",
		})
		return
	}
	//2.业务处理
	if err := logic.Login(p);err != nil{
		c.JSON(http.StatusOK,gin.H{
			"msg":"用户名或密码错误",
			"err" : err,
		})
		return
	}

		//生成token
		tokenString,_ := GenToken(p.Username)
		c.JSON(http.StatusOK,gin.H{
			"code":2000,
			"msg":"success",
			"data":gin.H{"token":tokenString},
		})
		return

	//3.返回响应
	c.JSON(http.StatusOK,gin.H{
		"code":2000,
		"msg":"登录成功",
	})
}

在登录成功后会生成token，并存储到cookie中，介绍完登录操作后，在进行token的操作

func Login(p *models.ParamLogin) error {
	err := Mysql.Login(p)
	if err != nil {
		return err
	}
	return nil

}

type PWD struct {
	Password string
}
func Login(user *models.ParamLogin) (err error) {
	pwd := new(PWD)
	err = DB.Table("peoples").Select("password").Where("username=?", user.Username).First(pwd).Error
	if err == sql.ErrNoRows{
		fmt.Println(err)
		return errors.New("用户不存在")
	}
	if err != nil{
		//查询数据库失败
		return err
	}
	//判断密码是否正确
	if user.Password != pwd.Password{
		err = errors.New("密码错误")
		return err
	}
	return nil
}

注意：从数据库中取数据时：先把前端发送过来的信息取出来赋值给一个结构体和数据库中的数据去做对比，首次登录如何把密码用户名传给后台，传给后台和数据库里的数据做对比，之后生成token，保存到cookie或localstorage中，localstorage是永久储存，cookie可以设置过期时间

接下来展示生成token的方式：


type MyClaims struct {
	Username string  `json:"username"`
	jwt.StandardClaims
}

type UserInfo struct {
	Username string    `json:"username"`
	Password string    `json:"password"`
}

//GenToken生成JWT
func GenToken(username string) (string,error)  {
	mySigningKey := []byte("woshiadminfangguowoba")
	d := MyClaims{
		Username: username,
		StandardClaims:jwt.StandardClaims{
			NotBefore: time.Now().Unix() - 60,      //生效时间
			ExpiresAt: time.Now().Unix() + 60*60*2,  //过期时间
			Issuer: "admin",                        //签发人
		},
	}
	t := jwt.NewWithClaims(jwt.SigningMethodHS256,d)
	s,e := t.SignedString(mySigningKey)          //对token进行加密
	if e!=nil{
		fmt.Printf("&s",e)
	}
	return s,e
}

五.展示注册界面
在这里插入图片描述
和登录的操作没有太大的差别。

//注册
func SignupHandler(c *gin.Context)  {
	p1 := new(models.ParamSignup)
	if err := c.ShouldBindJSON(&p1);err != nil{
		c.JSON(http.StatusOK,gin.H{
			"msg":"请求参数错误",
		})
		return
	}
	//2.业务处理1
	if err := logic.Signup(p1);err != nil{
		c.JSON(http.StatusOK,gin.H{
			"err" : err,
			"msg" : "注册失败",
			"code":8888,
		})
		return
	}
	//3.返回响应
	c.JSON(http.StatusOK,gin.H{
		"code":0,
		"msg":"注册成功",
	})
}


func Signup(p1 *models.ParamSignup) (err error)  {
	//1.判断用户存不存在
	var exist bool
	exist,err = Mysql.CheckUserExist(p1.Username)
	if err != nil{
		return err
	}
	if exist{
		return errors.New("用户已存在")
	}
	err = Mysql.InsertUser(p1)
	if err != nil{
		return err
	}
	return nil
}

//注册时先检验用户是否已经存在
func CheckUserExist(username string)(bool,error)  {
	var p2 []People
	DB.Find(&p2,"username=?",username)
	var count int
	count = len(p2)
	return count > 0,nil
}

//注册时将用户信息存储到数据库中
func InsertUser(user *models.ParamSignup) (err error) {
	DB.Create(&People{
		Username: user.Username,
		Password: user.Password,
		Signature: user.Signature,
		Account: user.Account,
	})
	if err != nil{
		return err
	}
	return nil
}

第一次自己独立的去完成gin框架，其中遇到了很多问题，有很多人都在帮助我，历时很多天完成了这些，收获很大！！！加油！！！

Yaqing一点不笨
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
golang利用redis和gin实现保存登录状态,校验登录
weixin_41692437的博客
01-19 859
一、生成token，然后token保存到数据库用户表里面，每次登录的时候，自动更新，容纳后每次用的时候，去取出来校验，这种方式，数据库压力大，而且不是很灵活。二、每次登录生成token，然后token保存到Redis缓存中，每次都去校验，不仅快速，而且，数据库压力也小。具体的token组装方式,自己确定,我这边采用的是固定字符串+user_id的方式,1、路由，利用路由文件，添加中间件，将所有需要验证token的接口放一起。保存用户登录状态，一般常用的方式有两种。1.启动时候，加载Redis项。
GO语言gin框架实现管理员认证登陆接口
12-16
后台用户登录验证功能是很多项目的必须要有的逻辑 , 也是常见的技术需求 . 要实现这个逻辑首先要有数据库表结构如下: CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL DEFAULT '', `password` varchar(50) NOT NULL DEFAULT '', `nickname` varchar(50) NOT NULL DEFAULT '', `created_at` timestamp NOT NULL DEFAULT CURRENT
go-gin中session实现redis前缀和db库选择+单点登录
最新发布
qq_39272466的博客
05-28 537
【代码】go-gin中session实现redis前缀和db库选择+单点登录。
gin项目登陆注册demo
长舒的博客
04-17 3476
最近学习了gin基础，实现了一个简单的基于gin+postgresql+redis技术的登陆注册接口，今天是周五，就总结一下在项目中学到的东西吧 文章目录前言项目结构实现过程数据库连接池的设计模型的设计缓存层的设计中间件的设计服务器状态码的封装文件配置解析封装控制器的设计注册路由 前言 项目的需求很简单，实现一个登陆注册的接口，当用户第一次登陆时，系统会去redis中验证用户信息，如果没有则会去p...
gin框架的使用（四）——用户登录
qq_44108469的博客
12-02 3130
在gin-demo/controller/user.go 中写登录的方法 package controller import "C" import ( "gin-demo/common" "gin-demo/model" "github.com/gin-gonic/gin" "github.com/jinzhu/gorm" "golang.org/x/crypto/bcrypt" "math/rand" "net/http" "time" ) // Register 用户注册 func
Go语言项目使用gin框架和gorm框架实现后端的注册和登录功能
pyscl01的博客
04-19 2236
Go语言项目使用gin框架和gorm框架实现后端的注册和登录功能的详细步骤
gin入门
elesos.com
02-07 553
Download and install it: $ go get github.com/gin-gonic/gin Import it in your code: import "github.com/gin-gonic/gin" (Optional) Import net/http. This is required for example if using constants
Go-easy-gin一套基于Gin框架的MVC脚手架
08-13
本文将深入探讨"Go-easy-gin"这套基于Gin框架的MVC（Model-View-Controller）脚手架，以及如何利用它来快速搭建Go Web工程。 一、Gin框架基础 Gin框架是基于Martini设计模式的HTTP微型框架，它通过提供一组丰富的...
ginApp:基于gin的app框架
04-28
总结，GinApp是基于Gin框架构建的，旨在为Go开发者提供一个高效、易于使用的Web应用框架。它强调代码组织和可扩展性，同时利用了Gin的高性能和中间件系统，帮助开发者快速构建稳定、健壮的Web应用。如果你是Go程序员...
luckgo:基于gin框架快速开发应用
04-30
框架: gin 日志处理: zap orm: gorm 优雅重启HTTP服务: gracehttp 测试框架: ginkgo 接口风格 RESTFUL 项目结构 api - handler函数 route - 路由注册 model - 数据模型以及数据库操作 doc - 接口文档 log - 日志处理...
gin1.4 -golang web框架
08-31
你可以通过 `gin.Engine` 的各种路由方法（如 `GET`、`POST`）来注册路由，同时可以使用路径参数和正则表达式来匹配不同的请求。 2. **中间件**：Gin 支持中间件，这是一个强大的功能，可以用于日志记录、身份验证...
login_demo_gin.rar
07-27
GO语言实现简单登录注册修改密码+数据库mysql + XORM.xorm+GIN.Gin 是一个 go 写的 web 框架，具有高性能的优点。官方地址：https://github.com/gin-gonic/gin
login：使用go，redis和gin的登录示例
02-24
Redis登录示例 启动Redis集群 docker run --rm --name=rediboard -p 6379:6379 redis 然后运行go run main.go 然后像 curl -X POST localhost:8080/setgo curl -X POST localhost:8080/set/go curl localhost:8080/get curl -X POST localhost:8080/set/java curl localhost:8080/get
gin-test:gin框架脚手架案例
04-12
Gin框架基于Martini框架，但提供了更强大的路由管理和中间件支持。在这个名为"gin-test"的项目中，我们可以看到一个使用Gin搭建的简单应用实例。 首先，让我们来理解一下Gin框架的核心特性： 1. **路由管理**：Gin...
[golang gin框架] 29.Gin 商城项目-用户登录,注册操作
zhoupenghui168的博客
05-10 1942
用户登录，注册步骤，以及发送短信验证码，校验图形验证码等功能
Go Web——Gin实现用户登录
qq_39280718的博客
08-25 812
Gin 是一个基于 Go 语言编写的 Web 框架
gin--简单的登录界面的实现
wtt234的专栏
04-27 1082
有后台和前端组成： 后台代码： package main import ( "github.com/gin-gonic/gin" "net/http" ) //gin routerlab get,post同时进行 func routelab1() { //初始还 engine := gin.Default() ////如果模板在多级目录里面的话需要这样配置 engine.LoadHTMLGlob("templates/**/**/*") /////** 表示目录 engine.L
gin框架的使用（三）——用户注册
qq_44108469的博客
12-02 1940
在gin-demo下创建model目录，目录下创建user.go来写user的结构体 user.go的内容如下： package model // User type User struct { ID int `gorm:"primaryKey"`//设置为主键 Username string `gorm:"not null;unique;size:255"`//唯一，不为空 Password string `gorm:"not null"` Mobile string `gorm:"uniqu
Go-web开发快速入门——一、gin+gorm完成用户注册登录及用数据库存储用户信息（附源码，超详细）
qq_50737715的博客
04-18 8004
Go-web开发快速入门——一、gin+gorm完成用户注册登录及用数据库存储用户信息 参考资料： gin中文文档 gorm中文文档 一、准备 本项目所使用的所有工具如下： Visual Studio Code —— 编写并运行Go程序 MySql —— 建立数据库 Postman —— 接口测试 Navicat Premium —— 数据库可视化 首先进行相关的配置： 1.新建一个项目文件夹 2.使用go mod初始化项目模块 go mod init 项目模块名称 执行完毕后项目下会出现一个go.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值