商城项目(一) -- 项目简介、基础搭建及前端部分

leo_messi94

已于 2022-03-31 23:56:45 修改

阅读量3.5k

点赞数 3

分类专栏：项目文章标签：学习

于 2022-03-30 12:00:58 首次发布

本文链接：https://blog.csdn.net/weixin_39724194/article/details/123842675

版权

项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 项目简介

1.1 背景

电商相关模式：

B2B：是指商家和商家建立的商业关系，如阿里巴巴
B2C：就是我们经常看到的供应商直接把商品卖给用户，即 “商对客” 模式，也就是我们呢说的商业零售，直接面向消费销售产品和服务，如苏宁易购，京东，天猫，小米商城
C2B：即消费者对企业，先有消费者需求产生而后有企业生产，即先有消费者提出需求，后又生产企业按需求组织生产
C2C：客户之间把自己的东西放到网上去卖，如淘宝、咸鱼
O2O（ONLINE to OFFLINE）：也即将线下商务的机会与互联网结合在一起，让互联网成为线上交易前台，线上快速支付，线上优质服务，如：饿了么，美团，淘票票，京东到家

1.2 谷粒商城架构图

在这里插入图片描述

前后分离开发，分为内网部署和外网部署，外网是面向公众访问的。
访问前端项目，可以有手机APP，电脑网页；内网部署的是后端集群，
前端在页面上操作发送请求到后端，在这途中会经过Nginx集群，
Nginx把请求转交给API网关(springcloud gateway)（网关可以根据当
前请求动态地路由到指定的服务，看当前请求是想调用商品服务还是购
物车服务还是检索服务），从路由过来如果请求很多，可以负载均衡地调
用商品服务器中一台（商品服务复制了多份），当商品服务器出现问题也
可以在网关层面对服务进行熔断或降级（使用阿里的sentinel组件），网关
还有其他的功能如认证授权、限流（只放行部分到服务器）等。

到达服务器后进行处理（springboot为微服务），服务与服务可能会相互
调用（使用feign组件），有些请求可能经过登录才能进行（基于OAuth2.0的
认证中心。安全和权限使用springSecurity控制）

服务可能保存了一些数据或者需要使用缓存，我们使用redis集群（分片+哨兵集
群）。持久化使用mysql，读写分离和分库分表。

服务和服务之间会使用消息队列（RabbitMQ），来完成异步解耦，分布式事务
的一致性。有些服务可能需要全文检索，检索商品信息，使用ElaticSearch。

服务可能需要存取数据，使用阿里云的对象存储服务OSS。

项目上线后为了快速定位问题，使用ELK对日志进行处理，使用LogStash收
集业务里的各种日志，把日志存储到ES中，用Kibana可视化页面从ES中检
索出相关信息，帮助我们快速定位问题所在。

在分布式系统中，由于我们每个服务都可能部署在很多台机器，服务和服务
可能相互调用，就得知道彼此都在哪里，所以需要将所有服务都注册到注册
中心。服务从注册中心发现其他服务所在位置（使用阿里Nacos作为注册
中心）。

每个服务的配置众多，为了实现改一处配置相同配置就同步更改，就需要配
置中心，也使用阿里的Nacos，服务从配置中心中动态取配置。

服务追踪，追踪服务调用链哪里出现问题，使用springcloud提供的Sleuth、
Zipkin、Metrics，把每个服务的信息交给开源的Prometheus进行聚合分析，
再由Grafana进行可视化展示，提供Prometheus提供的AlterManager实时
得到服务的警告信息，以短信/邮件的方式告知服务开发人员。

还提供了持续集成和持续部署。项目发布起来后，因为微服务众多，每一个都打
包部署到服务器太麻烦，有了持续集成后开发人员可以将修改后的代码提交到
github，运维人员可以通过自动化工具Jenkins Pipeline将github中获取的代码打
包成docker镜像，最终是由k8s集成docker服务，将服务以docker容器的方式运行。

2. 分布式基础概念

2.1 微服务

微服务架构风格，就像是把一个单独的应用程序开发成一套小服务，每个小
服务运行在自己的进程中，并使用轻量级机制通信，通常是 HTTP API 这些
服务围绕业务能力来构建，并通过完全自动化部署机制来独立部署，这些服
务使用不同的编程语言书写，以及不同数据存储技术，并保持最低限度的集中式管理

简而言之，拒绝大型单体应用，基于业务边界进行服务微化拆分，每个服务独
立部署运行。

2.2 集群&分布式&节点

集群：是个物理状态，分布式是个工作方式，只要是一堆机器，也可以叫做集群，他们是不是一起协作干活，这谁也不知道。
分布式：《分布式系统原理与范型》定义：分布式系统是若干独立计算机的集合，这些计算机对于用户来说像单个系统；分布式系统 (distributed system) 是建立网络之上的软件系统；
节点：集群中的一个服务器

分布式是指根据不同的业务分布在不同的地方

集群指的是将几台服务器集中在一起，实现同一业务

例如：京东是一个分布式系统，众多业务运行在不同的机器上，所有业务构成
一个大型的分布式业务集群，每一个小的业务，比如用户系统，访问压力大的
时候一台服务器是不够的，我们就应该将用户系统部署到多个服务器，也就是
每一个业务系统也可以做集群化

分布式中的每一个节点，都可以做集群，而集群并不一定就是分布式的

2.3 远程调用

在分布式系统中，各个服务可能处于不同主机，但是服务之间不可避免的需要
互相调用，我们称之为远程调用

SpringCloud中使用HTTP+JSON的方式来完成远程调用

2.4 负载均衡

分布式系统中，A 服务需要调用B服务，B服务在多台机器中都存在，
A调用任意一个服务器均可完成功能

为了使每一个服务器都不要太或者太闲，我们可以负载均衡调用每一个服务器，
提升网站的健壮性

常见的负载均衡算法：

轮询：为第一个请求选择健康池中的每一个后端服务器，然后按顺序往后依
次选择，直到最后一个，然后循环
最小连接：优先选择链接数最少，也就是压力最小的后端服务器，在会话较
长的情况下可以考虑采取这种方式

2.5 服务注册/发现&注册中心

A服务调用B服务，A服务不知道B服务当前在哪几台服务器上有，哪些正常的，哪些服务已经下线，解决这个问题可以引入注册中心

如果某些服务下线，我们其他人可以实时的感知到其他服务的状态，从而避免调用不可用的服务

在这里插入图片描述

2.6 配置中心

在这里插入图片描述
每一个服务最终都有大量配置，并且每个服务都可能部署在多个服务器上，我们经常需要变更配置，我们可以让每个服务在配置中心获取自己的配置。

配置中心用来集中管理微服务的配置信息

2.7 服务熔断&服务降级

在微服务架构中，微服务之间通过网络来进行通信，存在相互依赖，当其中一个服务不可用时，有可能会造成雪崩效应，要防止这种情况，必须要有容错机制来保护服务
在这里插入图片描述
rpc情景：
订单服务 --> 商品服务 --> 库存服务

库存服务出现故障导致响应慢，导致商品服务需要等待，可能等到10s后库存服务才能响应。库存服务的不可用导致商品服务阻塞，商品服务等的期间，订单服务也处于阻塞。一个服务不可用导致整个服务链都阻塞。如果是高并发，第一个请求调用后阻塞10s得不到结果，第二个请求直接阻塞10s。更多的请求进来导致请求积压，全部阻塞，最终服务器的资源耗尽，导致雪崩

服务熔断：设置服务的超时，当被调用的服务经常失败到达某个阈值，我们可以开启断路保护机制，后来的请求不再去调用这个服务，本地直接返回默认的数据
服务降级：在运维期间，当系统处于高峰期，系统资源紧张，我们可以让非核心业务降级运行，降级：某些服务不处理，或者简单处理【抛异常，返回NULL，调用 Mock数据，调用 FallBack 处理逻辑

2.8 api网关

在微服务架构中，API Gateway 作为整体架构的重要组件，抽象服务中需要的公共功能，同时它提供了客户端负载均衡，服务自动熔断，灰度发布，统一认证，限流监控，日志统计等丰富功能，帮助我们解决很多API管理的难题

3. 环境搭建，数据库初始化，项目架构搭建

3.1 环境搭建

服务器：阿里云服务器
docker安装：docker安装
docker的mysql及redis安装：mysql及redis安装
maven安装及配置：安装不多说，在settings配置文件中添加：

在maven配置文件配置
配置阿里云镜像
<mirrors>
	<mirror>
		<id>nexus-aliyun</id>
		<mirrorOf>central</mirrorOf>
		<name>Nexus aliyun</name>
		<url>http://maven.aliyun.com/nexus/content/groups/public</url>
	</mirror>
</mirrors>

配置 jdk 1.8 编译项目
<profiles>
	<profile>
		<id>jdk-1.8</id>
		<activation>
			<activeByDefault>true</activeByDefault>
			<jdk>1.8</jdk>
		</activation>
		<properties>
			<maven.compiler.source>1.8</maven.compiler.source>
			<maven.compiler.target>1.8</maven.compiler.target>
			<maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
		</properties>
	</profile>
</profiles>

vscode、idea开发插件安装：安装不多说，安装完成后下载插件：

# vscode中：
Auto Close Tag、Auto Rename Tag、Chinese、ESlint、HTML CSS Support
HTML Snippets、JavaScript (ES6) code snippets、Live Server
open in brower、Vetur

# idea中：
lombok、mybatisx

git安装完成后，使用ssh免密连接

# 在win桌面启动git bash客户端

# 配置用户名
git config --global user.name "username"  //(名字，随意写)

# 配置邮箱
git config --global user.email "55333@qq.com" // 注册账号时使用的邮箱

# 配置ssh免密登录
ssh-keygen -t rsa -C "55333@qq.com"

三次回车后生成了密钥，也可以查看密钥，查看后复制
cat ~/.ssh/id_rsa.pub


# 浏览器登录码云后，个人头像上点设置、然后点ssh公钥、随便填个标题，然后赋值
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC6MWhGXSKdRxr1mGPZysDrcwABMTrxc8Va2IWZyIMMRHH9Qn/wy3PN2I9144UUqg65W0CDE/thxbOdn78MygFFsIG4j0wdT9sdjmSfzQikLHFsJ02yr58V6J2zwXcW9AhIlaGr+XIlGKDUy5mXb4OF+6UMXM6HKF7rY9FYh9wL6bun9f1jV4Ydlxftb/xtV8oQXXNJbI6OoqkogPKBYcNdWzMbjJdmbq2bSQugGaPVnHEqAD74Qgkw1G7SIDTXnY55gBlFPVzjLWUu74OWFCx4pFHH6LRZOCLlMaJ9haTwT2DB/sFzOG/Js+cEExx/arJ2rvvdmTMwlv/T+6xhrMS3 55533@qq.com

# 测试
ssh -T git@gitee.com

# 测试成功
Hi unique_perfect! You've successfully authenticated, but GITEE.COM does not provide shell access.

3.2 项目创建、数据库初始化

gitee中创建仓库
将创建好的项目通过git拉到idea中，不多说
项目及商城数据库表初始化，见项目中，不多说
gitignore排除文件，不多说

3.3 引入人人开源快速构建后台

这里我们到gitee上搜索人人开源，使用renren-fast和renren-fast-vue项目。
打开git bash客户端，通过git clone，我们将这两个项目拉到本地。

3.3.1 后台初始化

删除renren-fast中的.git文件，然后将项目复制到我们的商城项目的文件中去，这个就算是我们的后台项目
打开人人项目中的db文件，复制初始化sql到navicat中执行，初始化出后台表文件
在主pom中引入renren-fast子项目

<modules>
	<module>cmall-product</module>
	<module>cmall-member</module>
	<module>cmall-order</module>
	<module>cmall-product</module>
	<module>cmall-ware</module>
	<module>renren-fast</module>
</modules>

修改数据库连接信息和port后启动

io.renren.RenrenApplication              : Started RenrenApplication in 9.014 seconds (JVM running for 10.529)

3.3.2 前端项目初始化

安装node（帮助下载前端需要的一些包，有点类似于maven）：下载node-v10.16.3-x64.msi版本，一路next
查看是否安装：node -v
使用淘宝镜像加速：npm config set registry http://registry.npm.taobao.org/
将renren-fast-vue项目删除.git文件，然后拖入到vscode中
打开vscode的终端，执行npm install下载前端项目需要的包
如果出现以下报错：

7. 报错：
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.27.2 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chromedriver@2.27.2 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\installation_program\nodeRepository\npm_cache\_logs\2021-02-09T07_38_47_075Z-debug.log

2. 解决报错：
先删除目录下的node_module文件，然后执行：npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
3. 再次执行npm install

4. 如果还是不行，查看你的node版本和项目中的node-sass版本是否一致，我的node是10.16.3,node-sass版本是4.9.0

完成后，全局搜索下8080端口，修改为8086，因为之前我们在后端已经修改为8086，然后npm run dev 启动，输入账号密码admin admin登陆

3.3.3 使用逆向工程生成crud代码

从人人开源拉取renren-generator项目到本地
删除git文件，然后将generator项目拷贝到cmall项目中
修改application文件和generator.properties文件
启动renren-generator项目，打开后台管理
选中需要生成代表的表，点击生成代码
将生成的文件解压复制到各个服务中，
新建common项目，拷贝renren-fast中的内容，作为通用服务，让各个服务引用通用服务，然后解决各个服务中的报错，看项目，不多说

3.4 启动测试

3.4.1 common中添加数据库连接

删掉common里xss/xssfiler和XssHttpServletRequestWrapper

在common的pom.xml中导入

<!-- 数据库驱动 https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.17</version>
</dependency>
<!--tomcat里一般都带-->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
    <scope>provided</scope>  # Tomcat有带，所以provided
</dependency>

3.4.2 编写yml文件

在product项目的resources目录下新建application.yml

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://192.168.1.103:3306/gulimall_pms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: root


# MapperScan
# sql映射文件位置
mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto

3.4.3 测试

然后在主启动类上加上注解@MapperScan()：

@MapperScan("com.yhx.cmall.product.dao")

然后去测试，先通过下面方法给数据库添加内容

@RunWith(SpringRunner.class)
@SpringBootTest
class CmallProductApplicationTests {

    @Autowired
    BrandService brandService;

    @Test
    void contextLoads() {
        BrandEntity brandEntity = new BrandEntity();
        brandEntity.setDescript("hello");
        brandEntity.setName("华为");
        brandService.save(brandEntity);
        System.out.println("保存成功");
    }
}

leo_messi94

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
商城项目(一) -- 项目简介、基础搭建及前端部分

1. 项目简介1.1 背景电商相关模式：B2B：是指商家和商家建立的商业关系，如阿里巴巴B2C：就是我们经常看到的供应商直接把商品卖给用户，即 “商对客” 模式，也就是我们呢说的商业零售，直接面向消费销售产品和服务，如苏宁易购，京东，天猫，小米商城C2B：即消费者对企业，先有消费者需求产生而后有企业生产，即先有消费者提出需求，后又生产企业按需求组织生产C2C：客户之间把自己的东西放到网上去卖，如淘宝、咸鱼O2O（ONLINE to OFFLINE）：也即将线下商务的机会与互联网结合在一起
复制链接

扫一扫