彩虹女神躍長空,Go語言進階之Go語言高性能Web框架Iris項目實戰-用戶系統EP03

来源:https://www.cnblogs.com/v3ucn/archive/2022/09/02/16650685.html
-Advertisement-
Play Games

前文再續,之前一篇我們已經配置好了資料庫以及模板引擎,現在可以在邏輯層編寫具體業務代碼了,博客平臺和大多數線上平臺一樣,都是基於用戶賬號體系來進行操作,所以我們需要針對用戶表完成用戶賬號的CURD操作。 用戶後臺模板 首先用戶操作邏輯主要在後臺展現,所以模板應該單獨生成admin文件夾,和前臺模板進 ...


前文再續,之前一篇我們已經配置好了資料庫以及模板引擎,現在可以在邏輯層編寫具體業務代碼了,博客平臺和大多數線上平臺一樣,都是基於用戶賬號體系來進行操作,所以我們需要針對用戶表完成用戶賬號的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 ,與君共觴,和君共勉。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 目錄 一.OpenGL ES 圖像伽馬線 1.原始圖片 2.效果演示 二.OpenGL ES 圖像伽馬線源碼下載 三.猜你喜歡 零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL ES 學習路線推薦 : OpenGL ES ...
  • import語句用來導入其他python文件(稱為模塊module),使用該模塊里定義的類、方法或者變數,從而達到代碼復用的目的。 將要建立文件的結構為: Tree |____ m1.py |____ m2.py |____ Branch |____m3.py |____m4.py 首先,先建立一個 ...
  • x64dbg 是一款開源的應用層反彙編調試器,旨在對沒有源代碼的可執行文件進行惡意軟體分析和逆向工程,同時 x64dbg 還允許用戶開發插件來擴展功能,插件開發環境的配置非常簡單,如下將簡單介紹x64dbg是如何配置開發環境以及如何開發插件的。 ...
  • 書接上回,上一回我們完成了用戶管理頁面的構建,並且通過前端的Vue.js框架動態地獲取表單數據,同時非同步請求後端Iris介面進行入庫操作,過程中使用函數封裝可復用的邏輯。 本回我們將繼續完善用戶管理功能。 唯一索引 雖然在之前的章節中已經完成了用戶添加(註冊)的功能,然而我們忽略了一個重要的細節,那 ...
  • 1、環境搭建 1.1 jar包 <spring.version>4.3.18.RELEASE</spring.version> <!-- spring-mvc begin --> <dependency> <groupId>org.springframework</groupId> <artifac ...
  • 坦克大戰【2】 筆記目錄:(https://www.cnblogs.com/wenjie2000/p/16378441.html) 線程-應用到坦克大戰 坦克大戰0.3版 陸游曾說:紙上得來總覺淺,絕知此事要躬行。前面我要已經瞭解java線程基本知識,現在我們來實際運用一下。 在坦克大戰游戲(0.2 ...
  • 相信很多剛開始使用pycharm不太熟練的小伙伴,每天一開機打開pycharm總是卡半天,不知道的還以為是電腦卡了或者啥問題的。 莫慌,其實並不是… 今天我們就來解決一下這個問題 大致總結了以下這幾種方法 1、exclude不必要文件 依次打開 file(文件) → project:administ ...
  • Django_響應對象 響應對象 響應對象有三種形式: HttpResponse() render() Redirect() (1) HttpResponse() django伺服器接收到客戶端發來的請求之後,會將提交上來的數據封裝成一個HttpResponse對象傳給視圖函數。視圖函數在處理完相關 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...