三大件

JSON对象和JSON字符串互转

  • JSON对象转JSON字符串
1
2
3
4
5
var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);

console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string
  • JSON字符串转JSON对象
1
2
jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // {stuName: "tom", stuAge: 20}

es6

let 和var的差别

1、let有块级作用域，非函数的花括号遇见let会有块级作用域

2、let 不能重复声明

3、let不会预解析进行变量提升（必须先声明，在使用，必须有初始化值）

4、let 定义的全局变量不会作为window的属性

5、let在es6中推荐优先使用

const和var的差异

1、新增const和let类似，只是const定义的变量不能修改

2、并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

const TEAM = [‘刘德华’,’张学友’,’郭富城’];
TEAM.push(‘黎明’);
TEAM=[] // 报错

异步

如果函数内部返回的是一个promise对象,则async函数返回的状态与结果由该对象接手

async 用于标识函数，标识函数后,函数的返回值会变成一个promise对象

如果表达式是promise对象,await返回的是promise成功的值，一般就是用在这里

模块化

ES6中无论以何种方式导出,导出的都是一个对象,导出的内容都可以理解为是向这个对象中添加属性或者方法

ES6模块化的几种暴露和导入方式

1.分别导出

export

2.统一导出

export {
	PI,
    sum,
    Person
}

{}中如果定义了别名,那么在当前模块中就只能使用别名

3.默认导出

默认暴露语法 export default xxx
默认暴露相当于是在暴露的对象中增加了一个名字为default的属性

1
2
// 导出默认
export default sum
1
2
import {default as add} from './module.js' // 用的少
import add2 from './module.js' // 等效于 import {default as add2} from './module.js'

servlet

1 servlet的生命周期

① Servlet对象的创建：构造器
  • 默认情况下，Servlet容器第一次收到HTTP请求时创建对应Servlet对象。
② Servlet对象初始化：init()
  • Servlet容器创建Servlet对象之后，会调用init(ServletConfig config)方法。
  • init()方法只在创建对象时执行一次，以后再接到请求时，就不执行了
③ 处理请求：service()
④ Servlet对象销毁：destroy()

Servlet对象在容器中是单例的

2 servlet的继承关系

image-20250307014731137

GenericServlet 抽象类是对Servlet接口一些固定功能的粗糙实现,以及对service方法的再次抽象声明,并定义了一些其他相关功能方法

3 ServletConfig和ServletContext

1 ServletConfig的使用

ServletConfig是什么

  • 为Servlet提供初始配置参数的一种对象,每个Servlet都有自己独立唯一的ServletConfig对象
  • 容器会为每个Servlet实例化一个ServletConfig对象,并通过Servlet生命周期的init方法传入给Servlet作为属性
2 ServletContext的使用

ServletContext是什么

  • ServletContext对象又称呼为上下文对象,或者叫应用域对象
  • 容器会为每个app创建一个独立的唯一的ServletContext对象
  • ServletContext对象为所有的Servlet所共享

4 转发和重定向

  • 请求转发可以转发给WEB-INF下受保护的资源
  • 请求转发不能转发到本项目以外的外部资源

5 三大域对象

  • 请求域对象是HttpServletRequest ,传递数据的范围是一次请求之内及请求转发
  • 会话域对象是HttpSession,传递数据的范围是一次会话之内,可以跨多个请求
  • 应用域对象是ServletContext,传递数据的范围是本应用之内,可以跨多个会话

6 过滤器

Filter的工作位置是项目中所有目标资源之前，Filter不仅可以对请求做出过滤,也可以在目标资源做出响应前,对响应再次进行处理

过滤器的顺序由filter-mapping顺序决定

如果某个Filter是使用ServletName进行匹配规则的配置

7 监听器

6个主要接口

对象的生命周期监听器（对象的创建与销毁），对象属性变化监听器（属性的添加、移除和修改）

  • application域监听器 ServletContextListener ServletContextAttributeListener
  • session域监听器 HttpSessionListener HttpSessionAttributeListener HttpSessionBindingListener HttpSessionActivationListener
  • request域监听器 ServletRequestListener ServletRequestAttributeListener
2个特殊的监听器

HttpSessionBindingListener，特定对象 被绑定（setAttribute）或解绑（removeAttribute）到会话时触发。

HttpSessionActivationListener 监听某个对象在Session中的序列化与反序列化。

vue

Vue3关于样式的导入方式

Vue文件style代码引入

1
@import './style/reset.css'

模版语法

插值表达式

image-20250803025814091

  • 插值表达式中支持javascript的运算表达式
  • 插值表达式中也支持函数的调用
文本渲染
  • v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本
  • v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本
属性渲染

v-bind:属性名='数据名', 可以简写为 :属性名='数据名'

响应式

ref 包裹基本类型的数据或对象/数组。ref在访问该对象时，使用 .value 来获取其实际值。

在 模板（<template>）中，Vue 会自动解包 ref，无需手动写 .value

reactive 不能用于基本数据类型

1
user = {};//直接替换对象，响应性丢失,应该是user.username=""

条件和列表渲染

条件渲染

  • v-if 是惰性的，如果在初次渲染时条件值为 false，则不会做任何事。只有当条件首次变为 true 时才被渲染。

  • v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

列表渲染
1
2
3
4
5
6
7
8
9
10
11
<tbody v-if="carts.length > 0">
      <!-- 有数据显示-->
      <tr v-for="(cart, index) in carts" :key="index">
        <th>{{ index + 1 }}</th>
        <th>{{ cart.name }}</th>
        <th>{{ cart.price + '元' }}</th>
        <th>{{ cart.number }}</th>
        <th>{{ cart.price * cart.number + '元' }}</th>
        <th><button @click="removeCart(index)">删除</button></th>
      </tr>
      </tbody>

什么时候必须用 :key？

✅ 推荐始终使用 :key，特别是在以下情况：

  1. 列表会动态增删或排序
  2. 性能优化。

❌ 可以不用 :key 的情况（但不推荐）：

  • 静态列表（数据永不变化）。

双向绑定

v-model专门用于双向绑定表单标签的value属性,语法为 v-model:value='',可以简写为 v-model=''，还可以用于<textarea>、<select> 元素。

计算属性

1
2
3
4
5
// 一个计算属性
const publishedBooksMessage = computed(() => {
  console.log("publishedBooksMessage")
  return author.books.length > 0 ? 'Yes' : 'No'
})

一个计算属性仅会在其响应式依赖更新时才重新计算

watch（），watchEffect（）

watch（）监听一个响应式数据，watchEffect（）默认监听所有响应式数据

生命周期

创建x2，挂载x2，更新x2，销毁x2

1
2
3
4
//挂载前，api初始化好了，元素找不到

//挂载完成，能找到元素
//更新前内容未变，数据变了

插槽

v-slot:xxx，简写成#xxx