Vue的Ajax请求-axios、前后端分离练习
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模块, 而在…...
Spring源码深度解析三 (MVC)
书接上回 10.MVC 流程&源码剖析 * 问题1：Spring和SpringMVC整合使用时，会创建一个容器还是两个容器（父子容器？） * 问题2：DispatcherServlet初始化过程中做了什么？ * 问题3：请求…...
API接口漏洞利用及防御
API是不同软件系统之间进行数据交互和通信的一种方式。API接口漏洞指的是在API的设计、开发或实现过程中存在的安全漏洞，可能导致恶意攻击者利用这些漏洞来获取未授权的访问、篡改数据、拒绝服务等恶意行为。 1.API接口漏洞简介 API（Application Progr…...
解决Spring mvc + JDK17@Resource无法使用的情况
问题描述 我在使用jdk17进行Spring mvc开发时发现 Resource用不了了。 原因 因为JDK版本升级的改动，在Jdk9~17环境下，搭建Springboot项目，会出现原有Resource（javax.annotation.Resource）不存在的问题，导…...
页面禁用鼠标右键，禁用F12打开开发者工具！！！
文章目录 问题分析方法一方法二方法二问题 今天在浏览博主文章时发现无法复制页面上的内容，也无法F12打开开发者工具，更用不了鼠标右键，于是上网找了原因并亲测可用 分析 方法一 将 <body> 改成 <body oncontextmenu=self.event.returnValue=false>方法二 …...
Android中使用JT808协议进行车载终端通信的实现和优化
JT808是一种在中国广泛应用的车载终端通信协议，用于车辆与监控中心之间的数据通信。下面是关于Android平台上使用JT808协议进行通信的一般步骤和注意事项： 协议了解：首先，您需要详细了解JT808协议的规范和定义。该协议包含了通信消…...
导出pdf
该方法导出的pdf大小是A4纸的尺寸，如果大于1页需要根据元素高度进行截断的话，页面元素需要加 class ergodic-dom，方法里面会获取ergodic-dom元素，对元素高度和A4高度做比较，如果大于A4高度，会塞一个空白元素…...
【考研数学】线形代数第三章——向量 | 基本概念、向量组的相关性与线性表示
文章目录 引言一、向量的概念与运算1.1 基本概念1.2 向量运算的性质 二、向量组的相关性与线性表示2.1 理论背景2.2 相关性与线性表示基本概念2.3 向量组相关性与线性表示的性质 引言 向量是线性代数的重点和难点。向量是矩阵，同时矩阵又是由向量构成的，…...
温故知新之：接口和抽象类有什么区别？
本文以下内容基于 JDK 8 版本。 1、接口介绍 接口是 Java 语言中的一个抽象类型，用于定义对象的公共行为。它的创建关键字是 interface，在接口的实现中可以定义方法和常量，其普通方法是不能有具体的代码实现的，而在 JDK 8 之后&…...
回归预测 | MATLAB实现SSA-RF麻雀搜索优化算法优化随机森林算法多输入单输出回归预测（多指标，多图）
回归预测 | MATLAB实现SSA-RF麻雀搜索优化算法优化随机森林算法多输入单输出回归预测（多指标，多图） 目录 回归预测 | MATLAB实现SSA-RF麻雀搜索优化算法优化随机森林算法多输入单输出回归预测（多指标，多图）…...
文旅景区vr体验馆游乐场vr项目是什么
我们知道现在很多的景区或者游玩的地方，以及学校、科技馆、科普馆、商场或公园或街镇，都会建一些关于游玩以及科普学习的项目。从而增加学习氛围或者带动人流量等等。这样的形式，还是有很好的效果呈现。 普乐蛙VR体验馆案例 下面是普乐蛙做的…...
Vue Element upload组件和Iview upload 组件上传文件
今天要分享的是使用这俩个UI组件库的upload组件分别实现调用组件本身的上传方法实现和后台交互。接下来就是开车的时间，请坐稳扶好~ 一、element upload组件传送门 1、html文件 <el-upload ref"uploadRef" :action"uploadUrl" :data"…...
无涯教程-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…...
elasticsearch 常用查询 7.4 版本
Elasticsearch 常用查询 match：全文查询exists：查询存在的字段must_not：查询不存在的字段ids：跟据id查询prefix：前缀查询range: 查询范围term：精准查询terms：多术语查询 本文基于es 7.4版本文档…...
ChatGpt 从入门到精通
相关资源下载地址: 基于ChatGPT的国际中文语法教学辅助应用的探讨.pdf 生成式人工智能技术对教育领域的影响-关于ChatGPT的专访.pdf 电子-从ChatGPT热议看大模型潜力.pdf 从图灵测试到ChatGPT——人机对话的里程碑及启示.pdf 正文 ChatGPT 是一种强大的自然语言处理模型&…...
vscode远程调试
安装ssh 在vscode扩展插件搜索remote-ssh安装 如果连接失败，出现 Resolver error: Error: XHR failedscode 报错，可以看这篇帖子vscode ssh: Resolver error: Error: XHR failedscode错误_阿伟跑呀的博客-CSDN博客 添加好后点击左上角的加号࿰…...
Vue3 数据响应式原理
核心： 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等… 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作 const userData {name: "John",age: 12 };let proxyUser new Proxy(use…...
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.展望 大气污染物传输总…...
软件测试技术之单元测试—工程师 Style 的测试方法（2）
怎么写单元测试？ JUnit 简介 基本上每种语言和框架都有不错的单元测试框架和工具，例如 Java 的 JUnit、Scala 的 ScalaTest、Python的 unittest、JavaScript 的 Jest 等。上面的例子都是基于 JUnit 的，我们下面就简单介绍下 JUnit。 JUnit…...
项目中超图 for openlayer和超图for cesium同时引入的问题
一个项目中同时用到了超图的openlayer和cesium版本，首先我是外部引入的超图的开发包，你要是通过npm导入的那就没关系了。 <script type"text/javascript" src"/static/openlayer/supermap/ol/iclient-ol.min.js"></script&…...
3D与沉浸式技术，如何助力企业数字化转型？
说起3D，估计许多读者朋友会在第一时间想起《阿凡达》系列和《侏罗纪公园》系列电影大作。每一帧细节纤毫毕现的逼真画面，让观众几乎分不清虚拟与现实，完全沉浸在导演打造的视觉盛宴中。 事实上，除了大家所熟知的3D影视动画之外&am…...
excel vba 将多张数据表的内容合并到一张数据表
功能描述： 一个Excel文件有很多个 样式相同 的数据表， 需要将多张数据表的内容合并到一张数据表里。 vba实现代码如下： Attribute VB_Name "NewMacros" Option Explicit Public Const Const_OutSheetName As String "V…...
接口和抽象类的区别？解析接口和抽象类的特点和用法
接口和抽象类的区别？解析接口和抽象类的特点和用法 引言 在面向对象编程中，接口和抽象类是两个非常重要的概念。它们都可以用于定义一组相关的方法，但在实际使用中有一些差异。本文将探讨接口和抽象类的区别，并通过示例代码和测…...
vscode-vue项目格式化
一、插件要求 Prettier Vetur 二、配置文件 {"workbench.startupEditor": "newUntitledFile","files.autoSave": "off", // 关闭文件自动保存，避免开发时候页面变化"editor.tabSize": 2, // tab距离"ve…...
SAP MM学习笔记26- SAP中 振替转记（转移过账）和 在库转送（库存转储）1- 移动Type间振替转记
SAP 中在库移动 不仅有入库（GR），出库（GI），也可以是单纯内部的转记或转送。 1，振替转记（转移过账） 2，在库转送（库存转储） 1ÿ…...
SAP SPL(Special Ledger)之注释行项目-Noted Items
财务凭证过账里常见的SPL特殊总账标识根据业务主要有三种，BoE-billing of exchange: 汇票业务，包括商业汇票和银行汇票；Down Payment，预付款业务，包括供应商和客户预付款和申请；其它，一般是保证…...
学习平台助力职场发展与提升
近年来，随着互联网技术的发展，学习平台逐渐成为了职场发展和提升的必备工具。学习平台通过提供丰富的课程内容、灵活的学习时间和个性化的学习路径，帮助职场人士更好地提升自己的技能和知识储备，为职场发展打下坚实的基础。 学习…...
有没有免费格式转换工具推荐？PDF转化为PPT的方法
在当今职场生活中，掌握文件格式转换技能变得异常重要。将PDF文档转换为PPT格式可以在演讲、报告等场合更好地展示和传达信息，为我们的专业形象增添亮点，接下来我们可以一起来看一下“有没有免费格式转换工具推荐?PDF转化为PPT的方法”相关的…...
【LeetCode-经典面试150题-day12】
20.有效的括号 题意： 给定一个只包括 (，)，{，}，[，] 的字符串 s ，判断字符串是否有效。 有效字符串需满足： 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括…...
TCP机制-延迟应答，捎带应答
在看本篇博客前推荐先看TCP中窗口和滑动窗口的含义以及流量控制 延迟应答和捎带应答都是TCP用于提高网络传输效率的机制 延迟应答 当发送端发送数据给接收端了以后，按道理接收端的内核会立即返回ACK（应答报文）给发送端，而且ACK&a…...