前言：本站為你精心整理了高職就業網站設計與開發探析范文，希望能為你的創作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

摘要:當前，高職學校的畢業生的就業形勢比較嚴峻，因而保障學生就業成為學校的重要工作。就業網站是促進學生就業的一種方式。就業網站可以為學生就業提供一個平臺，能夠拓寬學生就業的渠道。本文構建了一個幫助學生就業的網站。網站的建設采用前后端分離技術，以express框架構成后臺服務器，以Vue作為前端界面。通過axios實現前后端數據的通訊。經過一段時間的實際運行，該網站為學生找工作提供了很大幫助，達到了預期的效果。

關鍵詞：分離技術；應用程序開發框架；就業網站

1引言

高職學生就業主要是通過學校組織的招聘會、網上投簡歷等方式。這種就業模式存在一定的局限性，在學生面試之前，學生、企業互不了解。因此，有必要提供一個供需平臺，讓學生、企業可以盡早進行溝通、了解。通過該網站平臺，企業能夠招聘到適合的學生，學生能夠找到滿意的工作。目前，網站的前后端分離開發技術比較流行，前端開發人員注重網站的布局、美化設計，后端開發人員實現網站的各種功能，提供給前端需要的各種類型的接口。這種基于前后端分離的內容管理系統為使用人員提供更加便捷的跨平臺的內容管理服務[1]，提高網站的開發效率。Node和vue就是前后端分離的技術之一，本文使用Node和Vue進行項目開發。

2數據庫的設計

網站開發的第一步，就是數據庫的設計。MySQL作為數據存儲和管理的數據庫，由于其速度快、體積小，一般中小型網站的后臺數據庫開發都選擇MySQL[2]。網站數據庫主要使用數據表，視圖、存儲過程等較少使用。因此，數據庫的設計也是數據表的設計。數據表的設計主要包括數據表字段的設置，以及需要哪些字段、字段的數據類型。數據表字段的設置一般根據查詢企業信息的需求進行設計的，如需要查詢企業的名稱、企業的位置、企業的性質、負責人、聯系電話、企業的介紹、招聘崗位、招聘人數、招聘要求等。考慮到企業數據多，因此需要對數據進行分析、分類。如果數據沒有重復，則可以考慮將所有數據保存到同一張數據表里。此外，還可以將企業信息分成多張數據表。例如：將企業的基本信息做成一張數據表，企業的招聘信息做成一張數據表。根據企業數據的具體情況進行分析，設計幾張數據表。如果有多張數據表，必須要注意數據表之間的關聯，要能夠根據一張數據表的關鍵字，找到另一個數據表對應的記錄。關聯的數據表最好不要太多，否則給設計帶來非常大的麻煩。當對一張數據表的數據進行更新、刪除的時候，需要考慮關聯的數據表是否需要更新、刪除。數據庫的設計是基礎、核心，本項目企業的數據表只有一個，所有企業的信息，都存放在一張數據表里面。

3企業網站后端的設計

Express是一個簡潔而靈活的Node.jsWeb應用框架[3]。它通過中間件和路由使應用程序的組織和管理更加容易，提供豐富的HTTP工具，讓動態視圖渲染更加方便[4]。服務器必須能夠連接數據庫，因此，需要加載MySql。前后端分離設計，涉及瀏覽器的跨域問題，需要加載cors插件。表單的提交，需要加載body-parser。在實際的開發過程中，根據需要的功能，加載對應的插件。

3.1Express服務器的設計

使用Expess命令創建服務器的工作流程[5]：（1）創建Express對象。（2）創建企業數據訪問路由對象，Router對象相當于一個中間件容器[6]，處理get/post等請求。（3）服務器對象加載body-parser對象、加載cors對象。（4）將企業的url訪問地址與路由對象綁定，通過路由訪問對應的請求。同時，一定要注意跨域對象的加載次序，必須在路由對象綁定的前面，如果次序錯誤，仍然會出現跨域的問題。（5）啟動監聽。主要代碼是app.listen(0)，在0端口偵聽所有客戶端的連接請求。服務器啟動以后，主要的操作是在路由里面。在路由模塊中，根據Node.js的單線程、異步I/O、基于事件驅動的特點[7]，路由對象使用Promise，對MySql數據表進行各種操作，實現數據表的添加、瀏覽、更新、刪除、操作等操作。

3.2實現一條數據的添加

在添加一條路由函數里面，使用req對象的body屬性，取出Vue前端axios發送過來的post數據。這里，必須注意前端使用post方式發送數據，后端的路由使用req請求對象的body取出。調用自定義的數據庫的對象，實現數據的添加操作。如果添加成功，則返回數值1的json數據；如果添加錯誤，則返回-1的json數據。

3.3多條數據的添加

取出Vue前端axios發送過來的post數據。這是一個JSON數組格式的字符串，將它轉換為JSON數組對象，數組元素是一個company數據表對應的數據。可以使用insertintocompany(字段1，字段2，…字段n)values(“數值1”,“數值2”,…“數值n”),(“數值1”,“數值2”,…“數值n”),…,(“數值1”,“數值2”,…“數值n”)。使用這種方式，結合數組，循環取出讀取的JSON數據，將數據添加到values對應的字段。通過這種方式，可以實現多條數據的添加。

3.4分頁的設計

分頁瀏覽主要是首頁、上一頁、下一頁、最后一頁。通過這四個按鈕，實現分頁功能。分頁功能由兩個路由函數實現。第一個路由函數使用sql的查詢語句，selectcount(*)fromaskkcompany，通過sql的query函數調用，取出數據表里面的記錄數。使用JSON.parse(JSON.stringify(返回值))[0].kk，取出記錄數。使用res.send方法，將記錄數返回給前端。第二個路由函數，使用req請求對象，取出前端發送當前頁、每頁記錄數兩個數據。要注意前端是get方法還是post方法。get方法需要使用params參數的形式發送數據。服務器的路由函數使用對應的get方法或post方法，取出數據。前后端必須使用相同的方法，否則，接收不到數據。使用select的limit方法，取得分頁的記錄。查詢語句是select*fromcompanyorderbyidlimitoffset,pageSize。需要根據分頁數，計算offset記錄偏移量。offset=(當前頁數-1)*pageSize。查詢結果是從指定的偏移量位置，取出pageSize記錄。這是多條記錄。使用JSON數組的格式，將數據返回給客戶端。這個返回數據的接口，必須考慮多種情況。若查詢成功，則返回JSON數組給客戶端；查詢失敗，則sql語句錯誤，將錯誤信息返回給客戶端。錯誤類型有多種情況，如沒有接收到數據、接收的分頁數不是整數、sql語句寫錯、offset偏移量為負值等。需要對各種錯誤進行測試，盡量在網站運行前，解決出現的錯誤。

3.5刪除數據的設計

普通的刪除操作比較簡單。根據id序號刪除的，在刪除路由函數里面，接收前端發送過來的要刪除的記錄的id，執行刪除的sql語句，實現刪除。可以一次刪除多條記錄；也可以根據除id以外的其它字段進行刪除；還可以使用多個字段、組合形式的刪除。如果刪除成功，則返回帶數值為1的json數據；如果刪除失敗，則返回數值為-1的json數據。相對來說，根據id刪除一條記錄或刪除多條記錄，要測試的錯誤少，給前端提供的接口也比較簡單。

3.6更新的數據

更新數據和刪除數據相似，都是在分頁的頁面上進行操作。使用element-ui插件，能夠快速搭建表格，使用數據的綁定，非常方便地顯示服務器發送的數據。在前端分頁的頁面上，在表格的單元格里添加按鈕。在按鈕的單擊事件里實現路由頁面的跳轉，跳轉到更新vue界面。在更新界面，完成該條記錄的編輯。使用axios的post方式，提交數據到服務器。服務器端更新路由與添加路由相似，取出提交的數據，使用updatecompany語句，實現數據的更新操作。將更新后的信息返回給前端。同樣，需要將返回數據的接口，提供給前端設計人員。

4企業網站前端設計

隨著Ajax的出現，前后端分離才有實現的基礎[8]。網站的前端使用Vue框架進行設計。其優點是輕量級、數據綁定、指令和插件[9]，例如：Vue通過數據的雙向綁定功能，數據發生變化時，視圖發生變化；視圖發生變化，對應的數據也發生變化。Vue使用插件對Vue框架進行擴展，使得網站前端的開發變得簡單、高效，提升了前端開發的效率。

4.1創建Vue項目

在VSCode編譯器的終端里面，使用npm創建Vue項目。根據創建項目的提示步驟進行安裝。使用npmrunserve啟動項目。項目創建完成后，有默認的home.vue、about.vue兩個文件模板。對App.vue進行修改，刪除模板中的默認內容，保留router-view，用于Vue的視圖顯示。Vue開發的主要內容之一是創建Vue文件。新建的Vue文件由template、script、style三部分組成[2]。template是界面，用于頁面的布局；script是js腳本控制；style是界面的樣式。在路由文件里面，設置創建的vue文件，實現vue文件在瀏覽器上的顯示。因此，Vue開發的一個核心內容，是創建vue文件。在路由文件里面，配置創建的vue文件。項目啟動后，在瀏覽器上，能夠顯示vue文件。

4.2使用excel插件

數據添加的頁面，使用表單控件中的文本框、按鈕等進行數據添加。例如用戶注冊界面，就是添加界面，將頁面上的數據錄入完成后進行提交，才能夠將數據提交到后臺服務器。如果使用這種頁面添加企業數據的方式，要一條記錄一條記錄地添加，效率慢，且在錄入的數據過程中，若出現錄入錯誤，還需要修改、重新輸入。因此，當添加大量數據時候，不推薦使用這種頁面錄入的添加方式。Excel是專門進行數據處理的軟件，方便用戶對數據進行處理、編輯。首先，準備好excel數據，加載excel插件，有多種excel插件可以使用。如安裝xlsx插件，安裝的方式是：npminstallxlsx–save。在vue頁面里面，需要使用file控件。在file控件中添加change事件。在事件對應的函數里，第一步，取出excel文件。第二步，創建FileReader對象。第三步，應用FileReader對象ReadAsBinaryString方法，讀取excel文件。第四步，調用FileReader對象的異步onload方法，重點是onlaod方法的參數e.target.result，參數的target對象的result屬性。如果excel文件讀取成功，則result有很多數據。如果讀取失敗，則result有少量的數據。第五步，引入xlsx對象，使用該對象的read方法，讀取result，轉換為excel工作簿對象。第六步，通過工作簿對象的utils.sheet_to_json方法，將工作表里面的數據，轉換為json格式的數據，將excel數據讀取出來。第七步，將json數據存放到data的變量中。第八步，調用axios的post方法，將json數據發送給服務器。使用xlsx插件對excle文件的數據進行處理非常方便。需要注意的是，一定要取出file控件的excle文件，讀取文件數據成功。在FileReader對象的異步onload方法里，e.target.result參數要有數據。通過xlsx插件的read方法，創建工作簿對象，將工作表的數據取出來，轉換為json格式的數據。Axios是一個基于Promise的HTTP庫、用于瀏覽器和Node.js的HTTP客戶端。Axios的異步Get/Post請求，瀏覽器通過Axios向服務器的URL地址提交數據[]，請求方法中，第一個參數是url，服務器的處理excel添加對應的地址；第二個參數是json數據。在axios的then方法中，有resolve成功的回調函數，有reject失敗的回調函數。根據resolve回調函數的返回值判斷是否成功。如果返回的數值是1，狀態碼是，表示數據添加成功。如果是其它數值，需要使用chrome瀏覽器的F12，進行調試，查找錯誤的原因。chrome瀏覽器的F12調試窗口非常重要，需要熟練掌握network網絡窗口，查看url地址、參數是否正確，查看網絡headers數據頭。使用console控制臺，查看輸出的變量，一般通過打印變量來查看變量的數值，判斷程序運行的流程。使用source，在js代碼窗口里面設置斷點，使用debug調試js程序。

4.3前端的分頁設計

前端的分頁設計使用element-ui，能夠提高開發效率。在data里面，需要使用tablData變量，接收服務器傳遞過來的記錄數據。記錄數據有總記錄數、當前頁數、總頁數、每頁記錄數等變量。第一步，在mounted掛載方法里使用axios，調用數據表總的記錄數方法，取出總的記錄數。根據總的記錄數、每頁的記錄數，計算出總頁數。在界面上，通過數據綁定，顯示當前頁、總頁數等數據。第二步，在mounted掛載方法里使用axios，調用分頁函數，取出第一頁的數據，將數據保存在tableData數組，通過數據綁定，在表格上顯示記錄。第三步，在頁面上添加首頁、上一頁、下一頁、尾頁四個按鈕。首頁函數里面，當前頁為1，調用axios，將當前頁、每頁記錄數發給服務器。上一頁函數里面，判斷當前頁是否大于1。如果大于1，則當前頁-1，將數據發送給服務器；如果不大于1，則不用發送axios，當前頁為1。在下一頁函數里，判斷當前頁是否小于總頁數。如果小于總頁數，則當前頁+1，將數據發給服務器；如果不小于總頁數，則不發送，當前頁為總頁數。尾頁函數里面，當前頁為總頁數，發送數據給服務器。第四步，通過axios的then的resolve接收服務器發送過來的數據。必須使用F12的調試，打印resolve的返回值，返回數據的個數、變量的名稱。將數據保存到tableData對象，實現數據的顯示。

4.4前端的刪除設計

在分頁界面上，一次刪除一條記錄。在每條記錄后面的單元格里，添加一個刪除按鈕。element-ui的表格提供一個例子，直接使用例子的按鈕事件。@click=fun(scope.row)，scope.row參數就是表格選中的某一行的行號對象，取出row對象里的id數值，通過axios將id發送給服務器。接收服務器傳遞的數據，重新發送分頁數據，然后顯示刪除后的數據。

4.5前端的更新設計

更新的前端設計頁數在分頁的頁面上，添加更新按鈕更新數據，一次更新一條記錄。取出選中行的row參數，通過動態路由this.$router.push方法，跳轉到更新頁面。在更新頁面，完成對數據的更新。使用axios提交數據給服務器。提交數據的過程和添加的過程相似。接收服務器傳遞的數據，將更新后的數據顯示在頁面上。

5結語

本文使用Node的express構建后臺服務器，結合路由、MySql數據庫插件、Excel插件等組件，構成一個后臺服務器。使用Vue項目構成前端，使用axios實現前后端數據的通訊，從而實現高職學生就業網站的開發，具有一定的實際應用價值。

作者:朱克武 單位:廣東食品藥品職業學院