AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-用户系统EP03

2023-02-15 141
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前文再续，之前一篇我们已经配置好了数据库以及模板引擎，现在可以在逻辑层编写具体业务代码了，博客平台和大多数在线平台一样，都是基于用户账号体系来进行操作，所以我们需要针对用户表完成用户账号的CURD操作。

前文再续，之前一篇我们已经配置好了数据库以及模板引擎，现在可以在逻辑层编写具体业务代码了，博客平台和大多数在线平台一样，都是基于用户账号体系来进行操作，所以我们需要针对用户表完成用户账号的CURD操作。

用户后台模板

首先用户操作逻辑主要在后台展现，所以模板应该单独生成admin文件夹，和前台模板进行逻辑隔离：

cd views  
mkdir admin

随后创建用户管理页面模板user.html:

<!DOCTYPE html>  
<html lang="zh-CN">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <meta name="applicable-device" content="pc,mobile" />  
  <title>用户管理</title>  
<meta content="index,follow" name="robots">  
<meta content="index,follow" name="GOOGLEBOT">  
<meta content="刘悦"  name="Author">  
  
  <meta http-equiv="expires" content="4500"/>  
  
   <link rel="stylesheet" href="../assets/css/style.css"  />  
  
   <script src="../assets/js/axios.js"></script>  
    <script src="../assets/js/vue.js"></script>  
  
  
  </head>  
  <body >  
  
    <div id="app">  
  
    <nav class="navbar navbar-inverse navbar-fixed-top">  
      <div class="container">  
        <div class="navbar-header">  
  
            <div class="switch_a nav_swich">  
              
                <div class="react-toggle">  
              <div class="react-toggle-track"><div class="react-toggle-track-check"><img src="data:image/png;base64,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" width="16" height="16" role="presentation" style="pointer-events: none;"></div>  
            <div class="react-toggle-track-x"><img src="data:image/png;base64,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" width="16" height="16" role="presentation" style="pointer-events: none;"></div></div><div class="react-toggle-thumb"></div></div>  
    
              </div>  
  
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">  
          <span class="sr-only">菜单</span>  
          <span class="icon-bar"></span>  
          <span class="icon-bar"></span>  
          <span class="icon-bar"></span>  
          </button>  
        </div>  
        <div id="navbar" class="collapse navbar-collapse">  
          <ul class="nav navbar-nav">  
            <li  class="index_nav index_index"><a href="/" title='用户管理'>用户管理</a></li>  
            <li class="index_nav index_1"><a href="/l_id_1" title='文章管理'></a></li>  
          </ul>  
  
  
            <div class="react-toggle bigtoggle">  
              <div class="react-toggle-track"><div class="react-toggle-track-check"><img src="data:image/png;base64,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" width="16" height="16" role="presentation" style="pointer-events: none;"></div>  
            <div class="react-toggle-track-x"><img src="data:image/png;base64,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" width="16" height="16" role="presentation" style="pointer-events: none;"></div></div><div class="react-toggle-thumb"></div></div>  
  
          <div class="search navbar-right" >  
            <form action="/Index_search" method ="GET" class="search_form" >  
              <input type="search" name="text" class="search_input" placeholder="Search" required="required" >  
            </form>  
          </div>  
  
  
        </div>  
        
      </div>  
    </nav>  
     
    <div class="container">  
    <header>  
      
      
    </header>  
      
    <section>  
      <div class="row">  
        <div class="col-md-8">  
           
            
            <ul class="g-formlist form_li">  
                <li>  
                    <label class="mark">用户名</label>  
                    <div class="write">  
                        <input type="text" id="form-name" class="g-text-entry" placeholder="请输入4-10字符" />  
                        <span class="tip" data-initial="请输入4-10字符"></span>  
                    </div>  
                </li>  
                <li>  
                    <label class="mark">密 码</label>  
                    <div class="write">  
                        <input type="password" id="form-psw" class="g-text-entry" placeholder="请输入6-30字符" />  
                        <span class="tip" data-initial="请输入6-30字符"></span>  
                    </div>  
                </li>  
               
            </ul>  
  
            <button>提交</button>  
  
     
  
       
            
        </div>  
        </div>  
        </section>  
  
    </div>  
  
    </div>  
  
  </body>

模板目录架构如下：

└── views  
    ├── admin  
    │ └── user.html  
    ├── index.html  
    └── test.html

views根目录模板为前台模板，而admin目录下模板是为后台模板。

同时前端声明username和password变量，分别绑定用户名和密码：

const App = {  
            data() {  
                return {  
                    //用户名  
                    username: "",  
                    //密码  
                    password:""  
                };  
            },  
            created: function() {  
  
                console.log("你好，女神");  
  
            },  
            methods: {  
            },  
        };

接着构造用户添加表单，绑定表单字段：

<ul class="g-formlist form_li">  
                <li>  
                    <label class="mark">用户名</label>  
                    <div class="write">  
                        <input v-model="username" type="text" id="form-name" class="g-text-entry" placeholder="请输入4-10字符" />  
                        <span class="tip" data-initial="请输入4-10字符"></span>  
                    </div>  
                </li>  
                <li>  
                    <label class="mark">密 码</label>  
                    <div class="write">  
                        <input v-model="password" type="password" id="form-psw" class="g-text-entry" placeholder="请输入6-30字符" />  
                        <span class="tip" data-initial="请输入6-30字符"></span>  
                    </div>  
                </li>  
               
            </ul>  
  
            <button @click="submit">提交</button>

这里通过v-model关键字将表单和变量做双向绑定，同时为按钮绑定submit提交方法。

如果愿意，我们也可以针对前端的axios库进行二次封装，增加异步请求方法的复用性：

const myaxios = function (url, type, data = {}) {  
  
return new  
  
    Promise((resolve) => {  
  
        if (type === "get" || type === "delete") {  
  
  
            axios({  
  
                method: type,  
                url: url,  
                params: data  
            }).then((result) => {  
  
                resolve(result.data);  
  
            });  
  
  
        } else {  
  
            const params = new URLSearchParams();  
            for (var key in data) {  
            params.append(key,data[key]);  
            }  
            axios({  
  
                method: type,  
                url: url,  
                data:params  
            }).then((result) => {  
  
                resolve(result.data);  
  
            });  
  
        }  
  
    });  
  
}  
  
app.config.globalProperties.myaxios = myaxios;

这样，我们就可以随时使用this关键字来向后台发起异步请求了。

接着，编写后台视图，将用户后台模板渲染出来：

app.Get("/admin/user/", func(ctx iris.Context) {  
  
        ctx.View("/admin/user.html")  
  
    })

编译后，访问 http://localhost:5000/admin/user/，如图所示：

用户后台接口

后台接口主要负责接收前端请求的参数，然后根据请求方式类型来决定用户表的操作动作，首先构建添加接口：

app.Post("/admin/user_action/", func(ctx iris.Context) {  
  
        username := ctx.PostValue("username")  
        password := ctx.PostValue("password")  
  
        fmt.Println(username, password)  
  
        ret := map[string]string{  
            "errcode": "0",  
            "msg":     "ok",  
        }  
        ctx.JSON(ret)  
  
    })

这里使用Post方式匹配路由/admin/user\_action/，随后通过ctx结构体的PostValue函数来获取具体的参数key，然后利用ctx.JSON函数将字典序列化为Json，再返回给前端。

前端则使用之前封装好的myaxios内置方法向后端发起异步请求：

submit:function(){  
  
  
                    this.myaxios("http://localhost:5000/admin/user_action/","post",{"username":this.username,"password":this.password}).then(data => {  
        console.log(data)  
      });  
  
                }

后台返回：

Now listening on: http://localhost:5000  
Application started. Press CTRL+C to shut down.  
19:30:58 app         | admin admin

可以看到，后端打印出了前端请求的用户名和密码，接着就是入库操作：

app.Post("/admin/user_action/", func(ctx iris.Context) {  
  
        username := ctx.PostValue("username")  
        password := ctx.PostValue("password")  
  
        fmt.Println(username, password)  
  
        user := &model.User{Username: username, Password: password}  
        res := db.Create(user)  
  
        fmt.Println(res.Error)  
  
        ret := map[string]string{  
            "errcode": "0",  
            "msg":     "ok",  
        }  
        ctx.JSON(ret)  
  
    })

这里初始化结构体变量user后，利用db.Create函数进行入库操作。

随后检查入库结果：

MySQL [irisblog]> select * from user;  
+----+---------------------+---------------------+------------+----------+----------+  
| id | created_at          | updated_at          | deleted_at | username | password |  
+----+---------------------+---------------------+------------+----------+----------+  
| 13 | 2022-08-22 19:33:16 | 2022-08-22 19:33:16 | NULL       | admin    | admin    |  
+----+---------------------+---------------------+------------+----------+----------+  
1 row in set (0.00 sec)

入库操作虽然成功了，但显然，密码不能使用明文，否则不就步CSDN的后尘贻笑大方了吗？

添加md5加密逻辑：

w := md5.New()  
io.WriteString(w, password) //将str写入到w中  
md5str := fmt.Sprintf("%x", w.Sum(nil))

注意导入"crypto/md5"和"io"两个标准库包。

完成代码：

app.Post("/admin/user_action/", func(ctx iris.Context) {  
  
        username := ctx.PostValue("username")  
        password := ctx.PostValue("password")  
  
        fmt.Println(username, password)  
  
        w := md5.New()  
        io.WriteString(w, password) //将str写入到w中  
        md5str := fmt.Sprintf("%x", w.Sum(nil))  
  
        user := &model.User{Username: username, Password: md5str}  
        res := db.Create(user)  
  
        fmt.Println(res.Error)  
  
        ret := map[string]string{  
            "errcode": "0",  
            "msg":     "ok",  
        }  
        ctx.JSON(ret)  
  
    })

重新编译后，再次发起请求，检查入库结果：

MySQL [irisblog]> select * from user;  
+----+---------------------+---------------------+------------+----------+----------------------------------+  
| id | created_at          | updated_at          | deleted_at | username | password                         |  
+----+---------------------+---------------------+------------+----------+----------------------------------+  
| 16 | 2022-08-22 19:41:40 | 2022-08-22 19:41:40 | NULL       | admin    | 21232f297a57a5a743894a0e4a801fc3 |  
+----+---------------------+---------------------+------------+----------+----------------------------------+  
1 row in set (0.00 sec)

完成添加逻辑后，可以将用户列表批量查询出来：

app.Get("/admin/userlist/", func(ctx iris.Context) {  
  
        var users []model.User  
        res := db.Find(&users)  
  
        ctx.JSON(res)  
  
    })

注意这里声明一个切片嵌套结构users，切片的每一个元素是用户结构体，接口返回：

{  
Value: [  
{  
ID: 16,  
CreatedAt: "2022-08-22T19:41:40+08:00",  
UpdatedAt: "2022-08-22T19:41:40+08:00",  
DeletedAt: null,  
Username: "admin",  
Password: "21232f297a57a5a743894a0e4a801fc3"  
},  
{  
ID: 17,  
CreatedAt: "2022-08-22T19:48:25+08:00",  
UpdatedAt: "2022-08-22T19:48:25+08:00",  
DeletedAt: null,  
Username: "888123",  
Password: "202cb962ac59075b964b07152d234b70"  
},  
{  
ID: 18,  
CreatedAt: "2022-08-22T19:48:28+08:00",  
UpdatedAt: "2022-08-22T19:48:28+08:00",  
DeletedAt: null,  
Username: "admin123",  
Password: "21232f297a57a5a743894a0e4a801fc3"  
}  
],  
Error: null,  
RowsAffected: 3  
}

随后，前端可以通过异步请求回调赋值将用户列表展示在页面中：

const App = {  
            data() {  
                return {  
                    //用户名  
                    username: "",  
                    //密码  
                    password:"",  
                    //用户列表  
                    userlist:[]  
                };  
            },  
            created: function() {  
  
                console.log("你好，女神");  
  
                this.get_userlist();  
  
            },  
            methods: {  
  
                get_userlist:function(){  
  
  
                    this.myaxios("http://localhost:5000/admin/userlist/","get",).then(data => {  
        console.log(data)  
        this.userlist = data.Value  
      });  
  
  
                },  
                submit:function(){  
  
  
                    this.myaxios("http://localhost:5000/admin/user_action/","post",{"username":this.username,"password":this.password}).then(data => {  
        console.log(data)  
      });  
  
                }  
  
            },  
        };

随后，在页面中渲染userlist变量：

<table class="gridtable">  
  
                <tr>  
  
                    <th>用户id</th>  
                    <th>用户名</th>  
                    <th>添加时间</th>  
                </tr>  
  
                <tr v-for="(item,index) in userlist">  
                    <td>{{ item.ID }}</td>  
                    <td>{{ item.Username }}</td>  
                    <td>{{ item.CreatedAt }}</td>  
                </tr>  
  
  
  
            </table>

请求 http://localhost:5000/admin/user/ 如图所示：

Vue.js+Iris的前后端联调流程就跑通了，当然有些地方还需要封装，比如md5加密环节，后续登录模块也依然会依赖md5包，项目根目录下建立mytool目录：

mkdir mytool  
cd mytool

将md5加密封装为函数：

package mytool  
  
import (  
    "crypto/md5"  
    "fmt"  
    "io"  
)  
  
func Make_password(password string) string {  
  
    w := md5.New()  
    io.WriteString(w, password) //将str写入到w中  
    md5str := fmt.Sprintf("%x", w.Sum(nil))  
  
    return md5str  
  
}

随后通过包名进行调用：

md5str := mytool.Make_password(password)

结语

至此，前后端分离的用户系统就构建好了，开发效率层面，基于Go lang的Iris框架并不逊色于任何动态语言框架，语法的简明程度有过之而无不及，性能层面更是不遑多让，该项目已开源在Github：https://github.com/zcxey2911/IrisBlog ，与君共觞，和君共勉。

文章标签：
Go
前端开发
数据安全/隐私保护
数据格式
数据库
JSON
关键词：
Go语言
Go框架
web系统
web框架
Go语言web框架
刘悦的技术博客
目录
相关文章
GoFly开发者
|
1月前
|
开发框架 Go 计算机视觉
纯Go语言开发人脸检测、瞳孔/眼睛定位与面部特征检测插件-助力GoFly快速开发框架
开发纯go插件的原因是因为目前 Go 生态系统中几乎所有现有的人脸检测解决方案都是纯粹绑定到一些 C/C++ 库，如 OpenCV 或 dlib，但通过 cgo 调用 C 程序会引入巨大的延迟，并在性能方面产生显著的权衡。此外，在许多情况下，在各种平台上安装 OpenCV 是很麻烦的。使用纯Go开发的插件不仅在开发时方便，在项目部署和项目维护也能省很多时间精力。
GoFly开发者
50 5
土木林森
|
2月前
|
Go API 数据库
Go 语言中常用的 ORM 框架，如 GORM、XORM 和 BeeORM，分析了它们的特点、优势及不足，并从功能特性、性能表现、易用性和社区活跃度等方面进行了比较，旨在帮助开发者根据项目需求选择合适的 ORM 框架。
本文介绍了 Go 语言中常用的 ORM 框架，如 GORM、XORM 和 BeeORM，分析了它们的特点、优势及不足，并从功能特性、性能表现、易用性和社区活跃度等方面进行了比较，旨在帮助开发者根据项目需求选择合适的 ORM 框架。
土木林森
125 4
众所周知
|
2月前
|
中间件 Go API
Go语言中几种流行的Web框架，如Beego、Gin和Echo，分析了它们的特点、性能及适用场景，并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架，如Beego、Gin和Echo，分析了它们的特点、性能及适用场景，并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
众所周知
111 1
游客762btuqu5wybw666
|
2月前
|
安全 Go 调度
Go语言中的并发编程：解锁高性能程序设计之门####
探索Go语言如何以简洁高效的并发模型，重新定义现代软件开发的边界。本文将深入剖析Goroutines与Channels的工作原理，揭秘它们为何成为实现高并发、高性能应用的关键。跟随我们的旅程，从基础概念到实战技巧，一步步揭开Go并发编程的神秘面纱，让您的代码在多核时代翩翩起舞。 ####
游客762btuqu5wybw666
32 3
叫个什么名字
|
3月前
|
中间件 Go API
使用Go语言构建高性能RESTful API
在现代软件开发中，RESTful API因其简洁和高效而成为构建网络服务的首选。Go语言以其并发处理能力和高性能著称，是开发RESTful API的理想选择。本文将介绍如何使用Go语言构建RESTful API，包括基础的路由设置、中间件的使用、数据验证、错误处理以及性能优化。通过实际代码示例，我们将展示Go语言在API开发中的强大功能和灵活性。
叫个什么名字
53 1
游客j4mujezz7vm7y
|
4月前
|
JSON Go API
使用Go语言和Gin框架构建RESTful API：GET与POST请求示例
使用Go语言和Gin框架构建RESTful API：GET与POST请求示例
游客j4mujezz7vm7y
163 6
游客762btuqu5wybw666
|
4月前
|
Go API 开发者
深入探讨：使用Go语言构建高性能RESTful API服务
在本文中，我们将探索Go语言在构建高效、可靠的RESTful API服务中的独特优势。通过实际案例分析，我们将展示Go如何通过其并发模型、简洁的语法和内置的http包，成为现代后端服务开发的有力工具。
游客762btuqu5wybw666
108 14
1603458909890196
|
5月前
|
Cloud Native JavaScript API
一文读懂云原生 go-zero 微服务框架
一文读懂云原生 go-zero 微服务框架
1603458909890196
154 1
小王老师呀
|
4月前
|
消息中间件 NoSQL Go
PHP转Go系列 | ThinkPHP与Gin框架之Redis延时消息队列技术实践
【9月更文挑战第7天】在从 PHP 的 ThinkPHP 框架迁移到 Go 的 Gin 框架时，涉及 Redis 延时消息队列的技术实践主要包括：理解延时消息队列概念，其能在特定时间处理消息，适用于定时任务等场景；在 ThinkPHP 中使用 Redis 实现延时队列；在 Gin 中结合 Go 的 Redis 客户端库实现类似功能；Go 具有更高性能和简洁性，适合处理大量消息。迁移过程中需考虑业务需求及系统稳定性。
小王老师呀
73 0
FeelTouchLabs
|
5月前
|
安全 Java 测试技术
Go 高性能编程心法探秘
文章深入探讨了Go语言在高性能编程中的各种技巧，包括常用数据结构的使用、内存管理、并发编程策略，以及如何通过减少锁的使用、有效利用sync包中的工具来优化程序性能。
FeelTouchLabs
25 0

热门文章

最新文章

  • 1
    Selenium：强大的 Web 自动化测试工具
  • 2
    Web组件化的发展历程
  • 3
    Web组件化的优势和劣势
  • 4
    2025年，Web3开发学习路线全指南
  • 5
    Selenium IDE：Web自动化测试的得力助手
  • 6
    Spring Boot 入门：简化 Java Web 开发的强大工具
  • 7
    有效抵御网络应用及API威胁，聊聊F5 BIG-IP Next Web应用防火墙
  • 8
    如何在项目中保证 Web 组件化的性能
  • 9
    Web基础与HTTP协议
  • 10
    ASP.NET Web Pages - 教程
  • 1
    快速入门：利用Go语言下载Amazon商品信息的步骤详解
    75
  • 2
    Go语言学习12-数据的使用
    94
  • 3
    一文带你速通go语言指针
    85
  • 4
    来聊聊go语言的hashMap
    59
  • 5
    聊聊Go程序是如何运行的
    76
  • 6
    Go语言学习11-数据初始化
    72
  • 7
    速通Go语言编译过程
    62
  • 8
    一文带你速通Go语言基础语法
    92
  • 9
    Go语言的入门学习
    71
  • 10
    3137. K 周期字符串需要的最少操作次数[go语言中map学习]
    56

    • 相关课程

    更多
  • Go语言核心编程 - 数据结构和算法
  • Go语言核心编程 - 基础语法、数组、切片、Map
  • Go语言核心编程 - 面向对象、文件、单元测试、反射、TCP编程
  • Go语言完全自学手册图文教程
  • Python Web开发基础
  • 移动Web前端开发

    • 相关电子书

    更多
  • Go语言路上踩过的坑
  • gohbase ：HBase go客户端
  • Go构建日请求千亿级微服务实践

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 语言入门-1：环境构建
  • 前端开发基础1：前端开发环境的安装和配置
  • 高性能特性体验：ePQ 的详解与实战
  • 云上Web及FTP
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月