3。2  项目总体架构

本项目的前端是利用React框架构建的单页Web应用（SPA）[14]，也就是说本项目的前端实际只用一个静态的HTML页面，网站在运行使用期间是不会像传统网站那样重新加载页面的。基于这样的设计，页面的切换是由前端负责的，也就是说前端要有自己的路由系统来负责页面的定位。前端与后端服务器的交互则是完全通过AJAX请求来进行的，数据传输的格式是目前流行的JSON格式。那么整个前端的流程就是这样的：①用户登录网站首页，服务器返回给用户HTML页面及相应 js、css、图片等资源。然后网站通过ajax异步获取首页数据并更新；②用户进行操作，前端路由根据用户的请求渲染相应的页面，同时通过ajax向服务器发出异步请求，服务器判断用户权限，若用户具备访问权限，则返回该页面数据，否则返回权限不允许的提示；③前端收到后台相应后，根据响应结果渲染页面或重新路由。这样在整个网站运行过程中是不需要重载页面的。这样做的好处有以下几点：①减少了前后台交互时的数据传输量，用户获取新的数据都只需要传输数据本身，而不需要像传统网站那样传输整个页面。②大大的减轻了服务器端的压力，因为所有的请求都是ajax请求，所以服务器不用像传统网站那样耗费资源和时间去渲染相应的jsp页面，这个渲染工作将会平摊给客户端的每个用户（React在前端渲染）。

项目的后台架构是这样的，用Nginx在前面作为静态服务器和反向代理，在他后面是tomcat服务器（J2EE的服务器）和Node。js服务器，其中Nginx负责处理静态文件请求，tomcat负责处理除Websocket请求外的其他请求，而Node。js则负责处理Websocket的相关请求。那么服务器流程就是这样的，静态文件的请求由Nginx直接响应，动态请求则转发给后端服务器，一般请求转发给tomcat服务器，涉及到Websocket的请求则转发给Node。js服务器，Node。js若有访问mysql数据库的需求则发送http请求给tomcat服务器。

数据库架构则是redis在前面作为缓存并存储一些其他合适的数据，mysql在后作为主要数据存储的数据库。文献综述

具体架构如图3。1所示：

图3。1  后台架构

3。3  项目模块结构

本项目分为几个大模块：分别是用户模块、服务员模块、客服模块以及商家数据统计模块。每个模块的具体结构如图3。2所示：

图3。2  项目模块

3。4  项目功能介绍

3。4。1  用户模块

3。4。1。1  首页功能

网站的主页包括五个部分，标题栏、商家类型展示栏、最热商家栏、热门菜品栏以及底部栏。用户达到主页后网站会定位用户所在位置，并将位置信息展示在标题栏。类型栏则用来展示所有商家的类型，通过点击可以获取相应类型的商家列表。最热商家栏展示了前一天点击量排名前5的商家，用户可以点击商家来直接进入商家内部。热门菜品栏则展示了当月销量最高的12个菜品，用户可以点击来进入拥有该菜品的商家，进入商家后网页会自动定位到该菜品的位置。底部栏属于导航栏，用户可以点击相应图标分别进入订单管理页面、附近发现页面、个人中心页面。

3。4。1。2  商家展示来;自]优Y尔E论L文W网www.youerw.com +QQ752018766-

用户通过在主页选择商家类型后可以看到该类型的所有商家，网页会先加载一部分商家，然后通过用户滚动下拉动态加载其他商家。该页面展示的商家信息包括商家名称、距离用户有多远、最低消费、评分等等。在该页面用户可以通过距离选择来过滤商家。比如用户可以选择距离用户2公里以内的商家、距离5公里内的商家等等。用户还可以选择商家的排名次序，比如以商家的销量排名、以商家的最低消费排名、以商家的平均消费排名或以商家的评分排名。用户还可以结合距离和排名两项来更精确的展示所需商家。此页面和主页都可以链接到搜索页面。具体流程如图3。3所示： HTML5+Node.js直达号手机订餐网站开发(7):http://www.youerw.com/jisuanji/lunwen_96855.html