当前位置：首页 > article >正文

Go语言实现用户登录Web应用

article 2024/11/13 20:34:51

文章目录

1 Go语言Web框架
- 1.1 框架比较
- 1.2 安装Gin框架
2. 实现用户登录功能
- 2.1 创建项目目录
- 2.2 打开项目目录
- 2.3 创建登录Go程序
- 2.4 创建模板页面
- - 2.4.1 登录页面
  - 2.4.2 登录成功页面
  - 2.4.3 登录失败页面
3. 测试用户登录项目
- 3.1 运行登录主程序
- 3.2 访问登录页面
- 3.3 演示登录成功
- 3.4 演示登录失败
4. 实战总结

1 Go语言Web框架

1.1 框架比较

Gin框架以其高性能和简洁的API设计而闻名，适合构建RESTful API和Web应用。Echo框架则提供了更多的中间件支持和更灵活的路由配置。Beego框架则提供了一个全功能的解决方案，包括ORM、缓存、日志等。

1.2 安装Gin框架

执行命令：go get -u github.com/gin-gonic/gin
查看是否安装成功，执行命令：go list github.com/gin-gonic/gin

2. 实现用户登录功能

2.1 创建项目目录

在go_work里创建login目录，然后在login里创建templates

2.2 打开项目目录

2.3 创建登录Go程序

在login目录里创建login.go

package main

import (
    "net/http"
    "github.com/gin-gonic/gin"
    "path/filepath"  
    "log"   
)

func main() {
    // 创建一个带有默认中间件Logger和Recovery的Gin路由器实例
    router := gin.Default()    

    // 使用filepath.Glob获取所有.tmpl模板文件的路径
    tmplFiles, err := filepath.Glob("templates/*.tmpl")
    if err != nil {
        log.Fatal("Error reading templates: ", err)
    }

    // 加载模板文件
    router.LoadHTMLFiles(tmplFiles...)    
	
    // 显示登录页面
    router.GET("/", func(c *gin.Context) {
        c.HTML(http.StatusOK, "login.tmpl", nil)
    })

    // 处理登录请求
    router.POST("/login", loginHandler)

    // 成功页面路由
    router.GET("/success", func(c *gin.Context) {
        // 从查询参数中获取用户名
        username := c.Query("username")
        // 将用户名传递给模板
        c.HTML(http.StatusOK, "success.tmpl", gin.H{"username": username})
    })

    // 失败页面路由
    router.GET("/failure", func(c *gin.Context) {
        // 从查询参数中获取用户名
        username := c.Query("username")
        c.HTML(http.StatusOK, "failure.tmpl", gin.H{"username": username})
    })

    // 启动服务器
    router.Run(":8080")
}

// loginHandler 处理用户登录请求
func loginHandler(c *gin.Context) {
    // 获取表单数据
    username := c.PostForm("username")
    password := c.PostForm("password")

    // 假设的用户名和密码
    if username == "无心剑" && password == "903213" {        
        // 登录成功，跳转到success页面，并带查询参数
        c.Redirect(http.StatusFound, "/success?username=" + username)
    } else {
        // 登录失败，跳转到failure页面，并带查询参数
        c.Redirect(http.StatusFound, "failure?username=" + username)
    }
}

代码说明：这段Go代码使用Gin框架创建了一个简单的Web服务器，用于处理用户登录，并根据登录结果重定向到成功或失败页面。服务器在8080端口启动，提供三个路由：根路由(“/”)显示登录页面，“/login"处理登录逻辑，”/success"和"/failure"分别显示登录成功和失败的信息。登录成功后，用户名作为查询参数传递给成功页面的模板，失败页面同理。使用filepath.Glob获取所有模板文件并加载，模板文件存放在templates目录下。登录验证逻辑假设用户名为"无心剑"，密码为"903213"。

2.4 创建模板页面

2.4.1 登录页面

在templates里创建login.tmpl文件

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>用户登录</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: Arial, sans-serif;
                background-color: #f5f5f5;
            }

            .container {
                max-width: 300px;
                margin: 50px auto;
                background-color: #ffffff;
                padding: 20px;
                border-radius: 5px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            }

            h3 {
                text-align: center;
            }

            form {
                display: flex;
                flex-direction: column;
            }

            label {
                margin-top: 10px;
            }

            input[type="text"],
            input[type="password"] {
                width: 100%;
                padding: 8px;
                margin-top: 5px;
                border: 1px solid #ccc;
                border-radius: 3px;
            }

            button {
                width: 100%;
                padding: 10px;
                margin-top: 10px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 3px;
                cursor: pointer;
            }

            button:hover {
                background-color: #45a049;
            }        
        </style>
    </head>

    <body>
        <div class="container">
            <h3>用户登录</h3>
            <form action="login" method="POST">
                <input type="text" id="username" name="username" required placeholder="请输入用户名">
                <input type="password" id="password" name="password" required placeholder="请输入密码">
                <button type="submit">登录</button>            
            </form>
        </div>
    </body>
</html>

2.4.2 登录成功页面

在templates里创建success.tmpl文件

<html>
    <head>
        <title>登录成功</title>
        <style>
            .framed {
                border: 2px solid #000; /* 设置边框宽度、样式和颜色 */
                border-radius: 15px; /* 设置圆角边框 */
                padding: 10px; /* 设置内边距 */
                width: fit-content; /* 设置宽度为适合内容 */
                background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
                color: #f33; /* 设置文本颜色 */
                display: inline-block; /* 防止阴影和边框被裁剪 */
            }
            .centered {
                text-align: center; /* 使包含元素的文本居中 */
                margin-top: 50px; /* 添加上边距 */
                margin-bottom: 50px; /* 添加下边距 */
            }
        </style>
    </head>
    <body>
        <div class="centered">
            <h3 class="framed">恭喜，{{ .username }}登录成功~</h3>
        </div>
    </body>
</html>

2.4.3 登录失败页面

在templates里创建failure.tmpl文件

<html>
    <head>
        <title>登录失败</title>
        <style>
            .framed {
                border: 2px solid #000; /* 设置边框宽度、样式和颜色 */
                border-radius: 15px; /* 设置圆角边框 */
                padding: 10px; /* 设置内边距 */
                width: fit-content; /* 设置宽度为适合内容 */
                background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
                color: #33f; /* 设置文本颜色 */
                display: inline-block; /* 防止阴影和边框被裁剪 */
            }
            .centered {
                text-align: center; /* 使包含元素的文本居中 */
                margin-top: 50px; /* 添加上边距 */
                margin-bottom: 50px; /* 添加下边距 */
            }
        </style>
    </head>
    <body>
        <div class="centered">
            <h3 class="framed">遗憾，{{ .username }}登录失败~</h3>
        </div>
    </body>
</html>

3. 测试用户登录项目

3.1 运行登录主程序

运行login.go程序

3.2 访问登录页面

访问http://localhost:8080/

3.3 演示登录成功

输入正确的用户名和密码
单击【登录】按钮，跳转到登录成功页面

3.4 演示登录失败

输入错误的用户名或密码
单击【登录】按钮，跳转到登录失败页面

4. 实战总结

在本实战项目中，我们使用Go语言的Gin框架实现了一个简单的用户登录系统。通过创建项目目录、编写Go程序、设计模板页面，我们学会了如何搭建基本的Web服务器、处理HTTP请求、使用模板渲染页面以及进行简单的用户认证。我们还学习了如何在Gin框架中使用查询参数传递数据，并实现了登录成功与失败的页面跳转。这个项目不仅加深了我们对Gin框架的理解，也提高了我们的实际开发能力。

查看全文

http://www.kler.cn/a/392016.html