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

Vue的Ajax请求-axios、前后端分离练习

news 2025/12/15 15:07:49

Vue的Ajax请求

axios简介

Axios，是Web数据交互方式，是一个基于promise [5]的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 [2]
axios :不是vue的插件，可以在任何地方使用，推荐

axios的使用方式

1、使用npm安装

npm install axios

2、使用cdn链接axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios的语法

axios({// 请求方式method: 'post',url: 'api',// 传递参数data: obj,// 设置请求头信息headers: {key: value},responseType: 'json'
}).then(response => {// 请求成功let res = response.data;console.log(res);
}).catch(error => {// 请求失败，console.log(error);
});

axios案例

1、数据准备

Student.json

[{"sid":1,"name":"mary","age":18,"gender":"女"},{"sid":2,"name":"lucy","age":18,"gender":"女"},{"sid":3,"name":"tom","age":19,"gender":"男"},{"sid":4,"name":"jack","age":18,"gender":"男"}
]

2、初使用问题

VScode

在这里插入图片描述

解决办法

在这里插入图片描述

3、axios 发送get请求

<!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="js/vue.global.js"></script><script src="js/axios.min.js"></script>
</head>
<body><div id="app"><table cellspacing="0" cellpadding="0" border="1" width="500" align="center"><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th></tr><tr v-for="stu in stus"><td>{{stu.sid}}</td><td>{{stu.name}}</td><td>{{stu.age}}</td><td>{{stu.gender}}</td></tr></table></div><script>const vueApp = Vue.createApp({data:function(){return {stus:""}},created:function(){//发送ajax请求，将得到的数据赋值给stusaxios({method:"get",url:"json/students.json"}).then(resp => {this.stus = resp.data;});}});vueApp.mount("#app");</script>
</body>
</html>

或者

<!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="js/vue.global.js"></script><script src="js/axios.min.js"></script>
</head>
<body><div id="app"><table cellspacing="0" cellpadding="0" border="1" width="500" align="center"><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th></tr><tr v-for="stu in stus"><td>{{stu.sid}}</td><td>{{stu.name}}</td><td>{{stu.age}}</td><td>{{stu.gender}}</td></tr></table></div><script>const vueApp = Vue.createApp({data:function(){return {stus:""}},created:function(){//发送ajax请求，将得到的数据赋值给stusaxios.get("json/students.json").then(resp => {this.stus = resp.data;});}});vueApp.mount("#app");</script>
</body>
</html>

4、axios 发送post请求

<!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="js/vue.global.js"></script><script src="js/axios.min.js"></script>
</head>
<body><div id="app"><table cellspacing="0" cellpadding="0" border="1" width="500" align="center"><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th></tr><tr v-for="stu in stus"><td>{{stu.sid}}</td><td>{{stu.name}}</td><td>{{stu.age}}</td><td>{{stu.gender}}</td></tr></table></div><script>const vueApp = Vue.createApp({data:function(){return {stus:""}},created:function(){//发送ajax请求，将得到的数据赋值给stusaxios({method:"post",url:"json/students.json"}).then(resp => {this.stus = resp.data;});}});vueApp.mount("#app");</script>
</body>
</html>

注意：绝大多数web服务器,都不允许静态文件响应POST请求,所以这里运行会报错哦。

5、补充

为所有支持的请求方法提供了别名
axios.request(confifig)
axios.get(url[, confifig])
axios.delete(url[, confifig])
axios.head(url[, confifig])
axios.post(url[, data[, confifig]])
axios.put(url[, data[, confifig]])
axios.patch(url[, data[, confifig]])

请求后台数据

1.index.html

<!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="js/vue.global.js"></script><script src="js/axios.min.js"></script>
</head>
<body><div id="app"><table cellspacing="0" cellpadding="0" border="1" width="500" align="center"><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>邮箱</th></tr><tr v-for="stu in stus"><td>{{stu.sid}}</td><td>{{stu.sname}}</td><td>{{stu.sage}}</td><td>{{stu.sgender}}</td><td>{{stu.semail}}</td></tr></table></div><script>const vueApp = Vue.createApp({data:function(){return {stus:""}},created:function(){//发送ajax请求，将得到的数据赋值给stusaxios.get("http://localhost:8888/day10_war_exploded/studentServlet?flag=getAllStudents").then(resp => {this.stus = resp.data;});}});vueApp.mount("#app");</script>
</body>
</html>

2.StudentServlet.java

package com.etime.servlet;import com.etime.entity.Student;
import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;@WebServlet("/studentServlet")
public class StudentServlet extends BaseServlet {protected void getAllStudents(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {List<Student> list = new ArrayList<>();Student student1 = new Student(1,"范冰冰","女",18,"fbb@qq.com");Student student2 = new Student(2,"刘德华","男",18,"ldh@qq.com");Student student3 = new Student(3,"孙红雷","男",18,"shl@qq.com");list.add(student1);list.add(student2);list.add(student3);ObjectMapper mapper = new ObjectMapper();String res = mapper.writeValueAsString(list);PrintWriter out = resp.getWriter();out.print(res);out.close();}
}

3.跨域问题

在这里插入图片描述

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
跨域问题怎么出现的？
- 开发一些前后端分离的项目，比如使用 Servlet + Vue 开发时，后台代码在一台服务器上启动，前台代码在另外一台电脑上启动，此时就会出现问题。
- 比如：
  - 后台地址为http://localhost:8080/
  - 前台地址为 http://127.0.0.1:5500/
  - 此时端口号不一致，不符合同源策略，造成跨域问题。
CorsFilter

package com.etime.filter;import org.apache.commons.lang.StringUtils;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*跨域请求*/
@WebFilter("/*")
public class CorsFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) servletResponse;HttpServletRequest request = (HttpServletRequest) servletRequest;request.setCharacterEncoding("utf-8");// 不使用*，自动适配跨域域名，避免携带Cookie时失效String origin = request.getHeader("Origin");if(StringUtils.isNotBlank(origin)) {response.setHeader("Access-Control-Allow-Origin", origin);}// 自适应所有自定义头String headers = request.getHeader("Access-Control-Request-Headers");if(StringUtils.isNotBlank(headers)) {response.setHeader("Access-Control-Allow-Headers", headers);response.setHeader("Access-Control-Expose-Headers", headers);}// 允许跨域的请求方法类型response.setHeader("Access-Control-Allow-Methods", "*");// 预检命令（OPTIONS）缓存时间，单位：秒response.setHeader("Access-Control-Max-Age", "3600");// 明确许可客户端发送Cookie，不允许删除字段即可response.setHeader("Access-Control-Allow-Credentials", "true");filterChain.doFilter(request, response);}@Overridepublic void destroy() {}
}

综合练习

1.register.html–注册功能

<!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>注册</title><script src="js/vue.global.js"></script><script src="js/axios.min.js"></script>
</head>
<body><div id="app"><form>账号：<input type="text" v-model="username" @blur="checkUsername()"><span style="color:red">{{username_msg}}</span><br>密码：<input type="password" v-model="pwd" @blur="checkPwd()"><span style="color:red">{{pwd_msg}}</span><br><input type="button" value="注册" @click="register()"></form></div><script>const vueApp = Vue.createApp({data:function(){return {username:"",pwd:"",username_msg:"",pwd_msg:"",username_flag:false,pwd_flag:false}},methods:{checkUsername:function(){if (this.username == "") {this.username_msg = "账号不能为空";this.username_flag = false;} else if (this.username.length < 6) {this.username_msg = "账号至少6个字符";this.username_flag = false;} else {//账号是否为已注册账号的判断axios({method:"get",url:"http://localhost:8888/day10_war_exploded/managerServlet?flag=checkUsername&username="+this.username}).then(resp => {if (resp.data) {this.username_msg = "";this.username_flag = true;} else {this.username_msg = "账号已存在";this.username_flag = false;}});}},checkPwd:function(){if (this.pwd == "") {this.pwd_msg = "密码不能为空";this.pwd_flag = false;} else if (this.pwd.length < 8) {this.pwd_msg = "密码至少8个字符";this.pwd_flag = false;} else {this.pwd_msg = "";this.pwd_flag = true;}},register:function(){if (this.username_flag && this.pwd_flag) {//处理需要传递给后端的数据,使用这种方式处理数据时,method值必须是postlet params = new URLSearchParams();params.append("flag","register");params.append("username",this.username);params.append("pwd",this.pwd);//数据全部通过校验axios({method:"post",url:"http://localhost:8888/day10_war_exploded/managerServlet",data:params}).then(resp => {if (resp.data) {alert("注册成功");window.location.href = "login.html";} else {alert("注册失败，请稍后再试");}});} else {alert("请认真填写数据");}}}});vueApp.mount("#app");</script>
</body>
</html>

2.login.html-登录功能

<!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>登录</title><script src="js/vue.global.js"></script><script src="js/axios.min.js"></script>
</head>
<body><div id="app"><form>账号：<input type="text" v-model="username" @blur="checkUsername()"><span style="color:red">{{username_msg}}</span><br>密码：<input type="password" v-model="pwd" @blur="checkPwd()"><span style="color:red">{{pwd_msg}}</span><br><input type="button" value="登录" @click="login()"></form></div><script>const vueApp = Vue.createApp({data(){return {username:"",pwd:"",username_msg:"",pwd_msg:"",username_flag:false,pwd_flag:false}},methods:{checkUsername(){if (this.username == "") {this.username_msg = "账号不能为空";this.username_flag = false;} else if (this.username.length < 6) {this.username_msg = "账号至少6个字符";this.username_flag = false;} else {axios({method:"get",url:"http://localhost:8888/day10_war_exploded/managerServlet?flag=checkUsername&username="+this.username}).then(resp => {if (resp.data) {this.username_msg = "该账号未注册，请先注册";this.username_flag = false;} else {this.username_msg = "";this.username_flag = true;}});}},checkPwd(){if (this.pwd == "") {this.pwd_msg = "密码不能为空";this.pwd_flag = false;} else if (this.pwd.length < 8) {this.pwd_msg = "密码至少8个字符";this.pwd_flag = false;} else {this.pwd_msg = "";this.pwd_flag = true;}},login(){if (this.username_flag && this.pwd_flag) {let params = new URLSearchParams();params.append("flag","login");params.append("username",this.username);params.append("pwd",this.pwd);axios({method:"post",url:"http://localhost:8888/day10_war_exploded/managerServlet",data:params}).then(resp => {if (resp.data) {alert("登录成功");window.location.href = "index.html";} else {alert("密码有误，请查证后再登录");}});} else {alert("请认真填写数据");}}}});vueApp.mount("#app");</script>
</body>
</html>

3.学生信息展示

(1) studentInfo.html

<!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="js/vue.global.js"></script><script src="js/axios.min.js"></script>
</head>
<body><div id="app"><table cellspacing="0" cellpadding="0" border="1" width="500" align="center"><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>邮箱</th><th>头像</th></tr><tr v-for="stu in stus"><td>{{stu.sid}}</td><td>{{stu.sname}}</td><td>{{stu.sage}}</td><td>{{stu.sgender}}</td><td>{{stu.semail}}</td><td><img :src="'http://localhost:8888/sms_pic/student/'+stu.sphoto" width="50"></td></tr></table><div><a href="javascript:void(0)" @click="getStudentByPage(1)">首页</a><a href="javascript:void(0)" @click="getStudentByPage(prevPage)">上一页</a>{{page}}/{{countPages}}<a href="javascript:void(0)" @click="getStudentByPage(nextPage)">下一页</a><a href="javascript:void(0)" @click="getStudentByPage(countPages)">尾页</a></div></div><script>const vueApp = Vue.createApp({data:function(){return {stus:"",page:"",countPages:"",prevPage:"",nextPage:""}},methods:{getStudentByPage(p){let params = new URLSearchParams();params.append("flag","getStudentByPage");params.append("page",p);axios({method:"post",url:"http://localhost:8888/day10_war_exploded/studentServlet",data:params}).then(resp => {this.stus = resp.data.list;this.page = resp.data.page;this.countPages = resp.data.countPages;this.prevPage = resp.data.prevPage;this.nextPage = resp.data.nextPage;});}},created:function(){this.getStudentByPage(1);}});vueApp.mount("#app");</script>
</body>
</html>

(2) PageUtil.java-分页代码

package com.etime.util;import java.util.List;public class PageUtil {private int page;      //当前页页码private int rows;       //每页显示条数private int index;      //偏移量private int countRows;      //总条数private int countPages;     //总页数private int prevPage;       //当前页的上一页页码private int nextPage;       //当前页的下一页页码private List list;  //当前页的数据public PageUtil(String page,int rows,int countRows){init_page(page);this.rows = rows;init_index();this.countRows = countRows;init_countPages();init_prevPage();init_nextPage();}private void init_page(String page){if (page == null || "".equals(page)) {this.page = 1;} else {this.page = Integer.parseInt(page);}}private void init_index(){this.index = (this.page - 1) * this.rows;}private void init_countPages(){int mod = this.countRows % this.rows;if (mod == 0) {this.countPages = this.countRows / this.rows;} else {this.countPages = this.countRows / this.rows + 1;}}private void init_prevPage(){if (this.page == 1) {this.prevPage = 1;} else {this.prevPage = this.page - 1;}}private void init_nextPage(){if (this.page == this.countPages) {this.nextPage = this.countPages;} else {this.nextPage = this.page + 1;}}public int getPage() {return page;}public int getRows() {return rows;}public int getIndex() {return index;}public int getCountRows() {return countRows;}public int getCountPages() {return countPages;}public int getPrevPage() {return prevPage;}public int getNextPage() {return nextPage;}public List getList() {return list;}public void setList(List list) {this.list = list;}
}

(3)StudentServlet.java

    protected void getStudentByPage(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//分页数据查询String page = req.getParameter("page");int rows = 10;int countRows = studentService.getCountRows();PageUtil pageUtil = new PageUtil(page, rows, countRows);List<Student> list = studentService.getStudentByPage(pageUtil);pageUtil.setList(list);ObjectMapper mapper = new ObjectMapper();String res = mapper.writeValueAsString(pageUtil);PrintWriter out = resp.getWriter();out.print(res);out.close();}

(3)StudentServlet.java

    protected void getStudentByPage(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//分页数据查询String page = req.getParameter("page");int rows = 10;int countRows = studentService.getCountRows();PageUtil pageUtil = new PageUtil(page, rows, countRows);List<Student> list = studentService.getStudentByPage(pageUtil);pageUtil.setList(list);ObjectMapper mapper = new ObjectMapper();String res = mapper.writeValueAsString(pageUtil);PrintWriter out = resp.getWriter();out.print(res);out.close();}

Vue的Ajax请求-axios、前后端分离练习

Vue的Ajax请求 axios简介 Axios，是Web数据交互方式，是一个基于promise [5]的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在…...

编程日记 2023/8/23 9:35:27

Spring源码深度解析三 (MVC)

书接上回 10.MVC 流程&源码剖析 * 问题1：Spring和SpringMVC整合使用时，会创建一个容器还是两个容器（父子容器？） * 问题2：DispatcherServlet初始化过程中做了什么？ * 问题3：请求…...

编程日记 2023/8/23 9:34:26

API接口漏洞利用及防御

API是不同软件系统之间进行数据交互和通信的一种方式。API接口漏洞指的是在API的设计、开发或实现过程中存在的安全漏洞，可能导致恶意攻击者利用这些漏洞来获取未授权的访问、篡改数据、拒绝服务等恶意行为。 1.API接口漏洞简介 API（Application Progr…...

编程日记 2023/8/23 9:33:23

解决Spring mvc + JDK17@Resource无法使用的情况

问题描述我在使用jdk17进行Spring mvc开发时发现 Resource用不了了。原因因为JDK版本升级的改动，在Jdk9~17环境下，搭建Springboot项目，会出现原有Resource（javax.annotation.Resource）不存在的问题，导…...

编程日记 2023/8/23 9:32:20

页面禁用鼠标右键，禁用F12打开开发者工具！！！

文章目录问题分析方法一方法二方法二问题今天在浏览博主文章时发现无法复制页面上的内容，也无法F12打开开发者工具，更用不了鼠标右键，于是上网找了原因并亲测可用分析方法一将 <body> 改成 <body oncontextmenu=self.event.returnValue=false>方法二 …...

编程日记 2023/8/23 9:31:18

Android中使用JT808协议进行车载终端通信的实现和优化

JT808是一种在中国广泛应用的车载终端通信协议，用于车辆与监控中心之间的数据通信。下面是关于Android平台上使用JT808协议进行通信的一般步骤和注意事项： 协议了解：首先，您需要详细了解JT808协议的规范和定义。该协议包含了通信消…...

编程日记 2023/8/23 9:30:17

导出pdf

该方法导出的pdf大小是A4纸的尺寸，如果大于1页需要根据元素高度进行截断的话，页面元素需要加 class ergodic-dom，方法里面会获取ergodic-dom元素，对元素高度和A4高度做比较，如果大于A4高度，会塞一个空白元素…...

编程日记 2023/8/23 9:29:16

【考研数学】线形代数第三章——向量 | 基本概念、向量组的相关性与线性表示

文章目录引言一、向量的概念与运算1.1 基本概念1.2 向量运算的性质二、向量组的相关性与线性表示2.1 理论背景2.2 相关性与线性表示基本概念2.3 向量组相关性与线性表示的性质引言向量是线性代数的重点和难点。向量是矩阵，同时矩阵又是由向量构成的&#xff0c…...

编程日记 2023/8/23 9:28:15

温故知新之：接口和抽象类有什么区别？

本文以下内容基于 JDK 8 版本。 1、接口介绍接口是 Java 语言中的一个抽象类型，用于定义对象的公共行为。它的创建关键字是 interface，在接口的实现中可以定义方法和常量，其普通方法是不能有具体的代码实现的，而在 JDK 8 之后&…...

编程日记 2023/8/23 9:27:13

回归预测 | MATLAB实现SSA-RF麻雀搜索优化算法优化随机森林算法多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现SSA-RF麻雀搜索优化算法优化随机森林算法多输入单输出回归预测（多指标，多图） 目录回归预测 | MATLAB实现SSA-RF麻雀搜索优化算法优化随机森林算法多输入单输出回归预测（多指标，多图）…...

编程日记 2023/8/23 9:26:11

文旅景区vr体验馆游乐场vr项目是什么

我们知道现在很多的景区或者游玩的地方，以及学校、科技馆、科普馆、商场或公园或街镇，都会建一些关于游玩以及科普学习的项目。从而增加学习氛围或者带动人流量等等。这样的形式，还是有很好的效果呈现。普乐蛙VR体验馆案例下面是普乐蛙做的…...

编程日记 2023/8/23 9:25:10

Vue Element upload组件和Iview upload 组件上传文件

今天要分享的是使用这俩个UI组件库的upload组件分别实现调用组件本身的上传方法实现和后台交互。接下来就是开车的时间，请坐稳扶好~ 一、element upload组件传送门 1、html文件 <el-upload ref"uploadRef" :action"uploadUrl" :data"…...

编程日记 2023/8/23 9:24:10

无涯教程-PHP - File 函数

文件系统功能用于访问和操纵文件系统，PHP为您提供了操纵文件的所有功能。运行时配置这些功能的行为受php.ini中的设置影响。 NameDefaultChangeableChangelogallow_url_fopen"1"PHP_INI_ALLPHP_INI_ALL in PHP < 4.3.4. PHP_INI_SYSTEM in PHP &l…...

编程日记 2023/8/23 9:23:08

elasticsearch 常用查询 7.4 版本

Elasticsearch 常用查询 match：全文查询exists：查询存在的字段must_not：查询不存在的字段ids：跟据id查询prefix：前缀查询range: 查询范围term：精准查询terms：多术语查询本文基于es 7.4版本文档…...

编程日记 2023/8/23 9:22:08

ChatGpt 从入门到精通

相关资源下载地址: 基于ChatGPT的国际中文语法教学辅助应用的探讨.pdf 生成式人工智能技术对教育领域的影响-关于ChatGPT的专访.pdf 电子-从ChatGPT热议看大模型潜力.pdf 从图灵测试到ChatGPT——人机对话的里程碑及启示.pdf 正文 ChatGPT 是一种强大的自然语言处理模型&…...

编程日记 2023/8/23 9:21:06

vscode远程调试

安装ssh 在vscode扩展插件搜索remote-ssh安装如果连接失败，出现 Resolver error: Error: XHR failedscode 报错，可以看这篇帖子vscode ssh: Resolver error: Error: XHR failedscode错误_阿伟跑呀的博客-CSDN博客添加好后点击左上角的加号&#xff0…...

编程日记 2023/8/23 9:20:05

Vue3 数据响应式原理

核心： 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等… 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作 const userData {name: "John",age: 12 };let proxyUser new Proxy(use…...

编程日记 2023/8/23 9:19:04

2023.08.20 学习周报

文章目录摘要文献阅读1.题目2.现有问题3.解决方案4.本文贡献5.方法5.1 利用长短期记忆网络学习时空演化特征5.2 构建用于气象辅助信息编码的堆叠自编码器5.3 使用多任务学习发现全市通用模式5.4 模型 6. 实验6.1 数据集6.2 实验设置6.3 实验结果 7.结论8.展望大气污染物传输总…...

编程日记 2023/8/23 9:18:03

软件测试技术之单元测试—工程师 Style 的测试方法（2）

怎么写单元测试？ JUnit 简介基本上每种语言和框架都有不错的单元测试框架和工具，例如 Java 的 JUnit、Scala 的 ScalaTest、Python的 unittest、JavaScript 的 Jest 等。上面的例子都是基于 JUnit 的，我们下面就简单介绍下 JUnit。 JUnit…...

编程日记 2023/8/23 9:17:01

项目中超图 for openlayer和超图for cesium同时引入的问题

一个项目中同时用到了超图的openlayer和cesium版本，首先我是外部引入的超图的开发包，你要是通过npm导入的那就没关系了。 <script type"text/javascript" src"/static/openlayer/supermap/ol/iclient-ol.min.js"></script&…...

编程日记 2023/8/23 9:16:00

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环境变量会⾃动传递给⼦进程。本地变量限制：本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/12/8 23:38:10

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/11/18 8:33:43

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败网络不同，需要使用镜像源按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/12/12 4:15:39

Linux离线（zip方式）安装docker

目录基础信息操作系统信息docker信息安装实例安装步骤示例遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组基础信息操作系统信息 OS版本：CentOS 7 64位内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

Unity UGUI Button事件流程

场景结构测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/12/6 1:18:17

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/11/3 16:36:06

Vue的Ajax请求

axios简介

axios的使用方式

1、使用npm安装

2、使用cdn链接axios

axios的语法

axios案例

1、数据准备

2、初使用问题

3、axios 发送get请求

4、axios 发送post请求

5、补充

请求后台数据

1.index.html

2.StudentServlet.java

3.跨域问题

综合练习

1.register.html–注册功能

2.login.html-登录功能

3.学生信息展示

(1) studentInfo.html

(2) PageUtil.java-分页代码

(3)StudentServlet.java

(3)StudentServlet.java

相关文章：