基于Laravel和React的網(wǎng)絡(luò)詐騙防范科普漸進(jìn)網(wǎng)站的設(shè)計

陳有英

（廣東海洋大學(xué)數(shù)學(xué)與計算機學(xué)院 廣東省湛江市 524000）

1 緒論

隨著網(wǎng)絡(luò)的逐漸普及，除年輕人外，越來越多的中老年人、青少年都會接觸互聯(lián)網(wǎng)并享受其帶來的便捷和快樂?！兜?5 次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》顯示，截至2020年3月，我國網(wǎng)民規(guī)模為9.04 億，互聯(lián)網(wǎng)普及率達(dá)64.5%，期中手機網(wǎng)民規(guī)模為8.97億，網(wǎng)民人數(shù)高居世界第一。

圖1：總體架構(gòu)圖

圖2：文章回收站設(shè)計思路

圖3：評論審核流程

經(jīng)濟發(fā)展和科技的進(jìn)步，使得大部分的詐騙行為已經(jīng)由線下逐步轉(zhuǎn)移到線上，形成“網(wǎng)絡(luò)詐騙”。網(wǎng)絡(luò)詐騙的犯罪成本低，方法簡單，一個QQ 號，幾個電話號，幾臺電腦就可以實施詐騙。行騙者通過廣撒網(wǎng)的方式行騙，受害者數(shù)量龐大、分布廣泛，極易造成嚴(yán)重的社會影響。防止網(wǎng)絡(luò)詐騙犯罪發(fā)生的最經(jīng)濟有效的手段還是在于提高民眾的防范意識，這就有賴于有關(guān)反網(wǎng)絡(luò)詐騙知識的傳授和宣傳。[1]因此，開發(fā)一個網(wǎng)絡(luò)詐騙安全防范的科普網(wǎng)站不僅對維護(hù)廣大網(wǎng)民的財產(chǎn)安全有十分重要的意義，而且對進(jìn)一步打擊網(wǎng)絡(luò)詐騙犯罪和維護(hù)社會秩序都具有較大的社會現(xiàn)實意義。

2 網(wǎng)站設(shè)計

本次設(shè)計采用前后端完全分離的架構(gòu)設(shè)計，使用PHP 框架Laravel 做后端Restful API 接口，使用Composer 管理后端組件依賴，提供JSON 格式的數(shù)據(jù)。用戶前端使用npm 管理組件依賴，webpack 編譯組件，把ES6 語法轉(zhuǎn)換成兼容大部分瀏覽器的ES3 語法。通過axios 這個Ajax 組件獲取后端JSON 數(shù)據(jù)，由React 框架渲染前端視圖，同時使用Redux 管理前端數(shù)據(jù)流。管理員后臺管理使用前端框架Angular 構(gòu)建。網(wǎng)站的總體框架如圖1所示。

2.1 用戶前端功能

網(wǎng)絡(luò)詐騙防范科普網(wǎng)的用戶前端由案例列表、公告、搜索、用戶、分享經(jīng)歷六大模塊組成，每個模塊由若干個小功能組成。

圖4：開啟查詢緩存的查詢結(jié)果

圖5：Android 安裝漸進(jìn)式網(wǎng)頁應(yīng)用方式

圖6：漸進(jìn)式網(wǎng)頁應(yīng)用在Android 運行效果

圖7：iPad 下漸進(jìn)式網(wǎng)頁應(yīng)用安裝方式

（1）案例列表模塊是整個網(wǎng)絡(luò)詐騙防范科普網(wǎng)的核心模塊，可以實時查看最新的案例、最熱門的案例、網(wǎng)絡(luò)詐騙類型的案例、典型詐騙類型的消息以及由平臺整理的小貼士科普消息。

①最新消息：按照時間順序?qū)⑺邪咐尸F(xiàn)出來。

②網(wǎng)絡(luò)詐騙：按照時間順序?qū)⒕W(wǎng)絡(luò)詐騙這個分類的案例呈現(xiàn)出來。

③電信詐騙：按照時間順序?qū)㈦娦旁p騙這個分類的案例呈現(xiàn)出來。

④小小貼士：按照時間順序?qū)⑿⌒≠N士這個分類的案例呈現(xiàn)出來。

⑤熱門文章：在網(wǎng)站側(cè)邊欄展示閱讀量最多的4 篇案例。

（2）公告模塊將公告以時間順序呈現(xiàn)出來，供用戶查看網(wǎng)站運營的最新公告。

（3）搜索功能使用SQL 語句的模糊查詢，用關(guān)鍵字去匹配案例標(biāo)題和全文，查找出包含該關(guān)鍵字的案例信息，并返回JSON 數(shù)據(jù)給前端展示。

（4）用戶模塊提供用戶以賬戶登錄、注冊，查看用戶當(dāng)前收藏的文章、歷史瀏覽的文章的功能。不登錄不影響用戶體驗，但是不會記錄用戶的瀏覽歷史，不提供案例收藏和案例評論等功能。

（5）分享經(jīng)歷模塊是讓用戶向平臺分享用戶的自身經(jīng)歷。

圖8：漸進(jìn)式網(wǎng)頁應(yīng)用在iPad 運行效果

圖9：漸進(jìn)式網(wǎng)頁應(yīng)用在iPad 的最近任務(wù)列表效果

（6）案例閱讀的時候，登錄的用戶可以對案例點贊或者評論。但評論需要管理員審核通過才能出現(xiàn)在文章的評論區(qū)。

2.2 管理員后臺管理功能

本設(shè)計的管理員后臺管理系統(tǒng)包含六個模塊，分別是案例管理，評論管理，公告管理，投稿管理，用戶管理，管理員管理。

案例管理模塊包含添加案例，刪除案例，批量刪除案例，修改案例，案例回收站等功能，案例回收站可以查看已刪除的案例，并提供恢復(fù)刪除的案例和徹底刪除案例的功能。

在評論管理模塊中，管理員可以查看并回復(fù)評論。管理員審核評論后可以選擇通過，或者刪除評論和批量刪除評論。

在公告管理模塊中，管理員可以添加新公告，修改亦有的公告，刪除公告，或者批量刪除公告。

在投稿管理模塊中，管理員可以查看用戶投稿的受騙經(jīng)歷，當(dāng)某些惡意用戶利用這個功能發(fā)送大量垃圾信息到本設(shè)計的投稿數(shù)據(jù)庫的時候，管理員可以使用批量刪除的功能刪除那些垃圾信息。

對于某些發(fā)廣告和垃圾信息的用戶，管理員可以通過用戶管理把那些用戶封禁或者直接刪除。

2.3 文章回收站設(shè)計與實現(xiàn)

圖10：漸進(jìn)式網(wǎng)頁應(yīng)用在Win10 的安裝方式與效果

為了防止網(wǎng)站管理員對重要數(shù)據(jù)執(zhí)行了誤刪除操作。本設(shè)計的后端管理系統(tǒng)加入了文章回收站的功能，執(zhí)行刪除的時候，文章記錄不會真的從數(shù)據(jù)庫中刪除，而是被移到回收站，管理員可以從回收站中恢復(fù)誤刪除的文章，如圖2所示。

實現(xiàn)這個回收站功能的核心思想是軟刪除。所謂軟刪除指的是數(shù)據(jù)表記錄并未真的從數(shù)據(jù)庫刪除，而是將表記錄的標(biāo)識狀態(tài)標(biāo)記為已刪除，這樣在查詢的時候就可以使用條件過濾，達(dá)到的效果是讓記錄看上去是已被刪除了。Laravel 框架是使用了一個日期字段deleted_at 作為標(biāo)識狀態(tài)。某個記錄被執(zhí)行軟刪除的時候，設(shè)置其deleted_at 字段的值為刪除時間，否則該值為NULL。獲取回收站的列表則查詢數(shù)據(jù)庫文章記錄中deleted_at 字段不為NULL 的記錄。在回收站中恢復(fù)誤刪除的記錄的實現(xiàn)方法是把deleted_at 字段設(shè)置為NULL。

2.4 評論及其審核機制設(shè)計

一般的資訊平臺的都有評論功能，同時有不少惡意用戶利用評論功能發(fā)廣告，發(fā)不良信息，對平臺的用戶有很不好的影響。本設(shè)計的網(wǎng)站有加入評論功能，為了解決上述的問題，本設(shè)計的評論審核機制模仿微信公眾號的評論審核機制。用戶的評論必須被管理員審核通過才能出現(xiàn)在文章評論列表中，被其他用戶看到。具體流程如圖3所示。

2.5 查詢緩存優(yōu)化設(shè)計

查詢緩存是MySQL 的一個重要性能特性，它緩存了select 查詢及其結(jié)果數(shù)據(jù)集。當(dāng)一個相同的select 查詢發(fā)生時，MySQL 從內(nèi)存中直接取出結(jié)果，這樣就加快了查詢的執(zhí)行速度，同樣減小了數(shù)據(jù)庫的壓力[2]。圖4 的查詢結(jié)果就是開啟了查詢緩存。

如果have_query_cache 是NO，可以通過修改my.conf 保存my.conf 文件，重啟MySQL 服務(wù)器以開啟查詢緩存功能。

3 網(wǎng)站實現(xiàn)

3.1 Android漸進(jìn)式網(wǎng)頁應(yīng)用效果

漸進(jìn)式網(wǎng)頁應(yīng)用安裝到本地的功能在Android 系統(tǒng)目前只有GoogleChrome 和Firefox 這兩個瀏覽器支持。本次測試使用的環(huán)境是Android7.0，GoogleChrome65。

如圖5所示，通過GoogleChrome功能菜單的添加到主屏幕功能，可以把本設(shè)計的網(wǎng)站安裝到Android 系統(tǒng)本地，具有桌面應(yīng)用圖標(biāo)。

漸進(jìn)式應(yīng)用在Android7.0 的運行效果如圖6所示，漸進(jìn)式應(yīng)用沒有瀏覽器打開的URL，和原生應(yīng)用一樣完全沉浸式的使用體驗。同時漸進(jìn)式網(wǎng)頁應(yīng)用也獨立存在在Android 最近應(yīng)用任務(wù)中，可以和原生應(yīng)用一樣切換使用。

3.2 iPad漸進(jìn)式網(wǎng)頁應(yīng)用效果

漸進(jìn)式網(wǎng)頁應(yīng)用安裝到IOS 本地的功能需要IOS 系統(tǒng)11.3.1 版本以上。如圖7所示，本次測試是使用Safari 瀏覽器，通過添加到主屏幕的功能，把漸進(jìn)式應(yīng)用添加到ipad 本地。

如圖8 和圖9所示，漸進(jìn)式網(wǎng)頁應(yīng)用在iPad 擁有原生應(yīng)用的使用體驗，在最近任務(wù)列表和其他原生應(yīng)用一樣單獨存在。

3.3 Win10漸進(jìn)式網(wǎng)頁應(yīng)用效果

在Win10PC 環(huán)境，可以使用Chrome 的安裝到桌面的功能把漸進(jìn)式網(wǎng)頁應(yīng)用安裝到window 本地。如圖10所示，在Win10 打開漸進(jìn)式應(yīng)用是沒有URL 的，如同Window 軟件一樣的體驗。

4 小結(jié)

漸進(jìn)式網(wǎng)頁應(yīng)用在Android、IOS 和Window 平臺都可以安裝到本地，以達(dá)到原生應(yīng)用的體驗。漸進(jìn)式網(wǎng)站應(yīng)用注重提高用戶網(wǎng)站體驗，支持讓用戶像安裝原生應(yīng)用那樣把網(wǎng)站安裝到手機使用。網(wǎng)站通過案例宣傳和便捷的使用方式，來提高青少年以及廣大網(wǎng)民對網(wǎng)絡(luò)詐騙的防范意識，對進(jìn)一步打擊網(wǎng)絡(luò)詐騙犯罪和維護(hù)社會秩序都具有一定的社會現(xiàn)實意義。