当前位置：首页 > news >正文

26_ajax

news 来源：原创 2025/7/5 7:10:31

了解

接口

前后端交互

一、安装服务器环境 nodejs

ajax发起请求

渲染响应结果

get方式传递参数

post方式传递参数

封装ajax_上

封装ajax下

了解

清楚前后端交互就可以写一些后端代码了。小项目

现在写项目开发的时候都是前后端分离

之前都没有前端这个东西，2014年后有了框架，划分越来越明显。

什么叫前后端分离？

我写前面的一个网页项目叫桂花香，如果我不把桂花香这个项目代码发给你，那么你就看不到我的页面。因为没有后端服务器。

把前端代码放后端京东.com服务器上，这样大家都能请求访问。

那后端就充当服务器一个角色？后端能做的事很多，主要对数据库增删改查

这些数据都是后端返回的，不是你硬写写死上去的。（比如我刷新抖音对应热搜就变了，刷新的时候后端再查返回过来，前端再渲染）

推荐的东西/页面会变，这些数据都是后端去查询数据库返回到前端，前端拿到数据渲染

咋渲染到页面上？后面讲

现在的项目都是前后端分离

Fetch/XHR代表接口

接口

如果能够对接口发起请求呢？如何拿到这些数据。就是用到前后端交互

前后端交互

后端可以返回前端所需要的数据

需求：是咱们前端如何获取到这些数据并渲染到页面上

解决：前后端交互的重点 ajax

本章讲ajax如何发起请求，获取后端数据，做前后端交互

一、安装服务器环境 nodejs

要交互就要安装服务器环境。

前端要调后端的接口。发起ajax，但是要请求服务器得去先安装服务器的环境。

nodejs 是运行服务器程序的基础，推荐16比较稳定

环境安装

1、安装包下载地址：Index of /download/release/latest-v16.x/
- 双击安装即可
- 正常下一步，可以选择你想要安装的盘符目录，如果你电脑上安全软件，推荐安装到C盘
  
  直接一直下一步不需要修改盘符。。。自动的配置环境变量
测试是否安装成功

win + R 打开 dos命令窗口  输入命令node -v
或者
node --version如果出现版本号 就代表安装成功
如果出现“node  不是内部外部命令，，，” 没安装成功   卸载重装//或者添加环境变量看看

二、ajax前后端交互

前后端是分离的！！！

交互通过谁：ajax

前端：前端完成自己的静态页面，，页面中有很多数据，数据是后端返回的，咱们需要做的事情就是请求到后端返回的数据，，如何请求后端数据，，用到ajax

ajax

ajax全名是 async(异步) javascript and xml

ajax是前后端交互的能力

也就是我们客户端给服务器发送数据的工具，也可以接收响应的数据

这是一个默认异步的执行机制（ajax发起网络请求请求是需要时间异步的）

01-异步说明

快速判断：需要时间去等就是异步的

    <script>// 同步：排队执行  从前到后执行(比如先打哈哈哈等1s之后再打印嘿嘿嘿)// 异步：同步的先执行，异步的后执行setTimeout(()=>{//定时器就是一个异步操作console.log("哈哈哈");},1)console.log("嘿嘿嘿");//同步的先打印</script>

ajax 优势

1、不需要第三方库原生js直接使用

2、用户体验好（异步）不需要刷新页面就可以更新数据，局部刷新(比如就刷新热搜排名那一块)

3、减轻服务器负担

缺点：

1、搜索引擎支排名持度不够（seo）因为数据都不在页面上，数据都是从服务器上来的搜索引擎搜索不到(底下来的)。

ajax发起请求

接口地址。用到服务器。

启动服务器

ajax发起请求

<script>let btn = document.querySelector("button");btn.onclick=function(){let xhr = new XMLHttpRequest();//请求对象xhr.open("get","http://localhost:8888/test/first"); //请求地址(接口）xhr.send();   }</script>

<body><button>发起请求</button><script>let btn = document.querySelector("button");//找到网页按钮btn.onclick=function(){// 第一步- 创建一个xml对象//XMLHttpRequest()是一个构造函数需要new对象let xhr = new XMLHttpRequest();// 第二步- 配置xhr对象//-请求方式get/post  //-请求地址xhr.open("get","http://localhost:8888/test/first"); //http://localhost:8888/test/first 接口// 第三步- 发起网络请求xhr.send();   }</script>
</body>

浏览器查看发起的请求


通过浏览器调试查看我们发起的请求
打开控制台 -->网络（network）--> fetch/xhr

改代码post/放弃请求，不成功? 因为接口文档用的get

不改代码/模拟一下


如何知道请求的地址  和 请求的方式呢？？
查看接口文档 （接口文档都是后端提供的）

渲染响应结果

处理返回的数据渲染到页面上

<script>let btn = document.querySelector("button");//获取按钮let h1 = document.querySelector("h1");//渲染到h1btn.onclick = function () {let xhr = new XMLHttpRequest();//接口请求对象xhr.open("get", "http://localhost:8888/test/first"); //接口地址xhr.send();xhr.onload = function () {h1.innerHTML = xhr.responseText;//获取响应文本}}</script>
</body>

<body><button>发起请求</button><h1></h1><script>let btn = document.querySelector("button");let h1 = document.querySelector("h1");btn.onclick = function () {let xhr = new XMLHttpRequest();xhr.open("get", "http://localhost:8888/test/first"); xhr.send();// 4-处理响应数据(渲染到页面上)//   响应数据两种情况：纯字符串/json字符串xhr.onload = function () {h1.innerHTML = xhr.responseText;//console.log(xhr.responseText);//打印到控制台上看获取到没有}}</script>
</body>

json

打印到控制台的是一堆json格式字符串，不是一个正常对象。

想把message渲染，得把json格式的字符串处理成对象。


<head></head>
<body><button>发起请求</button><h1></h1><script>let btn = document.querySelector("button");let h1 = document.querySelector("h1");btn.onclick =function(){let xhr = new XMLHttpRequest();xhr.open("get","http://localhost:8888/test/second");xhr.send();xhr.onload = function(){console.log(xhr.responseText);// 我们在进行前后端交互时 响应的数据发部分都是json格式的字符串// 获取到之后需要通过JSON.parse()方法  把json字符串转化为一个真正的对象h1.innerHTML = JSON.parse(xhr.responseText).message  //把message渲染到页面中}}</script>
</body>

接口文档说

get方式传递参数

？是拼接参数，提交给后端查询参数。

get方式都是以？这种形式去拼接的。

<body><input type="text" placeholder="姓名"><input type="text" placeholder="年龄"><button>发起请求</button><h1></h1><script>//js获取标签let btn = document.querySelector("button");let h1 = document.querySelector("h1");let ipts = document.querySelectorAll("input");//伪数组btn.onclick = function () {// 1-创建xml对象let xhr = new XMLHttpRequest()// 2-设置xml对象//  get请求方式携带数据  数据是放到路径上的//  格式：url?key1=value&key2=value&key3=value // (eg:http:http://localhost:8888/test/third?name='xx'&age='xx')// key 参数名（字段名）// value 参数值 （字段值）xhr.open("get",`http://localhost:8888/test/thirdname=${ipts[0].value}&age=${ipts[1].value}`);// 3-发起请求xhr.send();// 4- 处理响应结果xhr.onload = function(){console.log(xhr.responseText);}}</script>
</body>

payload里边就是你传的参数，写啥传啥。

post方式传递参数

工作的时候铺完页面调静态接口

后面学了框架之后用别的去调接口。

参数都是用的魔发字符串动态${}


post请求接口时，必须设置请求头，添加一条请求头信息，这条信息是发送的数据的格式
比如：application/x-www-form-urlencoded
怎样添加  给xhr 对象添加请求头
语法：xhr.setRequestHeader("请求字段名","请求的值")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")// 注意:post 方式// 1-必须设置请求头(发送前设置请求头)// 2-携带的数据不能在url地址里 而是通过send（）携带数据

<body><input type="text" placeholder="姓名"><input type="text" placeholder="年龄"><h1></h1><button>发起请求</button><script>let btn = document.querySelector("button");//获取let ipts = document.querySelectorAll("input");//获取let h1 = document.querySelector("h1");//获取btn.onclick=function(){// 1.xhr请求对象let xhr = new XMLHttpRequest()// 2-设xhr.open("post","http://localhost:8888/test/fourth")// 3-发let data = `name=${ipts[0].value}&age=${ipts[1].value}`;//参数xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post设置请求头xhr.send(data); // post通过send传参给服务器!!!// 4.渲xhr.onload = function(){let data = JSON.parse(xhr.responseText);console.log(data);h1.innerHTML = `我的名字是${data.info.name}我的年龄是${data.info.age}`}}</script>
</body>

封装ajax_上

写项目就不用一直写发送请求。一个项目接口上百个。怎么办？

在开发过程中在多次使用的东西都封装成一个函数。多次去使用调用。

调用xml.send()就行了

<body><input type="text" placeholder="姓名"><input type="text" placeholder="年龄"><button>发起请求</button><script>let btn = document.querySelector("button");let ipts = document.querySelectorAll("input");//postbtn.onclick = function () {let option = {//可变对象method:"post",url:"fourth",data:{name:"jack",age:18},header:"Content-type,application/x-www-form-urlencoded"}xhr(option);//调用}// 封装的网络请求函数// 可变:方式  地址  参数  请求头// 可变的  调用函数的时候传参！！！ 传谁我就用谁！！function xhr(options){//option对象传过来let method = options.method || "get";//传过来的url 没传默认getlet url = options.url;// getlet data = formatData(options.data || {}); if(method.toUpperCase()=="GET"&&data){url = url+data}// 1-创let xhr = new XMLHttpRequest();// 2-设xhr.open(method,`http://localhost:8888/test/${url}`)//方式可变 //地址可变// 3-发xhr.send();// 4-处理渲染xhr.onload = function(){}}// get希望传的是 ?name=jack&age=18  所以传来的参数进一步处理// 格式化data的函数function formatData(obj){let data = "";  // 保存保存处理好之后的数据for(let key in obj){data += `&${key}=${obj[key]}`}data = data.slice(1);//从下标为1开始截取到最后return data;}</script>
</body>

   // 封装的网络请求函数// 哪些是可变的  请求方式  请求地址  请求参数  请求头// 可变的  调用函数的时候传参！！！ 传谁我就用谁！！function ajax(options){let method = options.method || "get";//如果你传了请求方式就用你传的 没传默认是getlet url = options.url;let header = options.header || {"Content-Type":"application/x-www-form-urlencoded"}let type = options.dataType || "json"// ajax希望传的是 ?name=jack&age=18  所以传来的参数进一步处理let data = formatData(options.data || {}); // data参数  get和post请求方式不一样  分情况讨论// get 方式在地址后边拼接  post方式是通过send（data） 发送的if(method.toUpperCase()=="GET"&&data){// foruth?name=jack&age=18url = url+"?"+data}// 1-创建xhr对象let xhr = new XMLHttpRequest();// 2-设置xhr对象xhr.open(method,`http://localhost:8888${url}`)for(let key in header){xhr.setRequestHeader(key,header[key]);}// 3- 发起请求// 分成两种情况   post请求的话 参数是通过send取发送的if(method.toUpperCase()=="POST" && data){xhr.send(data);}else{xhr.send();}// 4- 处理响应结果xhr.onload = function(){// 有可能是纯字符串  有可能是json字符串 (最常用的json串)let result;if(type=='json'){result = JSON.parse(xhr.responseText)}else{result = xhr.responseText}options.success(result)}}// 格式化data的函数function formatData(obj){let data = "";  // 保存保存处理好之后的数据for(let key in obj){data += `&${key}=${obj[key]}`}data = data.slice(1);//从下标为1开始截取到最后return data;}

封装ajax下

<!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><script src="./axios.js"></script>
</head><body><input type="text" placeholder="姓名"><input type="text" placeholder="年龄"><button>get发起请求first</button><button>get发起请求second</button><button>post发起请求third</button><script>let btn = document.querySelectorAll("button");let ipts = document.querySelectorAll("input");// 在哪调用  希望在哪拿到返回值的btn[0].onclick = function () {let option = {url:"first",dataType:"text",// 传一个回调函数success:(res)=>{console.log(res);}}ajax(option);}btn[1].onclick=function(){let option = {url:"third",dataType:"json",data:{name:"jack",age:18},// 回调函数 // 就是把函数A(success)当作参数传递到函数B中// 在函数B中以形参的方式去调用success:(res)=>{console.log(res);}}ajax(option)}btn[2].onclick=function(){let option = {url:"fourth",method:"post",data:{name:"jack",age:18},success:(res)=>{console.log(res);}}ajax(option)}</script>
</body></html>

访问后端接口

ajax在实际项目中应用

<!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><style>*{padding: 0;margin: 0;list-style: none;}ul{width: 1000px;border: 2px solid red;margin: 0 auto;background-color: #ccc;overflow: hidden;}li{float: left;width: 18%;margin-right: 2%;height: 300px;background-color: #fff;margin-bottom: 20px;border: 2px solid red;box-sizing: border-box;}img{width: 100%;}</style>
</head>
<body><ul></ul><script src="./axios.js"></script><script>let ul = document.querySelector("ul");let option = {url:"/goods/list",success:(res)=>{console.log(res.list);//数组// 数组里有多少对象  就希望有多少个lilet data="";res.list.forEach(item => {// console.log(item);data+= `<li><a href="#"><img src="${item.img_big_logo}"><h4>${item.title}</h4><p>${item.price}</p></a></li>`                    });ul.innerHTML = data;}}ajax(option)</script>
</body>
</html>

26_ajax

目录了解接口前后端交互一、安装服务器环境 nodejs ajax发起请求渲染响应结果 get方式传递参数 post方式传递参数封装ajax_上封装ajax下了解清楚前后端交互就可以写一些后端代码了。小项目现在写项目开发的时候都是前后端分离之前都没有前端这个东西&a…...

编程日记 2025/7/5 7:10:31

Java面试黄金宝典24

1. 什么是跳表定义跳表（Skip List）是一种随机化的数据结构，它基于有序链表发展而来，通过在每个节点中维护多个指向其他节点的指针，以多层链表的形式组织数据。其核心思想是在链表基础上增加额外层次，每…...

编程日记 2025/6/27 5:55:09

每日c/c++题备战蓝桥杯（全排列问题）

题目描述按照字典序输出自然数 1 到 n 所有不重复的排列，即 n 的全排列，要求所产生的任一数字序列中不允许出现重复的数字。输入格式一个整数 n。输出格式由 1∼n 组成的所有不重复的数字序列，每行一个序列。每个数字保留 5 个场…...

编程日记 2025/7/4 14:35:00

Layui实现table动态添加行，可删除、表格可编辑，小数校验

实现如图需求，layui实现的可编辑table，包含B、C、D、E列，A列不用实现出现，A列放在附件就是让你明白，不同的物料名称，行是不一样的。除了头部表头和E列不能编辑，每个表格都可编辑，其中…...

编程日记 2025/7/3 4:25:10

Spring Boot 非web应用程序

在 Spring Boot 框架中，要创建一个非Web应用程序（纯Java程序） main方法运行，不启动tomcat，main方法执行结束，程序就退出了； 方式一 1、SpringBoot开发纯Java程序，应该采…...

编程日记 2025/7/1 18:15:59

数据分析中的基线校正算法全解析：原理、实现与应用

数据分析中的基线校正算法全解析：原理、实现与应用在数据分析中，基线漂移是一个常见问题，会严重影响数据的解释和分析精度。本文将详细介绍12种主流基线校正方法，包括数学原理、Python实现代码和适用场景分析。基线漂移问题概述基线漂移主要由以下因素引起：仪器强度…...

编程日记 2025/6/30 12:20:23

国外计算机证书推荐（考证）（6 Sigma、AWS、APICS、IIA、Microsoft、Oracle、PMI、Red Hat）

文章目录证书推荐1. 六西格玛 (6 Sigma)2. 亚马逊网络服务 (AWS)3. 美国生产与库存控制学会 (APICS)4. 内部审计师协会 (IIA)5. 微软 (Microsoft)6. 甲骨文 (Oracle)7. 项目管理协会 (PMI)8. 红帽 (Red Hat) 证书推荐 1. 六西格玛 (6 Sigma) 介绍：六西格玛是一种…...

编程日记 2025/7/2 21:02:15

linux》》docker 、containerd 保存镜像、打包tar、加载tar镜像

Linux》》docker: 默认情况下，Docker镜像保存在/var/lib/docker/目录下。当您使用docker pull命令从Docker Hub或私有镜像仓库中拉取镜像时，Docker会自动将镜像文件保存在/var/lib/docker/image/目录下。每个镜像都由一个或多个层组成，这些…...

编程日记 2025/7/3 1:22:55

大数据（2）Hadoop架构深度拆解：HDFS与MapReduce企业级实战与高阶调优

目录一、分布式系统的设计哲学演进1.1 从Google三驾马车到现代数据湖二、企业级HDFS架构全景图2.1 联邦架构的深度实践2.2 生产环境容灾设计2.3 性能压测方法论三、MapReduce引擎内核解密3.1 Shuffle机制全链路优化3.2 资源调度革命：从MRv1到YARN3.3 企业级编码规…...

编程日记 2025/7/2 1:34:32

【数学建模】动态规划算法(Dynamic Programming，简称DP)详解与应用

动态规划算法详解与应用文章目录动态规划算法详解与应用引言动态规划的基本概念动态规划的设计步骤经典动态规划问题1. 斐波那契数列2. 背包问题3. 最长公共子序列(LCS) 动态规划的优化技巧动态规划的应用领域总结引言动态规划(Dynamic Programming，简称DP)是一…...

编程日记 2025/6/30 8:39:46

UE学习记录part11

第14节 breakable actors 147 destructible meshes a geometry collection is basically a set of static meshes that we get after we fracture a mesh. 几何体集合基本上是我们在断开网格后获得的一组静态网格。选中要破碎的网格物品，创建集合可以选择不同的…...

编程日记 2025/7/2 5:17:35

1、Scanner 输入： import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);// 读取整数int num scanner.nextInt();// 读取一行字符串String line scanner.nextLine();scanner.close();…...

编程日记 2025/7/3 8:56:40

浅析车规芯片软错误防护加固的重要性

随着汽车电子技术的飞速发展，汽车已经从传统的机械交通工具转变为高度依赖电子系统的智能移动终端。车规芯片作为汽车电子系统的核心部件，其可靠性和安全性直接关系到车辆的正常运行和驾乘人员的安全。然而，车规芯片在复杂的运行环境中面临着…...

编程日记 2025/7/4 1:30:29

Android Jetpack学习总结（源码级理解）

ViewModel 和 LiveData 是 Android Jetpack 组件库中的两个核心组件，它们能帮助开发者更有效地管理 UI 相关的数据，并且能够在配置变更（如屏幕旋转）时保存和恢复 UI 数据。 ViewModel作用瞬态数据丢失的恢复，比如横竖…...

编程日记 2025/7/3 22:29:29

Matlab_Simulink中导入CSV数据与仿真实现方法

前言在Simulink仿真中，常需将外部数据（如CSV文件或MATLAB工作空间变量）作为输入信号驱动模型。本文介绍如何高效导入CSV数据至MATLAB工作空间，并通过From Workspace模块实现数据到Simulink的精确传输，适用于运动控制…...

编程日记 2025/6/28 4:11:18

Go 语言规范学习（6）

文章目录 StatementsTerminating statementsEmpty statementsLabeled statementsExpression statementsSend statementsIncDec statementsAssignment statementsIf statementsSwitch statementsExpression switchesType switches For statementsFor statements with single con…...

编程日记 2025/7/3 21:24:14

设计模式——设计模式理念

文章目录参考：[设计模式——设计模式理念](https://mp.weixin.qq.com/s/IEduZFF6SaeAthWFFV6zKQ)参考：[设计模式——工厂方法模式](https://mp.weixin.qq.com/s/7tKIPtjvDxDJm4uFnqGsgQ)参考：[设计模式——抽象工厂模式](https://mp.weixin.…...

编程日记 2025/7/3 19:45:36

解析 ID 数组传参的解决方案：基于 Axios 的实现

解析 ID 数组传参的解决方案：基于 Axios 的实现在实际开发中，经常需要将一个 ID 数组作为参数传递给后端接口。然而，不同的后端框架和前端库对数组参数的处理方式可能有所不同。通过一个具体的例子，在前端使用 Axios 框架发送 I…...

编程日记 2025/7/1 19:14:03

C语言快速入门-C语言基础知识

这个c语言入门，目标人群是有代码基础的，例如你之前学过javaSE，看此文章可能是更有帮助，会让你快速掌握他们之间的差异，文章内容大部分都是泛谈，详细的部分我会在之后时间发布，我也在慢慢学习&am…...

编程日记 2025/7/4 5:05:46

Ubuntu 22.04 上安装 VS Code

在 Ubuntu 22.04 上安装 VS Code 的方法如下： 方法 1：通过 APT 包管理器安装更新系统包索引： 打开终端并执行以下命令： sudo apt update安装依赖项： 执行以下命令以安装所需的依赖项： sudo apt install s…...

编程日记 2025/7/5 7:08:41

AI人工智能-PyCharm的介绍安装应用

下载与安装创建python项目项目路径：C:\Users\miloq\Desktop\python_project 配置环境提前找到conda配置的python-base路径配置conda环境运行项目运行结果...

编程日记 2025/7/1 4:48:58

Todesk介绍

文章目录 ToDesk 软件介绍1. 软件概述2. ToDesk 的功能特点2.1 简单易用2.2 高质量的图像与流畅的操作2.3 跨平台支持2.4 多屏显示与协作2.5 文件传输功能2.6 实时聊天与语音通话2.7 远程唤醒与自动启动2.8 多种权限设置与安全性2.9 无需公网 IP 3. ToDesk 的应用场景3.1 个人使…...

编程日记 2025/7/5 7:07:55

【JavaEE】springMVC返回Http响应

目录一、返回页面二、Controller和ResponseBody与RestController区别三、返回HTML代码⽚段四、返回JSON五、HttpServletResponse设置状态码六、设置Header6.1 HttpServletResponse设置6.2 RequestMapping设置一、返回页面步骤如下： 我们先要在static目录下创建…...

编程日记 2025/6/30 16:54:54

青少年编程与数学 02-011 MySQL数据库应用 02课题、MySQL数据库安装

青少年编程与数学 02-011 MySQL数据库应用 02课题、MySQL数据库安装一、安装Windows系统Linux系统（以Ubuntu 20.04为例）macOS系统二、配置（一）Windows系统1. 创建配置文件2. 初始化数据库3. 启动MySQL服务4. 登录MySQL5. 修改ro…...

编程日记 2025/6/28 2:55:38

springboot441-基于SpringBoot的校园自助交易系统(源码+数据库+纯前后端分离+部署讲解等)

💕💕作者： 爱笑学姐 💕💕个人简介：十年Java，Python美女程序员一枚，精通计算机专业前后端各类框架。 💕💕各类成品Java毕设。javaweb，ssm&#xf…...

编程日记 2025/7/3 9:01:44

【安全运营】关于攻击面管理相关概念的梳理（一）

目录一、ASM 介绍ASM 是“Attack Surface Management”（攻击面管理）的缩写【框架视角，广义概念】1. 介绍2. 兴起的原因3. 工作流程3.1 资产发现3.2 分类和优先级排序3.3 修复3.4 监控二、EASM 介绍EASM 是 "External Attack Surface M…...

编程日记 2025/6/30 1:36:39

IPv6 网络访问异常 | 时好时坏 / 部分访问正常

注：本文为 “ IPv6 间接性连接异常” 相关文章合辑。略作重排，未去重。如有内容异常，请看原文。 IPv6 间接性连接异常？尝试调整路由器的 MTU 设置 Nero978 2024-1-29 17:54 背景 2024 年 1 月 29 日，因寒假返家…...

编程日记 2025/7/3 10:04:20

Unity编辑器功能及拓展(1) —特殊的Editor文件夹

Unity中的Editor文件夹是一个具有特殊用途的目录，主要用于存放与编辑器扩展功能相关的脚本和资源。一.纠缠不清的UnityEditor 我们Unity中进行游戏构建时，我们经常遇到关于UnityEditor相关命名空间丢失的报错，这时候，只得将报错…...

编程日记 2025/6/28 4:25:55

LLMs之PE：《Tracing the thoughts of a large language model》翻译与解读

LLMs之PE：《Tracing the thoughts of a large language model》翻译与解读导读：这篇论文的核心贡献在于提出了一种新颖的、基于提示工程的LLMs推理过程追踪技术——“Tracing Thoughts”。该技术通过精心设计的提示，引导LLMs生成其推理过程的…...

编程日记 2025/7/1 3:54:14

[Python] 贪心算法简单版

贪心算法-简单版贪心算法的一般使用场景是给定一个列表ls, 让你在使用最少的数据的情况下达到或超过n. 我们就来使用上面讲到的这个朴素的例题来讲讲贪心算法的基本模板: 2-1.排序既然要用最少的数据, 我们就要优先用大的数据拼, 为了实现这个效果, 我们得先给列表从大到小…...

编程日记 2025/7/3 4:41:29

游戏引擎学习第191天

回顾并制定今天的计划最近几天，我们有一些偏离了原计划的方向，主要是开始了一些调试代码的工作。最初我们计划进行一些调试功能的添加，但是随着工作的深入，我们开始清理和整理调试界面的呈现方式，以便能够做一些更复…...

编程日记 2025/7/3 22:10:58

Git撤回操作全场景指南：未推送与已推送，保留和不保留修改的差异处理

一、未推送到远程仓库的提交（仅本地存在） 特点：可直接修改本地提交历史，不会影响他人 1. 保留修改重新提交 git reset --soft HEAD~1 # 操作效果： # - 撤销最后一次提交 # - 保留工作区所有修改 # - 暂存区内容保持…...

编程日记 2025/7/2 17:26:29

Java 贪吃蛇游戏

这段 Java 代码实现了一个经典的贪吃蛇游戏。玩家可以使用键盘的上下左右箭头键控制蛇的移动方向，蛇会在游戏面板中移动并尝试吃掉随机生成的食物。每吃掉一个食物，蛇的身体会变长，玩家的得分也会增加。如果蛇撞到自己的身体或者撞到游戏面板…...

编程日记 2025/7/1 19:02:06

QT图片轮播器(QT实操学习2)

1.项目架构 1.UI界面 2.widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget>#define TIMEOUT 1 * 1000 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent n…...

编程日记 2025/7/2 19:48:49

mac m1/m2/m3 pyaudio的安装

google了很多方法，也尝试了 issue68的方法， 但是均失败了，但是问deepseek竟然成功了，下面是deepseek r1给出的方法。在M3 pro芯片上可以成功运行. 安装homebrew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent…...

编程日记 2025/7/5 7:09:33

Appium中元素定位的注意点

应用场景了解这些注意点可以以后在出错误的时候，更快速的定位问题原因。示例使用 find_element_by_xx 或 find_elements_by_xx 的方法，分别传入一个没有的“特征“会是什么结果呢? 核心代码 driver.find_element_by_id("xxx") drive…...

编程日记 2025/7/2 19:12:42

《深入探索 Python 数据分析：用 Pandas 高效处理与可视化大型数据集》

《深入探索 Python 数据分析：用 Pandas 高效处理与可视化大型数据集》引言：从零到分析高手数据是当代社会最宝贵的资源，而数据分析技能是现代职业人不可或缺的一部分。在数据科学的领域中，Python 已成为当之无愧的“首选语言”，其强大的生态系统和简洁的语法让人如虎添…...

编程日记 2025/7/3 19:44:47

[GWCTF 2019]我有一个数据库1 [CVE phpMyAdmin漏洞]

扫出来一些东西访问/phpmyadmin 发现界面这里用到了CVE-2018-12613，光速学习出现漏洞的代码是： $target_blacklist array (import.php, export.php );// If we have a valid target, lets load that script instead if (! empty($_REQUEST[targe…...

编程日记 2025/7/1 14:53:56

spring 常用注解区别及使用场景

1. 组件注册注解 Bean 作用：用于方法上，表示该方法返回的对象由Spring容器管理。通常用于配置类（Configuration）中，注册第三方库或自定义的Bean。使用场合： 当你需要将非Spring管理的类（如第…...

编程日记 2025/7/2 8:44:22

【后端】【Django】信号使用详解

Django post_save 信号使用详解（循序渐进） 一、信号的基本概念 Django 的信号（Signal） 允许不同部分的代码在发生某些事件时进行通信，而不需要直接调用。这种机制可以解耦代码，让不同的模块独立工作。 …...

编程日记 2025/7/2 1:34:33

ML算法数学概念

交叉熵损失（Cross-Entropy Loss） 是机器学习和深度学习中常用的一种损失函数，主要用于衡量两个概率分布之间的差异。它在分类问题中（尤其是多分类问题）被广泛使用，因为它能够有效地评估模型预测的概率分布与…...

编程日记 2025/7/4 12:27:16

wps 怎么显示隐藏文字

wps 怎么显示隐藏文字》文件》选项》视图》勾选“隐藏文字” wps怎么设置隐藏文字 wps怎么设置隐藏文字...

编程日记 2025/6/28 6:23:34

Vue3 其它API Teleport 传送门

Vue3 其它API Teleport 传送门在定义一个模态框时，父组件的filter属性会影响子组件的position属性，导致模态框定位错误使用Teleport解决这个问题把模态框代码传送到body标签下...

编程日记 2025/6/28 6:37:48

亚马逊玩具品类技术驱动型选品策略：从趋势洞察到合规基建

一、全球玩具电商技术演进趋势 （技术化重构原市场背景） 数据可视化分析：通过亚马逊SP-API抓取2023年玩具品类GMV分布热力图监管技术升级： 美国CPSC启用AI质检系统（缺陷识别准确率92.7%） 欧盟EPR合规接口…...

编程日记 2025/6/28 3:01:59

SpringBoot3+EasyExcel通过WriteHandler动态实现表头重命名

方案简介为了通过 EasyExcel 实现动态表头重命名，可以封装一个方法，传入动态的新表头名称列表（List<String>），并结合 WriteHandler 接口来重命名表头。同时，通过 EasyExcel 将数据直接写入到输出流…...

编程日记 2025/7/3 13:03:44

PHY——LAN8720A 寄存器读写 (二)

文章目录 PHY——LAN8720A 寄存器读写 (二)工程配置引脚初始化代码以太网初始化代码PHY 接口实现LAN8720 接口实现PHY 接口测试 PHY——LAN8720A 寄存器读写 (二) 工程配置这里以野火电子的 F429 开发板为例，配置以太网外设这里有一点需要注意原理图 RMII_TXD0…...

编程日记 2025/7/1 4:43:56

HTML5和CSS3的一些特性

HTML5 和 CSS3 是现代网页设计的基础技术，它们引入了许多新特性和功能，极大地丰富了网页的表现力和交互能力。 HTML5 的一些重要特性包括： 新的语义化标签: HTML5 引入了一些重要的语义化标签如 <header>, <footer>, <articl…...

编程日记 2025/6/28 5:21:57

sass报错，忽略 Sass 弃用警告，降级版本

最有效的方法是创建一个 .sassrc.json 文件来配置 Sass 编译器。告诉 Sass 编译器忽略来自依赖项的警告消息。解决方案： 1. 在项目根目录创建 .sassrc.json 文件： {"quietDeps": true }这个配置会让 Sass 编译器忽略所有来自依赖项&#x…...

编程日记 2025/6/29 11:55:00