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

JavaWeb之servlet关于Ajax实现前后端分离

news 2025/6/19 13:49:05

一、什么是Ajax:

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。XMLHttpRequest 只是实现 Ajax 的一种方式。AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

二、Ajax的主要优点包括：

  1. 提高用户体验：页面无需重新加载即可更新内容，使得用户界面更加流畅。
  2. 减少服务器负载：只请求需要的数据，而不是整个页面，减少了数据传输量。
  3. 分离数据和表示：后端可以专注于数据的处理和生成，前端则负责数据的展示。

三、在pom文件添加依赖：

<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version> 1.2.70</version>
</dependency>

四、Ajax的简单创建过程：

1.//创建对象 let xmlHttpRequest = new XMLHttpRequest();

2.//配置向后端请求类型 get post 异步请求（get和post的方式不同） xmlHttpRequest.open("get","/webApp_war_exploded/ajax1",true);

3.//监听数据是否请求成功 xmlHttpRequest.onreadystatechange=function (）{

}

4.//发送请求 xmlHttpRequest.send();（非常重要）

5.// 服务端和客户端握手 if (xmlHttpRequest.readyState==4){

//当页面属于正常运行的时候

if (xmlHttpRequest.status==200){

// 获取后端的数据存入其中

let Text = xmlHttpRequest.responseText;

//数据渲染前端页面 document.getElementById("show").innerHTML=Text;//可以自行定义属于js部分

} }

6.创建相应的Ajax类，可以使用httpservlet,servlet等都可以

7.// 后端产生数据，返回前端，同时设置编码，否则前端页面会成为乱码

8.// 返回数据 PrintWriter writer = resp.getWriter();

五、使用Ajax实现前后端分离的测试代码：

测试代码一：

在添加servlet和tomcat的环境中才可以进行此代码的测试

前端代码：

创建前端页面时创建HTML，并且如果在一个包下面，在同一站点访问时，应该先写上包名再写上文件名称

 xmlHttpRequest.open("get","/webApp_war_exploded/ajax1",true);注意这句中要和你所创建的Java类中的@WebServlet("/ajax1")的名称相同，否则并不产生实际效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function ajax1(){//创建对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型 get post 异步请求xmlHttpRequest.open("get","/webApp_war_exploded/ajax1",true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange=function (){// 服务端和客户端握手if (xmlHttpRequest.readyState==4){if (xmlHttpRequest.status==200){// 获取后端的数据存入其中let Text = xmlHttpRequest.responseText;//数据渲染前端页面document.getElementById("show").innerHTML=Text;}}}//发送请求xmlHttpRequest.send();}</script>
</head>
<body>
<div id="show">数据内容</div><button onclick="ajax1()">点击</button>
</body>
</html>

Java类代码：


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/ajax1")
public class ajax1  extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//       后端产生数据，返回前端resp.setContentType("text/html;charset=utf-8");
//        返回数据PrintWriter writer = resp.getWriter();writer.write("来自后端数据");}
}

在访问时：有包的话先写包名

六、Ajax的get请求方式：

前端代码：

 xmlHttpRequest.open("get","/webApp_war_exploded/ajax2?name="+user+"&pas="+pwd,true);这句中let后面的内容则与其对应，但是等于前面可以自定义名称，在编写后端代码时，则与名称对应，其他注意的点和步骤则于前面相同

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax get方式传值</title><script>function ajax2(){//获取表单数据let user = document.querySelector(".user").value;let pwd = document.querySelector(".pwd").value;//创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型 get post 异步请求xmlHttpRequest.open("get","/webApp_war_exploded/ajax2?name="+user+"&pas="+pwd,true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange=function (){// 服务端和客户端握手if (xmlHttpRequest.readyState==4){if (xmlHttpRequest.status==200){// 获取后端的数据存入其中let Text = xmlHttpRequest.responseText;//数据渲染前端页面document.getElementById("show").innerHTML=Text;}}}//发送请求xmlHttpRequest.send();}</script>
</head>
<body>
<div id="show" style="border: solid 5px black;width: 300px;height: 300px;">
<!--    获得的数据-->
</div>
姓名<input type="text" class="user"><br>
密码<input type="password" class="pwd"><br>
<button onclick="ajax2()">提交</button>
</body>
</html>

后端代码：


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet("/ajax2")
public class ajax2 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//       后端产生数据，返回前端req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");
//        返回数据//接受传递过来的姓名和密码String user = req.getParameter("name");String pwd = req.getParameter("pas");//        返回数据PrintWriter writer = resp.getWriter();writer.write("来自后端数据"+user);writer.write("来自后端数据"+pwd);}
}

七、Ajax的Post请求方式：

前端代码：

  xmlHttpRequest.open("post","/webApp_war_exploded/ajax2",true);与get方式不同，注意，post还需要加上这句，否则传值失败，为空

   xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax post方式传值</title><script>function ajax3(){//获取表单数据let user = document.querySelector(".user").value;let pwd = document.querySelector(".pwd").value;//创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型  post 异步请求xmlHttpRequest.open("post","/webApp_war_exploded/ajax2",true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange=function (){// 服务端和客户端握手if (xmlHttpRequest.readyState==4){if (xmlHttpRequest.status==200){// 获取后端的数据存入其中let Text = xmlHttpRequest.responseText;//数据渲染前端页面document.getElementById("show").innerHTML=Text;}}}xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//发送请求xmlHttpRequest.send("name="+user+"&pas="+pwd);}</script>
</head>
<body>
<div id="show" style="border: solid 5px black;width: 300px;height: 300px;">
<!--    获得的数据-->
</div>
姓名<input type="text" class="user"><br>
密码<input type="password" class="pwd"><br>
<button onclick="ajax3()">提交</button>
</body>
</html>

后端代码与get方式相同，并且从此中就可以对比看出两种请求方式的不同；

八、Ajax的实例应用：（AJAX JSON 实例）

前端代码：

其中一定要与javaBean字段对应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax get方式传值</title><style>span{font-size: 20px;}</style><script>function ajax4(){//创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型 get post 异步请求xmlHttpRequest.open("get","/webApp_war_exploded/ajax3",true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange=function (){// 服务端和客户端握手if (xmlHttpRequest.readyState==4){if (xmlHttpRequest.status==200){// 获取后端的数据存入其中let Text = JSON.parse(xmlHttpRequest.responseText);//把json格式的字符串转换成json格式的对象，数据渲染前端页document.querySelector(".id").innerHTML = Text[0].id;document.querySelector(".name").innerHTML = Text[0].name;document.querySelector(".sex").innerHTML = Text[0].sex;document.querySelector(".age").innerHTML = Text[0].age;document.querySelector(".major").innerHTML = Text[0].major;document.querySelector(".time").innerHTML = Text[0].time;// document.getElementById("show").innerHTML=Text;}}}//发送请求xmlHttpRequest.send();}</script>
</head>
<body onload="ajax4()">
<div id="show" style="border: solid 5px black;width: 500px;height: 500px;">
<!--    获得的数据-->
//第一步
<!--id<span class="id"></span>-->
<!--姓名<span class="name"></span>-->
<!--性别<span class="sex"></span>-->
<!--年龄<span class="age"></span>-->
<!--专业<span class="major"></span>-->
<!--时间<span class="time"></span>--><table><tr><th>id</th><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th><th>时间</th><th>操作一</th><th>操作二</th></tr>
//第二步<tr><td class="id"></td><td class="name"></td><td class="sex"></td><td class="age"></td><td class="major"></td><td class="time"></td></tr></table>
</div>
</body>
</html>

第一步的后端代码：

第一步是先将数据写死，并没用有和数据库连接


import Dao.StudentDao;
import Model.Student;
import Model.Students;
import com.alibaba.druid.support.json.JSONUtils;
import com.alibaba.fastjson.JSON;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;@WebServlet("/ajax3")
public class ajax3 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ArrayList<Student> sts = new ArrayList<>();Student s1 = new Student();Student s2 = new Student();Student s3 = new Student();s1.setId(1);s1.setName("aa");s1.setSex("ss");s1.setAge(22);s1.setMajor("dd");s1.setTime("ww");s2.setId(1);s2.setName("aa");s2.setSex("ss");s2.setAge(22);s2.setMajor("dd");s2.setTime("ww");s3.setId(1);s3.setName("aa");s3.setSex("ss");s3.setAge(22);s3.setMajor("dd");s3.setTime("ww");sts.add(s1);sts.add(s2);sts.add(s3);String s = JSON.toJSONString(sts);System.out.println("s = " + s);resp.setContentType("application/json");//       后端产生数据，返回前端req.setCharacterEncoding("utf-8");//响应用户请求，告知编码resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();writer.write(s);//释放资源和对象writer.flush();writer.close();

第二步的后端代码：

第二步是先将数据写死，并和数据库连接（采用的mybatis的注解方式）：

接口代码：


import Dao.StudentDao;
import Model.Student;
import Model.Students;
import com.alibaba.druid.support.json.JSONUtils;
import com.alibaba.fastjson.JSON;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;@WebServlet("/ajax3")
public class ajax3 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {InputStream on = Resources.getResourceAsStream("config/mybatis_config.xml");SqlSessionFactory build1 = new SqlSessionFactoryBuilder().build(on);SqlSession sqlSession1 = build1.openSession();StudentDao studentDao1 = sqlSession1.getMapper(StudentDao.class);List<Students> all = studentDao1.findAll();req.setAttribute("all",all);String s = JSON.toJSONString(all);System.out.println("s = " + s);resp.setContentType("application/json");//       后端产生数据，返回前端req.setCharacterEncoding("utf-8");//响应用户请求，告知编码resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();writer.write(s);//释放资源和对象writer.flush();writer.close();}
}

九、实战：

（此项目的增加，更新，删除，只有前端可以使用和数据库没有连接）

(1)在同一数据库创建表:

代码：

-- 创建表
CREATE TABLE students (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    sex VARCHAR(10),
    age INT,
    tel BIGINT,
    scores DECIMAL(5,2),
    school VARCHAR(100)
);

-- 插入数据
INSERT INTO students (id, name, sex, age, tel, scores, school) VALUES
(1, 'aa', '男', 19, 18292743385, 98.3, '清华大学'),
(2, 'bb', '男', 19, 15292743385, 88.3, '清华大学'),
(3, 'cc', '女', 20, 15292743385, 90.0, '清华大学'),
(4, 'dd', '男', 17, 16292743385, 80.0, '清华大学'),
(5, 'ee', '女', 19, 15392743385, 78.3, '西安文理'),
(6, 'ff', '男', 29, 13292743385, 68.3, '西安文理'),
(7, 'uu', '男', 29, 17292743385, 88.8, '宝鸡文理1'),
(8, 'cc1', '男', 19, 19292743385, 98.3, '宝鸡文理'),
(9, 'cc2', '男', 19, 28292743385, 78.3, '宝鸡文理'),
(10, 'cc3', '男', 19, 18292743385, 68.3, '宝鸡文理'),
(11, 'cc4', '男', 19, 18292743385, 78.3, '宝鸡文理'),
(12, 'cc3', '男', 19, 18292743385, 68.3, '宝鸡文理'),
(13, 'cc4', '男', 19, 18292743385, 78.3, '宝鸡文理'),
(14, 'cc3', '男', 19, 18292743385, 68.3, '宝鸡文理'),
(15, 'cc4', '男', 19, 18292743385, 78.3, '宝鸡文理');

(2)创建javaBean:

（3）前端代码：

HTML：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="showlist.css"><script>let data;window.onload = function () {ajax4();function ajax4() {//创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型 get post 异步请求xmlHttpRequest.open("get", "/webApp_war_exploded/ajax3", true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange = function () {// 服务端和客户端握手if (xmlHttpRequest.readyState == 4) {if (xmlHttpRequest.status == 200) {// 获取后端的数据存入其中data= JSON.parse(xmlHttpRequest.responseText);init();//把json格式的字符串转换成json格式的对象，数据渲染前端页// document.getElementById("show").innerHTML=Text;}}}//发送请求xmlHttpRequest.send();}var pos;let tab = document.getElementById("tab");var update1 = document.querySelector(".update");var add1 = document.querySelector(".add");//1.渲染数据function init() {
//1.逐条遍历数据for (let index = 0; index < data.length; index++) {//2.生成一行trlet tr = document.createElement("tr")if (index % 2 == 0) {tr.style.backgroundColor = "lightgreen";}//3.生成行内的tdfor (let j = 0; j < 7 + 2; j++) {let td = document.createElement("td")tr.appendChild(td);//添加到tr}
//4，给每一行的td赋初值tr.children[0].innerHTML = data[index].id;tr.children[1].innerHTML = data[index].name;tr.children[2].innerHTML = data[index].sex;tr.children[3].innerHTML = data[index].age;tr.children[4].innerHTML = data[index].tel;tr.children[5].innerHTML = data[index].scores;tr.children[6].innerHTML = data[index].school;
//5.创建操作按钮let button = document.createElement("button")let button1 = document.createElement("button")button.innerHTML = "删除";button1.innerHTML = "更新";
//2.删除数据button.onclick = del(index);button1.onclick = update(index);
//6.添加按钮对象tr.children[7].appendChild(button)tr.children[8].appendChild(button1)tab.appendChild(tr);}}//点击按钮实现，删除操作function del(index) {//想想，为啥这么写？好处是啥return function () {if (window.confirm("你确定要删除吗？")) {data.splice(index, 1);tab.innerHTML = "";init();}}}//点击按钮，实现数据回显效果function update(index) {//想想，为啥这么写？好处是啥return function () {var update = document.querySelector(".update");var add = document.querySelector(".add");
// update.style.display = "none";
// add.style.display = "block";
// data[data.length-1].id+1;document.querySelector(".xm1").value = data[index].name
// document.querySelectorAll(".xb1")[0].checked?"男":"女";document.querySelector(".nl1").value = data[index].age;document.querySelector(".dh1").value = data[index].tel;document.querySelector(".cj1").value = data[index].scoresdocument.querySelector(".xx1").value = data[index].schoolpos = index;//记录更新的数组下标}}//3.数据添加let sub = document.getElementById("sub")sub.onclick = function () {let id = data[data.length - 1].id + 1;let xm = document.querySelector(".xm").valuelet xb = document.querySelectorAll(".xb")[0].checked ? "男" : "女";let nl = document.querySelector(".nl").valuelet dh = document.querySelector(".dh").valuelet cj = document.querySelector(".cj").valuelet xx = document.querySelector(".xx").value
//数据入库let newobj = {"id": id,"name": xm,"sex": xb,"age": nl,"tel": dh,"scores": cj,"school": xx}data.push(newobj);//数据添加仓库之后，重新渲染界面tab.innerHTML = "";add1.reset();init();//调用init方法重新渲染界面}//4实现更新let sub1 = document.getElementById("sub1")sub1.onclick = function () {let id = data[data.length - 1].id + 1;let xm = document.querySelector(".xm1").valuelet xb = document.querySelectorAll(".xb1")[0].checked ? "男" : "女";let nl = document.querySelector(".nl1").valuelet dh = document.querySelector(".dh1").valuelet cj = document.querySelector(".cj1").valuelet xx = document.querySelector(".xx1").value
//更新这条数据data[pos] = {"id": id,"name": xm,"sex": xb,"age": nl,"tel": dh,"scores": cj,"school": xx}update1.reset();tab.innerHTML = "";init();//调用init方法重新渲染界面}}</script>
</head><body>
<h1 class="title">学生数据展示</h1>
<div id="box"><div class="form"><form action="" class="update">姓名<input type="text" class="xm1" placeholder="请输入更新姓名"><br>性别<input type="radio" class="xb1" value="男" name="sex" checked>男<input type="radio" value="男" class="xb1" name="sex">女<br>年龄<input type="text" placeholder="请输入年龄" class="nl1"><br>电话<input type="text" class="dh1"><br>成绩<input type="text" class="cj1"><br>学校<input type="text" class="xx1"><br><input type="button" id="sub1" value="更新"></form><form action="" class="add">姓名<input type="text" class="xm" placeholder="请输入姓名"><br>性别<input type="radio" class="xb" value="男" name="sex" checked>男<input type="radio" value="男" class="xb" name="sex">女<br>年龄<input type="text" placeholder="请输入年龄" class="nl"><br>电话<input type="text" class="dh"><br>成绩<input type="text" class="cj"><br>学校<input type="text" class="xx"><br><input type="button" id="sub" value="添加"></form></div><div class="show"><table><thead><tr><th>ID</th><th>姓名</th><th>性别</th><th>年龄</th><th>电话</th><th>成绩</th><th>学校</th><th>操作1</th><th>操作2</th></tr></thead><tbody id="tab"></tbody></table></div>
</div></body></html>

（4）css：

*{margin:0;padding:0;
}
table{/*     表格中的双线合成单线 */border-collapse:collapse;width: 900px;margin: 0 auto;}
th,td{border: solid 1px red;
}
#box{width: 1300px;margin:30px auto;}
.form{float:left;}
.form input{margin:10px;
}
.show{float: right;
}
.title{text-align: center;margin:20px;font-size: 50px;background:lightgray;}

（5）后端代码：

接口代码：

（6）后端Java类代码：


import Dao.StudentDao;
import Model.Student;
import Model.Students;
import com.alibaba.druid.support.json.JSONUtils;
import com.alibaba.fastjson.JSON;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;@WebServlet("/ajax3")
public class ajax3 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {InputStream on = Resources.getResourceAsStream("config/mybatis_config.xml");SqlSessionFactory build1 = new SqlSessionFactoryBuilder().build(on);SqlSession sqlSession1 = build1.openSession();StudentDao studentDao1 = sqlSession1.getMapper(StudentDao.class);List<Students> all = studentDao1.findAll1();req.setAttribute("all",all);String s = JSON.toJSONString(all);System.out.println("s = " + s);resp.setContentType("application/json");//       后端产生数据，返回前端req.setCharacterEncoding("utf-8");//响应用户请求，告知编码resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();writer.write(s);//释放资源和对象writer.flush();writer.close();}
}

访问方式：

效果：

相关文章：

JavaWeb之servlet关于Ajax实现前后端分离

一、什么是Ajax: AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 不是新的编程语言&#xff0c;而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下&#xff0c;可以与服务器交换数据并更新部…...

编程日记 2024/8/8 7:10:21

vue3表格组件formatter

有时候在网页上显示表格数据时&#xff0c;表格的某些列值只有有限数目&#xff08;例如&#xff0c;启用/停用&#xff09;&#xff0c;这时候后端常常使用不同的数据值表示不同状态&#xff0c;前端怎么将这些数据值转化为相应的列值呢&#xff1f; 我们可以采用vue3表格组件…...

编程日记 2024/8/8 7:09:19

C# 使用NHibernate连接MySQL实现数据的增删改查

使用 NHibernate 连接 MySQL 并实现数据的增删改查操作是一个非常典型的场景。以下是一个简单的示例&#xff0c;演示了如何配置 NHibernate 与 MySQL 连接并进行基本的 CRUD 操作。 目录 步骤 1: 安装必要的包 步骤 2: 配置 NHibernate 配置文件方式 代码方式 步骤 3: 定…...

编程日记 2024/8/8 7:06:16

IDEA2024.2重磅发布，更新完有4G！

JetBrains 今天宣布了其 IDE 家族版本之 2024.2 更新&#xff0c;其亮点是新 UI 现在已是默认设置&#xff0c;并且对 AI Assistant &#xff08;AI助手&#xff09;进行了几项改进。 安装密道 新 UI 的设计更加简约&#xff0c;可以根据需要以视觉方式扩展复杂功能。值得开发…...

编程日记 2024/8/8 7:04:14

QWT+Qt Creator+MSVC的配置与使用

目录 一、介绍 二、QWT下载 三、QWT编译 3.1 设置构建套件 3.2 修改QWT相关文件 3.3 进行QWT编译 四、QWT配置 4.1 配置QWT的lib文件 4.2 配置QWT的dll文件 4.3 配置QWT的designer的dll文件 五、代码实验 一、介绍 QWT&#xff0c;全称是Qt Widgets for Technical…...

编程日记 2024/8/8 7:03:12

Netty高性能数据结构

文章目录 Netty高性能数据结构FastThreadLocalHashedWheelTimer时间轮Mpsc无锁队列 Netty高性能数据结构 Netty 用高性能数据结构的主要目的是为了提高网络通信的效率和系统的整体性能。 所谓的高性能数据结构是指&#xff0c;那些在特定场景下优化了性能和效率的数据结构&am…...

编程日记 2024/8/8 7:02:11

关于百度、微软语音合成的实现案例

关键词 自助机产品、排队呼叫功能、网络喇叭、百度语音合成SDK、微软TTS 阅读建议 对自助机产品功能扩展感兴趣的读者、需要实现远程语音呼叫功能的开发者、想要了解网络喇叭选型及其使用的技术人员、对百度语音合成SDK和微软TTS感兴趣的开发者 阅读时长 预计阅读时长&#xf…...

编程日记 2024/8/8 7:01:10

二叉树：镜像树,子结构,二叉树转链表,二叉树的倒数K个数,对称，Z型打印

1.把一棵二叉树转换为它的镜像树。 void mirror_tree(TreeNode *root) {if(rootNULL) return ;TreeNode *temproot->right;root->rightroot->left;root->lefttemp;mirror_tree(root->right);mirror_tree(root->left);}2、输入两棵二叉树A&#xff0c;B&…...

编程日记 2024/8/8 6:59:08

瑞秋，詹妮弗·安妮斯顿多年来与本·阿弗莱克保持着“调情”友谊 又一个詹妮弗

尽管所有迹象都表明本阿弗莱克和詹妮弗洛佩兹的婚姻即将走向离婚，但他尚未公开评论此事。不过，好莱坞圈内人士已经纷纷将他与另一位名人联系起来。事实上，是另一位詹妮弗。 一位消息人士向媒体透露，詹妮弗安妮斯顿和阿弗莱克一直都很有默契——无论是在银幕上还是在银幕外…...

编程日记 2024/8/8 6:55:03

指纹失效，忘记iPhone屏幕解锁密码怎么应对？

为保证手机的安全及隐私&#xff0c;我们会给手机设置屏幕锁屏密码&#xff0c;通过输入设置密码来解锁手机屏幕锁&#xff0c;但为了给大家提供快速便捷的解锁方式&#xff0c;苹果公司提供了指纹解锁&#xff0c;不仅解锁更便捷了还极大地增强了设备的安全性。但有时我们手指…...

编程日记 2024/8/8 6:54:02

09.XSS跨站脚本攻击（超详细！！！）

1、什么是XSS XSS&#xff08;跨站脚本攻击&#xff09;&#xff1a;攻击者利用这个漏洞将恶意脚本注入到网页中&#xff0c;当其它用户浏览这些页面时&#xff0c;恶意脚本会在用户的浏览器中执行。XSS攻击允许攻击者在用户的浏览器上执行脚本&#xff0c;从而可能获取用户的…...

编程日记 2024/8/8 6:53:01

讲解人工智能在现代科技中的应用和未来发展趋势-水文

人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一种模拟人类智能的科技领域&#xff0c;它通过计算机模拟人类的思维、学习、推理和决策能力&#xff0c;以便解决复杂的问题。近年来&#xff0c;人工智能技术的发展取得了惊人的进展&#xff0c…...

编程日记 2024/8/8 6:50:59

2.2 QT 环境配置

2.2 QT环境配置 QT是一个1991年由QT Company开发的跨平台C图形用户界面应用程序开发框架。它既可以开发GUI程序&#xff0c;也可以用于开发非GUI程序&#xff0c;比如控制台工具和服务器。Qt是面向对象的框架&#xff0c;使用特殊的代码生成扩展&#xff08;称为元对象编译器&…...

编程日记 2024/8/8 6:49:58

2.类和对象（上）

1. 类的定义 1.1 类定义格式 • class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{ }中为类的主体&#xff0c;注意类定义结束时后面分号不能省略。类体中内容称为类的成员&#xff1a;类中的变量称为类的属性或成员变量; &#xff08;类和结构体非常像&#…...

编程日记 2024/8/8 6:45:53

【实际案例】服务器宕机情况分析及处理建议

了解银河麒麟操作系统更多全新产品&#xff0c;请点击访问麒麟软件产品专区&#xff1a;https://product.kylinos.cn 服务器环境以及配置 物理机/虚拟机/云/容器 物理机 外网/私有网络/无网络 私有网络 处理器&#xff1a; Kunpeng 920 内存&#xff1a; 4 TiB BIOS版…...

编程日记 2024/8/8 6:43:51

Linux系统之ncdu命令的基本使用

Linux系统之ncdu命令的基本使用 一、ncdu命令命令介绍1.1 ncdu简介1.2 ncdu特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查系统镜像源3.4 更新软件列表 四、安装ncdu工具4.1 安装ncdu软件4.2 n…...

编程日记 2024/8/8 6:40:44

STM32L051K8U6-HAL-LED闪烁设计

HAL三步法&#xff1a; 1、配置下载线 2、配置晶振 3、配置时钟 注意&#xff1a;中断优先级&#xff08;这里防止HAL_Delay卡死&#xff0c;详细请看 http://t.csdnimg.cn/NQhQV&#xff09; 4、 配置灯引脚属性为输出模式。并设置标签为LED 生成代码&#xff1a;编写while里…...

编程日记 2024/8/8 6:39:43

记一次远程API调用失败

记一次远程API调用失败 最近开发忙&#xff0c;项目紧&#xff0c;系统出现一些忽隐忽现的问题&#xff0c;本地也不能复现&#xff0c;当时也无法理解&#xff0c;就先搁置了&#xff0c;现在回想起来&#xff0c;这里还是明智的。 这个bug很神奇 今天&#xff0c;原本好好的…...

编程日记 2024/8/8 6:37:41

【力扣】746.使用最小花费爬楼梯

题目描述 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 示例…...

编程日记 2024/8/8 6:36:40

06：【stm32】中断一：NVIC的配置

中断 1、中断的简介1.1、什么是中断1.2、为什么需要中断 2、中断的优先级2.1、中断优先级的表示方法 3、NVIC3.1、什么的NVIC3.2、NVIC的内部结构3.3、中断向量表3.4、程序实现①开启中断源②配置NVIC③中断响应函数 1、中断的简介 1.1、什么是中断 正在进行的事务被突发事件打…...

编程日记 2024/8/8 6:35:39

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/6/18 16:35:32

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/6/19 11:24:24

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/6/17 22:28:28

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/6/17 2:24:14

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/6/17 15:37:55

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/6/15 23:27:54

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/6/18 20:47:12

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/6/17 7:35:20

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/6/17 2:31:22

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/6/17 2:19:51