❤ 作者主页：欢迎来到我的技术博客😎
❀ 个人介绍：大家好，本人热衷于Java后端开发，欢迎来交流学习哦！(￣▽￣)~*
🍊 如果文章对您有帮助，记得关注、点赞、收藏、评论⭐️⭐️⭐️
📣 您的支持将是我创作的动力，让我们一起加油进步吧！！！🎉🎉
一、Spring Cloud Alibaba
1. Spring Cloud Alibaba简介
Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案。此项目包含开发分布式应用微服务的必需组件，方便开发者通过 Spring Cloud 编程模型轻松使用这些组件来开发分布式应用服务。
依托 Spring Cloud Alibaba，您只需要添加一些注解和少量配置，就可以将 Spring Cloud 应用接入阿里微服务解决方案，通过阿里中间件来迅速搭建分布式应用系统。
官方：https://github.com/alibaba/spring-cloud-alibaba
2. 为什么使用
SpringCloud 的几大痛点：
- SpringCloud 部分组件停止维护和更新，给开发带来不便；
- SpringCloud 部分环境搭建复杂，没有完善的可视化界面，我们需要大量的二次开发和定制；
- SpringCloud 配置复杂，难以上手，部分配置差别难以区分和合理应用。
SpringCloud Alibaba 的优势：
- 阿里使用过的组件经历了考验，性能强悍，设计合理，现在开源出来大家用；
- 成套的产品搭配完善的可视化界面给开发运维带来极大的便利；
- 搭建简单，学习曲线低。
结合 SpringCloud Alibaba 我们最终的技术搭配方案：
- SpringCloud Alibaba - Nacos：注册中心（服务发现/注册）
- SpringCloud Alibaba - Nacos：配置中心（动态配置管理）
- SpringCloud - Ribbon：负载均衡
- SpringCloud - Feign：声明式 HTTP 客户端（调用远程服务）
- SpringCloud Alibaba - Sentinel：服务容错（限流、降级、熔断）
- SpringCloud - Gateway：API 网关（webflux 编程模式）
- SpringCloud - Sleuth：调用链监控
- SpringCloud Alibaba - Seata：原 Fescar，即分布式事务解决方案
二、分布式组件
父工程中引入依赖：
（spring boot 2.3.2 + sprin gcloud Hoxton.SR8 + spring cloud alibaba 2.2.5.RELEASE）
<dependencyManagement>
<dependencies>
<!--spring boot 2.3.2-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>2.3.2.RELEASE</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<!--spring cloud Hoxton.SR8-->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-dependencies</artifactId>
<version>Hoxton.SR8</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<!--spring cloud alibaba 2.2.5.RELEASE-->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-alibaba-dependencies</artifactId>
<version>2.2.5.RELEASE</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencyManagement>
1. nacos作为注册服务中心
1、nacos下载与安装
- 下载地址：https://github.com/alibaba/nacos/releases
- 解压安装包，直接运行bin目录下的startup.cmd即可。
- 命令运行成功后直接访问 http://localhost:8848/nacos，默认账号密码都是 nacos。
2、使用nacos
- 配置信息，即nacos的地址以及模块在nacos中以什么命名：
server: port: 7000 spring: datasource: username: root password: 123456 url: jdbc:mysql://64.114.116.33:1234/gulimall_sms?userUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai driver-class-name: com.mysql.jdbc.Driver application: name: gulimall-coupon cloud: nacos: discovery: server-addr: 127.0.0.1:8848 mybatis-plus: mapper-locations: classpath*:/mapper/**/*.xml global-config: db-config: id-type: auto # 主键自增 - 在
gulimall-common模块中引入依赖<dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> </dependency> - 在主启动类上使用
@EnableDiscoveryClient注解，开启服务注册与发现功能@EnableDiscoveryClient @SpringBootApplication public class GulimallCouponApplication { public static void main(String[] args) { SpringApplication.run(GulimallCouponApplication.class, args); } }
3、启动gulimall-coupon模块, 查看服务注册中心
4、按照以上步骤依次给member/order/product/ware配置
2. openfegin远程调用
feign是一个声明式的HTTP客户端，他的目的就是让远程调用更加简单。给远程服务发的是HTTP请求。
会员服务想要远程调用优惠券服务，只需要给会员服务里引入openfeign依赖，他就有了远程调用其他服务的能力。
1、引入依赖
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>
2、演示member服务调用coupon服务
- 在gulimall-coupon中的CouponController中添加测试方法
@RequestMapping("/member/list") public R membercoupons(){ //全系统的所有返回都返回R // 模拟去数据库查用户对于的优惠券 CouponEntity couponEntity = new CouponEntity(); couponEntity.setCouponName("满100-10");//优惠券的名字 return R.ok().put("coupons",Arrays.asList(couponEntity)); } - 在member的主启动类上加注解
@EnableDiscoveryClient，告诉member是一个远程调用客户端@EnableDiscoveryClient @SpringBootApplication @EnableFeignClients(basePackages="com.xmh.gulimall.member.feign")//扫描接口方法注解 public class GulimallMemberApplication { public static void main(String[] args) { SpringApplication.run(GulimallMemberApplication.class, args); } } - 在com.xmh.gulimall.member.feign中新建接口CouponFeignService
@FeignClient("gulimall-coupon")//告诉spring cloud这个接口是一个远程客户端，要调用coupon服务(nacos中找到) public interface CouponFeignService { // 远程服务的url @RequestMapping("/coupon/coupon/member/list")//注意写全优惠券类上还有映射 public R membercoupons();//得到一个R对象 } - 在member的MemberController写一个测试
@Autowired private CouponFeignService couponFeignService; //注入刚才的CouponFeignService接口 @RequestMapping("/coupons") public R coupons(){ MemberEntity memberEntity = new MemberEntity(); memberEntity.setNickname("会员昵称张三"); R membercoupons = couponFeignService.membercoupons(); return R.ok().put("member", memberEntity).put("coupons", membercoupons.get("coupons")); }
3、测试
同时启动 gulimall-member、gulimall-coupon这两个项目，访问 http://localhost:8000/member/member/coupons进行测试。
3. nacos作为配置中心
我们还可以用nacos作为配置中心。配置中心的意思是不在application.properties 等文件中配置了，而是放到nacos配置中心公用，这样无需每台机器都改。
-
在common中引入配置中心的依赖
<dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId> </dependency> -
在coupons项目中创建/src/main/resources/bootstrap.properties ，这个文件是 springboot里规定的，他优先级别application.properties高
#springboot里规定的，bootstrap.properties的优先级比application.properties高 # 改名字，对应nacos里的配置文件名 spring.application.name=gulimall-coupon spring.cloud.nacos.config.server-addr=127.0.0.1:8848 -
添加测试的常量
coupon.user.name=zhangsan coupon.user.age=18 -
测试获取配置文件
@Value("${coupon.user.name}") private String name; @Value("${coupon.user.age}") private int age; @RequestMapping("/nacos") public R nacos(){ return R.ok().put("name", name).put("age", age); }
-
在nacos中发布配置
-
在Controller加上
@RefreshScope来动态获取配置数据 -
动态修改配置中心的配置
-
测试再次访问 http://localhost:7000/coupon/coupon/nacos，可以看到动态刷新配置成功
4. nacos配置中心进阶
1、命名空间
用于进行租户粒度的配置隔离。不同的命名空间下，可以存在相同的 Group 或 Data ID 的配置。Namespace 的常用场景之一是不同环境的配置的区分隔离，例如开发测试环境和生产环境的资源（如配置、服务）隔离等。（一般每个微服务对应一个命名空间）
在nacos中创建对应的命名空间：
在 bootstrap.proeperties中指定使用哪个命名空间：
spring.cloud.nacos.config.namespace=ed042b3b-b7f3-4734-bdcb-0c516cb357d7 # 可以选择对应的命名空间 ，即写上对应环境的命名空间ID
2、配置集ID
配置集： 在系统中，一个配置文件通常就是一个配置集，包含了系统各个方面的配置。例如，一个配置集可能包含了数据源、线程池、日志级别等配置项。
配置集ID： 类似于配置文件名，即Data ID。
3、配置分组
默认所有的配置集都属于DEFAULT_GROUP。自己可以创建分组，比如双十一，618，双十二。
最终方案：每个微服务创建自己的命名空间，然后使用配置分组区分环（dev/test/prod）。
spring.cloud.nacos.config.group=DEFAULT_GROUP # 更改配置分组
4、加载配置分组
将一个配置文件从，抽取成多个配置文件。
bootstrap.properties:
#服务名
spring.application.name=achangmall-coupon
#配置中心地址
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
#可以选择对应的命名空间 ，即写上对应环境的命名空间ID
spring.cloud.nacos.config.namespace=ed042b3b-b7f3-4734-bdcb-0c516cb357d7
# 配置文件所在的组
spring.cloud.nacos.config.group=dev
#加载多配置集
#数据源配置
spring.cloud.nacos.config.ext-config[0].data-id=datasource.yml
spring.cloud.nacos.config.ext-config[0].group=dev
spring.cloud.nacos.config.ext-config[0].refresh=true
#mybaits配置
spring.cloud.nacos.config.ext-config[1].data-id=mybatis.yml
spring.cloud.nacos.config.ext-config[1].group=dev
spring.cloud.nacos.config.ext-config[1].refresh=true
#其他配置
spring.cloud.nacos.config.ext-config[2].data-id=other.yml
spring.cloud.nacos.config.ext-config[2].group=dev
spring.cloud.nacos.config.ext-config[2].refresh=true
5. GateWay网关
1、简介：
网关作为流量的入口，常用功能包括路由转发、权限校验、限流控制等。而 springcloud gateway作为 SpringCloud 官方推出的第二代网关框架，取代了 Zuul 网关。
网关提供 API 全托管服务，丰富的 API 管理功能，辅助企业管理大规模的 API，以降低管理成本和安全风险，包括协议适配、协议转发、安全策略、防刷、流量、监控日志等功能。
Spring Cloud Gateway 旨在提供一种简单而有效的方式来对 API 进行路由，并为他们提供切面，例如：安全性，监控/指标 和弹性等。
Spring Cloud Gateway 特点:
- 基于 Spring5，支持响应式编程和 SpringBoot2.0
- 支持使用任何请求属性进行路由匹配
- 特定于路由的断言和过滤器
- 集成 Hystrix 进行断路保护
- 集成服务发现功能
- 易于编写 Predicates 和 Filters
- 支持请求速率限制
- 支持路径重写
使用 API 网关后的优点如下：
- 易于监控。可以在网关收集监控数据并将其推送到外部系统进行分析。
- 易于认证。可以在网关上进行认证，然后再将请求转发到后端的微服务，而无须在
每个微服务中进行认证。 - 减少了客户端与各个微服务之间的交互次数。
2、核心概念
- 路由。路由是网关最基础的部分，路由信息有一个 ID、一个目的 URL、一组断言和一组Filter 组成。如果断言路由为真，则说明请求的 URL 和配置匹配。
- 断言。Java8 中的断言函数。Spring Cloud Gateway 中的断言函数输入类型是 Spring5.0 框架中的 ServerWebExchange。Spring Cloud Gateway 中的断言函数允许开发者去定义匹配来自于 http request 中的任何信息，比如请求头和参数等。
- 过滤器。一个标准的 Spring webFilter。Spring cloud gateway 中的 filter 分为两种类型的Filter，分别是 Gateway Filter 和 Global Filter。过滤器 Filter 将会对请求和响应进行修改处理。
工作原理：
客户端发送请求给网关，弯管 HandlerMapping 判断是否请求满足某个路由，满足就发给网关的 WebHandler。这个 WebHandler 将请求交给一个过滤器链，请求到达目标服务之前，会执行所有过滤器的 pre 方法。请求到达目标服务处理之后再依次执行所有过滤器的 post 方法。
一句话：满足某些断言（predicates）就路由到指定的地址（uri），使用指定的过滤器（filter）。
3、使用
-
创建新模块 gulimall-gateway
-
在 pom.xml 中引入依赖
<dependencies> <dependency> <groupId>com.xmh.gulimall</groupId> <artifactId>gulimall-common</artifactId> <version>1.0.0-SNAPSHOT</version> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-gateway</artifactId> </dependency> </dependencies> -
开启注册服务发现@EnableDiscoveryClient
//不自动装配数据源 @SpringBootApplication(exclude = {DataSourceAutoConfiguration.class}) @EnableDiscoveryClient //开启注册服务发现 public class AchangmallGatewayApplication { public static void main(String[] args) { SpringApplication.run(AchangmallGatewayApplication.class, args); } } -
配置nacos注册中心地址applicaion.properties
spring.application.name=gulimallmall-gateway spring.cloud.nacos.discovery.server-addr=localhost:8848 server.port=88 -
bootstrap.properties 填写配置中心地址
spring.application.name=gulimall-gateway spring.cloud.nacos.config.server-addr=localhost:8848 spring.cloud.nacos.config.namespace=d4b1e29c-de65-47fb-9817-334099a69352 -
nacos里创建命名空间gateway，然后在命名空间里创建文件gulimall-gateway.yml
spring: cloud: gateway: routes: - id: baidu_route # 每一个路由的名字，唯一即可 uri: https://www.baidu.com # 匹配后提供服务的路由地址 predicates: # 断言规则 - Query=url,baidu #如果url参数等于baidu 符合断言，转到uri - id: qq_route # 每一个路由的名字，唯一即可 uri: https://www.qq.com # 匹配后提供服务的路由地址 predicates: # 断言规则 - Query=url,qq #如果url参数等于baidu 符合断言，转到uri -
测试
启动 gulimall-gateway模块，访问http://localhost:88/?url=baidu
三、前端基础
1. ES6基础
1、let & const
快捷键：！+ Enter生成模板
- let声明后不能作用于{}外，var可以
- let只能声明一次，var可以声明多次
- var会变量提升（使用在定义之前），let必须先定义再使用
- const一旦初始化后，不能改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
// let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;
// let
// 1. const声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.
</script>
</body>
</html>
2、解构表达式
- 数组解构
let arr = [1,2,3];let [a,b,c] = arr - 对象解构
const{name:abc, age, language} = person其中name:abc代表把name改名为abc - 字符串函数
str.startsWith();str.endsWith();str.includes();str.includes() - 字符串模板，``支持一个字符串定义为多行
- 占位符功能 ${}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//数组解构
let arr = [1,2,3];
// // let a = arr[0];
// // let b = arr[1];
// // let c = arr[2];
let [a,b,c] = arr;
console.log(a,b,c)
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// const name = person.name;
// const age = person.age;
// const language = person.language;
//对象解构 // 把name属性变为abc，声明了abc、age、language三个变量
const { name: abc, age, language } = person;
console.log(abc, age, language)
//4、字符串扩展
let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true
//字符串模板 ``可以定义多行字符串
let ss = `<div>
<span>hello world<span>
</div>`;
console.log(ss);
function fun() {
return "这是一个函数"
}
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
console.log(info);
</script>
</body>
</html>
3、函数优化
- 支持函数形参默认值
function add(a, b = 1){} - 支持不定参数
function fun(...values){} - 支持箭头函数
var print = obj => console.log(obj); - 支持箭头函数+解构函数
var hello2 = ({name}) => console.log("hello," +name); hello2(person);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
// 判断b是否为空，为空就给默认值1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));
//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a, b = 1) {
return a + b;
}
console.log(add2(20));
//2）、不定参数
function fun(...values) {
console.log(values.length)
}
fun(1, 2) //2
fun(1, 2, 3, 4) //4
//3）、箭头函数。lambda
//以前声明一个方法
// var print = function (obj) {
// console.log(obj);
// }
var print = obj => console.log(obj);
print("hello");
var sum = function (a, b) {
c = a + b;
return a + c;
}
var sum2 = (a, b) => a + b;
console.log(sum2(11, 12));
var sum3 = (a, b) => {
c = a + b;
return a + c;
}
console.log(sum3(10, 20))
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
function hello(person) {
console.log("hello," + person.name)
}
//箭头函数+解构
var hello2 = ({name}) => console.log("hello," +name);
hello2(person);
</script>
</body>
</html>
4、对象优化
- 可以获取map的键值对
Object.keys()、Object.values、Object.entries Object.assgn(target,source1,source2)合并source1，source2到target- 支持对象名声明简写：如果属性名和属性值的变量名相同可以省略
let someone = {...person}取出person对象所有的属性拷贝到当前对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
// 合并
//{a:1,b:2,c:3}
Object.assign(target, source1, source2);
console.log(target);//["name", "age", "language"]
//2）、声明对象简写
const age = 23
const name = "张三"
const person1 = { age: age, name: name }
// 等价于
const person2 = { age, name }//声明对象简写
console.log(person2);
//3）、对象的函数属性简写
let person3 = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数this不能使用，要使用的话需要使用：对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("香蕉");
person3.eat2("苹果")
person3.eat3("橘子");
//4）、对象拓展运算符
// 1、拷贝对象（深拷贝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = { name: "zhangsan" }
p2 = { ...age1, ...name1 }
console.log(p2)
</script>
</body>
</html>
5、map和reduce
arr.map()接收一个函数，将arr中的所有元素用接收到的函数处理后放入新的数组arr.reduce()为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//数组中新增了map和reduce方法。
//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3'];
// arr = arr.map((item)=>{
// return item*2
// });
arr = arr.map(item => item * 2);
console.log(arr);
//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//[2, 40, -10, 6]
//arr.reduce(callback,[initialValue])
/**
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）*/
let result = arr.reduce((a, b) => {
console.log("上一次处理后：" + a);
console.log("当前正在处理：" + b);
return a + b;
}, 100);
console.log(result)
</script>
</body>
</html>
<script>
//数组中新增了map和reduce方法。
//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3'];
// arr = arr.map((item)=>{
// return item*2
// });
arr = arr.map(item => item * 2);
console.log(arr);
//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//[2, 40, -10, 6]
//arr.reduce(callback,[initialValue])
/**
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）*/
let result = arr.reduce((a, b) => {
console.log("上一次处理后：" + a);
console.log("当前正在处理：" + b);
return a + b;
}, 100);
console.log(result)
</script>
</body>
</html>
6、promise
- 优化异步操作。封装ajax
- 把Ajax封装到Promise中，赋值给let p
- 在Ajax中成功使用resolve(data)，失败使用reject(err)
- p.then().catch()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
//1、查出当前用户信息
//2、按照当前用户的id查出他的课程
//3、按照当前课程id查出分数
// $.ajax({
// url: "mock/user.json",
// success(data) {
// console.log("查询用户：", data);
// $.ajax({
// url: `mock/user_corse_${data.id}.json`,
// success(data) {
// console.log("查询到课程：", data);
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success(data) {
// console.log("查询到分数：", data);
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
//1、Promise可以封装异步操作
// let p = new Promise((resolve, reject) => {
// //1、异步操作
// $.ajax({
// url: "mock/user.json",
// success: function (data) {
// console.log("查询用户成功:", data)
// resolve(data);
// },
// error: function (err) {
// reject(err);
// }
// });
// });
// p.then((obj) => {
// return new Promise((resolve, reject) => {
// $.ajax({
// url: `mock/user_corse_${obj.id}.json`,
// success: function (data) {
// console.log("查询用户课程成功:", data)
// resolve(data);
// },
// error: function (err) {
// reject(err)
// }
// });
// })
// }).then((data) => {
// console.log("上一步的结果", data)
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success: function (data) {
// console.log("查询课程得分成功:", data)
// },
// error: function (err) {
// }
// });
// })
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
get("mock/user.json")
.then((data) => {
console.log("用户查询成功~~~:", data)
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功~~~:", data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("课程成绩查询成功~~~:", data)
})
.catch((err)=>{
console.log("出现异常",err)
});
</script>
</body>
</html>
7、模块化
export用于规定模块的对外接口,export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象import用于导入其他模块提供的功能
// user.js
var name = "jack"
var age = 21
function add(a,b){
return a + b;
}
// 导出变量和函数
export {name,age,add}
---------------------------------------------------------------
// hello.js
// 导出后可以重命名
export default {
sum(a, b) {
return a + b;
}
}
--------------------------------------------------------------
// main.js
import abc from "./hello.js"
import {name,add} from "./user.js"
abc.sum(1,2);
console.log(name);
add(1,3);
2. VUE基础
MVVM思想
M：model 包括数据和一些基本操作
V：view 视图，页面渲染结果
VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
视图和数据通过VM绑定起来，model里有变化会自动地通过Directives填写到视view中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。
官方文档：https://cn.vuejs.org/v2/guide/
1、VUE安装
给当前项目安装vue
npm init -y
npm install vue
引入vue
<script src="./node_modules/vue/dist/vue.js"></script>
2、v-model, v-on
- new VUE
- v-model 双向绑定
- v-on 绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<!-- v-model实现双向绑定。此处代表输入框和vue里的data绑定 -->
<button v-on:click="num++">点赞</button>
<!-- v-on:click绑定事件，实现自增。 -->
<button v-on:click="cancel">取消</button>
<!-- 回调自定义的方法。 此时字符串里代表的函数 -->
<h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
<!-- 先从vue中拿到值填充到dom，input再改变num值，vue实例更新，然后此处也更新 -->
</div>
<!-- 导入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1、vue声明式渲染
let vm = new Vue({ //生成vue对象
el: "#app",//绑定元素 div id="app" // 可以指定恰标签，但是不可以指定body标签
data: { //封装数据
name: "张三", // 也可以使用{} //表单中可以取出
num: 1
},
methods:{ //封装方法
cancel(){
this.num -- ;
},
hello(){
return "1"
}
}
});
// 还可以在html控制台vm.name
//2、双向绑定,模型变化，视图变化。反之亦然。
//3、事件处理
//v-xx：指令
//1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
//2、指令来简化对dom的一些操作。
//3、声明方法来做更复杂的操作。methods里面可以封装方法。
</script>
</body>
</html>
3、v-text、v-html、v-ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}} {{1+1}} {{hello()}} 前面的内容如果网速慢的话会先显示括号，然后才替换成数据。
v-html 和v-text能解决这个问题
<br/>
用v-html取内容
<span v-html="msg"></span>
<br/>
原样显示
<span v-text="msg"></span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"<h1>Hello</h1>",
link:"http://www.baidu.com"
},
methods:{
hello(){
return "World"
}
}
})
</>
</body>
</html>
4、单向绑定v-bind:
-
花括号只能写在标签体内（
<div 标签内> 标签体 </div>），不能用在标签内。插值表达式只能用在标签体里，如果我们这么用
<a href="{{}}">是不起作用的，所以要用v-bind -
跳转页面
<a v-bind:href="link">跳转</a> -
用
v-bind:，简写为:。表示把model绑定到view。可以设置src、title、class等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<!-- 给html标签的属性绑定 -->
<div id="app">
<a v-bind:href="link">跳转</a>
<!-- class,style {class名：vue值}-->
<span v-bind:class="{active:isActive,'text-danger':hasError}"
:style="{color: color1,fontSize: size}">你好</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
link: "http://www.baidu.com",
isActive:true,
hasError:true,
color1:'red',
size:'36px'
}
})
</script>
</body>
</html>
5、双向绑定v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 表单项，自定义组件 -->
<div id="app">
精通的语言：如果是多选框，那么会把每个value值赋值给vue数据
<input type="checkbox" v-model="language" value="Java"> java<br/>
<input type="checkbox" v-model="language" value="PHP"> PHP<br/>
<input type="checkbox" v-model="language" value="Python"> Python<br/>
选中了 {{language.join(",")}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
language: []
}
})
</script>
</body>
</html>
6、v-on事件
-
事件监听可以使用 v-on 指令
-
v-on:事件类型="方法"，可以简写成@事件类型="方法" -
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
-
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
- .stop - 阻止冒泡
- .prevent - 阻止默认事件
- .capture - 阻止捕获
- .self - 只监听触发该元素的事件
- .once - 只触发一次
- .left - 左键事件
- .right - 右键事件
- .middle - 中间滚轮事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!--事件中直接写js片段-->
<button v-on:click="num++">点赞</button>
<!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
<button @click="cancel">取消</button>
<!-- -->
<h1>有{{num}}个赞</h1>
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
小div <br />
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
</div>
</div>
<!-- 按键修饰符： -->
<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />
提示：
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
num: 1
},
methods:{
cancel(){
this.num--;
},
hello(){
alert("点击了")
}
}
})
</script>
</body>
</html>
7、v-for遍历
- 可以遍历 数组[] 字典{} 。对于字典
<li v-for="(value, key, index) in object"> - 遍历的时候都加上:key来区分不同数据，提高vue渲染效率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
<li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
<!-- 1、显示user信息：v-for="item in items" -->
当前索引：{{index}} ==> {{user.name}} ==>
{{user.gender}} ==>{{user.age}} <br>
<!-- 2、获取数组下标：v-for="(item,index) in items" -->
<!-- 3、遍历对象：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-->
对象信息：
<span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
<!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
</li>
</ul>
<ul>
<li v-for="(num,index) in nums" :key="index"></li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
users: [
{ name: '柳岩', gender: '女', age: 21 },
{ name: '张三', gender: '男', age: 18 },
{ name: '范冰冰', gender: '女', age: 24 },
{ name: '刘亦菲', gender: '女', age: 18 },
{ name: '古力娜扎', gender: '女', age: 25 }
],
nums: [1,2,3,4,4]
},
})
</script>
</body>
</html>
8、v-if和v-show
-
在vue实例的data指定一个bool变量，然后v-show赋值即可。show里的字符串也可以比较
-
if是根据表达式的真假，切换元素的显示和隐藏（操作dom元素）
-
区别：show的标签F12一直都在，if的标签会移除，
-
if操作dom树对性能消耗大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
v-show，当得到结果为true时，所在的元素才会被显示。
-->
<div id="app">
<button v-on:click="show = !show">点我呀</button>
<!-- 1、使用v-if显示 -->
<h1 v-if="show">if=看到我....</h1>
<!-- 2、使用v-show显示 -->
<h1 v-show="show">show=看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
9、v-else和v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="random=Math.random()">点我呀</button>
<span>{{random}}</span>
<h1 v-if="random>=0.75">
看到我啦? >= 0.75
</h1>
<h1 v-else-if="random>=0.5">
看到我啦? >= 0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我啦? >= 0.2
</h1>
<h1 v-else>
看到我啦? < 0.2
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: { random: 1 }
})
</script>
</body>
</html>
10、计算属性和监听器
计算属性computed：属性不是具体值，而是通过一个函数计算出来的，随时变化
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
监听watch:监听属性 watch，我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现计数器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
<ul>
<li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
<li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
<li>总价：{{totalPrice}}</li>
{{msg}}
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//watch可以让我们监控一个值的变化。从而做出相应的反应。
new Vue({
el: "#app",
data: {
xyjPrice: 99.98,
shzPrice: 98.00,
xyjNum: 1,
shzNum: 1,
msg: ""
},
computed: {
totalPrice(){
return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
}
},
watch: {
xyjNum: function(newVal,oldVal){
if(newVal>=3){
this.msg = "库存超出限制";
this.xyjNum = 3
}else{
this.msg = "";
}
}
},
})
</script>
</body>
</html>
11、过滤器filter
过滤器filter：定义filter组件后，管道符后面跟具体过滤器{{user.gender | gFilter}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
<div id="app">
<ul>
<li v-for="user in userList">
{{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
{{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 全局过滤器
Vue.filter("gFilter", function (val) {
if (val == 1) {
return "男~~~";
} else {
return "女~~~";
}
})
let vm = new Vue({
el: "#app",
data: {
userList: [
{ id: 1, name: 'jacky', gender: 1 },
{ id: 2, name: 'peter', gender: 0 }
]
},
filters: { // 局部过滤器，只可以在当前vue实例中使用
genderFilter(val) {
if (val == 1) {
return "男";
} else {
return "女";
}
}
}
})
</script>
</body>
</html>
12、组件化
-
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
-
但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
-
在vue里，所有的vue实例都是组件
-
组件其实也是一个vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
-
不同的是组件不会与页面的元素绑定（所以不写el），否则就无法复用了，因此没有el属性。
-
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
-
data必须是一个函数，不再是一个对象。
-
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div id="app">
<button v-on:click="count++">我被点击了 {{count}} 次</button>
每个对象都是独立统计的
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<button-counter></button-counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//1、全局声明注册一个组件 // counter标签，代表button
// 把页面中<counter>标签替换为指定的template，而template中的数据用data填充
Vue.component("counter", {
template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
data() {// 如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：
return {
count: 1 // 数据
}
}
});
//2、局部声明一个组件
const buttonCounter = {
template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
data() {
return {
count: 1
}
}
};
new Vue({
el: "#app",
data: {
count: 1
},
components: { // 局部声明的组件
'button-counter': buttonCounter
}
})
</script>
</body>
</html>
13、生命周期和钩子函数
每个vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板、渲染模板等等。vue为生命周期中的每个状态都设置了钩子函数（监听函）。每当vue实列处于不同的生命周期时，对应的函数就会被触发调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span id="num">{{num}}</span>
<button @click="num++">赞！</button>
<h2>{{name}}，有{{num}}个人点赞</h2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "张三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("=========beforeCreate=============");
console.log("数据模型未加载：" + this.name, this.num);
console.log("方法未加载：" + this.show());
console.log("html模板未加载：" + document.getElementById("num"));
},
created: function () {
console.log("=========created=============");
console.log("数据模型已加载：" + this.name, this.num);
console.log("方法已加载：" + this.show());
console.log("html模板已加载：" + document.getElementById("num"));
console.log("html模板未渲染：" + document.getElementById("num").innerText);
},
beforeMount() {
console.log("=========beforeMount=============");
console.log("html模板未渲染：" + document.getElementById("num").innerText);
},
mounted() {
console.log("=========mounted=============");
console.log("html模板已渲染：" + document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=========beforeUpdate=============");
console.log("数据模型已更新：" + this.num);
console.log("html模板未更新：" + document.getElementById("num").innerText);
},
updated() {
console.log("=========updated=============");
console.log("数据模型已更新：" + this.num);
console.log("html模板已更新：" + document.getElementById("num").innerText);
}
});
</script>
</body>
</html>
3. vue-dome
1、全局安装webpack
npm install webpack -g
2、全局安装vue脚手架
npm install -g @vue/cli-init
3、初始化vue项目
在工程文件夹下cmd，输入以下命令初始化vue项目appname为想要起的工程名
vue init webpack appname
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9otdBgiC-1675586866991)(谷粒商城.assets/image-20210927110259380.png)]](https://img-blog.csdnimg.cn/882e0ef9036e4408986cacec759016ec.png)
如果一直卡在downloading template，配置淘宝镜像
npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver
初始化成功，运行项目
cd vue-dome
npm run dev
启动成功。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MbAraU6a-1675586866991)(谷粒商城.assets/image-20210927110328858.png)]](https://img-blog.csdnimg.cn/15dd3257a8104c5b8824a077885142ef.png)
4、vue项目目录结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等 |
| index.html | 首页入口文件。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
5、修改vue项目
1、分析项目的关系结构
- index.html
其中只有一个div
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
- main.js
new Vue绑定div
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //采用router路由
components: { App },//绑定App组件
template: '<App/>'
})
- App.vue
- 首先显示一张图片，图片路径为
"./assets/logo.png
- 其中的
<router-view/>是根据url要决定访问的vue,在main.js中提及了使用的是./router规则
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
...
</style>
- router/index.js
routes表示路由规则
当访问/时， 显示组件Helloword
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
2、实现点击Hello，显示自己创建的Hello组件
- 创建hello.vue组件
<template>
<div>
<h1>你好，hello，{{name}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
name: "张三"
}
}
}
</script>
<style>
</style>
- 编写路由，修改/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/hello' //导入自定义的组件
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
//新增路由
{
path: '/hello',
name: "Hello",
component: Hello
}
]
})
- 修改App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/hello">去hello</router-link> <!--新增去hello-->
<router-link to="/">去首页</router-link><!--新增去首页-->
<router-view/>
</div>
</template>
- 运行测试效果
6、快速生成组件模板
1、文件->首选项->用户代码 新建全局代码片段
2、把下面代码粘贴进去
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前this实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
"}",
"</script>",
"<style scoped>",
"$4",
"</style>"
],
"description": "生成vue模板"
}
}
3、在创建组件时直接输入vue点击回车就可生成模板
4. ElementUI
官方文档：https://element.eleme.cn/#/zh-CN/component/installation
1、安装
npm install element-ui
2、在main.js下引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
然后就可以使用elementui之中的组件。
3、快速搭建后台管理系统的页面
elementui手册中找到Container 布局容器，找到代码直接复制到App.vue组件
启动测试：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1bEX8Kja-1675586866992)(谷粒商城.assets/image-20210927111110073.png)]](https://img-blog.csdnimg.cn/5cbc32cb32184d6fa037d64622d38de6.png)
4、实现当点击用户列表，显示用户。点击hello组件，显示hello。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8nX2xs2n-1675586866992)(谷粒商城.assets/image-20210927111213237.png)]](https://img-blog.csdnimg.cn/7fb98879e235482e87cce0077bdbed31.png)
- 把
<el-main>中的数据列表换成路由视图<router-view></router-view>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLZAApzk-1675586866992)(谷粒商城.assets/image-20210927111502253.png)]](https://img-blog.csdnimg.cn/d7ee04e4631b4ca08c84152ba2fc0473.png)
- 新建MyTable组件，用来显示用户数据
<!-- -->
<template>
<div class="">
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140"> </el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
};
return {
tableData: Array(20).fill(item),
};
},
};
</script>
<style scoped>
</style>
- 添加路由规则
import MyTable from '@/components/MyTable'
{
path: '/mytable',
name: "mytable",
components: MyTable
}
- 修改App.vue
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CIgBXtf8-1675586866993)(谷粒商城.assets/image-20210927111630855.png)]](https://img-blog.csdnimg.cn/50a99ef54b0a409c90c0e890a52387f9.png)
启动测试。
四、java8 特性
在这里需要重新学习一下lambda表达式和Stream API，在下一功能的开发中需要用到。
1. Lambda表达式
1、举例：(o1, o2)->Integer.compare(o1, o2)
2、格式：
- -> :lambda操作符 或 箭头操作符
- -> 左边: lambda形参列表（其实就是接口中的抽象方法的形参）
- -> 右边: lambda体（其实就是重写的抽象方法的方法体）
3、总结：
-> 左边: lambda形参列表的参数类型可以省略（类型推断），如果形参列表只有一个参数，其一对（）也可以省略。
-> 右边: lambda体应该使用一对{}包裹；如果lambda体只执行一条语句（可能是return语句），可以省略这一对{}和return关键字。
2. Stream API
1、简介：
Stream是Java8中处理集合的关键抽象概念，它可以指定你希望对集合进行的操作，可以执行非常复杂的查找、过滤和映射数据等操作。
使用Stream API对集合数据进行操作，就类似于使用sql执行的数据库查询。也可以使用Stream API来并行执行操作。简而言之，Stream API提供了一种高效且易于使用的处理数据的方式。
2、Stream的操作流程：
（1）创建Stream ：一个数据源（如：集合、数组），获取一个流
（2）中间操作： 一个中间操作链，对数据源的数据进行处理
（3）终止操作（终端操作）： 一个终止操作，执行中间操作链，并产生结果
3、生成流
-
由collection创建流
// 1.1可以通过Collection系列集合提供的stream()或parallelStream() List<String> list = new ArrayList<>(); Stream<String> stream1 = list.stream(); -
由数组创建流
// 1.2通过Arrays中的静态方法stream()获取数组流 Employee[] emps = new Employee[10]; Stream<Employee> stream2 = Arrays.stream(emps);
4、中间操作
-
filter–接收 Lambda，从流中排除某些元素。// (1)、filter——接收 Lambda ， 从流中排除某些元素。 @Test public void testFilter() { //这里加入了终止操作 ，不然中间操作一系列不会执行 //中间操作只有在碰到终止操作才会执行 emps.stream() .filter((e)->e.getAge()>18) .forEach(System.out::println);//终止操作 }注意：这里filter主要是过滤一些条件，这里的话就是把年龄小于18岁的Employee对象给过滤掉，然后用forEach给遍历一下，因为中间操作只有碰到终止操作才会执行，不然的话，看不到过滤效果。以下的操作都大部分都forEach了一下，为方便看到效果。filter用的还是很多的
-
limit–截断流，使其元素不超过给定数量。// （2）、limit——截断流，使其元素不超过给定数量。 @Test public void testLimit() { emps.stream() .filter((e)->e.getAge()>8) .limit(4)//跟数据库中的limit有异曲同工之妙 .forEach(System.out::println);//终止操作 }注意：这里我利用了上面的filter跟limit，代码意思是：过滤掉年龄小于8的，只要4条数据。这种".“式操作很有意思，就是中间操作都可以一直”.",直到得到你想要的要求。
-
skip(n)–跳过元素，返回一个扔掉了前n个元素的流。若流中元素不足n个，则返回一个空流。与limit(n) 互补// （3）、skip(n) —— 跳过元素，返回一个扔掉了前 n 个元素的流。若流中元素不足 n 个，则返回一个空流。与 limit(n) 互补 @Test public void testSkip() { emps.stream() .filter((e)->e.getAge()>8) .skip(2)//这里可以查找filter过滤后的数据，前两个不要，要后面的，与limit相反 .forEach(System.out::println);//终止操作 }注意：这里同样使用了filter中间操作，也可以不用，代码意思是：过滤掉年龄小于8岁的employee对象，然后前两个对象不要，只要后面的对象。跟limit意思相反。
-
distinct–筛选，通过流所生成元素的 hashCode() 和 equals() 去除重复元素// （4）、distinct——筛选，通过流所生成元素的 hashCode() 和 equals() 去除重复元素 @Test public void testDistinct() { emps.stream() .distinct()//去除重复的元素，因为通过流所生成元素的 hashCode() 和 equals() 去除重复元素，所以对象要重写hashCode跟equals方法 .forEach(System.out::println);//终止操作 }注意:distinct，去除重复的元素，因为通过流所生成元素的 hashCode() 和 equals() 去除重复元素，所以对象要重写hashCode跟equals方法，我在Employee对象中重写了这两个方法。
-
map–接收Lambda，将元素转换成其他形式或提取信息。接收一个函数作为参数，该函数会被应用到每个元素上，并将其映射成一个新的元素。 -
flatMap–接收一个函数作为参数，将流中的每个值都转换成另一个流，然后把所有流连接成一个流// map-接收Lambda，将元素转换成其他形式或提取信息。接收一个函数作为参数，该函数会被应用到每个元素上，并将其映射成一个新的元素。 @Test public void testMapAndflatMap() { List<String> list=Arrays.asList("aaa","bbb","ccc","ddd"); list.stream() .map((str)->str.toUpperCase())//里面是Function .forEach(System.out::println); System.out.println("----------------------------------"); //这里是只打印名字，map映射，根据Employee::getName返回一个name，映射成新的及结果name emps.stream() .map(Employee::getName) .forEach(System.out::println); System.out.println("======================================"); //流中流 Stream<Stream<Character>> stream = list.stream() .map(StreamAPI::filterCharacter); //{{a,a,a},{b,b,b}} //map是一个个流（这个流中有元素）加入流中 stream.forEach(sm->{ sm.forEach(System.out::println); }); System.out.println("=============引进flatMap============="); // 只有一个流 Stream<Character> flatMap = list.stream() .flatMap(StreamAPI::filterCharacter); //flatMap是将一个个流中的元素加入流中 //{a,a,a,b,b,b} flatMap.forEach(System.out::println); } /** * 测试map跟flatMap的区别 * 有点跟集合中的add跟addAll方法类似 * add是将无论是元素还是集合，整体加到其中一个集合中去[1,2,3.[2,3]] * addAll是将无论是元素还是集合，都是将元素加到另一个集合中去。[1,2,3,2,3] * @param str * @return */ public static Stream<Character> filterCharacter(String str){ List<Character> list=new ArrayList<>(); for (Character character : str.toCharArray()) { list.add(character); } return list.stream(); }注意：map跟flatMap还是有区别的，map是一个个流（这个流中有元素）加入流中，flatMap是将一个个流中的元素加入流中.
-
sorted(Comparator com)----定制排序（Comparator）@Test public void testSorted() { List<String> list=Arrays.asList("ccc","aaa","bbb","ddd","eee"); list.stream() .sorted() .forEach(System.out::println); System.out.println("=======定制排序========="); emps.stream() .sorted((x, y) -> { if(x.getAge() == y.getAge()){ return x.getName().compareTo(y.getName()); }else{ return Integer.compare(x.getAge(), y.getAge()); } }).forEach(System.out::println); }
5、终止操作
-
allMatch——检查是否匹配所有元素System.out.println("==========allMatch=============="); boolean allMatch = emps.stream() .allMatch((e)->e.getStatus().equals(Status.BUSY)); System.out.println(allMatch); -
anyMatch——检查是否至少匹配一个元素System.out.println("==========anyMatch=============="); boolean anyMatch = emps.stream() .anyMatch((e)->e.getAge()>10); System.out.println(anyMatch); -
noneMatch——检查是否没有匹配的元素System.out.println("==========noneMatch=============="); boolean noneMatch = emps.stream() .noneMatch((e)->e.getStatus().equals(Status.BUSY)); System.out.println(noneMatch); -
findFirst——返回第一个元素System.out.println("==========findFirst=============="); Optional<Employee2> findFirst = emps.stream() .sorted((e1, e2) -> Double.compare(e1.getSalary(), e2.getSalary()))//按照工资排序并输出第一个 .findFirst(); System.out.println(findFirst); -
findAny——返回当前流中的任意元素System.out.println("==========findAny=============="); Optional<Employee2> findAny = emps.stream() .filter((e)->e.getStatus().equals(Status.BUSY)) .findAny(); System.out.println(findAny); -
count——返回流中元素的总个数System.out.println("==========count=============="); long count = emps.stream() .count(); System.out.println(count); -
max——返回流中最大值System.out.println("==========max=============="); Optional<Double> max = emps.stream() .map(Employee2::getSalary) .max(Double::compare); System.out.println(max); -
min——返回流中最小值System.out.println("==========min=============="); Optional<Employee2> min = emps.stream() .min((e1,e2)->Double.compare(e1.getSalary(), e2.getSalary())); System.out.println(min); -
reduce(T identity, BinaryOperator) / reduce(BinaryOperator)——可以将流中元素反复结合起来，得到一个值。@Test public void testReduce() { List<Integer> list= Arrays.asList(1,2,3,4,5,6,7,8,9,10); Integer sum = list.stream() .reduce(0,(x,y)->x+y); System.out.println(sum); Optional<Double> reduce = emps.stream() .map(Employee2::getSalary) .reduce(Double::sum); System.out.println(reduce.get()); }
Collector接口中方法的实现决定了如何对流执行收集操作（如收集到List、Set、Map）。但是Collectors实用类提供了很多静态方法，可以方便地创建常见收集器实例，具体方法与实例如下表：
| 方法 | 返回类型 | 作用 |
|---|---|---|
| toList | List | 把流中元素收集到List |
| toSet | Set | 把流中元素收集到Set |
| toCollection | Conllection | 把流中元素收集到创建的集合 |
| counting | Long | 计算流元素中的个数 |
| summingInt | Integer | 对流中元素的整数属性求和 |
| avargingInt | Double | 计算流中元素Integer属性的平均值 |
| summarizingInt | IntSummaryStatistics | 收集流中Integer属性的统计值,如平均值 |
| joining | String | 连接流中的每个字符串 |
| maxBy | Optional | 根据比较器选择最大值 |
| minBy | Optional | 根据比较器选择最小值 |
| reducing | 归约产生的类型 | 从一个作为累加器的初始值开始，利用BinaryOperator与流中元素逐个结合，从而归约成单个值 |
| collectingAndThen | 转换函数返回的类型 | 包裹另一个收集器，对其结果转换函数 |
| groupingBy | Map<K, List> | 根据某属性值对流分组，属性为K，结果为V |
| partitioningBy | Map<Boolean, List> | 根据true或者false进行分区 |
-
Collectors.toList()List<String> collect = emps.stream() .map(Employee2::getName) .collect(Collectors.toList()); collect.forEach(System.out::println); -
Collectors.toSet()Set<String> collect2 = emps.stream() .map(Employee2::getName) .collect(Collectors.toSet()); collect2.forEach(System.out::println); -
Collectors.toCollection(HashSet::new)HashSet<String> collect3 = emps.stream() .map(Employee2::getName) .collect(Collectors.toCollection(HashSet::new)); collect3.forEach(System.out::println); -
Collectors.maxBy()Optional<Double> collect = emps.stream() .map(Employee2::getSalary) .collect(Collectors.maxBy(Double::compare)); System.out.println(collect.get()); Optional<Employee2> collect2 = emps.stream() .collect(Collectors.maxBy((e1, e2) -> Double.compare(e1.getSalary(), e2.getSalary()))); System.out.println(collect2.get()); -
Collectors.minBy()Optional<Double> collect4 = emps.stream() .map(Employee2::getSalary) .collect(Collectors.minBy(Double::compare)); System.out.println(collect4); Optional<Employee2> collect3 = emps.stream() .collect(Collectors.minBy((e1,e2)->Double.compare(e1.getSalary(),e2.getSalary()))); System.out.println(collect3.get()); -
Collectors.summingDouble()Double collect5 = emps.stream() .collect(Collectors.summingDouble(Employee2::getSalary)); System.out.println(collect5); -
Collectors.averagingDouble()Double collect6 = emps.stream() .collect(Collectors.averagingDouble((e)->e.getSalary())); Double collect7 = emps.stream() .collect(Collectors.averagingDouble(Employee2::getSalary)); System.out.println("collect6："+collect6); System.out.println("collect7："+collect7); -
Collectors.counting()//总数 Long collect8 = emps.stream() .collect(Collectors.counting()); System.out.println(collect8); -
Collectors.summarizingDouble()DoubleSummaryStatistics collect9 = emps.stream() .collect(Collectors.summarizingDouble(Employee2::getSalary)); long count = collect9.getCount(); double average = collect9.getAverage(); double max = collect9.getMax(); double min = collect9.getMin(); double sum = collect9.getSum(); System.out.println("count:"+count); System.out.println("average:"+average); System.out.println("max:"+max); System.out.println("min:"+min); System.out.println("sum:"+sum); -
Collectors.groupingBy()//分组 @Test public void testCollect3() { Map<Status, List<Employee2>> collect = emps.stream() .collect(Collectors.groupingBy((e)->e.getStatus())); System.out.println(collect); Map<Status, List<Employee2>> collect2 = emps.stream() .collect(Collectors.groupingBy(Employee2::getStatus)); System.out.println(collect2); } -
Collectors.groupingBy()//多级分组 @Test public void testCollect4() { Map<Status, Map<String, List<Employee2>>> collect = emps.stream() .collect(Collectors.groupingBy(Employee2::getStatus, Collectors.groupingBy((e)->{ if(e.getAge() >= 60) return "老年"; else if(e.getAge() >= 35) return "中年"; else return "成年"; }))); System.out.println(collect); } -
Collectors.partitioningBy()//多级分组 @Test public void testCollect4() { Map<Status, Map<String, List<Employee2>>> collect = emps.stream() .collect(Collectors.groupingBy(Employee2::getStatus, Collectors.groupingBy((e)->{ if(e.getAge() >= 60) return "老年"; else if(e.getAge() >= 35) return "中年"; else return "成年"; }))); System.out.println(collect); } -
Collectors.joining()//组接字符串 @Test public void testCollect6() { String collect = emps.stream() .map((e)->e.getName()) .collect(Collectors.joining()); System.out.println(collect); String collect3 = emps.stream() .map(Employee2::getName) .collect(Collectors.joining(",")); System.out.println(collect3); String collect2 = emps.stream() .map(Employee2::getName) .collect(Collectors.joining(",", "prefix", "subfix")); System.out.println(collect2); } @Test public void testCollect7() { Optional<Double> collect = emps.stream() .map(Employee2::getSalary) .collect(Collectors.reducing(Double::sum)); System.out.println(collect.get()); }
创作不易，如果有帮助到你，请给文章点个赞和收藏，让更多的人看到！！！
关注博主不迷路，内容持续更新中。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
