vue3+ts+vite项目开发--知识点梳理01

news2024/11/24 18:55:38

vue3+ts+vite项目开发--知识点梳理01

  • 创建vue3项目
  • 01 tsconfig.node.json文件中extends报错
  • 02 知识点:用nvm安装最新版本的node
  • 03. template标签中的#表示啥意思
  • 04 ts中 ??使用
  • 05 ts中 reduce
  • 06 vue3+ts中watch和watchEffect监听使用
  • 07 unocss用法积累
  • 08 <el-col :xs="24":sm="12":lg="6" ></el-col>中属性理解
    • 09 Vue3 中 createWebHistory 和 createWebHashHistory 的区别
    • 10 pinia使用方法
    • 11 vue3路由(基本用法、路由守卫、动态路由)
    • 12 @iconify-json/ep理解
    • 13 vite自动按需导入
    • 14 vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标
    • 15 vue3中defineComponent和defineAsyncComponent的区别及使用场景
    • 16 element plus 引入icon 三种方法
    • 17 Vue3的新API: markRaw和toRaw
    • 18 border-color: currentcolor; currentcolor意义
    • 19 text-size-adjust: 100% 有什么作用?
    • 20 background-color: var(--el-bg-color-page);中--el-bg-color-page怎么定义的?
    • 21 ES6之Array.from()方法
    • 22 ts中的特殊符号 ?. ?: !. ?? || 等代表的含义与使用
    • 23 reactive与ref区别有以下几方面:
    • 24 Vue插件之install方法封装element-ui组件(按需引入)
    • 25 Vue:自动按需导入element-plus图标
    • 27 Object.assign(formData, data);
    • 28 TS中class类的基本使用
    • 29 typescript map方法
    • 30 Vue3+Ts 组件通信方法
    • 31 Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model
    • 32 Vue3的defineProps方法
    • 33 新特性-defineOptions
    • 34 useVModel()的使用
    • 35 vue3父子,跨组件之间通信
    • 36 vue3 useVModel 实现父子组件双向数据绑定
    • 37 watchEffect使用

创建vue3项目

参考vue3官方文档【快速上手】模块进行项目创建
快速上手

遇到的问题:

01 tsconfig.node.json文件中extends报错

在这里插入图片描述
解决:

 npm install --save-dev  @types/lodash

无效果的话就重启下项目

02 知识点:用nvm安装最新版本的node

查看可用的node版本,报错:Could not retrieve https://npm.taobao.org/mirrors/node/index.json.
原因:由于npm.taobao.org域名HTTPS证书到期更换为npmmirror.com
解决:
找到nvm安装路径的settings.txt文件
在这里插入图片描述

打开添加或者更改镜像地址,保存即可。
在这里插入图片描述

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

在这里插入图片描述
参考文章:https://blog.csdn.net/jieyucx/article/details/138080248

03. template标签中的#表示啥意思

在这里插入图片描述
v-slot 的缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header:

参考:https://ask.csdn.net/questions/7694480

04 ts中 ??使用

ts中??它用于判断一个值是否为 null 或 undefined,并在其为真时返回一个默认值。

const a= null;
const b= a ?? "jjj";
 
console.log(b); // 输出 "jjj"

需要注意的是,“??” 运算符只会在左侧的值为 null 或 undefined 时返回默认值,而不会在左侧的值为其他“假值”(如空字符串、0、false 等)时返回默认值。

05 ts中 reduce

在这里插入图片描述

06 vue3+ts中watch和watchEffect监听使用

参考:https://blog.csdn.net/m0_60893808/article/details/130899459

07 unocss用法积累

可通过:https://unocss.dev/interactive/
查看对应的css样式

<el-card class="!border-none !bg-transparent !rounded-4% w-100 <sm:w-85"></el-card>

.\!border-none {
 border-style: none !important;
}

.\!bg-transparent {
  background-color: transparent !important;
}

.\!rounded-4\% {
  border-radius: 4% !important;
}

.w-100 {
  width: 25rem;
}

@media (max-width: 639.9px) {
  .\<sm\:w-85 {
    width: 21.25rem;
  }
}

在这里插入图片描述

其他的

.text-center {
  text-align: center;
}

.bottom-1 {//我的理解:1===4px===4/16=0.25rem
  bottom: 0.25rem; //4px
}
.bottom-4 {
  bottom: 1rem; //16px
}
.text-[10px] {
  font-size: 10px;
}

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}

.ml-2 {
  margin-left: 0.5rem; /* 8px */
}
.cursor-pointer {
  cursor: pointer;
}
.p-3 {
  padding: 0.75rem; /* 12px */
}
.items-center {
  align-items: center;
}
.justify-around {
  justify-content: space-around;
}
.rounded-full {
  border-radius: 9999px;
}

还可以再uno.config.ts文件中自定义快捷键

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";

export default defineConfig({
  shortcuts: {
    "flex-center": "flex justify-center items-center",
    "flex-x-center": "flex justify-center",
    "flex-y-center": "flex items-center",
    "wh-full": "w-full h-full",
    "flex-x-between": "flex items-center justify-between",
    "flex-x-end": "flex items-center justify-end",
    "absolute-lt": "absolute left-0 top-0",
    "absolute-rt": "absolute right-0 top-0 ",
    "fixed-lt": "fixed left-0 top-0",
  },
  theme: {
    colors: {
      primary: "var(--el-color-primary)",
      primary_dark: "var(--el-color-primary-light-5)",
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

08 <el-col :xs=“24”:sm=“12”:lg=“6” >中属性理解

参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。
在这里插入图片描述

: 布局控制
el-col 是 Element UI 的栅格系统中的列(column)组件,用于创建响应式布局。
:xs=“24” :sm=“24” :md=“12” :lg=“8” 这些是响应式属性,决定了在不同屏幕尺寸下该列的宽度:

xs 和 sm 为 24,意味着在小屏设备上占满整行。
md 为 12,表示在中等屏幕上占据半行。
lg 为 8,表示在大屏设备上占据三分之一行。

例如: 通过xs、sm、lg、xl设置不同分辨率下显示1列、2列、3列、4列

 <el-col
          :xs='24'
          :sm='12'
          :lg='8'
          :xl='6'
          v-for='item in result'
          :key='item.id'
        >
 </el-col>

09 Vue3 中 createWebHistory 和 createWebHashHistory 的区别

参考:https://blog.csdn.net/qq_43216714/article/details/138080696

10 pinia使用方法

参考:https://blog.csdn.net/weixin_50961467/article/details/137370229

11 vue3路由(基本用法、路由守卫、动态路由)

参考:https://blog.csdn.net/weixin_50961467/article/details/137747672

12 @iconify-json/ep理解

// @iconify-json/ep 是 Element Plus 的图标库
npm i -D unocss @iconify-json/ep

13 vite自动按需导入

参考:https://blog.csdn.net/webbirds/article/details/127283504

14 vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标

参考:https://www.jianshu.com/p/1fe86d0cf012

15 vue3中defineComponent和defineAsyncComponent的区别及使用场景

参考:https://blog.csdn.net/weixin_43995143/article/details/136258204

16 element plus 引入icon 三种方法

参考:https://blog.csdn.net/zihong2019/article/details/123132554

17 Vue3的新API: markRaw和toRaw

参考:https://blog.csdn.net/weixin_46112225/article/details/125269789
markRaw:标记一个对象,使其永远不会转换为 proxy。返回对象本身。意思就是使其不能成为一个响应式对象。

const foo = markRaw({}) //创建一个markRaw对象
console.log(isReactive(reactive(foo))) // false   判断是不是响应式数据

有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。
当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。

toRaw:将响应式对象(由 reactive定义的响应式)转换为普通对象。
返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”,可用于临时读取数据而无需承担代理访问/跟踪的开销,也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

const foo = {}
const reactiveFoo = reactive(foo)
 
console.log(toRaw(reactiveFoo) === foo) // true

18 border-color: currentcolor; currentcolor意义

CSS3 新定义的一个属性,意思是取当前元素的字体颜色、边框颜色、阴影颜色等等,如果当前元素内没有定义color,则取父级元素的color元素,如果父级元素没有回一直往上取,直到有定义color的父级元素,如果都没有定义color ,则取当前的border-color或其他的元素,那个元素在上面,则取哪一个,如果父级元素和当前元素都定义有color,则取当前元素的color

由于color属性可以被继承,所以有的时候只需要在祖元素设置好color属性,其子元素和孙元素都可以使用currentcolor来调用祖元素的颜色。

19 text-size-adjust: 100% 有什么作用?

参考:https://blog.csdn.net/weixin_34130269/article/details/92289219
iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.
一般不使用 none 而是 100% 的原因

20 background-color: var(–el-bg-color-page);中–el-bg-color-page怎么定义的?

这是不同团队定义的Design Token

浏览器f12,鼠标放到对应位置上,会显示对应颜色
在这里插入图片描述

浏览器f12,查看对应的css值,然后ctrl+点击 即可看到对应的颜色,这是element定义好的颜色。
在这里插入图片描述
在这里插入图片描述

21 ES6之Array.from()方法

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

参考:https://www.cnblogs.com/jf-67/p/8440758.html

22 ts中的特殊符号 ?. ?: !. ?? || 等代表的含义与使用

1、?: 是指可选参数,定义对象属性时候,或者参数接收时可用
注:如果没有属性,则表示 undefined

const {icon,size }= defineProps<{  // 通过 TS的泛型  定义接收的数据类型
    icon:any,
    size?:number|string, // size 可选参数,类型为 字符串或数值
}>()

2、?. 意思基本和 && 是一样的,如果用在对象的属性里面的话,表示对象和对象里属性都需要
比如:a?.b 相当于 a && a.b ? a.b : undefined

//等同于  config.interceptors && config.interceptors.requestInterceptor
if (config.interceptors?.requestInterceptor) {
    config = config.interceptors.requestInterceptor(config)
}

3、!. 的意思是 断言,告诉ts你这个对象里一定有某个值
注:一般是防止报错使用

const inputRef = useRef<HTMLEInputlement>(null);
// 定义了输入框,初始化是null,但是你在调用他的时候相取输入框的value,
这时候dom实例一定是有值的,所以用断言
const value: string = inputRef.current!.value;
// 这样就不会报错了

4、?? 和 || 的意思有点相似
注:??相较||比较严谨, 当值等于0的时候||就把他给排除了,但是?? 不会

console.log(null || 1)   //1
console.log(null ?? 1)     //1
 
console.log(undefined || 1)      //1
console.log(undefined ?? 1)      //1
 
console.log(0 || 1)       //1
console.log(0 ?? 1)      //0

参考:https://blog.csdn.net/qq_41619796/article/details/129833416

23 reactive与ref区别有以下几方面:

reactive与ref区别有以下几方面:

1、 从定义数据方面:
ref通常用来定义基本类型数据
reactive用来定义:对象(或者数组)类型数据
ref也可以用来定义对象或者数组类型的数据,内部会通过reactive转为代理对象

2、从原理方面:
ref通过Object.defineProperty()的get和set实现数据代理。
reactive使用Proxy实现数据代理,并且通过Reflect操作源对象内部的数据。

3、从使用方面:
ref操作数据需要.value,template模板中不需要。
reactive都不需要,value

参考:https://blog.csdn.net/Anorry/article/details/131927914

vue3中reactive和ref的实现与区别详解:原理
https://www.jb51.net/javascript/302492kg6.htm

24 Vue插件之install方法封装element-ui组件(按需引入)

当项目中需要引入大量的插件时,则可以考虑对引入的插件进行一个封装,此时需要借助Vue.js插件中的 install 方法。在Vue.js框架的底层逻辑中,调用use方法时将默认执行 install(Vue, options) 方法,并且默认传入参数:构造器 Vue 和可选配置 options

参考:https://blog.csdn.net/D_Y_C_Java_/article/details/132185534

其他install方法解释参考
https://v1-cn.vuejs.org/guide/plugins.html
https://blog.csdn.net/qq_42943914/article/details/138854973

25 Vue:自动按需导入element-plus图标

1.安装自动安装 unplugin-icons 和 unplugin-auto-import
2.配置vite.config.ts
3.使用

<el-icon>
    <CaretLeft />
</el-icon>
 
<-- 应该写成⬇ -->
 
<el-icon>
    <i-ep-caret-left />
</el-icon>
 

 
<el-icon>
    <Plus/>
</el-icon>
 
<-- 应该写成⬇ -->
 
<el-icon>
    <i-ep-plus />
</el-icon>

el-icon可以自定义这两个属性

<el-icon :size="size" :color="color">
	<i-ep-plus />
</el-icon>

参考这两篇可使用:
https://blog.csdn.net/ruancexiaoming/article/details/136560017
https://blog.csdn.net/DM_Cxx/article/details/130844003

另外直接使用 比 图片要大一些

但是,使用过程中遇到一个问题:
直接使用和使用样式有些区别,暂时不知道怎么回事

第一种:直接

<el-button type="success" @click="openDialog()">
	<i-ep-plus />
   新增
 </el-button>

在这里插入图片描述
第二种: 颜色暗了些

<el-button type="success" @click="openDialog()">
   <el-icon><Plus /></el-icon>
   新增
 </el-button>

在这里插入图片描述
第三种: 同第二种

<el-button type="success" @click="openDialog()">
  <el-icon><i-ep-plus /></el-icon>
  新增
</el-button>

在这里插入图片描述

27 Object.assign(formData, data);

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

//【target:目标对象】,【souce:源对象(可多个)】
Object.assign(target,...sources)

參考:https://www.jianshu.com/p/12ddbadea6a4

28 TS中class类的基本使用

参考:https://blog.csdn.net/XunLin233/article/details/133338761

29 typescript map方法

TypeScript是一种面向对象的编程语言,它是JavaScript的超集,支持类型注解和接口。它允许您在编译代码时检测代码中的错误,并在运行时减少类型错误。TypeScript中的map方法是一种为数组中的每个元素应用一个函数执行操作并返回一个新数组的高级函数
在这里插入图片描述
在这里插入图片描述

参考:
https://wenku.baidu.com/view/6e9a4eb4e309581b6bd97f19227916888586b96d.html?wkts=1717574885114&bdQuery=ts%E4%B8%ADmap%E6%96%B9%E6%B3%95%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8

30 Vue3+Ts 组件通信方法

注意!!! provide和inject只能在setup中使用,不能放在watch()监听函数中使用

参考:
https://www.jb51.net/javascript/297428mru.htm
https://blog.csdn.net/Hannah_Hannah_/article/details/133761633

31 Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model

参考:https://blog.csdn.net/weixin_43025151/article/details/131342413

32 Vue3的defineProps方法

参考:https://blog.csdn.net/kaka_buka/article/details/135901872

33 新特性-defineOptions

参考:https://zhuanlan.zhihu.com/p/669564050

34 useVModel()的使用

参考:https://blog.csdn.net/m0_57108418/article/details/129995650

35 vue3父子,跨组件之间通信

参考:
https://blog.csdn.net/iouytrep/article/details/134788011

36 vue3 useVModel 实现父子组件双向数据绑定

参考:https://blog.csdn.net/qq_23207707/article/details/123647187

37 watchEffect使用

参考:
https://www.jb51.net/javascript/3136252ft.htm
https://cn.vuejs.org/guide/essentials/watchers.html#watcheffect

flush: watch 的执行顺序。
	pre 组件更新之前执行(默认)
	sync 同步执行;
	post 组件更新之后执行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1803965.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大屏可视化建设方案(word)

1.系统概述 1.1.需求分析 1.2.重难点分析 1.3.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 2.3.接口及要求 3.系统功能设计 3.1.功能清单列表 3.2.数据源管理 3.3.数据集管理 3.4.视图管理 3.5.仪表盘管理 3.6.移动端设计 3.1.系统权限设计 3.…

RTOS笔记--信号量+互斥量+事件组

信号量的本质 信号量是一个特殊的队列&#xff0c;但并不涉及数据传输&#xff0c;因此不需要读写位置和发送者列表&#xff0c;但是多了一个最大计数值。 个人理解&#xff1a;信号量类似一个加入了保护机制的全局变量&#xff0c;不会因为中断切换的原因而导致数据出错。 信号…

计算机缺失msvcp100.dll如何解决?教你5种简单高效的修复方法

在现代科技发展的时代&#xff0c;计算机已经成为我们生活和工作中不可或缺的工具。然而&#xff0c;在使用计算机的过程中&#xff0c;我们常常会遇到各种问题和困扰。其中之一就是计算机找不到msvcp100.dll文件。这个问题可能会给我们的生活和工作带来很多不便&#xff0c;下…

Unity2D游戏制作入门 | 09(之人物动画制作)

上期链接&#xff1a;Unity2D游戏制作入门 | 08-CSDN博客 人物走路动画逻辑补充&#xff08;该帖没有的内容&#xff0c;我给补充了请先看完这帖&#xff0c;再去看补充&#xff09;&#xff1a;人物按下shifit走路动画设定09&#xff08;第九期先行补充&#xff09; 上期我们…

Git之解决重复输入用户名和密码(三十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

机器学习--损失函数

损失函数&#xff08;Loss Function&#xff09;&#xff0c;也称为代价函数&#xff08;Cost Function&#xff09;或误差函数&#xff08;Error Function&#xff09;&#xff0c;是机器学习和统计学中的一个重要概念。它用于量化模型预测值与真实值之间的差异。损失函数的值…

Mybatis04-使用注解开发

面向接口编程 面向接口编程 我们之前都学过面向对象编程&#xff0c;也学习过接口&#xff0c;但在真正的开发中&#xff0c;很多时候我们会选择面向接口编程 根本原因 : 解耦 , 可拓展 , 提高复用 , 分层开发中 , 上层不用管具体的实现 , 大家都遵守共同的标准 , 使得开发变…

makefile与进度条

Linux项目自动化构建工具-make/makefile make是一个命令&#xff0c; makefile是一个文件&#xff0c;保存依赖关系和依赖方法。‘ touch Makefile/makefile mybin:mytest.c//依赖关系 目标文件&#xff1a;依赖文件列表 文件列表的文件之间以空格分隔 gcc -o mybin mytest.…

【Javascript系统学习】(二)

函数 定义函数 函数提升仅适用于函数声明&#xff0c;而不适用于函数表达式 函数声明 函数表达式 //例子1 const factorial function fac(n) {return n < 2 ? 1 : n * fac(n - 1); };console.log(factorial(3)); // 6 //factorial(n)、fac(n)、arguments.callee() ----…

【Python】解决Python报错:AttributeError: ‘list‘ object has no attribute ‘shape‘

​​​​ 文章目录 引言1. 错误详解2. 常见的出错场景2.1 使用列表代替NumPy数组2.2 错误的数据类型转换 3. 解决方案3.1 确保使用NumPy数组3.2 检查数据类型 4. 预防措施4.1 使用类型注解4.2 编写单元测试 结语 引言 在使用Python进行数据处理或科学计算时&#xff0c;可能会…

NodeJs实现脚本:将xlxs文件输出到json文件中

文章目录 前期工作和依赖笔记功能代码输出 最近有一个功能&#xff0c;将json文件里的内容抽取到一个xlxs中&#xff0c;然后维护xlxs文件。当要更新json文件时&#xff0c;就更新xlxs的内容并把它传回json中。这个脚本主要使用NodeJS写。 以下是完成此功能时做的一些笔记。 …

怎么换自己手机的ip地址

在互联网时代&#xff0c;IP地址已经成为了我们数字身份的一部分。无论是浏览网页、下载文件还是进行在线交流&#xff0c;我们的IP地址都在默默发挥着作用。然而&#xff0c;有时出于安全或隐私保护的考虑&#xff0c;我们可能需要更换手机的IP地址。那么&#xff0c;如何轻松…

工信部《工业和信息化领域数据安全风险评估实施细则(试行)》实行,行云管家数据产品助力企业数据安全

2024年6月1日&#xff0c;工信部颁布的《工业和信息化领域数据安全风险评估实施细则&#xff08;试行&#xff09;》&#xff08;以下简称《细则》&#xff09;开始实行&#xff0c;旨在引导工业和信息化领域数据处理者规范开展数据安全风险评估工作&#xff0c;提升数据安全管…

springboot3 一些听课笔记(1)

文章目录 一、日志框架二、springboot 自动配置三 、springweb3.13.2 自己编写一个messageconvert3.2.2 如果我们想让其支持yaml格式呢&#xff1f; 一、日志框架 springboot底层 默认使用logbacksjf4j作为日志框架。 1、每个 starter 场景&#xff0c;都会导入一个核心场景 …

3067. 在带权树网络中统计可连接服务器对数目 Medium

给你一棵无根带权树&#xff0c;树中总共有 n 个节点&#xff0c;分别表示 n 个服务器&#xff0c;服务器从 0 到 n - 1 编号。同时给你一个数组 edges &#xff0c;其中 edges[i] [ai, bi, weighti] 表示节点 ai 和 bi 之间有一条双向边&#xff0c;边的权值为 weighti 。再给…

驱动开发之设备树语法

目录 0.设备树由来 1.设备树概念 1.1.DTS、DTB 和 DTC 和 dtsi 概念 2.设备树语法 2.1.例子 2.2.设备节点 2.2.1.节点命名 2.2.2节点数据类型 2.2.3.根节点 2.2.4.属性介绍 2.2.4.1.compatible属性 2.2.4.2.name属性 2.2.4.3.status 属性 2.2.4.5.unit-address属性…

42【Aseprite 作图】梅花盆栽——拆解

1 花盆 是高度比较低的盆&#xff0c;只有一个下2&#xff1b;上面分两个 1 2 盆边缘颜色深&#xff0c;上面靠近外面的颜色浅&#xff0c;正面颜色稍微深一点&#xff0c;画两条竖的浅色线&#xff0c;作为装饰 2 花盆中的沙石 沙子颜色深一点&#xff0c;中间有浅一点的线…

C++学习/复习14--list的模拟实现(节点类/迭代器封装成类/list类/测试)

一、节点类 1.匿名对象 **在C中&#xff0c;匿名对象主要是通过构造函数直接生成的未命名对象实例&#xff0c;通常产生于以下三种情况&#xff1a;将对象作为值传递给函数、进行类型转换以及在函数需要返回一个对象时**。以下是对这三种情况的详细介绍&#xff1a; 1. **传…

全链路性能测试:Nginx 负载均衡的性能分析和调优

为什么性能测试很多同学觉得是一个比较难以自学上岸的测试领域,是因为真正做全链路的性能测试是比较难的。所谓的全链路就是在项目的整个链路上任何一环节都有可能存在性能测试瓶颈,我们都需要能够通过分析性能的监控指标找到对应的问题。 我们今天要讲的Nginx负载均衡就是…

基于协同过滤推荐的在线课程选修系统

基于协同过滤推荐的在线课程选修系统 demo 网站查看 http://course.qsxbc.com/all_course/ 点我查看 效果 功能 登录注册、点赞收藏、评分评论&#xff0c;课程推荐&#xff0c;热门课程&#xff0c;个人中心&#xff0c;可视化&#xff0c;后台管理&#xff0c;课程选修 …