电商系统技术特点

• 技术新
  
  

• 技术范围广
  
  

• 分布式
  
  

• 高并发、集群、负载均衡、高可用
  
  

• 海量数据
  
  

• 业务复杂
  
  

• 系统安全
  
  

主要电商模式

• B2B （ Business to Business）是指进行电子商务交易的供需双方都是商家（或企业、公司），她（他）们使用了互联网的技术或各种商务网络平台，完成商务交易的过程。电子商务是现代 B2B marketing的一种具体主要的表现形式。
  案例：阿里巴巴、慧聪网
  
  
• C2C即 Customer（Consumer） to Customer（Consumer），意思就是消费者个人间的电子商务行为。比如一个消费者有一台电脑，通过网络进行交易，把它出售给另外一个消费者，此种交易类型就称为C2C电子商务。
  案例：淘宝、易趣、瓜子二手车
  
  
• B2C是Business-to-Customer的缩写，而其中文简称为“商对客”。“商对客”是电子商务的一种模式，也就是通常说的直接面向消费者销售产品和服务商业零售模式。这种形式的电子商务一般以网络零售业为主，主要借助于互联网开展在线销售活动。B2C即企业通过互联网为消费者提供一个新型的购物环境——网上商店，消费者通过网络在网上购物、网上支付等消费行为。
  注：我们《青橙电商系统》课程采用B2C模式
  案例：唯品会、乐蜂网  
  
  
• B2B2C是一种电子商务类型的网络购物商业模式，B是BUSINESS的简称，C是CUSTOMER的简称，第一个B指的是商品或服务的供应商，第二个B指的是从事电子商务的企业，C则是表示消费者。
  案例：京东商城、天猫商城
  
  
• C2B（Consumer to Business，即消费者到企业），是互联网经济时代新的商业模式。这一模式改变了原有生产者（企业和机构）和消费者的关系，是一种消费者贡献价值（Create Value）， 企业和机构消费价值（Consume Value）。
  C2B模式和我们熟知的供需模式（DSM, Demand SupplyModel）恰恰相反，真正的C2B 应该先有消费者需求产生而后有企业生产，即先有消费者提出需求，后有生产企业按需求组织生产。通常情况为消费者根据自身需求定制产品和价格，或主动参与产品设计、生产和定价，产品、价格等彰显消费者的个性化需求，生产企业进行定制化生产。
  案例：海尔商城、 尚品宅配
  
  
• O2O即Online To Offline（在线离线/线上到线下），是指将线下的商务机会与互联网结合，让互联网成为线下交易的平台，这个概念最早来源于美国。O2O的概念非常广泛，既可涉及到线上，又可涉及到线下,可以通称为O2O。主流商业管理课程均对O2O这种新型的商业模式有所介绍及关注。
  案例：美团、饿了吗
• F2C指的是Factory to customer，即从厂商到消费者的电子商务模式。
  
  

通用mapper简介

        通用 Mapper 是一个可以实现任意 MyBatis 通用方法的框架，项目提供了常规的增删改查操作以及Example相关的单表操作。为什么要用通用mapper？我们这里列举一下原生Mybatis的痛点：

1、mapper.xml文件里有大量的sql，当数据库表字段变动，配置文件就要修改

2、需要自己实现sql分页，select * from table where . . . limit 1,3

自己手写分页，除了传参page、pageSize，还需要返回条目总数count。

3、数据库可移植性差：如果项目更换数据库，比如oracle-->mysql，mapper.xml中的sql要重新写，因为Oracle的PLSQL 和mysql 支持的函数是不同的。

4、生成的代码量过大。

5、批量操作，批量插入，批量更新，需要自写。

而这些，通过通用mapper就可以很轻松的解决了。

在线官方文档：https://gitee.com/free/Mapper/wikis/Home

通用mapper与Spring集成

官方的文档中介绍了通用mapper的三种使用方式 ，纯java使用方式、与Spring集成方式、与SpringBoot集成方式。我们这里给大家介绍的是与Spring集成方式。

（1）引入依赖

正常情况下，Spring 和 MyBatis 的集成环境中，应该已经存在下面的依赖：<dependency>  <groupId>org.mybatis</groupId>  <artifactId>mybatis</artifactId>  <version>版本号</version></dependency><dependency>  <groupId>org.mybatis</groupId>  <artifactId>mybatis-spring</artifactId>  <version>版本号</version></dependency><dependency>  <groupId>org.springframework</groupId>  <artifactId>spring-context</artifactId>  <version>版本号</version></dependency><dependency>  <groupId>org.springframework</groupId>  <artifactId>spring-tx</artifactId>  <version>版本号</version></dependency><dependency>  <groupId>org.springframework</groupId>  <artifactId>spring-jdbc</artifactId>  <version>版本号</version></dependency>

集成通用 Mapper 在上面的基础上添加下面的依赖：

<dependency>    <groupId>tk.mybatis</groupId>    <artifactId>mapper</artifactId>    <version>最新版本</version></dependency>

（2）与spring集成

和通用 Mapper 以前版本一样，可以直接使用 tk.mybatis 提供的 tk.mybatis.spring.mapper.MapperScannerConfigurer 进行配置，这个配置和 MyBatis 官方提供的 org.mybatis.spring.mapper.MapperScannerConfigurer 区别只是第一层的包名，tk 和 org。所以使用这种方式时，如果你项目已经使用 org. 进行了配置，只需要改成 tk. 即可。

<bean class="tk.mybatis.spring.mapper.MapperScannerConfigurer">    <property name="basePackage" value="扫描包名"/></bean>

我们项目中采用的是这种xml的配置方式，通用mapper还提供了注解方式的配置，详见文档。

实体类映射

实体类映射类似下列形式

@Table(name="tb_brand")public class Brand implements Serializable{        @Id        private Integer id;                  private String name;        //getter and setter ....}

@Table是指定实体类对应的数据库表  @Id指的是主键映射。经过上面简单的配置后，相当于就有了 MyBatis 中的关系映射了

基础接口select

List<T> select(T record)
根据T对象中的属性名称查询,类似于select * from table where t.name=#{name} and t.password = #{password}T selectOne(T record)
根据实体中的属性进行查询，只能有一个返回值，有多个结果是抛出异常，查询条件使用等号T selectByPrimaryKey(Object key)
根据主键查询   说明：根据主键字段进行查询，方法参数必须包含完整的主键属性，查询条件使用等号int selectCount(T record);
说明：根据实体中的属性查询总数，查询条件使用等号

基础接口insert

int insert(T record);
说明：保存一个实体，null的属性也会保存，不会使用数据库默认值int insertSelective(T record);
说明：保存一个实体，null的属性不会保存，会使用数据库默认值

基础接口Update

int updateByPrimaryKey(T record);
说明：根据主键更新实体全部字段，null值会被更新int updateByPrimaryKeySelective(T record);
说明：根据主键更新属性不为null的值

基础接口delete

int delete(T record);
说明：根据实体属性作为条件进行删除，查询条件使用等号int deleteByPrimaryKey(Object key);
说明：根据主键字段进行删除，方法参数必须包含完整的主键属性什么是ElementUI

Element，“饿了么”出品的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

ElementUI 常用组件

详见elementUI官网  http://element-cn.eleme.io/2.0/#/zh-CN

什么是ES6

编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。

类型 – 布尔型、数字、字符串、对象等。

原型和继承

内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言，并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5，引入了Object.create()、Object.defineProperty()、getters和setters、严格模式以及JSON对象。

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

常用语法新特性

ES6提供了很多语法新特性，下面我们讲解的是我们《青橙》项目中使用到的语法新特性。

变量声明let

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升

电商系统技术特点

• 技术新
  
  

• 技术范围广
  
  

• 分布式
  
  

• 高并发、集群、负载均衡、高可用
  
  

• 海量数据
  
  

• 业务复杂
  
  

• 系统安全
  
  

主要电商模式

• B2B （ Business to Business）是指进行电子商务交易的供需双方都是商家（或企业、公司），她（他）们使用了互联网的技术或各种商务网络平台，完成商务交易的过程。电子商务是现代 B2B marketing的一种具体主要的表现形式。
  案例：阿里巴巴、慧聪网
  
  
• C2C即 Customer（Consumer） to Customer（Consumer），意思就是消费者个人间的电子商务行为。比如一个消费者有一台电脑，通过网络进行交易，把它出售给另外一个消费者，此种交易类型就称为C2C电子商务。
  案例：淘宝、易趣、瓜子二手车
  
  
• B2C是Business-to-Customer的缩写，而其中文简称为“商对客”。“商对客”是电子商务的一种模式，也就是通常说的直接面向消费者销售产品和服务商业零售模式。这种形式的电子商务一般以网络零售业为主，主要借助于互联网开展在线销售活动。B2C即企业通过互联网为消费者提供一个新型的购物环境——网上商店，消费者通过网络在网上购物、网上支付等消费行为。
  注：我们《青橙电商系统》课程采用B2C模式
  案例：唯品会、乐蜂网  
  
  
• B2B2C是一种电子商务类型的网络购物商业模式，B是BUSINESS的简称，C是CUSTOMER的简称，第一个B指的是商品或服务的供应商，第二个B指的是从事电子商务的企业，C则是表示消费者。
  案例：京东商城、天猫商城
  
  
• C2B（Consumer to Business，即消费者到企业），是互联网经济时代新的商业模式。这一模式改变了原有生产者（企业和机构）和消费者的关系，是一种消费者贡献价值（Create Value）， 企业和机构消费价值（Consume Value）。
  C2B模式和我们熟知的供需模式（DSM, Demand SupplyModel）恰恰相反，真正的C2B 应该先有消费者需求产生而后有企业生产，即先有消费者提出需求，后有生产企业按需求组织生产。通常情况为消费者根据自身需求定制产品和价格，或主动参与产品设计、生产和定价，产品、价格等彰显消费者的个性化需求，生产企业进行定制化生产。
  案例：海尔商城、 尚品宅配
  
  
• O2O即Online To Offline（在线离线/线上到线下），是指将线下的商务机会与互联网结合，让互联网成为线下交易的平台，这个概念最早来源于美国。O2O的概念非常广泛，既可涉及到线上，又可涉及到线下,可以通称为O2O。主流商业管理课程均对O2O这种新型的商业模式有所介绍及关注。
  案例：美团、饿了吗
• F2C指的是Factory to customer，即从厂商到消费者的电子商务模式。
  
  

通用mapper简介

        通用 Mapper 是一个可以实现任意 MyBatis 通用方法的框架，项目提供了常规的增删改查操作以及Example相关的单表操作。为什么要用通用mapper？我们这里列举一下原生Mybatis的痛点：

1、mapper.xml文件里有大量的sql，当数据库表字段变动，配置文件就要修改

2、需要自己实现sql分页，select * from table where . . . limit 1,3

自己手写分页，除了传参page、pageSize，还需要返回条目总数count。

3、数据库可移植性差：如果项目更换数据库，比如oracle-->mysql，mapper.xml中的sql要重新写，因为Oracle的PLSQL 和mysql 支持的函数是不同的。

4、生成的代码量过大。

5、批量操作，批量插入，批量更新，需要自写。

而这些，通过通用mapper就可以很轻松的解决了。

在线官方文档：https://gitee.com/free/Mapper/wikis/Home

通用mapper与Spring集成

官方的文档中介绍了通用mapper的三种使用方式 ，纯java使用方式、与Spring集成方式、与SpringBoot集成方式。我们这里给大家介绍的是与Spring集成方式。

（1）引入依赖

正常情况下，Spring 和 MyBatis 的集成环境中，应该已经存在下面的依赖：<dependency>  <groupId>org.mybatis</groupId>  <artifactId>mybatis</artifactId>  <version>版本号</version></dependency><dependency>  <groupId>org.mybatis</groupId>  <artifactId>mybatis-spring</artifactId>  <version>版本号</version></dependency><dependency>  <groupId>org.springframework</groupId>  <artifactId>spring-context</artifactId>  <version>版本号</version></dependency><dependency>  <groupId>org.springframework</groupId>  <artifactId>spring-tx</artifactId>  <version>版本号</version></dependency><dependency>  <groupId>org.springframework</groupId>  <artifactId>spring-jdbc</artifactId>  <version>版本号</version></dependency>

集成通用 Mapper 在上面的基础上添加下面的依赖：

<dependency>    <groupId>tk.mybatis</groupId>    <artifactId>mapper</artifactId>    <version>最新版本</version></dependency>

（2）与spring集成

和通用 Mapper 以前版本一样，可以直接使用 tk.mybatis 提供的 tk.mybatis.spring.mapper.MapperScannerConfigurer 进行配置，这个配置和 MyBatis 官方提供的 org.mybatis.spring.mapper.MapperScannerConfigurer 区别只是第一层的包名，tk 和 org。所以使用这种方式时，如果你项目已经使用 org. 进行了配置，只需要改成 tk. 即可。

<bean class="tk.mybatis.spring.mapper.MapperScannerConfigurer">    <property name="basePackage" value="扫描包名"/></bean>

我们项目中采用的是这种xml的配置方式，通用mapper还提供了注解方式的配置，详见文档。

实体类映射

实体类映射类似下列形式

@Table(name="tb_brand")public class Brand implements Serializable{        @Id        private Integer id;                  private String name;        //getter and setter ....}

@Table是指定实体类对应的数据库表  @Id指的是主键映射。经过上面简单的配置后，相当于就有了 MyBatis 中的关系映射了

基础接口select

List<T> select(T record)
根据T对象中的属性名称查询,类似于select * from table where t.name=#{name} and t.password = #{password}T selectOne(T record)
根据实体中的属性进行查询，只能有一个返回值，有多个结果是抛出异常，查询条件使用等号T selectByPrimaryKey(Object key)
根据主键查询   说明：根据主键字段进行查询，方法参数必须包含完整的主键属性，查询条件使用等号int selectCount(T record);
说明：根据实体中的属性查询总数，查询条件使用等号

基础接口insert

int insert(T record);
说明：保存一个实体，null的属性也会保存，不会使用数据库默认值int insertSelective(T record);
说明：保存一个实体，null的属性不会保存，会使用数据库默认值

基础接口Update

int updateByPrimaryKey(T record);
说明：根据主键更新实体全部字段，null值会被更新int updateByPrimaryKeySelective(T record);
说明：根据主键更新属性不为null的值

基础接口delete

int delete(T record);
说明：根据实体属性作为条件进行删除，查询条件使用等号int deleteByPrimaryKey(Object key);
说明：根据主键字段进行删除，方法参数必须包含完整的主键属性什么是ElementUI

Element，“饿了么”出品的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

ElementUI 常用组件

详见elementUI官网  http://element-cn.eleme.io/2.0/#/zh-CN

什么是ES6

编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。

类型 – 布尔型、数字、字符串、对象等。

原型和继承

内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言，并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5，引入了Object.create()、Object.defineProperty()、getters和setters、严格模式以及JSON对象。

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

常用语法新特性

ES6提供了很多语法新特性，下面我们讲解的是我们《青橙》项目中使用到的语法新特性。

变量声明let

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升