2. 程式人生 > 其它 >基於gin框架的登入註冊

基於gin框架的登入註冊

阿新 • • 發佈：2021-02-11

包含前端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:[email protected](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框架，其中遇到了很多問題，有很多人都在幫助我，歷時很多天完成了這些，收穫很大！！！加油！！！

相關推薦

基於gin框架的登入註冊

包含前端vue,後端gin框架的登入註冊以及mysql資料庫的連線使用，主要是練習後端框架的使用，前端簡陋見諒。 一.前端vue部分 首先搭建vue框架，可以參考我的這篇部落格https://blog.csdn.net/m0_49049914/articl

[Go] 從零開始專案-基於gin框架打造restfull風格API

程式碼的包結構是在GOPATH環境變數目錄中新建了bin src pkg三個目錄 如果程式碼放在了github裡 ， 那麼就在src目錄下新建的 github.com/使用者名稱/倉庫名 這個目錄下進行開發工作

golang基於gin框架封裝的log日誌類

package util import ( \"crypto/md5\" \"encoding/hex\" \"fmt\" \"os\" \"runtime\" \"strconv\" \"time\" ) var strCGroupLogID string = \"\"

golang API開發過程的中的自動重啟(基於gin框架)

概要 實現方式 補充 syscall.Exec 概要 基於 golang Gin 框架開發 web 服務時, 需要時不時的 go build , 然後重啟服務檢視執行結果.

golang API開發過程的中的自動重啟方式(基於gin框架)

概要 基於 golang Gin 框架開發 web 服務時,需要時不時的 go build,然後重啟服務檢視執行結果.

Laravel 框架基於自帶的使用者系統實現登入註冊及錯誤處理功能分析

本文例項講述了Laravel 框架基於自帶的使用者系統實現登入註冊及錯誤處理功能。分享給大家供大家參考，具體如下：

Laravel5.1 框架登入和註冊實現方法詳解

本文例項講述了Laravel5.1 框架登入和註冊實現方法。分享給大家供大家參考，具體如下：

SSM框架下實現登入註冊的示例程式碼

基本配置：jdk1.8 tomcat 8 MyEclipse 先打好地基： spring配置檔案 application.xml： <?xml version=\"1.0\" encoding=\"UTF-8\"?>

gin框架路由拆分與註冊

轉自 gin框架路由拆分與註冊 基本的路由註冊 下面最基礎的gin路由註冊方式，適用於路由條目比較少的簡單專案或者專案demo。

基於PHP實現使用者登入註冊功能的詳細教程

教程前先給大家看看小編的實現成果吧！ 圖1： 圖2： 圖3： 教程： 實現這個功能我們需要五個php檔案：

基於PHP的登入和註冊的功能的實現

1.新建三個html檔案，兩個php檔案和若干個CSS檔案和若干個JS檔案 2.登入的html頁面顯示效果圖

vue框架前後端分離專案之登入註冊頁面及多方式登入、手機號驗證碼介面等相關內容-121

1 登入註冊前端頁面 1.1 Login.vue <template><div class=\"login\"><div class=\"box\"><i class=\"el-icon-close\" @click=\"close_login\"></i><div class=\"content\"><

gin框架 路由拆分與註冊

★基本的路由註冊 最基礎的gin路由註冊方式，適用於路由條目比較少的簡單專案或者專案demo

基於Gin+Gorm框架搭建MVC模式的Go語言後端系統

文/朱季謙 環境準備：安裝Gin與Gorm 本文搭建準備環境：Gin+Gorm+MySql。 Gin是Go語言的一套WEB框架，在學習一種陌生語言的陌生框架，最好的方式，就是用我們熟悉的思維去學。作為一名後端Java開發，在最初入門時，

gin框架中的路由拆分與註冊

基本的路由註冊 下面最基礎的gin路由註冊方式，適用於路由條目比較少的簡單專案或者專案demo。

golang(gin框架)，基於RESTFUL的跨語言遠端通訊嘗試

golang(gin框架)，基於RESTFUL的跨語言遠端通訊嘗試 背景： 在今年的專案實訓過程中，遇到了這樣的問題：

基於Servlet+MyBatis實現登入註冊案例

專案分層 java mapper UserMapper pojo User web LoginServlet RegisterServlet resources mapper Mybatis-config.xml

python基於wxPython的桌面開發：登入註冊

loginWindow.py import wx from loginDAO import loginDAO dao = loginDAO() class MyFrame(wx.Frame): def __init__(self, parent, id):

Unity登入註冊時限制傳送驗證碼次數功能的解決方法

當我們需要在Unity客戶端做一個限制功能，比如按鈕 （最好是傳送驗證碼按鈕）要求每天只能點選三次，等到第二天又有三次機會，這個過程不涉及到服務端訊息，只涉及到本地儲存，以下是我的解決方案：

Django實現auth模組下的登入註冊與登出功能

看了好多登入註冊和登出的教程，很亂，很迷，然後總結了一下，簡單的做了一個登入，註冊和登出的頁面。