基于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 平台都可以安装到本地，以达到原生应用的体验。渐进式网站应用注重提高用户网站体验，支持让用户像安装原生应用那样把网站安装到手机使用。网站通过案例宣传和便捷的使用方式，来提高青少年以及广大网民对网络诈骗的防范意识，对进一步打击网络诈骗犯罪和维护社会秩序都具有一定的社会现实意义。