[多线程]

创建多线程的三种方式

• 继承 Thread 类
• 实现 Runnable 接口
• 实现 Callable 接口（带有返回值，相关类 Future）

[网络编程]

一、重点概念

1、TCP/IP网络模型

• 数据链路层 + 物理：比特流
• 网络层：IP
• 传输层：UDP、TCP
• 应用层：HTTP、FTP、SMTP

2、IP 对象

• InetAddress 代表 IP 地址对象
• static InetAddress getLocalHost()：获取本机IP对象
• boolean isReachable(int timeout)：判断与该IP地址对象是否互通

3、端口号

• 被规定为一个 16 位的二进制，范围是 0~65535
• 周知端口：0~1023，被预先定义的知名应用占用

4、协议

UDP(User Datagram Protocol)

• 用户数据报协议
• 无连接、不可靠通信

TCP(Transmission Control Protocol)

• 传输控制协议
• 面向连接、可靠通信

二、UDP 通信

创建客户端、服务端：
DatagramSocket: 客户端创建不需要传入端口号，服务端创建需要传入端口号；DatagramSocket 对象的 receive 方法进行接收

创建数据包：
DatagramPacket：客户端创建需要传入发送的数据和端口号，服务端创建只需要接收的数组；DatagramPacket 对象的 getData 方法获取接收的数据

三、TCP 通信

• 客户端类：Socket，通过此类获取输出流发送数据
• 服务器端类：ServiceSocket， Socket accept() 接收，通过 Socket 获取输入流收取数据

[前端]

• 新建node项目
  创建并进入文件夹，输入 cnpm init 全部下一步
  运行js文件：node ./文件名.js
• 安装yarn
  cnpm install -g yarn --registry=https://registry.npm.taobao.org
• 解构

let ps = "123"
let user ={name: "hyl",ps
}
//对象解构：let {属性名} = 对象名
let {name} = user
//数组解构 a=1 b=2 c=3 d=undefind
let [a,b,c,d]  = [1,2,3]
//方法也可以解构，也是使用 {}

• 异步任务：使用 Promise 加 then 来实现，想要连续调用 then，需要在上一个 then 中再返回 一个 Promis 对象

new Promise((resolve, reject) => {}).then(res=>{return new Promise((resolve,reject)=>{})
}).then(res=>{}).catch(err => {})

[Vue]

一、Vue3

项目创建

• CLI 构建工具创建的是 Vue2 项目
• Vite 构建工具创建的是 Vue3 项目，命令：npm init vue@latest

响应式

• ref：将一个简单类型和对象类型变成响应式数据，js 中访问需要使用 value 属性
• reactive：将一个对象类型的数据变成响应式数据

函数

• computed：计算属性函数
• watch：监视函数；属性 immediate 表示一进页面立刻执行一次；属性 deep 表示深度监视，即监视到每个对象的属性值
• 生命周期函数：onBeforeMount、onMounted(组件挂载完成后执行)、onBeforeUpdate、onUpdated(组件因为响应式状态变更而更新其 DOM 树之后调用)、onBeforeUnmount、onUnmounted(组件实例被卸载之后调用)
• defineExpose：将本组件的属性或方法等暴露到外面，参数为对象

父子通信

父传子

父组件：

• 属性：message

子组件：

• 编译器宏：defineProps(对象)

子传父

父组件：

• 函数：在子组件上面定义函数

子组件：

• 编译器宏：defineEmits(父上面的函数名数组)

跨层组件通信

• 顶层组件通过 provide 函数提供数据
• 底层组件通过 inject 函数获取数据
• 注意：想让底层组件操作顶层组件传递过来的数据，可以再让顶层组件传递一个修改方法进行操作

模板引用

• 获取 Dom 对象或组件

<script setup>import {ref} from 'vue'const dom = ref(null)//dom变量就是获取到的dom对象
</script><template><input ref="dom" type="text" /><!-- ref值必须和对象名一致 -->
</template>

声明组件选项

• defineOptions，如：可以定义组件名字

在组件上使用数据绑定

defineModel：

//配置文件中注册
plugins: [vue({script:{defineModel:true}}),],

父组件
<script setup>import {ref} from 'vue'import Test from '@/components/Test.vue'const modeValue = ref(100)
</script>
<template><Test v-model='modeValue'></Test>{{ modeValue }}
</template>

子组件
<script setup>import { defineModel } from 'vue';const modeValue = defineModel()
</script>
<template><input type="text":value="modeValue"@input="e=>modeValue=e.target.value">
</template>

二、状态管理工具 Pinia

• Vuex 的替代品

函数

定义仓库：
definStore

解构方法：
storeToRefs：从 pinia 中导入，方法不需要解构

持久化

• 名称与地址：==pinia-plugin-persistedstate==
• 开始持久化：persist，在对应模块第三个参数传入，设置值为 true

三、路由 Vue Router

四、Element Plus

[项目相关]

获得用户设备的信息

• 使用 Maven 中的 UserAgentUtils 坐标