乐优商场开发第四天笔记

0.学习目标

  • 了解电商行业

  • 了解乐优商城项目结构

  • 能独立搭建项目基本框架

  • 能参考使用ES6的新语法

 

1.了解电商行业

学习电商项目,自然要先了解这个行业,所以我们首先来聊聊电商行业

 

1.1.项目分类

主要从需求方、盈利模式、技术侧重点这三个方面来看它们的不同

1.1.1.传统项目

各种企业里面用的管理系统(ERP、HR、OA、CRM、物流管理系统。。。。。。。)

  • 需求方:公司、企业内部

  • 盈利模式:项目本身卖钱

  • 技术侧重点:业务功能

 

1.1.2.互联网项目

门户网站、电商网站:baidu.com、qq.com、taobao.com、jd.com ......

  • 需求方:广大用户群体

  • 盈利模式:虚拟币、增值服务、广告收益......

  • 技术侧重点:网站性能、业务功能

而我们今天要聊的就是互联网项目中的重要角色:电商

 

1.2.电商行业的发展

1.2.1.钱景

近年来,中国的电子商务快速发展,交易额连创新高,电子商务在各领域的应用不断拓展和深化、相关服务业蓬勃发展、支撑体系不断健全完善、创新的动力和能力不断增强。电子商务正在与实体经济深度融合,进入规模性发展阶段,对经济社会生活的影响不断增大,正成为我国经济发展的新引擎。

中国电子商务研究中心数据显示,截止到 2012 年底,中国电子商务市场交易规模达 7.85万亿人民币,同比增长 30.83%。其中,B2B 电子商务交易额达 6.25 万亿,同比增长 27%。而 2011 年全年,中国电子商务市场交易额达 6 万亿人民币,同比增长 33%,占 GDP 比重上升到 13%;2012 年,电子商务占 GDP 的比重已经高达 15%。

 

1.2.2.数据

来看看双十一的成交数据:

2016双11开场30分钟,创造每秒交易峰值17.5万笔每秒支付峰值12万笔的新纪录。菜鸟单日物流订单量超过4.67亿,创历史新高。

 

1.2.3.技术特点

从上面的数据我们不仅要看到钱,更要看到背后的技术实力。正是得益于电商行业的高强度并发压力,促使了BAT等巨头们的技术进步。电商行业有些什么特点呢?

  • 技术范围广

  • 技术新

  • 高并发(分布式、静态化技术、缓存技术、异步并发、池化、队列)

  • 高可用(集群、负载均衡、限流、降级、熔断)

  • 数据量大

  • 业务复杂

  • 数据安全

 

1.3.常见电商模式

电商行业的一些常见模式:

  • B2C:商家对个人,如:亚马逊、当当等

  • C2C平台:个人对个人,如:闲鱼、拍拍网、ebay

  • B2B平台:商家对商家,如:阿里巴巴、八方资源网等

  • O2O:线上和线下结合,如:饿了么、电影票、团购等

  • P2P:在线金融,贷款,如:网贷之家、人人聚财等。

  • B2C平台:天猫、京东、一号店等

 

1.4.一些专业术语

  • SaaS:软件即服务

  • SOA:面向服务

  • RPC:远程过程调用

  • RMI:远程方法调用

  • PV:(page view),即页面浏览量;

    用户每1次对网站中的每个网页访问均被记录1次。用户对同一页面的多次访问,访问量累计

  • UV:(unique visitor),独立访客

    指访问某个站点或点击某条新闻的不同IP地址的人数。在同一天内,uv只记录第一次进入网站的具有独立IP的访问者,在同一天内再次访问该网站则不计数。

  • PV与带宽:

    • 计算带宽大小需要关注两个指标:峰值流量和页面的平均大小。

    • 计算公式是:网站带宽= ( PV * 平均页面大小(单位MB)* 8 )/统计时间(换算到秒)

    • 为什么要乘以8?

      • 网站大小为单位是字节(Byte),而计算带宽的单位是bit,1Byte=8bit

    • 这个计算的是平均带宽,高峰期还需要扩大一定倍数

  • PV、QPS、并发

    • QPS:每秒处理的请求数量。

      • 比如你的程序处理一个请求平均需要0.1S,那么1秒就可以处理10个请求。QPS自然就是10,多线程情况下,这个数字可能就会有所增加。

    • 由PV和QPS如何需要部署的服务器数量?

      • 根据二八原则,80%的请求集中在20%的时间来计算峰值压力:

      • (每日PV * 80%) / (3600s * 24 * 20%) * 每个页面的请求数 = 每个页面每秒的请求数量

      • 然后除以服务器的QPS值,即可计算得出需要部署的服务器数量

 

1.5.项目开发流程

项目经理:管人

产品经理:设计需求原型

测试:

前端:大前端。

后端:

移动端:

项目开发流程图:

公司现状:

 

2.乐优商城介绍

2.1.项目介绍

  • 乐优商城是一个全品类的电商购物网站(B2C)。

  • 用户可以在线购买商品、加入购物车、下单

  • 可以评论已购买商品

  • 管理员可以在后台管理商品的上下架、促销活动

  • 管理员可以监控商品销售状况

  • 客服可以在后台处理退款操作

  • 希望未来3到5年可以支持千万用户的使用

 

2.2.系统架构

2.2.1.架构图

乐优商城架构缩略图,大图请参考课前资料:

 

2.2.2.系统架构解读

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

  • 后台管理:

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

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

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

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

      • 权限管理,整个网站的权限控制,采用JWT鉴权方案,对用户及API进行权限控制

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

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

  • 前台门户

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

      • 搜索商品

      • 加入购物车

      • 下单

      • 评价商品等等

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

 

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

  • 商品微服务:商品及商品分类、品牌、库存等的服务

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

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

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

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

  • Eureka注册中心

  • Zuul网关服务

  • ...

 

3.项目搭建

3.1.技术选型

前端技术:

  • 基础的HTML、CSS、JavaScript(基于ES6标准)

  • JQuery

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

  • 前端构建工具:WebPack

  • 前端安装包工具:NPM

  • Vue脚手架:Vue-cli

  • Vue路由:vue-router

  • ajax框架:axios

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

后端技术:

  • 基础的SpringMVC、Spring 5.x和MyBatis3

  • Spring Boot 2.0.4版本

  • Spring Cloud 最新版 Finchley.Release

  • Redis-4.0

  • RabbitMQ-3.4

  • Elasticsearch-6.3

  • nginx-1.14.2

  • FastDFS - 5.0.8

  • MyCat

  • Thymeleaf

 

3.2.开发环境

为了保证开发环境的统一,希望每个人都按照我的环境来配置:

  • IDE:我们使用Idea 2017.3 版本

  • JDK:统一使用JDK1.8

  • 项目构建:maven3.3.9以上版本即可(3.5.2)

  • 版本控制工具:git

 

idea大家可以在我的课前资料中找到。另外,使用帮助大家可以参考课前资料的《idea使用指南.md》

 

3.3.域名

我们在开发的过程中,为了保证以后的生产、测试环境统一。尽量都采用域名来访问项目。

一级域名:www.leyou.com

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

我们可以通过switchhost工具来修改自己的host对应的地址,只要把这些域名指向127.0.0.1,那么跟你用localhost的效果是完全一样的。

switchhost可以去课前资料寻找。

 

3.4.创建父工程

创建统一的父工程:leyou,用来管理依赖及其版本,注意是创建project,而不是module

填写项目信息:

填写保存的位置信息:

然后将pom文件修改成我这个样子:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
​
    <groupId>com.leyou.parent</groupId>
    <artifactId>leyou</artifactId>
    <version>1.0.0-SNAPSHOT</version&g
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值