前言：本站為你精心整理了高職就業(yè)網(wǎng)站設(shè)計(jì)與開發(fā)探析范文，希望能為你的創(chuàng)作提供參考價(jià)值，我們的客服老師可以幫助你提供個(gè)性化的參考范文，歡迎咨詢。

摘要:當(dāng)前，高職學(xué)校的畢業(yè)生的就業(yè)形勢(shì)比較嚴(yán)峻，因而保障學(xué)生就業(yè)成為學(xué)校的重要工作。就業(yè)網(wǎng)站是促進(jìn)學(xué)生就業(yè)的一種方式。就業(yè)網(wǎng)站可以為學(xué)生就業(yè)提供一個(gè)平臺(tái)，能夠拓寬學(xué)生就業(yè)的渠道。本文構(gòu)建了一個(gè)幫助學(xué)生就業(yè)的網(wǎng)站。網(wǎng)站的建設(shè)采用前后端分離技術(shù)，以express框架構(gòu)成后臺(tái)服務(wù)器，以Vue作為前端界面。通過axios實(shí)現(xiàn)前后端數(shù)據(jù)的通訊。經(jīng)過一段時(shí)間的實(shí)際運(yùn)行，該網(wǎng)站為學(xué)生找工作提供了很大幫助，達(dá)到了預(yù)期的效果。

關(guān)鍵詞：分離技術(shù)；應(yīng)用程序開發(fā)框架；就業(yè)網(wǎng)站

1引言

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

2數(shù)據(jù)庫的設(shè)計(jì)

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

3企業(yè)網(wǎng)站后端的設(shè)計(jì)

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

3.1Express服務(wù)器的設(shè)計(jì)

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

3.2實(shí)現(xiàn)一條數(shù)據(jù)的添加

在添加一條路由函數(shù)里面，使用req對(duì)象的body屬性，取出Vue前端axios發(fā)送過來的post數(shù)據(jù)。這里，必須注意前端使用post方式發(fā)送數(shù)據(jù)，后端的路由使用req請(qǐng)求對(duì)象的body取出。調(diào)用自定義的數(shù)據(jù)庫的對(duì)象，實(shí)現(xiàn)數(shù)據(jù)的添加操作。如果添加成功，則返回?cái)?shù)值1的json數(shù)據(jù)；如果添加錯(cuò)誤，則返回-1的json數(shù)據(jù)。

3.3多條數(shù)據(jù)的添加

取出Vue前端axios發(fā)送過來的post數(shù)據(jù)。這是一個(gè)JSON數(shù)組格式的字符串，將它轉(zhuǎn)換為JSON數(shù)組對(duì)象，數(shù)組元素是一個(gè)company數(shù)據(jù)表對(duì)應(yīng)的數(shù)據(jù)?？梢允褂胕nsertintocompany(字段1，字段2，…字段n)values(“數(shù)值1”,“數(shù)值2”,…“數(shù)值n”),(“數(shù)值1”,“數(shù)值2”,…“數(shù)值n”),…,(“數(shù)值1”,“數(shù)值2”,…“數(shù)值n”)。使用這種方式，結(jié)合數(shù)組，循環(huán)取出讀取的JSON數(shù)據(jù)，將數(shù)據(jù)添加到values對(duì)應(yīng)的字段。通過這種方式，可以實(shí)現(xiàn)多條數(shù)據(jù)的添加。

3.4分頁的設(shè)計(jì)

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

3.5刪除數(shù)據(jù)的設(shè)計(jì)

普通的刪除操作比較簡單。根據(jù)id序號(hào)刪除的，在刪除路由函數(shù)里面，接收前端發(fā)送過來的要?jiǎng)h除的記錄的id，執(zhí)行刪除的sql語句，實(shí)現(xiàn)刪除。可以一次刪除多條記錄；也可以根據(jù)除id以外的其它字段進(jìn)行刪除；還可以使用多個(gè)字段、組合形式的刪除。如果刪除成功，則返回帶數(shù)值為1的json數(shù)據(jù)；如果刪除失敗，則返回?cái)?shù)值為-1的json數(shù)據(jù)。相對(duì)來說，根據(jù)id刪除一條記錄或刪除多條記錄，要測(cè)試的錯(cuò)誤少，給前端提供的接口也比較簡單。

3.6更新的數(shù)據(jù)

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

4企業(yè)網(wǎng)站前端設(shè)計(jì)

隨著Ajax的出現(xiàn)，前后端分離才有實(shí)現(xiàn)的基礎(chǔ)[8]。網(wǎng)站的前端使用Vue框架進(jìn)行設(shè)計(jì)。其優(yōu)點(diǎn)是輕量級(jí)、數(shù)據(jù)綁定、指令和插件[9]，例如：Vue通過數(shù)據(jù)的雙向綁定功能，數(shù)據(jù)發(fā)生變化時(shí)，視圖發(fā)生變化；視圖發(fā)生變化，對(duì)應(yīng)的數(shù)據(jù)也發(fā)生變化。Vue使用插件對(duì)Vue框架進(jìn)行擴(kuò)展，使得網(wǎng)站前端的開發(fā)變得簡單、高效，提升了前端開發(fā)的效率。

4.1創(chuàng)建Vue項(xiàng)目

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

4.2使用excel插件

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

4.3前端的分頁設(shè)計(jì)

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

4.4前端的刪除設(shè)計(jì)

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

4.5前端的更新設(shè)計(jì)

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

5結(jié)語

本文使用Node的express構(gòu)建后臺(tái)服務(wù)器，結(jié)合路由、MySql數(shù)據(jù)庫插件、Excel插件等組件，構(gòu)成一個(gè)后臺(tái)服務(wù)器。使用Vue項(xiàng)目構(gòu)成前端，使用axios實(shí)現(xiàn)前后端數(shù)據(jù)的通訊，從而實(shí)現(xiàn)高職學(xué)生就業(yè)網(wǎng)站的開發(fā)，具有一定的實(shí)際應(yīng)用價(jià)值。

作者:朱克武 單位:廣東食品藥品職業(yè)學(xué)院