謝曉偉 包琦

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

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

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

1 技術(shù)理論

1.1 Django 框架

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

1.2 Vue框架

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

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

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

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

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

2.2 硬件層

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

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

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

2.4 應(yīng)用層

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

2.5 服務(wù)層

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

圖2：用戶請求頁面示意圖

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

3.1 總體功能

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

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

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

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

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

3.2.2 追溯查詢

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

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

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

管理平臺具有很多項功能，在這里挑選幾個功能簡要介紹，其他的不再贅述。

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

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

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

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

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

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

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

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

4.2.2 引入Element UI

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

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

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

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

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

4.4 整合Django和Vue

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

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

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

Axios

.get/post(請求的URL)

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

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

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

5 結(jié)論

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