电视项目系统架构


一、项目介绍

  • 乐优商城是一个全品类的电商购物网站(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 的效果是彻底同样的。