乐优商城（一）项目介绍

GitHub：https://github.com/lyj8330328

目录

一，项目介绍

二，系统架构

2.1架构图

2.2架构图介绍

三，项目搭建

3.1技术选型

3.2域名

3.3后台管理系统搭建

3.3.1代码                     

3.3.2安装依赖

3.3.3运行测试

3.3.4项目结构

3.4前台门户搭建（暂略）

3.5服务搭建

---

一，项目介绍

• 乐优商城是一个全品类的电商购物网站（B2C）。
• 用户可以在线购买商品，加入购物车，下单，秒杀商品
• 可以品论已购买商品
• 管理员可以在后台管理商品的上下架，促销活动
• 管理员可以监控商品销售状况
• 客服可以在后台处理退款操作

二，系统架构

2.1架构图

2.2架构图介绍

整个乐优商城可以分为两部分：后台管理系统，前台门户系统。

• 后台管理：

  • 后台系统主要包含以下功能：

    • 商品管理，包括商品分类，品牌，商品规格等信息的管理

    • 销售管理，包括订单统计，订单退款处理，促销活动生成等

    • 用户管理，包括用户控制，冻结，解锁等

    • 权限管理，整个网站的权限控制，采用智威汤逊鉴权方案，对用户及API进行权限控制

    • 统计，各种数据的统计分析展示

  • 后台系统会采用前后端分离开发，而且整个后台管理系统会使用Vue.js框架搭建出单页应用（SPA）。

  • 预览图：

  

• 前台门户

  • 前台门户面向的是客户，包含与客户交互的一切功能例如：

    • 搜索商品

    • 加入购物车

    • 下单

    • 评价商品等等

  • 前台系统我们会使用Thymeleaf模板引擎技术来完成页面开发。出于SEO优化的考虑，我们将不采用单页应用。

  

无论是前台还是后台系统，都共 享相同的微服务集群，包括：

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

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

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

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

• 用户中心：用户的登录注册等功能

• 尤里卡注册中心

• Zuul网关服务

• Spring Cloud Config配置中心

•  

三，项目搭建

3.1技术选型

---

前端技术：

• 基础的HTML，CSS，JavaScript的（基于ES6标准）

• JQuery的

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

• 前端构建工具：的WebPack

• 前端安装包工具：NPM

• Vue的脚手架：Vue的-CLI

• Vue的路由：VUE路由器

• AJAX框架：爱可信

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

后端技术：

• 基础的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

---

3.2 域名

---

一级域名：www.leyou.com

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

---

3.3 后台管理系统搭建

3.3.1 代码                     

   点击下载

3.3.2 安装依赖

npm install

3.3.3 运行测试

输入命令：

npm run start

访问：http://localhost:9001

3.3.4 项目结构

3.3.4.1目录结构图

3.3.4.2调用关系

• index.html中定义了空的div，其id为app。

• main.js中定义了Vue对象，并且绑定通过id选择器，绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。

• 而main.js中只有一行内容：,这是使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。

• App.vue中也没有内容，而是定义了vue-router的锚点：,我们之前讲过，vue-router路由后的组件将会在锚点展示。

• 最终的结论是：一切路由后的内容都将通过App.vue在index.html中显示。

3.3.4.3页面布局

Layout组件是整个页面的布局组件：

一个典型的三块布局。包含左，上，中三部分：

左侧导航

v-navigation-drawer ：导航抽屉，主要用于容纳应用程序中的页面的导航链接。

顶部工具条

v-toolbar：工具栏通常是网站导航的主要途径可以与导航抽屉一起很好地工作，动态选择是否打开导航抽屉，实现可伸缩的侧边栏。

中间内容

v-content：并不是一个组件，而是标记页面布局的元素可以根据您指定的应用程序组件的结构动态调整大小，使得您可以创建高度可定制的组件。

• 布局映射的路径是/,且是异步加载的,没有直接写组件名字，而是一个函数。

• 除了登录以为的所有组件，都是定义在布局的儿童属性，路径并且都是/的下面

• 因此当路由到子组件时，会在布局中定义的锚点中显示。

• 并且布局中的其它部分不会变化，这就实现了布局的共享。

3.4前台门户搭建（暂略）

3.5服务搭建

---