乐优商城（01）

2024-01-03 06:08| 来源: 网络整理| 查看: 265

乐优商城（01）–项目启动一、项目介绍乐优商城是一个全品类的电商购物网站（B2C）。用户可以在线购买商品，加入购物车，下单，秒杀商品可以品论已购买商品管理员可以在后台管理商品的上下架，促销活动管理员可以监控商品销售状况客服可以在后台处理退款操作二、项目搭建 2.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.3.11.RELEASE版本

Spring Cloud Alibaba Hoxton.SR8版本

Redis-6.0.15

RabbitMQ-3.4.1-1

Elasticsearch-7.6.2

nginx-1.20.1：

FastDFS - 5.0.8

MyCat

Thymeleaf

2.2、域名

一级域名：www.leyou.com //前端门户网站主域名

二级域名：manage.leyou.com、api.leyou.com //后端管理域名以及api调用域名

2.3、前端环境安装

安装node以及NPM工具

下载地址：https://nodejs.org/en/

下载完成后，cmd控制台输入，看见版本即说明安装成功

node -v

node自带NPM，控制台输入npm -v查看版本信息

npm默认的仓库地址是在国外网站，速度较慢，建议设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

安装nrm，这里-g代表全局安装。

npm install nrm -g

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

通过nrm test来测试所有镜像的下载速度，通过nrm use taobao来指定要使用的taobao镜像源

注意：

有教程推荐使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐。

安装vue，下载地址：https://github.com/vuejs/vue

官网：https://cn.vuejs.org/

随意创建一个目录，进入该目录cmd的控制台

输入命令npm init -y进行初始化

安装vue：输入命令npm install vue --save

成功后，会发现多一个node_modules目录，并且在下面有一个vue目录。

node_modules是通过npm安装的所有模块的默认位置。

2.4、后台管理系统页面搭建

解压压缩包leyou-manage-web.zip，解压后进入该目录cmd控制台，输入命令npm install安装所需依赖

也可以将该项目用idea打开，点击Terminal即开启一个控制台在这里插入图片描述

运行测试：npm run dev

在这里插入图片描述

若想修改启动端口可以进入路径config/index.js下进行修改

在这里插入图片描述

项目目录结构:

在这里插入图片描述

三、环境配置 3.1、统一环境

目前访问后台页面的路径为：http://localhost:9001，这不够优雅，对其进行域名映射

之前有对项目所使用的域名有规定：

主域名是：www.leyou.com管理系统域名：manage.leyou.com网关域名：api.leyou.com

我们将以上域名进行映射

3.2、域名解析

一个域名一定会被解析为一个或多个ip。这一般会包含两步：

本地域名解析

浏览器会首先在本机的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。

Windows下的hosts文件地址：C:/Windows/System32/drivers/etc/hosts

Linux下的hosts文件所在路径： /etc/hosts

域名服务器解析

本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和ip映射关系，一般只要域名是正确的，并且备案通过，一定能找到

3.3、域名映射

官网下载nginx：http://nginx.org/en/download.html

选中windows版本，将压缩包解压即可

修改本地host文件，添加映射关系

127.0.0.1 manage.leyou.com 127.0.0.1 api.leyou.com

修改后，本地访问时路径为http://manage.leyou.com:9001，这不够优雅，我们利用nginx进行反向代理

nginx配置文件中添加下面内容：

server { listen 80; server_name manage.leyou.com; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; location / { proxy_pass http://127.0.0.1:9001; proxy_connect_timeout 1000; proxy_read_timeout 1000; } } server { listen 80; server_name api.leyou.com; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }

nginx的相关命令

#启动 start nginx #停止 nginx -s stop #重启 nginx -s reload 3.4、测试

启动nginx，浏览器输入manage.leyou.com后即进入控制台页面

可能的错误：Invalid Host header

原因：manage.leyou.com映射的ip是127.0.0.1，但是webpack会验证host是否符合配置。

解决办法：在webpack.dev.conf.js中取消host验证：disableHostCheck: true

重新执行npm run dev，刷新浏览器

流程分析：

浏览器准备发起请求，访问http://mamage.leyou.com，但需要进行域名解析优先进行本地域名解析，因为修改了hosts，所以解析成功，得到地址：127.0.0.1请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80本机的nginx一直监听80端口，因此捕获这个请求nginx中配置了反向代理规则，将manage.leyou.com代理到127.0.0.1:9001，因此请求被转发后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginxnginx将得到的结果返回到浏览器四、创建父工程

创建统一的父工程：myLeyou，用来管理项目依赖及其版本，这里直接选用springBoot脚手架快速搭建

在这里插入图片描述

创建成功后，修改pom.xml文件，并将多余的目录文件删除

4.0.0 com.leyou.parent myLeyou 0.0.1-SNAPSHOT myLeyou Demo project for Spring Boot UTF-8 UTF-8 1.8 2.2.5.RELEASE 2.3.11.RELEASE Hoxton.SR8 5.1.47 1.26.1-RELEASE 2.1.1 2.1.5 1.2.13 com.alibaba.cloud spring-cloud-alibaba-dependencies ${spring.cloud.alibaba.version} pom import org.springframework.boot spring-boot-starter-parent ${spring.boot.version} pom import org.springframework.cloud spring-cloud-dependencies ${spring.cloud.version} pom import org.mybatis.spring.boot mybatis-spring-boot-starter ${mybatis.starter.version} tk.mybatis mapper-spring-boot-starter ${mapper.starter.version} com.github.pagehelper pagehelper-spring-boot-starter ${pageHelper.starter.version} mysql mysql-connector-java ${mysql.version} com.github.tobato fastdfs-client ${fastDFS.client.version} org.springframework.boot spring-boot-maven-plugin org.apache.maven.plugins maven-compiler-plugin 3.8.1 1.8 1.8 UTF-8

该工程的pom.xml文件，导入了我们后续所需要的用到的依赖，在该目录下创建的子工程就不需要管理版本了

父工程目录结构：

在这里插入图片描述

五、安装Nacos注册中心

查看官网https://github.com/alibaba/spring-cloud-alibaba/wiki/版本说明

在这里插入图片描述

选择1.4.1的版本进行下载安装，这里我安装在阿里云的服务器中，注意开放阿里云安全组中的端口默认8848

5.1、下载安装

下载地址：https://github.com/alibaba/nacos/tags

官方文档：https://nacos.io/zh-cn/docs/deployment.html

将下载的安装包上传至/opt/目录下（补充：服务器要安装jdk）

输入命令进行解压

tar -zxvf nacos-server-1.4.1.tar.gz

解压后，进入nacos目录下

cd nacos

输入命令单机启动

bin/startup.sh -m standalone

也可以修改startup.sh文件，将MODE修改为standalone，一劳永逸

在这里插入图片描述

浏览器访问 ip+端口/nacos，即进入Nocas的登陆页面,默认用户、密码都为nacos

在这里插入图片描述

5.2、Nacos的简单介绍

这里简单介绍下Nacos：

官方：一个更易于构建云原生应用的动态服务发现(Nacos Discovery )、服务配置(Nacos Config)和服务管理平台

集注册中心+配置中心+服务管理平台于一身

Nacos 的关键特性包括:

服务发现和服务健康监测动态配置服务动态 DNS 服务服务及其元数据管理

核心功能:

服务注册：Nacos Client会通过发送REST请求的方式向Nacos Server注册自己的服务，提供自身的元数据，比如ip地址、端口等信息。Nacos Server接收到注册请求后，就会把这些元数据信息存储在一个双层的内存Map中。

服务心跳：在服务注册后，Nacos Client会维护一个定时心跳来持续通知Nacos Server，说明服务一直处于可用状态，防止被剔除。默认5s发送一次心跳。

服务同步：Nacos Server集群之间会互相同步服务实例，用来保证服务信息的一致性。

服务发现：服务消费者（Nacos Client）在调用服务提供者的服务时，会发送一个REST请求给NacosServer，获取上面注册的服务清单，并且缓存在Nacos Client本地，同时会在Nacos Client本地开启一个定时任务定时拉取服务端最新的注册表信息更新到本地缓存

服务健康检查：Nacos Server会开启一个定时任务用来检查注册服务实例的健康情况，对于超过15s没有收到客户端心跳的实例会将它的healthy属性置为false(客户端服务发现时不会发现)，如果某个实例超过30秒没有收到心跳，直接剔除该实例(被剔除的实例如果恢复发送心跳则会重新注册)

六、创建gateway网关

选择maven方式创建Module，然后填写项目名称，命名为：leyou-gateway

在这里插入图片描述

添加依赖

myLeyou com.leyou.parent 0.0.1-SNAPSHOT 4.0.0 leyou-gateway 8 8 org.springframework.cloud spring-cloud-starter-gateway com.alibaba.cloud spring-cloud-starter-alibaba-nacos-discovery org.hibernate.validator hibernate-validator 6.1.6.Final org.springframework.boot spring-boot-starter-actuator

添加依赖会报一个错误，目前也不知道什么原因，就是下载不下来该版本

在这里插入图片描述

解决方法是：添加6.1.6.Final的版本

编写启动类

@SpringBootApplication @EnableDiscoveryClient //该注解，在alibaba框架中是默认开启的，这里显示标注 public class LeyouGateWayApplication { public static void main(String[] args) { SpringApplication.run(LeyouGateWayApplication.class,args); } }

配置文件

server: port: 10010 spring: application: name: leyou-gateway cloud: nacos: discovery: server-addr: #Nacos安装的机器 ip+端口 username: nacos password: nacos

到这里，基础服务搭建完毕，为了便于开发，Nacos的配置中心服务后面再添加

spring-cloud-gateway简单介绍

网关作为流量的入口，常用的功能包括路由转发，权限校验，限流等。

Spring Cloud Gateway 是Spring Cloud官方推出的第二代网关框架，定位于取代 Netflix Zuul1.0。相比 Zuul 来说，Spring Cloud Gateway 提供更优秀的性能，更强大的有功能。

Spring Cloud Gateway 是由 WebFlux + Netty + Reactor 实现的响应式的 API 网关。它不能在传统的 servlet 容器中工作，也不能构建成 war 包。

Spring Cloud Gateway 旨在为微服务架构提供一种简单且有效的 API 路由的管理方式，并基于 Filter 的方式提供网关的基本功能，例如说安全认证、监控、限流等等

Spring Cloud Gateway 功能特征

基于Spring Framework 5, Project Reactor 和 Spring Boot 2.0 进行构建；动态路由：能够匹配任何请求属性；支持路径重写;集成 Spring Cloud 服务发现功能（Nacos、Eruka）；可集成流控降级功能（Sentinel、Hystrix）；可以对路由指定易于编写的 Predicate（断言）和 Filter（过滤器）

核心概念

路由（route) 路由是网关中最基础的部分，路由信息包括一个ID、一个目的URI、一组断言工厂、一组Filter组成。如果断言为真，则说明请求的URL和配置的路由匹配。断言(predicates) Java8中的断言函数，SpringCloud Gateway中的断言函数类型是Spring5.0框架中的ServerWebExchange。断言函数允许开发者去定义匹配Http request中的任何信息，比如请求头和参数等。过滤器（Filter) SpringCloud Gateway中的filter分为Gateway FilIer和Global Filter。Filter可以对请求和响应进行处理

网关执行流程：

Gateway Client向Gateway Server发送请求

请求首先会被HttpWebHandlerAdapter进行提取组装成网关上下文

然后网关的上下文会传递到DispatcherHandler，它负责将请求分发给RoutePredicateHandlerMapping

RoutePredicateHandlerMapping负责路由查找，并根据路由断言判断路由是否可用

如果断言成功，由FilteringWebHandler创建过滤器链并调用

请求会一次经过PreFilter–微服务–PostFilter的方法，最终返回响应

与其他网关组件相比

ProxyAvg LatencyAvg Req/Sec/Threadgateway6.61ms3.24Klinkered7.62ms2.82kzuul12.56ms2.09knone2.09ms11.77k 七、创建商品微服务 7.1、微服务结构

该服务为核心工程，包含对商品相关的一系列内容的管理：

商品分类管理品牌管理商品规格参数管理商品管理库存管理

与商品的品类相关，工程命名为leyou-item.

需要注意的是，leyou-item是一个微服务，那么将来肯定会有其它系统需要来调用服务中提供的接口，获取的接口数据，也需要对应的实体类来封装，因此肯定也会使用到接口中关联的实体类。

因此这里需要使用聚合工程，将要提供的接口及相关实体类放到独立子工程中，后续要引用的时候，只需要导入依赖坐标即可。

在leyou-item中创建两个子工程：

leyou-item-interface：主要是对外暴露的接口及相关实体类leyou-item-service：所有业务逻辑及内部使用接口 7.2、leyou-item父工程创建

依然使用maven方式创建工程

在这里插入图片描述

因为是聚合工程，所以将项目打包的方式设置为pom

myLeyou com.leyou.parent 0.0.1-SNAPSHOT pom 4.0.0 com.leyou.item leyou-item 8 8

这里补充一句：打包方式为pom的模块一般为父模块，用来管理子模块。因此对父模块的maven命令会对其依赖的子模块若有依赖顺序(子模块与子模块之间的依赖顺序)，按依赖顺序依次执行。方便了项目的关联不需要一个一个模块进行同样的操作，且具有很好的扩展性，可拆分性。建议创建maven项目时，以聚合项目(拥有父模块)为好。

7.3、leyou-item-interface

在leyou-item工程上点击右键，选择new --> module，依然是使用maven构建，注意父工程是leyou-item：

在这里插入图片描述

注意：目录结构，保存到leyou-item下的leyou-item-interface目录中

7.4、leyou-item-service

与leyou-item-interface类似，选择在leyou-item上右键，新建module，然后填写项目信息：

在这里插入图片描述

这里我删除了父工程的src目录

在这里插入图片描述

7.5、添加依赖

给leyou-item-service中添加依赖：

思考需要的依赖包：

Nacos服务注册web启动器mybatis启动器通用mapper启动器分页助手启动器连接池，用默认的Hykiramysql驱动以及leyou-item-interface中的实体类

这些依赖，在顶级父工程已经被管理，所以直接引入即可，无需导入版本号

leyou-item com.leyou.item 0.0.1-SNAPSHOT 4.0.0 leyou-item-service 8 8 com.alibaba.cloud spring-cloud-starter-alibaba-nacos-discovery org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter tk.mybatis mapper-spring-boot-starter com.github.pagehelper pagehelper-spring-boot-starter org.springframework.boot spring-boot-starter-jdbc mysql mysql-connector-java com.leyou.item leyou-item-interface 0.0.1-SNAPSHOT org.springframework.boot spring-boot-starter-actuator 7.6、编写启动类和配置文件 @SpringBootApplication @EnableDiscoveryClient public class LeyouItemApplication { public static void main(String[] args) { SpringApplication.run(LeyouItemApplication.class,args); } }

配置文件:

server: port: 8081 spring: application: name: item-service datasource: url: jdbc:mysql://127.0.0.1:3306/leyou username: root password: 123456 hikari: max-lifetime: 28830000 # 一个连接的生命时长（毫秒），超时而且没被使用则被释放（retired），缺省:30分钟，建议设置比数据库超时时长少30秒，参考MySQL wait_timeout参数（show variables like '%timeout%';） maximum-pool-size: 9 # 连接池中允许的最大连接数。缺省值：10；推荐的公式：((core_count * 2) + effective_spindle_count) driver-class-name: com.mysql.jdbc.Driver cloud: nacos: discovery: server-addr: Nacos服务的ip+端口 username: nacos password: nacos 7.7、添加商品微服务的路由规则

既然商品微服务已经创建，接下来肯定要添加路由规则到gateway中，不使用默认的路由规则。

在leyou-gateway工程的application.yml配置文件添加：

cloud: gateway: routes: - id: item-router uri: http://127.0.0.1:8010 predicates: - Path=/api/item/** filters: - StripPrefix=2 #注意这里暂时写为2，用于测试该属性作用为：转发之前去掉2层路径 7.8、启动测试

启动leyou-gateway，leyou-item-service

在这里插入图片描述