1. 电商项目架构图

技术框架/技术选型

1.1 系统架构

该项目是一个B2C的电商项目（类似小米商城、京东商城、天猫商城）

允许客户通过网络购买商品

该项目主要完成的是电商项目前台的开发。

采用前后端分离的方式进行开发的
前端：vue全家桶（Vue、Router、Vuex、Axios、Nuxt、SSR等技术）。
后端：Spring Cloud Gateway 网关、Spring Cloud alibaba技术栈（nacos、sentinel 等）分布式微服务架构。

该项目共有6个微服务（不考虑集群）：

gateway网关服务
service-auth 认证服务
service-cart 购物车服务
service-orders 订单服务
service-search 搜索服务
service-web 核心业务（基本业务）服务
扩展：

MQ服务（消息队列服务）
SMS服务（短信服务）

本项目使用Nacos作为服务的注册与发现中心，以及信息的配置中心。
使用企业级消息队列RabbitMQ进行消息通信、应用解耦、流量控制、流量削峰。
采用企业级搜索引擎Elasticsearch实现商品的在线实时搜索。
该项目的追求目标：高并发、高可用、高稳定。

1.2 技术架构

前端：

Node.js ：前端的服务器，用于启动vue相关的内容。
Vue.js：前端使用的是vue相关的技术
Element UI ：vue的前端框架，提供通用的组件，减少CSS、特效等编写。
Nuxt.js ：vue的前端框架，用于解决SSR(服务端渲染)问题，易于SEO。

运维技术：

Nacos：服务中心、配置中心
redis：数据存储中心
elasticsearch：搜索服务中心
docker：用于部署项目（会将项目部署到linux系统中，在通过docker进行具体的部署）
canal： https://github.com/alibaba/canal 自学

分布式架构

spring boot ：项目结构基础
spring cloud alibaba：微服务架构
jwt + RSA：鉴权中心，

jwt用于生成token，
RSA进行加密操作，用于辅助生成或校验token。

持久化技术栈：

MyBatis Plus：用于取代MyBatis、通用Mapper，提供更优的工具、性能也有对应提升。
Spring data redis：用于简化Java对redis操作
spring data elasticsearch：用于简化java对es操作

数据库：

mysql：免费的
MyCat：用于数据库分库分表的。

外部接口：

阿里大鱼：发送短信
微信支付接口

2. 介绍电商项目

介绍一下你最熟悉的项目？
介绍一下最近完成的一个项目？

2.1 后台和前台、后端和前端

前台和后台均可以采用前后端分离的方式进行开发，也就形成了对应的前端和后端。
后台：提供给管理员使用。

电商的后台模块：会员管理、分类管理、快报管理、广告管理、商品管理、订单管理、财务管理、报表管理。
前端：element ui、element ui admin
后端：spring boot、spring cloud、spring cloud alibaba

前台：提供给用户使用。目前完成的电商项目只是部分，完成了前台部分。

电商的前台模块：注册、认证、无限极分类、快报、搜索、购物车、订单、支付。
前端：nuxt.js
后端：spring cloud alibaba

2.2 Vue全家桶包含哪些技术？

vue：核心组件，主要用于数据的双向绑定。（html标签与 vue data数据进行双向绑定）

生命周期、计算属性、过滤器、监听器等

router：路由，映射作用，使访问路径可以映射到对应的vue资源。

请求拦截器、响应拦截器等

vuex：状态管理，用于在多个组件之间共享数组。
element ui ：vue的组件库，提供通用的组件（内含CSS样式、JS特效）
Nuxt：vue的框架，用于实现SSR技术。
axios：第三方ajax框架

2.3 什么是Vuex？

vuex是什么？

vue全家桶的一个组件，进行状态管理，也就是在组件之间进行数据的共享

vuex组件：状态state(死爹)、方法mutations(模特神)、功能actions、（模块modules、获得getters）

状态state：相当于变量，用于存放数据
方法mutations：用于操作变量，对变量的数据进行修改的
功能actions：用于调用方法，可以进行ajax操作。

如何使用？

基本使用：

state：获得值 this.$store.state.变量 。一般与vue计算属性一起使用。
mutations：调用方法 this.$store.commit("方法名", 参数)。与vue method一起使用。
actions：调用功能 this.$store.dispatch("功能名", 参数)

映射使用：

导入：import {mapState, mapMutations, mapActions } from 'vuex'
state ：编写在计算属性处

1. computed: {
2.     ...mapState(['变量名']),
3.     变量名() {    //等效
4. return this.$store.state.变量;
5.     },
6. 
7. }

mutations：编写在普通方法处

1. methods: {
2.     ...mapMutations(['方法名']),
3.     方法名(参数) {   //等效
4. this.$store.commit("方法名", 参数)
5.     }
6. }

2.4 什么是SSR

SSR：服务端渲染技术，前端页面静态化技术，使ajax的数据与html标签不在分离，整合成一个整体。

也就是说将ajax查询的结果，处理成静态页面。

nuxt.js 支持SSR技术，在页面加载前，通过asyncData进行ajax查询，并将查询结果合并定data区域，页面加载成功后，不需要再次查询。相当于静态页面。
用途：用于解决SEO（搜索引擎优化）问题。

搜索引擎提供的爬虫，优先爬取静态页面，为了提高网站的收录率，所以需要将动态页面转换成静态页面。

2.5 电商模式是什么？

B2C：商家-客户

商家开发一个商城，并进行商品售卖。
用户通过商城进行商品的购买。
例如：唯品会、乐蜂网

B2B2C：商家A-商家B-客户

商家B：开发一个商城，提供给商家A进行商品的售卖。商家B对商家A有监督等权利。
商家A：入驻到商家B开发的商城，进行商品的售卖。
客户：通过商城进行购买。
例如：京东、天猫

C2B：客户-商家，客户提需求，商家进行定制。

例如：尚品宅配

O2O：线上/线下，通过线上进行下单，通过线下进行交付。

例如：美团外卖、饿了么

C2C：客户-客户，私人买卖。

例如：瓜子二手车、转转、咸鱼。

2.6 枚举类

枚举类的用途：限定指定类型的实例

常量类是jdk1.4的技术
枚举类是jdk1.5技术，用于取代常量类。如果没有参数，定义非常简单。

枚举：通过参数，设置需要记录的信息

1. package com.czxy.changgou4.enum_demo;
2. 
3. /**
4.  * @author 桐叔
5.  * @email liangtong@itcast.cn
6.  * @description
7.  */
8. public enum Gender {
9.     MALE(1,"男男"),FEMALE(0,"女女");
10. 
11. private Integer id;     //编号
12. private String text;    //文本
13. 
14.     Gender(Integer id, String text) {
15. this.id = id;
16. this.text = text;
17.     }
18. 
19. public Integer getId() {
20. return id;
21.     }
22. 
23. public String getText() {
24. return text;
25.     }
26. }

常量类，与上面的枚举等效的功能。

1. package com.czxy.changgou4.enum_demo;
2. 
3. /**
4.  * @author 桐叔
5.  * @email liangtong@itcast.cn
6.  * @description
7.  */
8. public class GenderClass {
9. public final static GenderClass MALE = new GenderClass(1, "男");
10. public final static GenderClass FEMALE = new GenderClass(0, "女");
11. 
12. private Integer id;     //编号
13. private String text;    //文本
14. 
15. public GenderClass(Integer id, String text) {
16. this.id = id;
17. this.text = text;
18.     }
19. 
20. public Integer getId() {
21. return id;
22.     }
23. 
24. public String getText() {
25. return text;
26.     }
27. }

测试

1. package com.czxy.changgou4.enum_demo;
2. 
3. /**
4.  * @author 桐叔
5.  * @email liangtong@itcast.cn
6.  * @description
7.  */
8. public class TestGender {
9. public static void main(String[] args) {
10.         System.out.println(Gender.MALE.getId());
11. 
12.         System.out.println(GenderClass.FEMALE.getText());
13.     }
14. }

2.7 elasticsearch相关

elasticsearch的原理？

将数据保存到es中时，es会对数据进行分词。
每一个分词进行编号，在进行查询时，通过分词找到对应的编号，然后通过编号从索引库中找到对应的数据。
此过程就是原理，此原理称为“倒排索引”

为什么要使用elasticsearch？

数据库mysql不能分词，es可以进行分词搜索。

数据库可以对指定的字段进行模糊查询，也就是某个字段
es进行全文分词检索。比mysql更灵活。

es专业搜索，可以处理海量的数据，且速度很快。电商项目有海量的商品，需要es进行搜索。

为什么要使用IK分词器？

默认es对单字进行分词。
实际需要时，根据词组进行分词。需要特定的中文分词器。

2.8 gateway网关相关

gateway网关的功能？网关的作用？

动态路由
负载均衡
鉴权

2.9 nacos相关

nacos的作用？

微服务的注册中心：可以通过服务的名字获得对应服务位置
微服务的配置中心：将yml或properties配置文件中的内容，抽取到nacos中，通过修改nacos，相当于修改yml或properties文件。

为什么需要nacos？

微服务架构，都需要一个注册中心，管理所有的微服务。方便通过服务名称获得每一个服务的真实的IP地址+端口号。项目之间只需要记录服务名即可，服务的真实地址和端口号可以随意改变。
需要给自己的微服务选择一个注册中心。
常见的注册中心：nacos、eureka、dubbo的zookeeper 等
nacos是alibaba提供额技术支持，经历过双十一的实战考验，优先选择。

2.10 定时任务

什么是SpringTask？

SpringTask 是一个定时任务组件。
可以在指定的时间周期内，完成指定的任务。
一般情况采用的是cron表达式。

@Scheduled(cron = “0-5 * * ? * *”)

cron表达式

分7部分：秒分时日期月周年?

常用6部分：秒分时日期月周，且“日期”和“周”存在冲突问题，需要忽略其中一个，使用?。

, 或，例如：1,2,3

- 至，例如：1-5

/ 每，例如：0/5

* 任意

【畅购电商】项目总结（一）

1. 电商项目架构图

1.1 系统架构

1.2 技术架构

2. 介绍电商项目

2.1 后台和前台、后端和前端

2.2 Vue全家桶包含哪些技术？

2.3 什么是Vuex？

2.4 什么是SSR

2.5 电商模式是什么？

2.6 枚举类

2.7 elasticsearch相关

2.8 gateway网关相关

2.9 nacos相关

2.10 定时任务

热门文章

最新文章

相关课程

相关电子书

相关实验场景

【畅购电商】项目总结（一 ）

1. 电商项目架构图

1.1 系统架构

1.2 技术架构

2. 介绍电商项目

2.1 后台和前台、后端和前端

2.2 Vue全家桶包含哪些技术？

2.3 什么是Vuex？

2.4 什么是SSR

2.5 电商模式是什么？

2.6 枚举类

2.7 elasticsearch相关

2.8 gateway网关相关

2.9 nacos相关

2.10 定时任务

热门文章

最新文章

相关课程

相关电子书

相关实验场景

【畅购电商】项目总结（一）