Ajax技術在就業網站用戶信息管理中的應用

2021-12-17 23:52朱克武
電腦知識與技術 2021年33期
關鍵詞:網絡

朱克武

摘要:前后端分離技術是目前網站開發的一個趨勢,Ajax作為前后端通訊的一個接口,使用GET和POST方法,在前后端之間傳遞JSON格式的數據,是網站開發一個重要的開發工具。在網站的開發過程中,結合Chrome的F12的開發者工具,能夠掌握數據在網絡中傳遞的情況,通過對網絡數據的分析,解決開發過程中,遇到的各類問題,加快網站開發的效率。

關鍵詞:Ajax;JSON;調試工具;網絡

中圖分類號:TP311? ? ? 文獻標識碼:A

文章編號:1009-3044(2021)33-0009-03

開放科學(資源服務)標識碼(OSID):

1 引言

經過三十多年的發展,網站技術已經非常成熟。上網已經成為人們日常生活的一部分,例如淘寶、京東等購物網站,在雙十一購物節,上億人次的訪問量,也不會影響購物體驗。常用的網站編程工具有php、jsp、asp.net這三種。網站前端開發工具、后端開發工具、網站測試工具等,與網站開發相關的各類軟件非常多。網站開發技術不斷發展,新技術不斷涌現,現在網站開發多使用前后端分離技術,前端工程師專注網頁的UI界面設計,后端工程師處理前端提交的數據,將數據處理結果返回給前端。這里一個主要的問題就是前后端數據交互涉及的協議問題。本網站前端頁面設計使用 VS Code 工具,后端使用 VS2019,數據庫使用MySQL。

2 用戶登錄

2.1用戶登錄界面的設計

上網瀏覽的各類網站,基本上都是動態網站。動態網站就是與數據庫打交道,上網在網站上瀏覽網站信息,這些信息是網站管理人員將信息提交到后臺數據庫,數據是存放在數據庫里面的。在網站上瀏覽的時候,網站將數據庫的信息提取出來,顯示在前端頁面上。

網站開發第一步,設計數據表。數據表需要根據網站的需求來設計。就業網站的用戶表涉及三類人員,一類是學生,一類是企業,一類是學校的管理人員。涉及一個權限的問題,例如,學生能夠瀏覽各類企業信息,但是,不能修改企業信息。在涉及添加、修改等頁面,需要對用戶權限進行判斷,有權限的才能夠提交,否則拒絕。用戶表主要由用戶名、密碼、用戶類型等組成。登錄界面如圖1所示。

登錄頁面涉及的技術包括:正則表達式、Ajax、驗證碼的顯示。正則表達式要判斷用戶名、密碼是否符合要求,如長度必須多少位,字符類型等。登錄是html網頁,沒有使用form表單格式提交數據,使用Ajax提交數據。頁面加載的時候,使用Ajax向后端服務器發出請求,獲取驗證碼。獲取到的驗證碼是數字,同樣,驗證碼可以是大小寫字母、字母加數字,也可以是圖像。在驗證碼文本框中,輸入完驗證碼后,需要判斷驗證碼是否與顯示的驗證碼一致。三個文本框的內容都需要進行驗證,輸入的數據符合要求,登錄按鈕才能夠提交數據。否則,在對應的文本框后面,顯示錯誤提示信息。

網頁前端技術的發展非常迅速,HTML5提供了 Canvas,使用Canvas能夠繪制各類圖形,也可以繪制圖片。驗證碼的繪制包括三個部分:繪制驗證碼字符串,繪制雜亂點,繪制線條。繪制一些雜亂點和線條,目的是增加識別的難度,雜亂點、線條的多少根據需要,太多,影響驗證碼的識別,太少,起不到識別的效果。

前后端不分離的網站,前端的HTML文件、后端的ashx、php、jsp等文件都在同一個項目里面,所有的網站相關的文件、資源都在同一個項目里面,都由后端服務器負責。通過服務器的內置對象、超鏈接等實現各個頁面之間的跳轉、數據的處理等各類操作。

由于前端框架的發展,出現了前后端分離的思想,隨著Ajax的出現,前后端分離才開始有了實現的基礎[1]。前后端分離的網站,前端的HTML文件、樣式文件、腳本文件、圖片等存放在一個單獨的項目里面。后端服務器項目,是獨立的項目,后端的各類服務器文件,如數據表對應的實體類、數據庫處理類、JSON類、數據表現層、數據操作層等各類文件,存放在項目里面。

Ajax的異步Get/Post請求,瀏覽器通過Ajax向服務器的URL地址提交數據,在Ajax的回調函數里面,接收服務器傳遞回來的數據[2]。由于前后端分離,遇到的第一個問題就是跨域問題??蛻舳说臄祿軌蛱峤坏椒掌?,服務器對提交的數據進行處理,處理完成以后,不管是成功還是失敗,都必須給客戶端一個反饋信息。在返回數據的時候,就報錯了,客戶端遇到跨域的問題??蛻舳四軌驅祿峤唤o服務器,但是,客戶端接收不到服務器的回傳信息??缬蚓褪峭ㄓ嶋p方協議要一致,如都是http協議,IP地址、端口都要一致,有一個不同,就涉及跨域。Ajax不能跨域,瀏覽器的安全限制,不允許訪問其他服務器上的JSON數據[3]。解決跨域問題有多種方式,方式一在服務器端響應對象的頭部設置為“*”,放行所有的請求。

2.2用戶登錄服務器端設計

ASP.NET基于.NET框架,可以創建功能強大、靈活和可靠的數據驅動應用程序,實現對SQL Server、Oracle等關系數據庫的訪問[4]。ASP.NET使用一般處理程序處理登錄界面提交的數據,后端處理程序一般都和數據庫打交道,按照B/S三層架構式設計思路,將前后端完全分離,前端與后端通過接口進行數據通信[5]。本程序使用三層架構設計。首先,設計數據庫類,用于處理數據表的添加、查找、更新、刪除等操作,這個類是網站服務器開發的基礎。其次,設計表現層UI、業務邏輯層BLL和數據訪問層DAL。三層架構中,是層層調用的關系,表現層調用業務邏輯層,業務邏輯層調用數據訪問層,數據訪問層DAL與數據庫類打交道。

網站是前后端分離的,前端數據的渲染,由前端負責,不用服務器后端處理。服務器端的三層架構中,表現層一般是HTML或ASP.NET文件,是用來展示信息的,屬于前端的范圍,既然服務器端不需要展示信息,就不用表現層,直接使用業務邏輯層,將前端的用戶名、密碼、用戶類型通過業務邏輯層,往下一層傳遞,由數據訪問層進行處理,將返回結果通過業務邏輯層帶回來。

前后端使用JSON格式的數據,服務器取出前端提交的用戶名、密碼等數據,通過sql查詢語句,在數據表里面,查詢是否有這樣的數據,有,查詢成功,返回1;沒有這條記錄,查詢失敗,返回-1。服務器端將返回數據包裝成JSON數據格式,返回給客戶端。JSON格式由三部分組成:code、data、msg。code =1,表示成功。= -1,表示失敗。data是返回的JSON格式的數據。msg是返回的信息,編程過程中,會遇到各種問題,后端開發人員需要將各種信息反饋給前端開發人員,由一個溝通的渠道,通過msg,告訴前端開發人員,遇到這些問題,該如何處理,如何在前端渲染。

3 用戶注冊

3.1用戶登錄界面

徐秋榕[6]通過對省級網上辦事系統的需求進行劃分,分為總體需求、公共服務需求等9個需求,通過需求分析,為項目開發提供理論依據和支持。本項目同樣采用需求分析的方法,對用戶注冊進行需求分析,以及后續的開發。用戶注冊界面,屬于添加頁面,注冊界面設計與數據表相關,一般數據表有什么字段,前端有對應的輸入框,用于錄入數據。在提交數據到服務器之前,需要對提交的數據進行正則表達式驗證。驗證成功,才能夠提交。使用Ajax的post方法,提交數據,在Ajax中取得返回的數據,如果注冊成功,跳轉到主頁面,如果注冊不成功,提示注冊不成功的錯誤信息,用戶根據提示信息,進行檢查,做后一步的處理。

3.2用戶注冊服務器端設計

每一個數據表都對應一個實體類,后端一般處理程序取得前端提交的數據,將數據打包為用戶實體類的變量,通過業務邏輯層,傳遞給數據訪問層,最后,接收數據訪問層返回處理的結果,組裝成JSON格式數據,返回給前端。在數據訪問層需要判斷數據表里是否有相同的用戶名,數據符合要求,添加到用戶表。在添加數據的時候,需要注意日期格式的數據。

4用戶信息處理

用戶信息的處理只能由管理員處理,其他用戶沒有權限管理。網站必須對密碼進行加密和解密處理,對涉及用戶信息修改的頁面進行驗證,有管理員權限的才能夠對頁面進行處理。用戶信息處理包含用戶信息的添加、查找、分頁瀏覽、更新、刪除操作。用戶信息的添加就是注冊操作,添加界面就不需要進行權限設置,任何人都可以注冊。

4.1用戶查找的界面設計

根據項目需求,設計用戶信息的查找,可以按照數據表的多個字段進行查詢。用得最多的查找,按照用戶名查找,本用戶信息表的查詢是按照用戶名查找的。使用Ajax的get方法,需要向服務器提交參數,參數的內容是用戶名變量,已經用戶名變量對應的數值。提交的參數格式可以是JSON格式。

有兩種方式,可以顯示從服務器接收的數據表里面的多條數據,一種方法是ul列表,一種是表格。網絡傳輸默認都使用JSON格式,因此,在Ajax的接收回調函數里面,接到的數據是JSON對象,直接就可以使用這個對象,例如:var obj = data.Data,通過該對象,就能夠獲取對象中的數值。操作DOM元素,顯示外部數據,使用jQuery相對簡單方便。先找到ul對象,例如:var? show= $("#show2"),找到id=show2的ul。其次,使用append方法,在ul對象中,添加li列表項,show.append("

  • " + obj.Name + '
  • ') 。如圖2所示,左邊顯示的是根據用戶名查詢到的結果,右邊是F12開發者工具獲取的接收數據。

    4.2用戶查找服務器設計

    用戶信息的查找一般根據用戶名查找,復雜一點,使用多字段查找。查找的SQL關鍵語句是 “select * from user where name=?name”。也可以使用like進行模糊查詢。調用MySqlCommand對象執行ExecuteReader方法,使用MySqlDataReader對象,讀取數據表里面的數據?;蚴褂肕ySqlDataAdapter數據適配器對象,使用DataSet數據集對象讀取數據表里面的數據。兩種方式都可以讀取數據表里面的數據。數據取出來以后,需要包裝成JSON格式,方便前端開發人員使用。

    4.3用戶信息顯示界面設計

    用戶信息是從服務器提取用戶數據表里面的所有數據,在前端顯示。和用戶查找的方式是相同的。唯一不同的地方是查找用戶表只是一條記錄,而用戶查找的結果是所有的記錄,是多條記錄。如圖3所示。多條記錄,使用JSON數組的形式接收。有11條記錄,展開,顯示每條記錄的數據,和數據表里面的數據是一致的。

    4.4用戶顯示服務器設計

    用戶信息是查詢用戶表的所有數據,查詢的結果,存放在List集合里面,最后將集合的數據打包成JSON數組的格式,傳回給客戶端。返回的數據如圖3所示。分頁功能比較復雜,需要從客戶端取出當前的頁數、每頁記錄數??蛻舳耸褂胮ost表單的方式提交,則服務器端使用context.Request[“currentPage”]的方式,取出提交的數據。如果使用get參數的方式提交,則服務器使用context.Request.QueryString[“currentPage”]。需要注意是get方式還是post方式,在服務器端,一定要取出當前頁數、每頁記錄數,這兩個重要的參數。分頁查詢使用limit 關鍵字,含義是從偏移量位置開始,取出多少條記錄,因此,偏移量=(當前頁數-1)*pageSize,得到偏移位置。執行sql 查詢語句,select? *? from? user order by id limit 偏移量,pageSize。執行sql語句后,得到查詢的結果,存放到list集合中,使用JSON工具,打包成JSON格式的數據,發送各客戶端。

    4.5用戶更新界面設計

    更新比較復雜,首先,使用Ajax從服務器接收數據,在瀏覽器上顯示,在瀏覽界面上,每一條記錄的前面有一個單選框或在記錄的后面有一個按鈕,單選鈕的value保存循環的序號。其次,通過選中的單選框或按鈕,將該條記錄的詳細信息顯示出來,該界面和添加界面相似。使用循環方式,判斷那個單選鈕被選中,取出選中單選鈕的數值,取出對應接收數據的JSON數組里面的數值,將數值賦給文本框對象,在頁面上的顯示。第三步,在更新界面修改數據后,使用Ajax的post方法,將數據提交到后臺服務器。最后在Ajax的回調函數里面,處理服務器返回的更新數據,一般更新成功,返回1,失敗,返回-1。具體返回什么數據,由后端開發人員確定。但是,一定要將返回的數據格式告訴前端開發人員。前端開發人員按照后端人員提供的數據,進行處理。前后端人員一定要有一個良好的溝通。

    總結一下,更新操作,首先,使用Ajax從服務器接收數據,在瀏覽器上顯示。其次,通過每一條記錄前面的單選框或按鈕,將選中的記錄,顯示在類似添加頁面的更新界面上。第三步,在更新界面上,修改數據,使用Ajax將 提交到后臺服務器。最后一步,Ajax接收服務器傳回來的數據,更加傳回來的數據,顯示更新后的數據。

    4.6用戶更新服務器設計

    更新后端程序的設計,首先,接收客戶端傳遞過來的id ,根據id查找該記錄,最后,將數據返回給客戶端,本次客戶端、服務器的通訊結束。服務器再次接收客戶端傳遞過來的用戶數據,執行更新的sql語句,處理完成。更新成功,返回包含1的JSON數據。更新失敗,返回包含-1的JSON數據。更新用戶表涉及兩次通訊,第一次,查詢id對應的用戶數據,返回給客戶端。第二次,接收客戶端提交的用戶數據,執行更新操作,更新結束,返回一個數值給客戶端。

    4.7用戶刪除界面設計

    刪除界面和更新界面相似,首先,使用Ajax顯示整個數據表,在每一條記錄的前面有一個復選框或后面有一個按鈕。其次,處理所有選中的復選框,將選中記錄的id打包成JSON數組格式,提交給服務器。第三,在Ajax的回調函數里面,處理服務器的返回數據,返回1,表示刪除成功,在頁面上顯示刪除以后的數據。刪除失敗,提示刪除失敗的信息。記錄仍然保持不變。

    4.8用戶刪除服務器設計

    刪除后端程序的設計,首先,接收客戶端提交過來的id數據,是一個數組,循環調用數組里面的id,執行刪除操作。再次,查找用戶表,將刪除后的數據表數據取出來,返回給客戶端。

    5結束語

    網站開發技術發展非常迅速,前后端分離,框架設計,各做各的事情,前端人員專注界面設計,后端人員考慮網站的效率、安全等,通過這種方式,開發的網站效率更高,能夠滿足客戶需求,網站更加安全。本項目通過用戶登錄操作,使用Ajax,實現了頁面設計和后端代碼的徹底分離,結構清晰,開發過程中,前端是界面設計、數據渲染、頁面美觀等;后端是數據的管理、數據安全防護等,方便前后端調試,相互不干擾,前后端同時開發,加快網站開發的速度。在后期網站維護過程中,方便排查錯誤,便于維護。

    參考文獻:

    [1] 蔡澤銘,王文華.基于Vue.js 的信息管理系統前端架構[J].電子技術與軟件工程,2020(18):142-144.

    [2] 傳智播客高教產品研發部.ASP.NET就業實例教程[M].北京:人民郵電出版社,2015.

    [3] 邵山歡.Jquery和Ajax實戰教程[M].北京:高等教育出版社,2019.

    [4] 許平順,孫首群,嚴亮.基于ASP.NET的管道事故管理系統設計與實現[J].軟件導刊,2021,20(4):150-153.

    [5] 馬漢達,方偉,洪華劍.實驗教學過程管理平臺設計與實現[J].軟件導刊,2021,20(5):114-117.

    [6] 徐秋榕.省級網上辦事系統的需求分析[J].福建電腦,2021(37):38-42.

    【通聯編輯:謝媛媛】

    猜你喜歡
    網絡
    網絡技術在高校體育教學中的應用發展對策
    充分利用網絡平臺 提高學生學習能力
    成人網絡遠程學習的有效性探析
    網絡讓語文教學充滿生機
    淺談網絡對高中生學習的影響
    現代信息環境下的德育教育改革研究
    由《春》的課堂設計來看網絡教學在語文學科中的運用
    論現代教育技術對傳統教學的影響
    妙用網絡調制心靈雞湯
    大學生網絡道德教育亟待加強