基于Django與Vue的農(nóng)產(chǎn)品質(zhì)量追溯管理平臺(tái)

謝曉偉 包琦

（江蘇農(nóng)牧科技職業(yè)學(xué)院 江蘇省泰州市 225300）

食品質(zhì)量安全關(guān)系到千家萬(wàn)戶，然而最近幾年一些不法商人唯利是圖，先后制造了“三聚氰胺”、“蘇丹紅”等“毒食品”事件，農(nóng)產(chǎn)品質(zhì)量問(wèn)題也是層出不窮，嚴(yán)重危害了人民群眾的身體健康，甚至危及生命。追溯系統(tǒng)被用于解決這一問(wèn)題，從20世紀(jì)80年代作為質(zhì)量管理的有效措施引入食品工業(yè)，到目前為止，已經(jīng)有歐盟、美國(guó)、加拿大、澳大利亞等國(guó)相繼建立了農(nóng)產(chǎn)品及食品追溯系統(tǒng)。我國(guó)政府對(duì)此項(xiàng)工作也是十分重視，要求建設(shè)采集記錄產(chǎn)品生產(chǎn)、流通、消費(fèi)等環(huán)節(jié)信息，實(shí)現(xiàn)來(lái)源可查、去向可追、責(zé)任可究，強(qiáng)化全過(guò)程質(zhì)量安全管理與風(fēng)險(xiǎn)控制的追溯體系，農(nóng)產(chǎn)品是納入其中管理的重要商品。江蘇省農(nóng)產(chǎn)品質(zhì)量追溯管理工作起源于2012年，農(nóng)產(chǎn)品質(zhì)量追溯管理平臺(tái)作為農(nóng)產(chǎn)品質(zhì)量安全管理的重要手段，實(shí)現(xiàn)了農(nóng)產(chǎn)品“生產(chǎn)有記錄、流向可追蹤、質(zhì)量可追溯、責(zé)任可界定”的追溯管理理念。

本研究基于筆者參研的江蘇省農(nóng)產(chǎn)品質(zhì)量追溯管理平臺(tái)項(xiàng)目，將農(nóng)產(chǎn)品生產(chǎn)戶納入系統(tǒng)管理，以農(nóng)產(chǎn)品生產(chǎn)環(huán)節(jié)為鏈條，形成以責(zé)任主體和生產(chǎn)管理為核心，以掃碼交易記錄產(chǎn)品流通信息，以提供入市追溯憑證為市場(chǎng)準(zhǔn)入條件，構(gòu)建從產(chǎn)地到市場(chǎng)到餐桌的全程可追溯體系。平臺(tái)采用Django與Vue的框架，通過(guò)前后端分離的形式，搭建Web項(xiàng)目，最終實(shí)現(xiàn)“后端提供API接口，前端調(diào)用AJAX實(shí)現(xiàn)數(shù)據(jù)呈現(xiàn)”的目標(biāo)，構(gòu)建起一個(gè)無(wú)需服務(wù)器端渲染就可以展示的網(wǎng)站，網(wǎng)頁(yè)加載更加快速，開(kāi)發(fā)和維護(hù)成本顯著降低，效率明顯提升。

1 技術(shù)理論

1.1 Django 框架

Django框架，作為Python功能最完整的Web框架，定義了服務(wù)發(fā)布、路由映射、模板編程、數(shù)據(jù)處理等一整套功能，模塊之間緊密耦合。Django框架借鑒了經(jīng)典的MVC模式，將交互的過(guò)程分為三個(gè)層次，也就是MVT設(shè)計(jì)模式，即Model（數(shù)據(jù)存儲(chǔ)層），處理所有數(shù)據(jù)相關(guān)業(yè)務(wù)，負(fù)責(zé)與數(shù)據(jù)庫(kù)進(jìn)行交互，提供數(shù)據(jù)的增刪改查；Template（模板層）具體負(fù)責(zé)處理頁(yè)面顯示；View（業(yè)務(wù)邏輯層）處理具體的業(yè)務(wù)邏輯，起到了連通 Model和Template的作用。

1.2 Vue框架

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，它是采用一種自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue是輕量級(jí)的，擁有很多的獨(dú)立功能和庫(kù)，Vue的核心庫(kù)只關(guān)注圖層，它的漸進(jìn)式表現(xiàn)為：聲明式渲染——組件系統(tǒng)——客戶端路由——大數(shù)據(jù)狀態(tài)管理——構(gòu)建工具。Vue框架中的兩個(gè)核心點(diǎn)：一是響應(yīng)式數(shù)據(jù)綁定，利用Object.definedProperty 中的setter/getter 代理數(shù)據(jù)，對(duì)數(shù)據(jù)操作進(jìn)行監(jiān)控，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue自動(dòng)更新視圖；二是組合的視圖組件，利用Vue組件封裝方法將常用的代碼封裝成組件后，提高代碼可重用性，降低數(shù)據(jù)之間的耦合度。

2 系統(tǒng)總體設(shè)計(jì)

2.1 系統(tǒng)總體框架

系統(tǒng)體系結(jié)構(gòu)中分為四層，分別是硬件層、數(shù)據(jù)層、應(yīng)用層和服務(wù)層，各層之間具有相互的獨(dú)立性，其中硬件層包括了基礎(chǔ)硬件設(shè)施和網(wǎng)絡(luò)，數(shù)據(jù)層包括了各類基礎(chǔ)數(shù)據(jù)的存儲(chǔ)，應(yīng)用層包括了應(yīng)用系統(tǒng)的各模塊功能，組成應(yīng)用系統(tǒng)，服務(wù)層整合應(yīng)用系統(tǒng)功能，對(duì)外提供訪問(wèn)服務(wù)。系統(tǒng)體系結(jié)構(gòu)圖見(jiàn)圖1。

圖1：系統(tǒng)體系結(jié)構(gòu)圖

2.2 硬件層

硬件層包含了系統(tǒng)部署的硬件服務(wù)器、農(nóng)殘檢測(cè)儀、二維碼掃碼槍等硬件設(shè)備，以及本系統(tǒng)的網(wǎng)絡(luò)部署，是系統(tǒng)的最底層，為本系統(tǒng)提供各類硬件設(shè)備和網(wǎng)絡(luò)資源的保障，本層的主要任務(wù)是確保系統(tǒng)穩(wěn)定運(yùn)行。

2.3 數(shù)據(jù)層

數(shù)據(jù)庫(kù)層包含了系統(tǒng)中采集和生成的各類數(shù)據(jù)，本系統(tǒng)采用MySQL5.7數(shù)據(jù)庫(kù)，記錄了系統(tǒng)中一些屬性數(shù)據(jù)（如主體信息、人員信息等）以及一些矢量數(shù)據(jù)（如地塊信息等）。數(shù)據(jù)層的任務(wù)主要是設(shè)計(jì)并建立農(nóng)產(chǎn)品質(zhì)量追溯管理平臺(tái)數(shù)據(jù)庫(kù)，首先確定所有數(shù)據(jù)類型及特征，制定地塊編號(hào)等表達(dá)規(guī)范使其與農(nóng)產(chǎn)品信息唯一對(duì)應(yīng)，然后對(duì)數(shù)據(jù)進(jìn)行測(cè)試、優(yōu)化與維護(hù)，建立包含人員、地塊、產(chǎn)品、作業(yè)、檢測(cè)等各類業(yè)務(wù)的綜合數(shù)據(jù)庫(kù)。

2.4 應(yīng)用層

應(yīng)用層按照用戶需求，將具體業(yè)務(wù)要求功能化，這一層也是充分體現(xiàn)了利用Django與Vue框架實(shí)現(xiàn)前后端分離的意義。以Node.js為核心的Vue.js前端技術(shù)架構(gòu)的應(yīng)用，增加Node.js之后，瀏覽器便不再直接請(qǐng)求服務(wù)端的API，而是由Node.js對(duì)服務(wù)端API發(fā)起HTTP請(qǐng)求，Node.js收到服務(wù)端API的響應(yīng)，得到返回的JSON數(shù)據(jù)后進(jìn)行HTML頁(yè)面的渲染，最后Node.js直接將HTML頁(yè)面刷新到瀏覽器，所以瀏覽器得到的就是普通HTML頁(yè)面，不需要在發(fā)AJAX去請(qǐng)求服務(wù)器之后再進(jìn)行頁(yè)面渲染了，這樣一來(lái)適配性、響應(yīng)速度和性能都大大得到了提升。

2.5 服務(wù)層

服務(wù)層主要任務(wù)就是對(duì)用戶部署服務(wù)，用戶可以通過(guò)系統(tǒng)服務(wù)和權(quán)限操作各類數(shù)據(jù)。本系統(tǒng)的用戶請(qǐng)求示意如圖2所示。

圖2：用戶請(qǐng)求頁(yè)面示意圖

3 系統(tǒng)功能設(shè)計(jì)

3.1 總體功能

系統(tǒng)根據(jù)用戶需求，設(shè)計(jì)各類功能，分為責(zé)任主體和管理員，各自具有不同的功能模塊，管理員身份的總體功能設(shè)計(jì)圖見(jiàn)圖3所示。

圖3：系統(tǒng)功能結(jié)構(gòu)圖（以管理員身份）

3.2 相關(guān)功能介紹

3.2.1 生產(chǎn)經(jīng)營(yíng)主體

生產(chǎn)經(jīng)營(yíng)主體是系統(tǒng)數(shù)據(jù)錄入的第一步，對(duì)于生產(chǎn)經(jīng)營(yíng)主體通過(guò)農(nóng)產(chǎn)品質(zhì)量追溯管理平臺(tái)登記其主體信息后，管理員可以通過(guò)該功能查看生產(chǎn)經(jīng)營(yíng)主體登記的信息，并對(duì)其進(jìn)行審核操作；同時(shí)也可以根據(jù)情況，對(duì)其做監(jiān)管對(duì)象管理，包括生成監(jiān)管對(duì)象、綁定監(jiān)管對(duì)象和解除監(jiān)管對(duì)象。本功能支持管理員查看生產(chǎn)經(jīng)營(yíng)主體信息、審核生產(chǎn)經(jīng)營(yíng)主體、注銷生產(chǎn)經(jīng)營(yíng)主體和刪除生產(chǎn)經(jīng)營(yíng)主體。

3.2.2 追溯查詢

對(duì)于已經(jīng)生成追溯碼的生產(chǎn)經(jīng)營(yíng)主體及其農(nóng)產(chǎn)品可以根據(jù)標(biāo)簽打印、追溯批次、合格證打印從時(shí)間和企業(yè)兩個(gè)不同維度對(duì)追溯情況進(jìn)行查詢，按照區(qū)域、主體名稱、產(chǎn)品名稱、追溯碼、打印日期、打印數(shù)量等展示，同時(shí)可以針對(duì)某一條記錄進(jìn)行詳細(xì)查看操作，可以查看產(chǎn)品信息，包括產(chǎn)品詳情、質(zhì)檢信息、生產(chǎn)記錄圖片等，還可以查看企業(yè)信息、監(jiān)督檢查，包括監(jiān)管記錄和產(chǎn)品抽檢等信息。

3.2.3 機(jī)構(gòu)代檢錄入

對(duì)于機(jī)構(gòu)代檢的農(nóng)產(chǎn)品，提供代檢機(jī)構(gòu)錄入，主要錄入數(shù)據(jù)項(xiàng)為主體名稱、檢測(cè)單位、送檢單位、樣品名稱、代檢日期、是否肺炎專用檢測(cè)、代檢人員姓名，并提供代檢人員的手寫(xiě)簽名。

管理平臺(tái)具有很多項(xiàng)功能，在這里挑選幾個(gè)功能簡(jiǎn)要介紹，其他的不再贅述。

4 系統(tǒng)實(shí)現(xiàn)

4.1 數(shù)據(jù)庫(kù)設(shè)計(jì)與實(shí)現(xiàn)

系統(tǒng)數(shù)據(jù)庫(kù)的結(jié)構(gòu)很大程度上決定了系統(tǒng)的結(jié)構(gòu)和功能的實(shí)現(xiàn)，設(shè)計(jì)時(shí)不能僅僅停留于頁(yè)面demo的表面，需要考慮效率和優(yōu)化，設(shè)計(jì)合理表關(guān)聯(lián)，添加必要冗余字段。本研究采用了MySQL數(shù)據(jù)庫(kù)，設(shè)計(jì)了生產(chǎn)經(jīng)營(yíng)主體信息表、地塊信息表、人員管理信息表、客戶管理信息表、產(chǎn)品管理信息表、作業(yè)類別表、農(nóng)事管理信息表、農(nóng)產(chǎn)品檢測(cè)信息表、檢測(cè)單位信息表、追溯信息表等等。系統(tǒng)數(shù)據(jù)庫(kù)部分?jǐn)?shù)據(jù)表間關(guān)系見(jiàn)圖4。

圖4：部分?jǐn)?shù)據(jù)表間關(guān)系

4.2 前端設(shè)計(jì)與實(shí)現(xiàn)

系統(tǒng)前端采用Visual Studio Code編程，基于Vue框架，引入Element UI組件，實(shí)現(xiàn)前端編程。

4.2.1 Vue前端項(xiàng)目構(gòu)建

首先，我們采用NPM安裝Vue-cli腳手架工具，安裝完成后在project項(xiàng)目根目錄下，創(chuàng)建一個(gè)前端工程目錄，進(jìn)入目錄，通過(guò)運(yùn)行命令NPM安裝Vue所需要的Node依賴。在src/component文件夾下新建一個(gè)名為Subject.vue的組件，通過(guò)調(diào)用在Django上寫(xiě)好的API，實(shí)現(xiàn)增加生產(chǎn)經(jīng)營(yíng)主體的功能。在前端工程目錄下，輸入npm run dev啟動(dòng)Node自帶的服務(wù)器，瀏覽器會(huì)自動(dòng)打開(kāi)，即可看到頁(yè)面。

4.2.2 引入Element UI

Element UI是餓了么前端開(kāi)發(fā)團(tuán)隊(duì)推出的一套基于Vue.js2.0的桌面組件庫(kù)，它可以方便地為開(kāi)發(fā)者提供管理系統(tǒng)UI控件。我們把依賴包下載下來(lái)，可以在node_modules里面找到，引入方式是通過(guò)在main.js里做全局引入，這樣整個(gè)Vue項(xiàng)目都可以使用Element里提供的各類主題樣式和組件。

4.3 后端設(shè)計(jì)與實(shí)現(xiàn)

后端采用PyCharm編程，使用Python語(yǔ)言，基于Django框架。以增加經(jīng)營(yíng)主體信息為例，根據(jù)以下步驟，完成后端的設(shè)計(jì)：首先是創(chuàng)建項(xiàng)目project，然后進(jìn)入項(xiàng)目根目錄創(chuàng)建一個(gè)app，在settings.py配置文件中，把默認(rèn)的sqllite3數(shù)據(jù)庫(kù)換成MySQL數(shù)據(jù)庫(kù)，并把a(bǔ)pp加入installed_apps列表中。

在app目錄下的models.py里寫(xiě)一個(gè)model，將經(jīng)營(yíng)主體信息表信息逐一寫(xiě)入數(shù)據(jù)庫(kù)；在app目錄下的views里增加兩個(gè)接口，一個(gè)show_subject返回所有經(jīng)營(yíng)主體信息列表，通過(guò)JsonResponse返回能夠被前端所識(shí)別的json數(shù)據(jù)，供前端展現(xiàn)，一個(gè)是add_subject接受一個(gè)get請(qǐng)求，往數(shù)據(jù)庫(kù)中添加一條經(jīng)營(yíng)主體信息。這一步我們可以看出，接口實(shí)際不需要自己去組織SQL代碼，可以借助ORM方便實(shí)現(xiàn)數(shù)據(jù)操作。

最后在app目錄下，新增一個(gè)urls.py文件，將我們上面完成的show_subject和add_subject兩個(gè)接口加到路由中，同時(shí)將app下的urls添加到project下的urls中，完成路由配置，這樣完成增加經(jīng)營(yíng)主體信息后端開(kāi)發(fā)。

4.4 整合Django和Vue

在前后端分別完成了Vue和Django的創(chuàng)建，但是實(shí)際上二者仍然是運(yùn)行在各自的服務(wù)器及端口上，需要將二者進(jìn)行整合，因此我們需要把Django中的Template、View指向生成的前端dist文件中。找到project項(xiàng)目目錄中的urls.py，使用通過(guò)視圖創(chuàng)建最簡(jiǎn)單的模板控制器，訪問(wèn)“/”時(shí)直接返回index.html，在project目錄下settings.py中增加DIRS，使Django能夠知道從哪里找到index.html，同時(shí)同樣在settings.py里配置靜態(tài)文件搜索路徑STATICFILES_DIRS。至此，就完成Django和Vue的整合，配置完成后，在project目錄下輸入命令python manage.py runserver即可打開(kāi)服務(wù)頁(yè)面，并且是Django的服務(wù)端口8080。

4.5 前后端數(shù)據(jù)交互

前端與后端的數(shù)據(jù)交互通過(guò)Ajax實(shí)現(xiàn)，我們采用Axios來(lái)完成，它是一個(gè)基于Promise的Http庫(kù)，實(shí)現(xiàn)的方法是在前端Vue中先使用npm install axios來(lái)安裝Axios，然后將需要數(shù)據(jù)交互的函數(shù)在js的methods中定義，標(biāo)準(zhǔn)的寫(xiě)法如下：

Axios

.get/post(請(qǐng)求的URL)

.then(成功后執(zhí)行的操作）

.catch(失敗后執(zhí)行的操作)

前后端分離的情況下，Ajax數(shù)據(jù)交互會(huì)出現(xiàn)CORS policy的錯(cuò)誤，這是因?yàn)榍昂蠖朔蛛x前端與后端的服務(wù)器不在同一個(gè)域中，Ajax請(qǐng)求的目標(biāo)地址非本域的Web資源，出現(xiàn)了跨域的錯(cuò)誤，這主要從安全的角度出發(fā)，防止跨站的攻擊。要解決這個(gè)問(wèn)題，可以從前端和后端分別解決，前端是采用jsonp的方式，后端有CORS專門(mén)的解決方案，Django框架中通過(guò)django-cos-header解決。我們采用后端解決方式，具體的步驟如下：首先是安裝，用pip install django-cos-header實(shí)現(xiàn)django-cos-header的安裝；然后是注冊(cè)，將其注冊(cè)到project目錄下settings.py的installed_apps中；接著是添加中間件，將’corsheader.middleware.CorsMiddleware’添加到settings的MIDDLEWARE中；最后是添加Cors配置，先設(shè)置白名單，通過(guò)CORS_ORIGHT_WHITELIST來(lái)指定前端IP地址和端口，再設(shè)置Cors的cookie的配置，通過(guò)CORS_ALLOW_CREDENTIALS =True/False來(lái)指明跨域訪問(wèn)中后端是否支持對(duì)cookie的操作。

5 結(jié)論

本研究利用Django和Vue框架構(gòu)建了一種前后端分離的Web開(kāi)發(fā)項(xiàng)目，基于江蘇省農(nóng)產(chǎn)品質(zhì)量追溯管理平臺(tái)業(yè)務(wù)需求，完成了江蘇省農(nóng)產(chǎn)品在生產(chǎn)、流通、消費(fèi)等環(huán)節(jié)信息記錄，確保了農(nóng)產(chǎn)品質(zhì)量安全可查、可追、可究。研究表明，前后端分離的開(kāi)發(fā)模式，對(duì)于Web開(kāi)發(fā)項(xiàng)目而言具有非常多的好處：前后端開(kāi)發(fā)同時(shí)進(jìn)行，前端可以在后端未提供接口的時(shí)候先調(diào)用本地的JSON文件完成開(kāi)發(fā)，同時(shí)頁(yè)面的增加和路由的修改也不必再去麻煩后臺(tái)，開(kāi)發(fā)更加靈活；另外實(shí)現(xiàn)了高內(nèi)聚、低耦合，減少后端服務(wù)器的并發(fā)負(fù)載壓力；通過(guò)前端路由的配置，無(wú)需提前加載網(wǎng)站所有資源，也不需要解析前端頁(yè)面，在用戶交互和體驗(yàn)上有所提升。本研究對(duì)前后端分離開(kāi)發(fā)模式進(jìn)行了有效嘗試，對(duì)其他Web開(kāi)發(fā)項(xiàng)目提供了很好的借鑒，應(yīng)用此種模式，快速高效搭建Web應(yīng)用，可以提高工作效率，創(chuàng)造更高的經(jīng)濟(jì)效益。