目录

web应用组成

项目实例

系统架构图 

整体架构图

---

web应用组成

从开发者的角度来看，web 应用主要由三部分组成: 用户界面，业务逻辑，数据。

1.用户界面(视图层)

用于将数据展示给用户的地方，采用 HTML，CSS，JavaScript 编写；

2.业务逻辑(控制层)

实现业务需求和控制业务流程的地方，可以采用 Java，PHP，Python，JavaScript 编写。

3.数据(模型层)

应用的核心部分，应用业务逻辑的实现，用户界面的展示都是基于数据的，web应用中的数据通常是存储在数据库中的，数据库可以采用 MySql，Mongodb 等。

项目实例

GitHub - macrozheng/mall： mall项目

mall项目是一套基于 SpringBoot + Vue + uni-app 的电商系统，包括前台商城项目和后台管理系统。 

综合使用Spring Boot、Vue.js和uni-app可以实现前后端分离的架构。后端使用Spring Boot提供RESTful API接口，处理业务逻辑、数据存储和安全认证等功能。前端使用Vue.js和uni-app编写用户界面，通过调用后端的API接口来获取数据和处理用户交互。这种架构可以实现前后端的解耦，提高开发效率和可维护性，并支持跨平台的应用程序开发。

系统架构图 

1. 电脑/手机访问：用户通过Web浏览器访问应用程序（或者手机端访问）

2. 前端服务：前端部分，使用Vue.js、uni-app等前端框架编写。它负责处理用户界面的展示和用户交互，并通过API Gateway与后端进行通信。

3. 网关服务：作为前后端交互的中间层，负责接收前端请求并进行路由、鉴权等处理。它可以实现请求的转发、负载均衡、缓存等功能，并将请求转发给后端的相应服务。

4. 后端服务：后端部分，使用Spring Boot等框架编写。它包含了一系列的服务模块，处理业务逻辑、数据存储、安全认证等功能。后端通过API Gateway暴露API接口，供前端调用。

5. 数据存储：数据存储层，使用关系型数据库（MySQL）、NoSQL数据库（MongoDB）等来存储应用程序的数据。

6. 日志收集：ELK Stack是一个用于日志管理和分析的开源工具组合。Elasticsearch用于实时搜索和分析大规模的数据，Logstash用于日志的收集、过滤和转发，Kibana用于可视化和分析日志数据。

7. 持续集成：使用Jenkins来设置自动化的构建和部署流程，确保代码的质量和可靠性，提高开发效率。

8. 容器化部署：使用Docker来容器化前端、后端和其他组件，方便部署和管理。通过使用Docker，可以提高应用程序的可移植性和可伸缩性。

9. 文件存储：OSS（阿里云对象存储服务）或MinIO等在电商系统中扮演着重要的角色。它们提供了可扩展的、高可用性的存储解决方案，用于存储电商系统中的文件、图片、视频等非结构化数据。

10. 消息队列：通过将消息发送到队列中，不同的组件可以通过订阅消息来进行通信，而不需要直接依赖彼此。通过异步通信，系统可以将一些耗时的操作转化为异步任务。RabbitMQ可以用于处理异步任务和消息处理的场景。

整体架构图