乐优商城（一）项目介绍

最新推荐文章于 2025-06-10 14:43:27 发布

飘来荡去、、

最新推荐文章于 2025-06-10 14:43:27 发布

阅读量5.9w

点赞数 35

CC 4.0 BY-SA版权

分类专栏：乐优商城文章标签：乐优商城

本文链接：https://blog.youkuaiyun.com/lyj2018gyq/article/details/81981466

乐优商城专栏收录该内容

77 篇文章

订阅专栏

GitHub：https://github.com/lyj8330328

一，项目介绍

乐优商城是一个全品类的电商购物网站（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组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。
App.vue中也没有内容，而是定义了vue-router的锚点：<router-view>,我们之前讲过，vue-router路由后的组件将会在锚点展示。
最终的结论是：一切路由后的内容都将通过App.vue在index.html中显示。