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

一、什么是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();}
}

访问方式：

效果：

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

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

相关文章

Nuxt2：强制删除window.__NUXT__中的数据

Nuxt2：强制删除window.__NUXT__中的数据

一、问题描述 在以前的一篇文章《Nuxt3: 强制删除__NUXT_DATA__的一种方式》中曾介绍了在Nuxt3中如何删除存在于页面id为__NUXT_DATA__的script节点中的数据。 此次&#xff0c;Nuxt2与Nuxt3不同在于它的数据是存在于window.__NUXT__&#xff0c;那么该如何处理呢&#xff1f;…
阅读更多...
2025深圳国际户外庭院营地用品博览会

2025深圳国际户外庭院营地用品博览会

2025深圳国际户外庭院营地用品博览会 2025 Shenzhen International Outdoor Courtyard Camping Supplies Expo 时间&#xff1a;2025年02月27-3月01日 地点&#xff1a;深圳会展中心&#xff08;福田馆&#xff09; 详询主办方陆先生 I38&#xff08;前三位&#xff09; …
阅读更多...
如何用OceanBase与DataWorks，打造一站式的数据集成、开发和数据服务

如何用OceanBase与DataWorks，打造一站式的数据集成、开发和数据服务

导语&#xff1a;在OceanBase 2024年开发者大会的技术生态论坛上&#xff0c;阿里云DataWorks团队的高级技术专家罗海伟&#xff0c;详细阐述了一站式大数据开发治理平台DataWorks的能力&#xff0c;并对于如何基于OceanBase和Dataworks构建一站式数据集成、开发以及数据服务进…
阅读更多...
Linux驱动开发—Linux内核定时器概念和使用详解,实现基于定时器的字符驱动

Linux驱动开发—Linux内核定时器概念和使用详解,实现基于定时器的字符驱动

文章目录 内核定时器概念在Linux驱动模块中使用定时器软定时器&#xff08;Soft Timers&#xff09;jiffies 含义高精度定时器&#xff08;High Resolution Timers&#xff09; 实现倒计时字符设备驱动 内核定时器概念 在 Linux 内核中&#xff0c;定时器是用来管理和调度延迟…
阅读更多...
8.7-主从数据库的配置+mysql的增删改查

8.7-主从数据库的配置+mysql的增删改查

一、mysql环境的配置 1.环境准备 &#xff08;1&#xff09;主数据库 #关闭防火墙 [rootmaster ~]# systemctl stop firewalld#关闭selinux [rootmaster ~]# setenforce 0#下载lrzsz工具 [rootmaster ~]# yum -y install lrzsz#安装rsync [rootmaster ~]# yum -y install rs…
阅读更多...
低代码平台：效率利器还是质量妥协？

低代码平台：效率利器还是质量妥协？

目录 低代码平台&#xff1a;效率利器还是质量妥协&#xff1f; 一、引言 二、低代码平台的定义和背景 1、什么是低代码平台&#xff1f; 2、低代码平台的兴起 三、低代码开发的机遇 1、提高开发效率 2、降低开发成本 3、赋能业务人员 四、低代码开发的挑战 1、质量…
阅读更多...
pgbackrest备份方案(差异和增量备份的区别)

pgbackrest备份方案(差异和增量备份的区别)

pgbackrest备份方案(差异和增量备份的区别) 一 备份 全量备份&#xff1a; 将数据库集群的全部内容复制到备份中。数据库集群的第一个备份始终是全量备份。始终能够直接还原全量备份。全量备份不依赖于完整备份之外的任何文件来保持一致性。 差异备份&#xff1a; 仅复制自…
阅读更多...
3D展示的前景如何？

3D展示的前景如何？

随着人类科技的不断进步&#xff0c;对未来的趋势也肯定是向高纬度发展。3D取代2D只是一个所需时间长短而已&#xff0c;题主既然这么问&#xff0c;说明肯定是意识到了3D是未来的趋势&#xff0c;那么就应该多接触和了解未来的3D平台及应用工具、应用领域等。 之前2G\3G时代&…
阅读更多...
1.MongoDB入门指南之开篇

1.MongoDB入门指南之开篇

1. 写在前面 MongoDB大家可能听说过&#xff0c;但是要怎么学习&#xff1f;先学习哪个&#xff0c;很多人是不知道的&#xff0c;毕竟面对一个未知的事物&#xff0c;迷茫是很多人都会遇到的&#xff0c;从今天起我们就开始系统的介绍MongoDB的学习。 2. 课程介绍 课程主要分…
阅读更多...
【Android Studio】原生应用部署第三方插件（探针）

【Android Studio】原生应用部署第三方插件（探针）

一、本地引入包流程 &#xff08;一&#xff09;本地引入包内容 &#xff08;二&#xff09;本地引入包操作步骤 将 【probe-android-sdk】目录里面所有的aar包复制到嵌码项目工程&#xff08;App级别&#xff09;的 libs 目录下 二、添加插件 &#xff08;一&#xff09;…
阅读更多...
Qt文件读写

Qt文件读写

Qt中文件读写类简述 包含头文件#include <QFile> 读写模式如下 枚举 文件读写步骤 1 先使用string 类型来接受打开文件的返回值 QFileDialog::getOpenFileName(this,"文件","./"); //打开一个文件 2 构建文件对象 Qfile ff (qstring)接受打…
阅读更多...
“前缀和”专题篇一

“前缀和”专题篇一

目录 【模版】前缀和 【模版】二维前缀和 寻找数组的中心下标 除自身以外数组的乘积 【模版】前缀和 题目 思路 这道题如果使用暴力解法&#xff0c;即针对每次查询&#xff0c;先算出前r个数的总和&#xff0c;然后再算出前l-1个数的总和&#xff0c;然后相减就得出本次查…
阅读更多...
【MYSQL】MYSQL逻辑架构

【MYSQL】MYSQL逻辑架构

mysql逻辑架构分为3层 mysql逻辑架构分为3层 1). 连接层&#xff1a;主要完成一些类似连接处理&#xff0c;授权认证及相关的安全方案。 2). 服务层&#xff1a;在 MySQL据库系统处理底层数据之前的所有工作都是在这一层完成的&#xff0c;包括权限判断&#xff0c;SQL接口&…
阅读更多...
三数之和-Leetcode

三数之和-Leetcode

leetcode链接&#xff1a;三数之和 题目描述 解题思路 主要要思考以下几个问题&#xff1a; 如何选取三个元素&#xff1f;— 当前节点 左指针 右指针指针开始位置&#xff1f;— 左指针 当前节点位置 i 1&#xff0c; 右指针 n - 1如何保证不重复&#xff1f; — 先把…
阅读更多...
利用自然语言处理（NLP）技术挖掘旅游评论数据

利用自然语言处理（NLP）技术挖掘旅游评论数据

目录 简单了解 延伸 如何使用自然语言处理技术提高旅游评论情感倾向的准确性&#xff1f; 旅游评论数据中多模态信息融合的最佳实践是什么&#xff1f; 在旅游评论数据预处理和清洗过程中&#xff0c;哪些方法最有效&#xff1f; 使用Python网络爬虫技术进行旅游评论数据的…
阅读更多...
Python酷库之旅-第三方库Pandas(072)

Python酷库之旅-第三方库Pandas(072)

目录 一、用法精讲 291、pandas.Series.dt.round函数 291-1、语法 291-2、参数 291-3、功能 291-4、返回值 291-5、说明 291-6、用法 291-6-1、数据准备 291-6-2、代码示例 291-6-3、结果输出 292、pandas.Series.dt.floor函数 292-1、语法 292-2、参数 292-3、…
阅读更多...
关于手机中的红外遥控

关于手机中的红外遥控

在手机电路中&#xff0c;有这么不起眼的一部分&#xff0c;虽看似简单&#xff0c;但是却给我们的生活在一定程度上带来了极大的便捷-红外遥控部分。 其置于手机顶部&#xff0c;并在壳体处挖开一个小孔&#xff0c;用于红外信号对外界的传递。如果你感兴趣的话&#xff0c;不…
阅读更多...
Go语言项目实战班04 Go语言课程管理系统项目实战 20240807 课程笔记和上课代码

Go语言项目实战班04 Go语言课程管理系统项目实战 20240807 课程笔记和上课代码

预览 课程特色 本教程录制于2024年8月8日&#xff0c;使用Go1.22版本&#xff0c;基于Goland2024进行开发&#xff0c;采用的技术栈比较新。 每节课控制在十分钟以内&#xff0c;课时精简&#xff0c;每节课都是一个独立的知识点&#xff0c;如果有遗忘&#xff0c;完全可以当…
阅读更多...
基于JSP技术的人事管理系统

基于JSP技术的人事管理系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; JSP技术 Java语言 工具&#xff1a; Myeclipse 系统展示 首页 管理员功能模块 员工功能模…
阅读更多...
攻击者劫持 Facebook 页面用于推广恶意 AI 照片编辑器

攻击者劫持 Facebook 页面用于推广恶意 AI 照片编辑器

近日&#xff0c;有攻击者劫持了 Facebook 上的网页&#xff0c;诱骗用户下载一个合法的人工智能&#xff08;AI&#xff09;照片编辑器&#xff0c;但实际上他们真正下载的却是一个专门用以盗取用户的凭据信息窃取程序。 趋势科技的研究人员发现的这一恶意广告活动利用了人工…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023