请求方式(基于注解实现)

1.编写web.xml文件配置启动信息

<!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app><display-name>Archetype Created Web Application</display-name><servlet><servlet-name>ssm</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextClass</param-name><param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value></init-param><init-param><param-name>contextConfigLocation</param-name><param-value>com.pyb.config.SpringConfig</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>ssm</servlet-name><url-pattern>/</url-pattern></servlet-mapping>
</web-app>
  • 文件作用分析

1.Web容器启动: 当Web服务器(如Tomcat)启动,并且加载部署在其中的Web应用时,它会读取web.xml文件来了解如何配置和初始化该应用。 2.解析DOCTYPE声明: Web容器检查web.xml文件的DOCTYPE声明,以确保其符合指定的DTD标准。这一步是验证配置文件格式正确性的过程。 3.创建Servlet实例: 根据<servlet>标签中的定义,Web容器创建名为ssm的Servlet实例。这里使用的是Spring MVC框架的核心控制器DispatcherServlet。 4.初始化Servlet: 在创建Servlet实例后,Web容器调用Servlet的init()方法进行初始化。 DispatcherServlet在初始化过程中会读取<init-param>参数,根据这些参数创建Spring的应用上下文。 它使用AnnotationConfigWebApplicationContext作为上下文类,意味着它将通过注解扫描的方式来查找并注册Bean。 上下文配置的位置被设置为com.pyb.config.SpringConfig,即具体的Java配置类。 5.加载上下文: DispatcherServlet初始化完成后,它会加载由SpringConfig类配置的Spring应用上下文,包括所有必要的Bean定义和服务配置。 6.Servlet加载顺序: 由于设置了<load-on-startup>值为1,所以这个Servlet会在Web应用启动时优先加载,保证应用可以立即响应请求。 7.映射URL模式: <servlet-mapping>定义了哪个Servlet应该处理哪些URL模式的请求。在这个例子中,/表示所有的请求都将由ssm Servlet处理,除了那些静态资源(如图片、CSS文件等),通常它们会有默认的Servlet处理。 8.处理HTTP请求: 一旦Web应用完全启动并且DispatcherServlet已经准备好,它就可以开始接收HTTP请求,并根据Spring MVC的路由规则将请求分发给相应的处理器或控制器进行处理。 处理器完成业务逻辑后,返回模型和视图信息给DispatcherServlet,再由它选择适当的视图技术(如JSP, Thymeleaf等)渲染页面,最终返回HTTP响应给客户端。

2.编写Java核心配置类文件

package com.pyb.config;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.ComponentScans;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Import;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
/*** @version 1.0* @Author 彭彦彬* @Date 2025/1/10 8:47* @注释*/
@Configuration
@ComponentScan("com.pyb")
@EnableWebMvc
@Import({MyBatisConfig.class,DataBaseConfig.class})
public class SpringConfig
{
}
  • 该类作用

1配置类标识: 使用 @Configuration 注解标记该类为一个Spring配置类,意味着它包含用于定义应用上下文的Bean和其他配置信息。 2组件扫描: 通过 @ComponentScan("com.pyb") 自动扫描 com.pyb 包及其子包内的组件(如服务、控制器等),并将它们注册为Spring容器中的Bean。 3启用Web MVC支持: @EnableWebMvc 启用了Spring MVC的功能,自动配置了处理HTTP请求所需的各种组件。 4导入额外配置: 使用 @Import 注解导入了 MyBatisConfig 和 DataBaseConfig 配置类,以便将数据访问层和MyBatis框架的相关配置分离出来,保持配置的模块化和清晰度。

  • 数据源配置类

package com.pyb.config;
import com.zaxxer.hikari.HikariDataSource;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.PropertySource;
import javax.sql.DataSource;
/*** @version 1.0* @Author 彭彦彬* @Date 2025/1/10 9:10* @注释*/
@PropertySource("classpath:db.properties")
public class DataBaseConfig {@Value("${jdbc.password}") String password;@Value("${jdbc.username}") String username;@Value("${jdbc.url}") String url;@Value("${jdbc.driver}") String driver;@Beanpublic DataSource dataSource(){HikariDataSource hikariDataSource=new HikariDataSource();hikariDataSource.setUsername(username);hikariDataSource.setPassword(password);hikariDataSource.setJdbcUrl(url);hikariDataSource.setDriverClassName(driver);return hikariDataSource;}
}

DataBaseConfig 类的主要作用是配置和提供一个高效的数据源给Spring应用。它读取外部化的数据库配置信息,并创建一个优化过的HikariCP连接池实例,这有助于提高数据库操作的性能和可靠性。同时,这种做法也使得数据库配置易于管理和更改,无需修改代码即可适应不同的环境(如开发、测试、生产)。

  • 整和Mybatis配置类

package com.pyb.config;
import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.annotation.MapperScan;
import org.mybatis.spring.mapper.MapperScannerConfigurer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
import javax.sql.DataSource;
import java.io.IOException;
/*** @version 1.0* @Author 彭彦彬* @Date 2025/1/10 9:09* @注释*/
@MapperScan("com.pyb.dao")
public class MyBatisConfig {@Beanpublic SqlSessionFactoryBean sqlSessionFactoryBean(DataSource dataSource) throws IOException {SqlSessionFactoryBean sqlSessionFactoryBean=new SqlSessionFactoryBean();sqlSessionFactoryBean.setDataSource(dataSource);
​sqlSessionFactoryBean.setMapperLocations(new PathMatchingResourcePatternResolver().getResources("classpath:mapper/*.xml"));return sqlSessionFactoryBean;}
}

总结来说,MyBatisConfig 类的作用是配置MyBatis框架,使其与Spring应用无缝集成。它实现了以下几点:

1.自动扫描并注册指定包下的所有Mapper接口。 2.创建并配置 SqlSessionFactoryBean,用于生成MyBatis的SQL会话。 3.指定MyBatis映射文件的位置,使得MyBatis能够找到并加载这些文件以执行SQL语句。

3.用以上整合好的配置类,编写对员工信息操作的业务接口

  • 建立一张员工信息表

create table emp
(empno    int auto_increment comment '雇员编号'primary key,ename    varchar(20) null comment '雇员姓名',job      varchar(9)  null comment '表示工作职位',mgr      int         null comment '表示一个雇员的领导编号',hiredate datetime    null comment '表示雇佣日期',sal      double      null comment '表示月薪,工资',comm     double      null comment '表示奖金或佣金',deptno   int         null
);
​
  • 编写实体类映射上面数据库表

@Data
public class Emp {private int empno;private String ename;private String job;private int mgr;private double sal;private double comm;private int deptno;
}
  • 编写要操作员工数据的dao层接口

@Select("select *from emp")List<Emp>findAllUser();@Insert("insert into emp(empno,ename,job,mgr,sal,comm,deptno)values (#{empno},#{ename},#{job},#{mgr},#{sal},#{comm},#{deptno})")int addEmp(Emp emp);@Delete("delete from emp")int deleteAll();@Select("select *from emp where empno=#{empNo}")Emp selectEmpByNo(@Param("empNo")String empNo);@Select("select*from emp where ename like concat(#{name},'%')")List<Emp> empSByLike(@Param("name")String name);@Delete("delete from emp where empno=#{empNo}")int deleteEmpByNo(@Param("empNo")String empNo);List<Emp> selectEmpByPage(@Param("currentPage") int currentPage, @Param("pageSize") int pageSize);
  • 接口分析

findAllUser(): 注解:@Select("select * from emp") 功能:查询所有员工记录。 返回值:返回一个包含所有员工信息的 List<Emp> 集合。 addEmp(Emp emp): 注解:@Insert("insert into emp(empno, ename, job, mgr, sal, comm, deptno) values (#{empno}, #{ename}, #{job}, #{mgr}, #{sal}, #{comm}, #{deptno})") 功能:向数据库中的emp表插入一条新的员工记录。 参数:接受一个 Emp 对象作为参数,该对象包含了要插入的新员工的所有属性。 返回值:返回受影响的行数,通常为1表示成功插入了一条记录。 deleteAll(): 注解:@Delete("delete from emp") 功能:删除emp表中所有的员工记录。 返回值:返回受影响的行数,即被删除的记录总数。 selectEmpByNo(@Param("empNo") String empNo): 注解:@Select("select * from emp where empno=#{empNo}") 功能:根据提供的员工编号查找特定的员工记录。 参数:接受一个名为empNo的字符串参数,代表要查找的员工编号。 返回值:返回匹配的 Emp 对象,如果未找到则可能返回null。 empSByLike(@Param("name") String name): 注解:@Select("select * from emp where ename like concat(#{name},'%')") 功能:模糊查询员工姓名,返回所有名字以给定字符串开头的员工。 参数:接受一个名为name的字符串参数,用于构建LIKE查询条件。 返回值:返回符合查询条件的 List<Emp> 集合。 deleteEmpByNo(@Param("empNo") String empNo): 注解:@Delete("delete from emp where empno=#{empNo}") 功能:根据提供的员工编号删除特定的员工记录。 参数:接受一个名为empNo的字符串参数,代表要删除的员工编号。 返回值:返回受影响的行数,即被删除的记录数。 selectEmpByPage(@Param("currentPage") int currentPage, @Param("pageSize") int pageSize): 功能:分页查询员工记录。 参数:接受两个整型参数,currentPage 表示当前页码,pageSize 表示每页显示的记录数。 返回值:返回对应页码和页面大小的 List<Emp> 集合。

4.编写前端代码

  • 配置代理服务器

   // 为本地 Spring Boot 应用创建一个代理规则'/api': {target: 'http://localhost:8080', // Spring Boot 应用的地址ws: true,                        // 是否代理WebSocketchangeOrigin: true,              // 是否改变源rewrite: path => path.replace(/^\/api/, '') // 将 /api 前缀重写为空字符串}
  • 设置Axios实例来与后端通信

import axios from 'axios';
const apiClient = axios.create({baseURL: '/api', // 这个路径会根据Vite配置自动代理到Spring Boot后端withCredentials: false, // 如果不需要跨域认证,可以设置为falseheaders: {'Content-Type': 'application/json',}
});
export default apiClient;
  • 用elementplus编写表格主键展示员工信息

  <!-- 显示所有员工信息 --><el-table :data="employees" style="width: 100%" stripe v-loading="loading"><el-table-column prop="empno" label="员工编号" width="180"></el-table-column><el-table-column prop="ename" label="姓名" width="180"></el-table-column><el-table-column prop="job" label="职位"></el-table-column><el-table-column prop="mgr" label="上级"></el-table-column><el-table-column prop="sal" label="薪资"></el-table-column><el-table-column prop="comm" label="奖金"></el-table-column><el-table-column prop="deptno" label="部门编号"></el-table-column><el-table-column label="操作" width="300"><template #default="scope"><el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button><el-button size="small" type="primary" @click="dialogVisible = true">新增员工</el-button></template></el-table-column></el-table>
  • 定义响应式变量接收数据展示表格

const employees = ref([]);
  • 发送请求,获取分页数据

// 获取分页员工信息
const fetchEmployees = async () => {loading.value = true;try {const response = await apiClient.get('/emp/page', {params: { currentPage: currentPage.value, pageSize: pageSize.value }});employees.value = response.data.content || response.data;total.value = response.data.totalElements || response.data.length;error.value = null;} catch (err) {error.value = '获取员工列表失败,请稍后再试';ElMessage.error(error.value);console.error('API请求失败:', err.response ? err.response.data : err.message);} finally {loading.value = false;}
};
  • 定义输入框组件实现查找功能

<div style="margin-bottom: 20px;"><el-input v-model="searchName" placeholder="请输入员工姓名" style="width: 200px;"></el-input></div>
  • 绑定输入框数据

const searchName = ref('');
  • 向服务器发送请求获取模糊查询数据,更新表格数据

// 根据姓名模糊查询员工
const fetchEmployeesByName = async () => {if (!searchName.value.trim()) {ElMessage.warning('请输入要搜索的员工姓名');return;}loading.value = true;try {const response = await apiClient.get('/emp/searchByName', {params: {name: searchName.value}});employees.value = response.data;total.value = response.data.length;currentPage.value = 1;error.value = null;} catch (err) {error.value = '搜索员工失败,请稍后再试';ElMessage.error(error.value);console.error('API请求失败:', err.response ? err.response.data : err.message);} finally {loading.value = false;}
};
  • 监听搜索框变化自动完成模糊查询

watch(searchName, (newValue) => {clearTimeout(searchTimeout.value); // 清除之前的定时器
​// 设置一个短暂的延迟以避免频繁请求searchTimeout.value = setTimeout(() => {if (newValue.trim()) {fetchEmployeesByName();} else {// 如果输入框为空,则重新加载全部员工列表fetchEmployees();}}, 300); // 300ms 的延迟
});
  • 编写新增按钮

  <el-button size="small" type="primary" @click="dialogVisible = true">新增员工</el-button>
  • 编写新增对话框

<!-- 新增员工对话框 --><el-dialog title="新增员工" v-model="dialogVisible" width="30%"><el-form :model="newEmployee" :rules="rules" ref="newEmployeeFormRef" label-width="100px"><el-form-item label="员工编号" prop="empno"><el-input v-model="newEmployee.empno"></el-input></el-form-item><el-form-item label="姓名" prop="ename"><el-input v-model="newEmployee.ename"></el-input></el-form-item><el-form-item label="职位" prop="job"><el-input v-model="newEmployee.job"></el-input></el-form-item><el-form-item label="上级" prop="mgr"><el-input v-model="newEmployee.mgr"></el-input></el-form-item><el-form-item label="薪资" prop="sal"><el-input v-model="newEmployee.sal"></el-input></el-form-item><el-form-item label="奖金" prop="comm"><el-input v-model="newEmployee.comm"></el-input></el-form-item><el-form-item label="部门编号" prop="deptno"><el-input v-model="newEmployee.deptno"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="submitNewEmployee">确 定</el-button></span></template></el-dialog>
  • const dialogVisible = ref(false);默认对话框不展现

  • 向服务器发送请求,新增数据

// 提交新增员工
const submitNewEmployee = async () => {newEmployeeFormRef.value.validate(async (valid) => {if (valid) {try {await apiClient.post('/emp/add', newEmployee.value);ElMessage({message: '新增成功', type: 'success'});dialogVisible.value = false;await fetchEmployees();} catch (err) {ElMessage.error('新增失败,请检查输入或稍后再试');console.error('API请求失败:', err.response ? err.response.data : err.message);}} else {console.log('验证失败');return false;}});
  • 编写删除逻辑,动态获取所在行的数据

<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
  • 向服务器发送请求,删除数据

// 处理删除
const handleDelete = async (row) => {try {const confirmResult = await ElMessageBox.confirm('确定要删除该员工吗?','警告',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'});if (confirmResult !== 'confirm') return;
​await apiClient.delete(`/emp/delete/${row.empno}`);ElMessage({message: '删除成功', type: 'success'});
​await fetchEmployees();} catch (err) {if (err === 'cancel') {ElMessage({type: 'info',message: '已取消删除'});} else {ElMessage.error('删除失败,请检查输入或稍后再试');console.error('API请求失败:', err.response ? err.response.data : err.message);}}
};
  • 分页组件的使用

<el-paginationv-show="!searchName"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"style="margin-top: 20px;"
>
</el-pagination>

@size-change="handleSizeChange": 当用户改变了每页显示的条目数时触发此事件,并调用 handleSizeChange 方法处理逻辑,通常会更新 pageSize 并重新加载数据。 @current-change="handleCurrentChange": 当用户点击了不同的页码或使用“上一页”、“下一页”按钮时触发此事件,并调用 handleCurrentChange 方法处理逻辑,通常会更新 currentPage 并重新加载对应页的数据。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

golang单元测试

单元测试 类型前缀签名用途测试函数Testfunc TestXxx(t *testing.T)功能测试、验证逻辑正确性基准函数Benchmarkfunc BenchmarkXxx(b *testing.B)性能测试、效率评估示例函数Examplefunc ExampleXxx()用法展示、生成文档 testing框架 文件名以_test.go结尾&#xff0c;放在与…

【2024年华为OD机试】 (A卷,100分)- 总最快检测效率(Java JS PythonC/C++)

一、问题描述 题目描述 在系统、网络均正常的情况下组织核酸采样员和志愿者对人群进行核酸检测筛查。 每名采样员的效率不同&#xff0c;采样效率为 N 人/小时。由于外界变化&#xff0c;采样员的效率会以 M 人/小时为粒度发生变化&#xff0c;M 为采样效率浮动粒度&#xf…

【AI日记】25.01.11 Weights Biases | AI 笔记 notion

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛&#xff1a;Forecasting Sticker Sales笔记&#xff1a;我的 AI 笔记主要记在两个地方 有道云笔记&#xff1a;数学公式和符号比较多的笔记notion&#xff1a;没什么数学公式的…

[免费]微信小程序(高校就业)招聘系统(Springboot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序(高校就业)招聘系统(Springboot后端Vue管理端)&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序(高校就业)招聘系统(Springboot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项目介绍…

《新闻大厦抢先版》V0.18.105+Dlcs官方学习版

《新闻大厦抢先版》官方版https://pan.xunlei.com/s/VODaeUn3v-ZWVvvmUMfo5AqWA1?pwdnhpz# 建造并不断优化新闻大楼&#xff0c;保障员工权益并及时赶上周日的印刷交期&#xff01; 招募并管理不同职业以登上成功的阶梯&#xff1a;记者、摄像师、勤杂工&#xff0c;除此以外…

1.两数之和--力扣

给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素。 你可以按任意顺序返回答案。 示例 1…

Kubernetes集群架构

Kubernetes集群架构 Kubernetes 集群架构控制平面组件kube-apiserveretcdkube-schedulerkube-controller-managercloud-controller-manager 节点组件kubeletkebe-proxy&#xff08;可选&#xff09;容器运行时 插件DNSWeb UI&#xff08;Dashboard&#xff09;容器资源监控集群…

Visual Studio 中增加的AI功能

前言&#xff1a; 人工智能的发展&#xff0c;在现在&#xff0c;编程技术的IDE里面也融合了AI的基本操做。本例&#xff0c;以微软的Visual Studio中的人工智能的功能介绍例子。 本例的环境&#xff1a; Visual Studio 17.12 1 AI 智能变量检测&#xff1a; 上图展示了一…

牛客网刷题 ——C语言初阶(6指针)——BC106 上三角矩阵判定

1. 题目描述——BC106 上三角矩阵判定 牛客网OJ题链接 描述 KiKi想知道一个n阶方矩是否为上三角矩阵&#xff0c;请帮他编程判定。上三角矩阵即主对角线以下的元素都为0的矩阵&#xff0c;主对角线为从矩阵的左上角至右下角的连线。 示例 输入&#xff1a; 3 1 2 3 0 4 5 0 0…

时序数据库InfluxDB—介绍与性能测试

目录 一、简述 二、主要特点 三、基本概念 1、主要概念 2、保留策略 3、连续查询 4、存储引擎—TSM Tree 5、存储目录 四、基本操作 1、Java-API操作 五、项目中的应用 六、单节点的硬件配置 七、性能测试 1、测试环境 2、测试程序 3、写入测试 4、查询测试 一…

备战蓝桥杯 队列和queue详解

目录 队列的概念 队列的静态实现 总代码 stl的queue 队列算法题 1.队列模板题 2.机器翻译 3.海港 双端队列 队列的概念 和栈一样&#xff0c;队列也是一种访问受限的线性表&#xff0c;它只能在表头位置删除&#xff0c;在表尾位置插入&#xff0c;队列是先进先出&…

DELTA并联机械手视觉方案荣获2024年度机器人应用典型案例奖

直击现场 2025年1月9日晚&#xff0c;2024深圳市机器人年度评选颁奖典礼在深圳市南山区圣淘沙酒店正式拉开帷幕。本次颁奖活动由中国科学院深圳先进技术研究院指导&#xff0c;深圳市机器人协会与《机器人与智能系统》杂志组织承办。 正运动公司受邀参与此次典礼&#xff0c;…

【Oracle篇】深入了解执行计划中的访问路径(含表级别、B树索引、位图索引、簇表四大类访问路径)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;从事IT领域✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控&#xff1b;并对SQLserver、NoSQL(…

工业 4G 路由器赋能远程医疗,守护生命线

在医疗领域&#xff0c;尤其是偏远地区的医疗救治场景中&#xff0c;工业 4G 路由器正发挥着无可替代的关键作用&#xff0c;宛如一条坚韧的 “生命线”&#xff0c;为守护患者健康持续赋能。 偏远地区医疗资源相对匮乏&#xff0c;常常面临着专业医生短缺、诊疗设备有限等困境…

matlab编写分段Hermite插值多项式

文章目录 原理使用分段Hermite插值多项式原因公式第一类的两个插值积函数第二类的两个插值积函数 例题法一法二 代码分段 Hermite 插值的思路&#xff1a;分段 Hermite 插值多项式的构造&#xff1a;MATLAB 实现代码&#xff1a;结果如图&#xff1a;注归一化变量的作用&#x…

element ui前端小数计算精度丢失的问题如何解决?

文章目录 前言一、什么是精度丢失&#xff1f;产生精度丢失的原因如何避免或减少精度丢失的影响 二、实际项目开发实例举例以项目预算模块为例如何解决精度丢失 总结 前言 在《工程投标项目管理系统》项目开发中工程项目预算、成本管理、财务管理等模块的开发中不可避免的要和…

《分布式光纤测温:解锁楼宇安全的 “高精度密码”》

在楼宇建筑中&#xff0c;因其内部空间庞大&#xff0c;各类电器设施众多&#xff0c;如何以一种既高效又稳定&#xff0c;兼具低成本与高覆盖特性的方式&#xff0c;为那些关键线路节点开展温度监测&#xff0c;是目前在安全监测领域一项重点研究项目&#xff0c;而无锡布里渊…

油猴支持阿里云自动登陆插件

遇到的以下问题&#xff0c;都已在脚本中解决&#xff1a; 获取到的元素赋值在页面显示&#xff0c;但是底层的value并没有改写&#xff0c;导致请求就是获取不到数据元素的加载时机不定&#xff0c;尤其是弱网情况下&#xff0c;只靠延迟还是有可能获取不到&#xff0c;且登陆…

代码随想录算法训练营第3天(链表1)| 203.移除链表元素 707.设计链表 206.反转链表

一、203.移除链表元素 题目&#xff1a;203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 视频&#xff1a;手把手带你学会操作链表 | LeetCode&#xff1a;203.移除链表元素_哔哩哔哩_bilibili 讲解&#xff1a;代码随想录 注意&#xff1a; 针对头结点和非头结点的…

如何实现多级缓存?

本文重点说一说在Java应用中&#xff0c;多级缓存如何实现。 多级缓存是比较常见的一种性能优化的手段&#xff0c;一般来说就是本地缓存分布式缓存。 本地缓存一般采用Caffeine和Guava&#xff0c;这两种是性能比较高的本地缓存的框架。他们都提供了缓存的过期、管理等功能。…