电视项目系统架构

一、项目介绍

• 乐优商城是一个全品类的电商购物网站（B2C）。


• 用户能够在线购买商品、加入购物车、下单、秒杀商品


• 能够评论已购买商品


• 管理员能够在后台管理商品的上下架、促销活动


• 管理员能够监控商品销售情况


• 客服能够在后台处理退款操做


• 但愿将来3到5年能够支持千万用户的使用

二、系统架构

架构图

乐优商城架构缩略图，大图请参考课前资料：css

系统架构解读

整个乐优商城能够分为两部分：后台管理系统、前台门户系统。前端

• 后台管理：vue

  
  
  
  
  • 后台系统主要包含如下功能：
    
    
    
    • 商品管理，包括商品分类、品牌、商品规格等信息的管理
    
    
    • 销售管理，包括订单统计、订单退款处理、促销活动生成等
    
    
    • 用户管理，包括用户控制、冻结、解锁等
    
    
    • 权限管理，整个网站的权限控制，采用JWT鉴权方案，对用户及API进行权限控制
    
    
    • 统计，各类数据的统计分析展现
    
    
    
    
  
  
  • 后台系统会采用先后端分离开发，并且整个后台管理系统会使用 Vue.js 框架搭建出单页应用（single page web application，SPA）。
  
  
  • 预览图：
  
  
  
  

• 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。


• 整个后台管理系统只会出现一个 HTML 页面，剩余一切页面的内容都是经过 Vue 组件来实现


• 这些 Vue 组件其实就是许多的 JS 文件。不过前端项目处理 js，还有 css、image、font等，甚至前端还开发出各类不一样类型的扩展语言，这么多东西在打包、构建的过程当中，人工来操做会很是麻烦，所以就会有一些工具来帮助搭建前端项目。例如：webpack、vue-cli等

• 前台门户webpack

  
  
  
  
  • 前台门户面向的是客户，包含与客户交互的一切功能。例如：
    
    
    
    • 搜索商品
    
    
    • 加入购物车
    
    
    • 下单
    
    
    • 评价商品等等
    
    
    
    
  
  
  • 前台系统咱们会使用 Thymeleaf 模板引擎技术来完成页面开发。出于 SEO 优化的考虑，咱们将不采用单页应用。
  
  
  
  

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提升网站在有关搜索引擎内的天然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，得到品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中得到更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来讲更具备吸引力。ios

不管是前台门户，仍是后台管理页面，都是前端页面，咱们的系统采用先后端分离的方式，所以前端会独立部署，不会在后端服务出现静态资源。nginx

后端微服务
不管是前台仍是后台系统，都共享相同的微服务集群，包括：git

• 商品微服务：商品及商品分类、品牌、库存等的服务


• 搜索微服务：实现搜索功能


• 订单微服务：实现订单相关


• 购物车微服务：实现购物车相关功能


• 用户微服务：用户的登陆注册、用户信息管理等功能


• 短信服务：完成各类短信的发送任务


• 支付服务：对接各大支付平台


• 受权服务：完成对用户的受权、鉴权等功能


• Eureka注册中心


• Zuul网关服务


• Spring Cloud Config配置中心


• ......

三、技术选型

前端技术：web

• 基础的 HTML、CSS、Javascript（基于 ES6 标准）


• JQuery


• Vue.js 2.0 以及基于 Vue 的框架：Vuetify


• 前端构建工具：WebPack


• 前端安装包工具：NPM


• Vue 脚手架：Vue-cli


• Vue 路由：vue-router


• ajax框架：axios


• 基于 Vue 的富文本框架：quill-editor

后端技术：ajax

• 基础的 SpringMVC、Spring 5.0 和 MyBatis3


• Spring Boot 2.0.1 版本


• Spring Cloud 最新版 Finchley.RC1


• Redis-4.0


• RabbitMQ-3.4


• Elasticsearch-5.6.8


• nginx-1.10.2


• FastDFS - 5.0.8


• MyCat


• Thymeleaf

四、开发环境

为了保证开发环境的统一，但愿每一个人都按照个人环境来配置：vue-router

• IDE：咱们使用 Idea 2017.3 版本


• JDK：统一使用 JDK1.8


• 项目构建：maven3.3.9 以上版本便可


• 版本控制工具：git

五、域名

咱们在开发的过程当中，为了保证之后的生产、测试环境统一。尽可能都采用域名来访问项目。

一级域名：www.leyou.com

二级域名：manage.leyou.com 、api.leyou.com

咱们能够经过 switchhost 工具来修改本身的 host 对应的地址，只要把这些域名指向127.0.0.1，那么跟你用 localhost 的效果是彻底同样的。

作者：多测师高级讲师_郑sir

微信：ZhengYing8887

出处：https://www.cnblogs.com/ZhengYing0813/

备注：本文版权归作者所有，欢迎转载和添加作者微信探讨技术，但未经作者同意必须在文章页面给出原文链接，否则保留追究法律责任的权利。