day77(gitee地址,Vant,SpringCloud,Nacos,csmall项目)
day77(gitee地址,Vant,SpringCloud,Nacos,csmall项目)
1.gitee地址
前端Vant项目git地址(包含今天笔记)
https://gitee.com/jtzhanghl/vant2202.git
csmall完整项目
https://gitee.com/jtzhanghl/csmall-cgb2112.git
csmall学习项目
https://gitee.com/jtzhanghl/csmall-class-cgb2202.git
2.Vant
1.概念:
Vant是一个轻量,可靠的移动端组件库,2017开源
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。
课程中使用Vant 2.x版本可以浏览网站
https://youzan.github.io/vant/v2/#/zh-CN/
2.优势
ElementUI是开发电脑浏览器页面的组件库
而Vant是开发移动端显示页面的组件库
酷鲨商城前台设计的是手机来访问,所以使用移动端更合适也就是使用Vant
3.特性
- 🚀 性能极佳,组件平均体积小于 1KB(min+gzip)
- 🚀 65+ 个高质量组件,覆盖移动端主流场景
- 💪 使用 TypeScript 编写,提供完整的类型定义
- 💪 单元测试覆盖率超过 90%,提供稳定性保障
- 📖 提供完善的中英文文档和组件示例
4.创建项目
1.创建文件夹
G:\vue-home>cd demo-vant
2.运行安装\添加Vant支持的npm命令
G:\vue-home\demo-vant>npm i vant@latest-v2 -S
5.添加Vant引用
1.Vue项目的src/main.js中,添加如下引用,启用Vant功能
// 添加Vant引用
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
2.启动项目(npm run serve)
3.浏览器打开
3.服务器端项目演进
1.服务器初期状态
最早的服务器就是安装部署了一些静态页面
功能非常单一,只能做信息的呈现和输出
2.服务器动态页面
后来因为业务和技术的发展,页面连接了数据库,页面中大部分数据来自于数据库中
用户的操作可以修改数据库的内容,这样在不修改页面代码的前提下,页面中的数据可能发生变化
这样的页面可以实现用户注册,登录,查询(基本增删改查)功能
3.用户贡献网页内容
进入21世纪,随着互联网进入千家万户,个人多社交需求的提升
出现了很多主要由用户贡献信息的网站
现在也有很多这样的网站
微博,抖音,淘宝,大众点评或类似的网站
4.微服务时代
随着用户量的增加,和各种新需求的出现,一个服务器应用程序不能支持网站的运行时
就需要多台服务器共同支持网站的运行
我们需要强大的服务器性能,支持各种网站的活动
达到"三高"的目标
"高并发,高可用,高性能"
4.Java服务器项目分类
现在市面上常见的java开发的项目可以分为两大类
1.企业级应用
一般指一个企业或机构内部使用的网站或服务器应用程序
包括的领域很多,包括并不限于:商业,企事业单位,医疗,军事,政府,金融等
这种项目的特征是访问人数不多,不是全国乃至全世界都需要使用的网站
因为人数比较少又没有替代品,所以不强烈要求三高
但是企业级项目一般会有比较复杂的权限设置和业务流程
2.互联网应用
指对全国乃至全世界开放的网站或服务器引用程序
我们手机中安装的app大部分都是互联网应用
微信,支付宝,京东,淘宝,饿了么,美团,抖音,qq音乐,爱奇艺,高德地图等
他们因为商业竞争等各种原因,对服务器性能有要求,也就是前面提到的"三高"
及时并发量非常大,程序也要正常运行,迅速响应
互联网应用一般业务和权限相对简单,但是要求"三高"
3.不同
因为上述java项目的分类偏重点不同
在当今java开发的业界中,有下面的基本规律
- 如果开发的是企业级应用,使用单体架构的情况比较多
- 如果开发的是互联网应用,使用微服务架构的情况比较多
5.微服务
微服务的概念是由Martin Fowler(马丁·福勒)在2014年提出的
1.概念:
微服务是由以单一应用程序构成的小服务,自己拥有自己的行程与轻量化处理,服务依业务功能设计,以全自动的方式部署,与其他服务使用 HTTP API 通信。同时服务会使用最小的规模的集中管理能力,服务可以用不同的编程语言与数据库等组件实现。
简单来说,微服务就是将一个大型项目的各个业务代码,拆分成多个互不干扰的小项目,而这些小项目专心完成自己的功能,而且可以调用别的小项目的方法,从而完成整体功能
京东\淘宝这样的大型互联网应用程序,基本每个操作都是一个单独的微服务在支持:
- 登录服务器
- 搜索服务器
- 商品信息服务器
- 购物车服务器
- 订单服务器
- 支付服务器
- 物流服务器
- .....
2.搭建微服务项目
在微服务概念提出之前(2014年),每个厂商都有自己的解决方案
但是Martin Fowler(马丁·福勒)提出了微服务的标准之后,为了技术统一和兼容性,很多企业开始支持这个标准
现在业界中开发微服务项目,大多数都是在这个标准下的
如果我们自己编写支持这个标准的代码是不现实的,必须通过现成的框架或组件完成满足这个微服务标准的项目结构和格式
当今程序员要想快速完成微服务标准的程序,首选SpringCloud
6.SpringCloud
1.概念:
SpringCloud是由Spring提供的一套能够快速搭建微服务架构程序的框架集
框架集表示SpringCloud不是一个框架,而是很多框架的统称
SpringCloud是为了搭建微服务架构的程序而出现的
有人将SpringCloud称之为"Spring全家桶",广义上指代所有Spring的产品
2.SpringCloud的内容
从内容提供者角度
- Spring自己编写的框架和软件
- Netflix(奈非):早期提供了很多(全套)微服务架构组件
- alibaba(阿里巴巴):新版本SpringCloud推荐使用(正在迅速占领市场)
课程中大量使用alibaba的微服务组件
从功能上分类
- 微服务的注册中心
- 微服务间的调用
- 微服务的分布式事务
- 微服务的限流
- 微服务的网关
- ......
7.Nacos注册中心
1.概念
Nacos是Spring Cloud Alibaba提供的一个软件
这个软件主要具有注册中心和配置中心的功能
我们先学习它注册中心的功能
微服务中所有项目都必须注册到注册中心才能成为微服务的一部分
注册中心和企业中的人力资源管理部门有相似
2.启动
我们要启动Nacos必须保证当前系统配置了java环境变量
简单来说就是要环境变量中,有JAVA_HOME的配置,指向安装jdk的路径
确定了支持java后,可以通过下面路径下载
https://github.com/alibaba/nacos/releases/download/1.4.3/nacos-server-1.4.3.zip
-
cmd结尾的文件是windows版本的
sh结尾的文件是linux和mac版本的
startup是启动文件,shutdown是停止文件
Windows下启动Nacos不能直接双击cmd文件
需要进入dos命令运行
在当前资源管理器地址栏输入cmd
G:\pgm\nacos\bin>startup.cmd -m standalone
-m是设置启动方式参数
standalone翻译为标准的孤独的
意思是单机模式标准运行
运行成功默认占用8848端口,并且在代码中提示
如果不输入standalone运行会失败
startup.cmd -m standalone
验证Nacos的运行状态
打开浏览器输入http://localhost:8848/nacos
-
登录系统
用户名:nacos
密码:nacos
登录之后可以进入后台列表
不能关闭启动nacos的dos窗口
我们要让我们编写的项目注册到Nacos,才能真正是微服务项目
8.创建csmall项目
我们需要学习微服务知识
我们使用一个相对简单的项目结构来学习
微服务框架搭建项目完成版git路径:
https://gitee.com/jtzhanghl/csmall-cgb2112.git
业务概述
这个项目作为学习微服务组件使用
我们需要完成一个添加订单的业务
模拟用户选中购物车中商品并且确定了数量的情况下点击提交订单时后端的操作
1.减少选中商品sku的库存数
2.删除用户再购物车中勾选的商品
3.生成订单,将订单信息保存到数据库
上面三个步骤分别由3个模块完成
- 库存模块:减少库存
- 购物车模块:删除购物车信息
- 订单模块:新增订单
下面就开始搭建这个项目
创建csmall父项目
创建项目名称csmall
首先删除项目的src目录,因为我们使用不到
创建通用项目commons
创建好之后
删除test测试文件夹
删除resources目录
删除SpringBoot启动类
这些都用不到
编写父项目的module配置
<module>csmall-commons</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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>cn.tedu</groupId>
<artifactId>csmall</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<groupId>cn.tedu</groupId>
<artifactId>csmall-commons</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>csmall-commons</name>
<description>Demo project for Spring Boot</description>
<dependencies>
<!--在线api文档-->
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>knife4j-spring-boot-starter</artifactId>
</dependency>
<!-- Spring Boot Web:WEB应用 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-json</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
</project>
创建包
cn.tedu.csmall.commons.pojo.cart.dto包
包中创建类CartAddDTO
代码如下
@ApiModel("购物车新增DTO")
@Data
public class CartAddDTO implements Serializable {
@ApiModelProperty(value = "商品编号",name = "commodityCode",example = "PC100")
private String commodityCode;
@ApiModelProperty(value = "商品单价",name = "price",example = "188")
private Integer price;
@ApiModelProperty(value = "商品个数",name = "count",example = "5")
private Integer count;
@ApiModelProperty(value = "用户ID",name = "userId",example = "UU100")
private String userId;
}
这个类就是新增购物车商品使用的类