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

打印 上一主题 下一主题

主题 546|帖子 546|积分 1638

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

首先用户操作逻辑主要在后台展现,所以模板应该单独生成admin文件夹,和前台模板进行逻辑隔离:
  1. cd views  
  2. mkdir admin
复制代码
随后创建用户管理页面模板user.html:
  1. <!DOCTYPE html>  
  2. <html lang="zh-CN">  
  3.   <head>  
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <meta name="applicable-device" content="pc,mobile" />  
  8.   <title>用户管理</title>  
  9. <meta content="index,follow" name="robots">  
  10. <meta content="index,follow" name="GOOGLEBOT">  
  11. <meta content="刘悦"  name="Author">  
  12.   
  13.   <meta http-equiv="expires" content="4500"/>  
  14.   
  15.    <link rel="stylesheet" href="../assets/css/style.css"  />  
  16.   
  17.      
  18.       
  19.   
  20.   
  21.   </head>  
  22.   <body >  
  23.   
  24.       
  25.   
  26.     <nav >  
  27.         
  28.          
  29.   
  30.               
  31.               
  32.                   
  33.               <img src="https://www.cnblogs.com/data:image/png;base64,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" width="16" height="16" role="presentation" >  
  34.             <img src="https://www.cnblogs.com/data:image/png;base64,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" width="16" height="16" role="presentation" >  
  35.    
  36.                
  37.   
  38.           <button type="button"  data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">  
  39.           菜单  
  40.             
  41.             
  42.             
  43.           </button>  
  44.          
  45.          
  46.           <ul >  
  47.             <li  ><a target="_blank" href="https://www.cnblogs.com/" title='用户管理'>用户管理</a></li>  
  48.             <li ><a target="_blank" href="https://www.cnblogs.com/l_id_1" title='文章管理'></a></li>  
  49.           </ul>  
  50.   
  51.   
  52.               
  53.               <img src="https://www.cnblogs.com/data:image/png;base64,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" width="16" height="16" role="presentation" >  
  54.             <img src="https://www.cnblogs.com/data:image/png;base64,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" width="16" height="16" role="presentation" >  
  55.   
  56.             
  57.             <form action="/Index_search" method ="GET"  >  
  58.               <input type="search" name="text"  placeholder="Search" required="required" >  
  59.             </form>  
  60.             
  61.   
  62.   
  63.          
  64.         
  65.         
  66.     </nav>  
  67.      
  68.       
  69.     <header>  
  70.       
  71.       
  72.     </header>  
  73.       
  74.     <section>  
  75.         
  76.          
  77.            
  78.             
  79.             <ul >  
  80.                 <li>  
  81.                     <label >用户名</label>  
  82.                      
  83.                         <input type="text" id="form-name"  placeholder="请输入4-10字符" />  
  84.                           
  85.                      
  86.                 </li>  
  87.                 <li>  
  88.                     <label >密 码</label>  
  89.                      
  90.                         <input type="password" id="form-psw"  placeholder="请输入6-30字符" />  
  91.                           
  92.                      
  93.                 </li>  
  94.                
  95.             </ul>  
  96.   
  97.             <button>提交</button>  
  98.   
  99.      
  100.   
  101.       
  102.             
  103.          
  104.          
  105.         </section>  
  106.   
  107.       
  108.   
  109.       
  110.   
  111.   </body>
复制代码
模板目录架构如下:
  1. └── views  
  2.     ├── admin  
  3.     │ └── user.html  
  4.     ├── index.html  
  5.     └── test.html
复制代码
views根目录模板为前台模板,而admin目录下模板是为后台模板。
同时前端声明username和password变量,分别绑定用户名和密码:
  1. const App = {  
  2.             data() {  
  3.                 return {  
  4.                     //用户名  
  5.                     username: "",  
  6.                     //密码  
  7.                     password:""  
  8.                 };  
  9.             },  
  10.             created: function() {  
  11.   
  12.                 console.log("你好,女神");  
  13.   
  14.             },  
  15.             methods: {  
  16.             },  
  17.         };
复制代码
接着构造用户添加表单,绑定表单字段:
  1. <ul >  
  2.                 <li>  
  3.                     <label >用户名</label>  
  4.                      
  5.                         <input v-model="username" type="text" id="form-name"  placeholder="请输入4-10字符" />  
  6.                           
  7.                      
  8.                 </li>  
  9.                 <li>  
  10.                     <label >密 码</label>  
  11.                      
  12.                         <input v-model="password" type="password" id="form-psw"  placeholder="请输入6-30字符" />  
  13.                           
  14.                      
  15.                 </li>  
  16.                
  17.             </ul>  
  18.   
  19.             <button @click="submit">提交</button>
复制代码
这里通过v-model关键字将表单和变量做双向绑定,同时为按钮绑定submit提交方法。
如果愿意,我们也可以针对前端的axios库进行二次封装,增加异步请求方法的复用性:
  1. const myaxios = function (url, type, data = {}) {  
  2.   
  3. return new  
  4.   
  5.     Promise((resolve) => {  
  6.   
  7.         if (type === "get" || type === "delete") {  
  8.   
  9.   
  10.             axios({  
  11.   
  12.                 method: type,  
  13.                 url: url,  
  14.                 params: data  
  15.             }).then((result) => {  
  16.   
  17.                 resolve(result.data);  
  18.   
  19.             });  
  20.   
  21.   
  22.         } else {  
  23.   
  24.             const params = new URLSearchParams();  
  25.             for (var key in data) {  
  26.             params.append(key,data[key]);  
  27.             }  
  28.             axios({  
  29.   
  30.                 method: type,  
  31.                 url: url,  
  32.                 data:params  
  33.             }).then((result) => {  
  34.   
  35.                 resolve(result.data);  
  36.   
  37.             });  
  38.   
  39.         }  
  40.   
  41.     });  
  42.   
  43. }  
  44.   
  45. app.config.globalProperties.myaxios = myaxios;
复制代码
这样,我们就可以随时使用this关键字来向后台发起异步请求了。
接着,编写后台视图,将用户后台模板渲染出来:
  1. app.Get("/admin/user/", func(ctx iris.Context) {  
  2.   
  3.                 ctx.View("/admin/user.html")  
  4.   
  5.         })
复制代码
编译后,访问 http://localhost:5000/admin/user/,如图所示:

用户后台接口

后台接口主要负责接收前端请求的参数,然后根据请求方式类型来决定用户表的操作动作,首先构建添加接口:
  1. app.Post("/admin/user_action/", func(ctx iris.Context) {  
  2.   
  3.                 username := ctx.PostValue("username")  
  4.                 password := ctx.PostValue("password")  
  5.   
  6.                 fmt.Println(username, password)  
  7.   
  8.                 ret := map[string]string{  
  9.                         "errcode": "0",  
  10.                         "msg":     "ok",  
  11.                 }  
  12.                 ctx.JSON(ret)  
  13.   
  14.         })
复制代码
这里使用Post方式匹配路由/admin/user_action/,随后通过ctx结构体的PostValue函数来获取具体的参数key,然后利用ctx.JSON函数将字典序列化为Json,再返回给前端。
前端则使用之前封装好的myaxios内置方法向后端发起异步请求:
  1. submit:function(){  
  2.   
  3.   
  4.                     this.myaxios("http://localhost:5000/admin/user_action/","post",{"username":this.username,"password":this.password}).then(data => {  
  5.         console.log(data)  
  6.       });  
  7.   
  8.                 }
复制代码
后台返回:
  1. Now listening on: http://localhost:5000  
  2. Application started. Press CTRL+C to shut down.  
  3. 19:30:58 app         | admin admin
复制代码
可以看到,后端打印出了前端请求的用户名和密码,接着就是入库操作:
  1. app.Post("/admin/user_action/", func(ctx iris.Context) {  
  2.   
  3.                 username := ctx.PostValue("username")  
  4.                 password := ctx.PostValue("password")  
  5.   
  6.                 fmt.Println(username, password)  
  7.   
  8.                 user := &model.User{Username: username, Password: password}  
  9.                 res := db.Create(user)  
  10.   
  11.                 fmt.Println(res.Error)  
  12.   
  13.                 ret := map[string]string{  
  14.                         "errcode": "0",  
  15.                         "msg":     "ok",  
  16.                 }  
  17.                 ctx.JSON(ret)  
  18.   
  19.         })
复制代码
这里初始化结构体变量user后,利用db.Create函数进行入库操作。
随后检查入库结果:
  1. MySQL [irisblog]> select * from user;  
  2. +----+---------------------+---------------------+------------+----------+----------+  
  3. | id | created_at          | updated_at          | deleted_at | username | password |  
  4. +----+---------------------+---------------------+------------+----------+----------+  
  5. | 13 | 2022-08-22 19:33:16 | 2022-08-22 19:33:16 | NULL       | admin    | admin    |  
  6. +----+---------------------+---------------------+------------+----------+----------+  
  7. 1 row in set (0.00 sec)
复制代码
入库操作虽然成功了,但显然,密码不能使用明文,否则不就步CSDN的后尘贻笑大方了吗?
添加md5加密逻辑:
  1. w := md5.New()  
  2. io.WriteString(w, password) //将str写入到w中  
  3. md5str := fmt.Sprintf("%x", w.Sum(nil))
复制代码
注意导入"crypto/md5"和"io"两个标准库包。
完成代码:
  1. app.Post("/admin/user_action/", func(ctx iris.Context) {  
  2.   
  3.                 username := ctx.PostValue("username")  
  4.                 password := ctx.PostValue("password")  
  5.   
  6.                 fmt.Println(username, password)  
  7.   
  8.                 w := md5.New()  
  9.                 io.WriteString(w, password) //将str写入到w中  
  10.                 md5str := fmt.Sprintf("%x", w.Sum(nil))  
  11.   
  12.                 user := &model.User{Username: username, Password: md5str}  
  13.                 res := db.Create(user)  
  14.   
  15.                 fmt.Println(res.Error)  
  16.   
  17.                 ret := map[string]string{  
  18.                         "errcode": "0",  
  19.                         "msg":     "ok",  
  20.                 }  
  21.                 ctx.JSON(ret)  
  22.   
  23.         })
复制代码
重新编译后,再次发起请求,检查入库结果:
  1. MySQL [irisblog]> select * from user;  
  2. +----+---------------------+---------------------+------------+----------+----------------------------------+  
  3. | id | created_at          | updated_at          | deleted_at | username | password                         |  
  4. +----+---------------------+---------------------+------------+----------+----------------------------------+  
  5. | 16 | 2022-08-22 19:41:40 | 2022-08-22 19:41:40 | NULL       | admin    | 21232f297a57a5a743894a0e4a801fc3 |  
  6. +----+---------------------+---------------------+------------+----------+----------------------------------+  
  7. 1 row in set (0.00 sec)
复制代码
完成添加逻辑后,可以将用户列表批量查询出来:
  1. app.Get("/admin/userlist/", func(ctx iris.Context) {  
  2.   
  3.                 var users []model.User  
  4.                 res := db.Find(&users)  
  5.   
  6.                 ctx.JSON(res)  
  7.   
  8.         })
复制代码
注意这里声明一个切片嵌套结构users,切片的每一个元素是用户结构体,接口返回:
  1. {  
  2. Value: [  
  3. {  
  4. ID: 16,  
  5. CreatedAt: "2022-08-22T19:41:40+08:00",  
  6. UpdatedAt: "2022-08-22T19:41:40+08:00",  
  7. DeletedAt: null,  
  8. Username: "admin",  
  9. Password: "21232f297a57a5a743894a0e4a801fc3"  
  10. },  
  11. {  
  12. ID: 17,  
  13. CreatedAt: "2022-08-22T19:48:25+08:00",  
  14. UpdatedAt: "2022-08-22T19:48:25+08:00",  
  15. DeletedAt: null,  
  16. Username: "888123",  
  17. Password: "202cb962ac59075b964b07152d234b70"  
  18. },  
  19. {  
  20. ID: 18,  
  21. CreatedAt: "2022-08-22T19:48:28+08:00",  
  22. UpdatedAt: "2022-08-22T19:48:28+08:00",  
  23. DeletedAt: null,  
  24. Username: "admin123",  
  25. Password: "21232f297a57a5a743894a0e4a801fc3"  
  26. }  
  27. ],  
  28. Error: null,  
  29. RowsAffected: 3  
  30. }
复制代码
随后,前端可以通过异步请求回调赋值将用户列表展示在页面中:
  1. 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(){  
  2.   
  3.   
  4.                     this.myaxios("http://localhost:5000/admin/user_action/","post",{"username":this.username,"password":this.password}).then(data => {  
  5.         console.log(data)  
  6.       });  
  7.   
  8.                 }                },          };
复制代码
随后,在页面中渲染userlist变量:
  1. <table >  
  2.   
  3.                 <tr>  
  4.   
  5.                     <th>用户id</th>  
  6.                     <th>用户名</th>  
  7.                     <th>添加时间</th>  
  8.                 </tr>  
  9.   
  10.                 <tr v-for="(item,index) in userlist">  
  11.                     <td>{{ item.ID }}</td>  
  12.                     <td>{{ item.Username }}</td>  
  13.                     <td>{{ item.CreatedAt }}</td>  
  14.                 </tr>  
  15.   
  16.   
  17.   
  18.             </table>
复制代码
请求 http://localhost:5000/admin/user/ 如图所示:

Vue.js+Iris的前后端联调流程就跑通了,当然有些地方还需要封装,比如md5加密环节,后续登录模块也依然会依赖md5包,项目根目录下建立mytool目录:
  1. mkdir mytool  
  2. cd mytool
复制代码
将md5加密封装为函数:
  1. package mytool  
  2.   
  3. import (  
  4.         "crypto/md5"  
  5.         "fmt"  
  6.         "io"  
  7. )  
  8.   
  9. func Make_password(password string) string {  
  10.   
  11.         w := md5.New()  
  12.         io.WriteString(w, password) //将str写入到w中  
  13.         md5str := fmt.Sprintf("%x", w.Sum(nil))  
  14.   
  15.         return md5str  
  16.   
  17. }
复制代码
随后通过包名进行调用:
  1. md5str := mytool.Make_password(password)
复制代码
结语

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

怀念夏天

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表