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…...
【Redis从头学-8】Redis中的ZSet数据类型实战场景之用户积分榜
🧑💻作者名称：DaenCode 🎤作者简介：啥技术都喜欢捣鼓捣鼓，喜欢分享技术、经验、生活。 😎人生感悟：尝尽人生百味，方知世间冷暖。 📖所属专栏：Re…...
Springboot内嵌SQLite配置使用
版本号 MacOS Apple M1 | Jdk17 | Maven 3.8.5 | SpringBoot 2.6.9 | SQLite 3.42.0.0 pom.xml <dependencies><dependency><groupId>org.xerial</groupId><artifactId>sqlite-jdbc</artifactId><version>3.42.0.0</version&g…...
【微服务学习笔记】认识微服务
【微服务学习笔记】认识微服务 单体架构 分布式架构 微服务架构 SpringCloud 服务拆分和注意事项 服务拆分的案例demo 各个服务之间的数据库都是相互独立的，你不能直接访问对方的数据库，只能从一个服务像另外一个服务发起远程调用 在订单模块的服务中 …...
基于Android R快速编译recovery-ramdisk.img
Android默认没有单编recovery-ramdisk.img的命令，我们可以自己修改Makefile实现 修改：build/core/Makefile 添加： .PHONY: recovery-ramdisk-nodeps recovery-ramdisk-nodeps: $(MKBOOTFS) | $(COMPRESSION_COMMAND_DEPS)echo "make …...
Redis分布式缓存
分布式缓存 -- 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题： 1.Redis持久化 Redis有两种持久化方案： RDB持久化 AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file（Redis数据备份文件）&#x…...
最大公约数和最小公倍数
最大公约数： 概念： 公约数中最大的称为最大公约数。 对任意的若干个正整数，1总是它们的公因数。 公约数与公倍数相反，就是既是A的约数同时也是B的约数的数，12和15的公约数有1，3，最大公约数就是…...
数据结构——二叉搜索树(附带C++实现版本）
文章目录 二叉搜索树概念 二叉树的实际应用二叉树模拟实现存储结构二叉搜索树构成二叉搜索树的查找插入操作中序遍历二叉树的删除循环(利用左子树最右节点）递归(利用右子树根节点) 二叉树拷贝二叉树资源的销毁 二叉树实现完整代码总结 二叉搜索树 概念 二叉搜索树…...
C++（3）C++对C的扩展Extension
类型增强 1、类型更加严格 不初始化，无法通过编译；C不初始化，则随机赋值 #include <iostream> #include <stdlib.h>int main() {const int a 100; //真正的const,无法修改 // int *p &a; 报错const int *p…...
在vscode(idea)使用GitHub账号、Copilot异常
在idea使用GitHub账号、Copilot异常 登录GitHub显示 Invalid authentication data.Connection refused: connect或者副驾驶显示 Failed to initiate the GitHub login process. Please try again.一般网上的方法推荐使用token登录，或者降级副驾驶 经过研究&#x…...
新的后端渲染：服务器驱动UI
通过API发送UI是一种彻底的新方法，将改变传统的UI开发。 一项正在改变我们对用户界面 (UI) 的看法的技术是通过 API 发送 UI，也称为服务器驱动UI。这种方法提供了新水平的活力和灵活性，正在改变 UI 开发的传统范例。 服务器驱动 UI 不仅仅是…...
Postman如何做接口自动化测试？
前言 什么是自动化测试 把人对软件的测试行为转化为由机器执行测试行为的一种实践。 例如GUI自动化测试，模拟人去操作软件界面，把人从简单重复的劳动中解放出来。 本质是用代码去测试另一段代码，属于一种软件开发工作，已经开发完…...
excel文本函数篇2
本期主要介绍LEN、FIND、SEARCH以及后面加B的情况： （1）后缀没有B：一个字节代表一个中文字符 （2）后缀有B：两个字节代表一个中文字符 1、LEN(text)：返回文本字符串中的字符个数 2、…...
【MyBatis】动态SQL ＞ 重点：${...}和#{...}与resultMap和resultType的区别
目录 一、MyBatis动态sql 1.1 动态sql的作用 1.2 动态sql作用论证 1.2.1 条件判断：<if> 1.2.2 循环迭代：<foreach> 1.2.3 SQL片段重用 1.2.4 动态条件组合：<choose><when><otherwise> 1.2.5 <where…...
什么是BEM命名规范？为什么要使用BEM命名规范？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ BEM命名规范⭐ 为什么使用BEM命名规范？⭐ 写在最后 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅！这个专栏是为…...
JavaScript：交集和差集的应用场景
在集合A和集合B中，属于集合A，同时也属于集合B的元素组成的集合，就是交集。 在A中所有不属于集合B元素，组合成集合，就是差集。 那么在平时的开发中，如何使用差集和交集来解决问题呢？ 现在有这…...
达梦数据库表空间创建和管理
概述 本文将介绍在达梦数据库如何创建和管理表空间。 1.创建表空间 1.1表空间个数限制 理论上最多允许有65535个表空间，但用户允许创建的表空间 ID 取值范围为0~32767， 超过 32767 的只允许系统使用，ID 由系统自动分配，ID不能…...
三、MySQL 数据库安装集
一、CentOS—YUM 1. MySQL—卸载 # 1、查看存在的MySQL。 rpm -qa | grep -i mysql rpm -qa | grep mysql# 2、删除存在的MySQL。 rpm -e –-nodeps 包名# 3、查找存在的MySQL目录。 find / -name mysql# 4、删除存在的MySQL目录。 rm -rf 目录# 5、删除存在的MySQL配置文件。…...
【BASH】回顾与知识点梳理（三十九）
【BASH】回顾与知识点梳理 三十九 三十九. make、tarball、函数库及软件校验39.1 用 make 进行宏编译为什么要用 makemakefile 的基本语法与变量 39.2 Tarball 的管理与建议使用原始码管理软件所需要的基础软件Tarball 安装的基本步骤一般 Tarball 软件安装的建议事项 (如何移除…...
蓝蓝设计-UI设计公司案例-HMI列车监控系统界面设计解决方案
2013年，为加拿大庞巴迪(Bombardier)设计列车监控系统界面设计。 2015-至今，为中车集团旗下若干公司提供HMI列车监控系统界面设计,综合考虑中车特点、城轨车、动车组的不同需求以及HMI硬键屏和触摸 屏的不同操作方式，重构框架设计、交互设计、…...
Blazor前后端框架Known-V1.2.13
V1.2.13 Known是基于C#和Blazor开发的前后端分离快速开发框架，开箱即用，跨平台，一处代码，多处运行。 Gitee： https://gitee.com/known/KnownGithub：https://github.com/known/Known 概述 基于C#和Blazo…...