前文再续,之前一篇我们已经配置好了数据库以及模板引擎,现在可以在逻辑层编写具体业务代码了,博客平台和大多数在线平台一样,都是基于用户账号体系来进行操作,所以我们需要针对用户表完成用户账号的CURD操作。
用户后台模板
首先用户操作逻辑主要在后台展现,所以模板应该单独生成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: {
- },
- };
复制代码 接着构造用户添加表单,绑定表单字段:- <ul >
- <li>
- <label >用户名</label>
-
- <input v-model="username" type="text" id="form-name" placeholder="请输入4-10字符" />
-
-
- </li>
- <li>
- <label >密 码</label>
-
- <input v-model="password" type="password" id="form-psw" placeholder="请输入6-30字符" />
-
-
- </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 >
-
- <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目录:将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 ,与君共觞,和君共勉。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |