基于Laravel和React的網絡詐騙防范科普漸進網站的設計

陳有英

（廣東海洋大學數學與計算機學院 廣東省湛江市 524000）

1 緒論

隨著網絡的逐漸普及，除年輕人外，越來越多的中老年人、青少年都會接觸互聯網并享受其帶來的便捷和快樂。《第45 次中國互聯網絡發展狀況統計報告》顯示，截至2020年3月，我國網民規模為9.04 億，互聯網普及率達64.5%，期中手機網民規模為8.97億，網民人數高居世界第一。

圖1：總體架構圖

圖2：文章回收站設計思路

圖3：評論審核流程

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

2 網站設計

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

2.1 用戶前端功能

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

圖4：開啟查詢緩存的查詢結果

圖5：Android 安裝漸進式網頁應用方式

圖6：漸進式網頁應用在Android 運行效果

圖7：iPad 下漸進式網頁應用安裝方式

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

①最新消息：按照時間順序將所有案例呈現出來。

②網絡詐騙：按照時間順序將網絡詐騙這個分類的案例呈現出來。

③電信詐騙：按照時間順序將電信詐騙這個分類的案例呈現出來。

④小小貼士：按照時間順序將小小貼士這個分類的案例呈現出來。

⑤熱門文章：在網站側邊欄展示閱讀量最多的4 篇案例。

（2）公告模塊將公告以時間順序呈現出來，供用戶查看網站運營的最新公告。

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

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

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

圖8：漸進式網頁應用在iPad 運行效果

圖9：漸進式網頁應用在iPad 的最近任務列表效果

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

2.2 管理員后臺管理功能

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

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

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

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

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

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

2.3 文章回收站設計與實現

圖10：漸進式網頁應用在Win10 的安裝方式與效果

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

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

2.4 評論及其審核機制設計

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

2.5 查詢緩存優化設計

查詢緩存是MySQL 的一個重要性能特性，它緩存了select 查詢及其結果數據集。當一個相同的select 查詢發生時，MySQL 從內存中直接取出結果，這樣就加快了查詢的執行速度，同樣減小了數據庫的壓力[2]。圖4 的查詢結果就是開啟了查詢緩存。

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

3 網站實現

3.1 Android漸進式網頁應用效果

漸進式網頁應用安裝到本地的功能在Android 系統目前只有GoogleChrome 和Firefox 這兩個瀏覽器支持。本次測試使用的環境是Android7.0，GoogleChrome65。

如圖5所示，通過GoogleChrome功能菜單的添加到主屏幕功能，可以把本設計的網站安裝到Android 系統本地，具有桌面應用圖標。

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

3.2 iPad漸進式網頁應用效果

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

如圖8 和圖9所示，漸進式網頁應用在iPad 擁有原生應用的使用體驗，在最近任務列表和其他原生應用一樣單獨存在。

3.3 Win10漸進式網頁應用效果

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

4 小結

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