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

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

news 2026/2/7 12:10:16

一、什么是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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/2/4 17:18:03

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

编程新知 2026/2/7 2:24:22

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

编程新知 2025/10/14 5:08:48

OPENCV图形计算面积、弧长API讲解（1）

一.OPENCV图形面积、弧长计算的API介绍 之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积&#xff0c;这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能&#xff0c;常用的API…...

编程新知 2026/2/7 8:43:51

CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14

什么是 Pattern Matching&#xff08;模式匹配&#xff09; ❝ 模式匹配就是一种“描述式”的写法&#xff0c;不需要你手动判断、提取数据&#xff0c;而是直接描述你希望的数据结构是什么样子&#xff0c;系统自动判断并提取。❞ 你给的定义拆解&#xff1a; ✴ Instead of …...

编程新知 2026/1/11 9:41:00

vue3 手动封装城市三级联动

要做的功能 示意图是这样的&#xff0c;因为后端给的数据结构 不足以使用ant-design组件 的联动查询组件 所以只能自己分装 组件 当然 这个数据后端给的不一样的情况下 可能组件内对应的 逻辑方式就不一样 毕竟是 三个 数组 省份 城市 区域 我直接粘贴组件代码了 <temp…...

编程新知 2026/1/25 5:33:31