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

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

用户后台模板

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

cd views  
mkdir admin

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

  

      
      
      
      
  用户管理  
  
  
  

    

     

     
      

    

模板目录架构如下:

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

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

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

const App = {  
            data() {  
                return {  
                    //用户名  
                    username: "",  
                    //密码  
                    password:""  
                };  
            },  
            created: function() {  

                console.log("你好,女神");  

            },  
            methods: {  
            },  
        };

接着构造用户添加表单,绑定表单字段:

这里通过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/,如图所示:

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

用户后台接口

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

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变量:

用户id 用户名 添加时间
{{ item.ID }} {{ item.Username }} {{ item.CreatedAt }}

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

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

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语言进阶之Go语言高性能Web框架Iris项目实战-用户系统EP03

THE END
分享
二维码