Java Web 3 Axios Vue组件库
一 Ajax
1 同步 异步
2 原生Ajax 比较繁琐
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="获取数据" onclick="getData()"><div id="div"></div>
</body><script>function getData(){var xmlHttpRequest=new XMLHttpRequest();xmlHttpRequest.open('GET','https://api.github.com/');xmlHttpRequest.send();xmlHttpRequest.onreadystatechange=function(){if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){document.getElementById('div').innerHTML=xmlHttpRequest.responseText;}}}
</script>
</html>
3 Axios 推荐使用
②、Axios请求方式别名
个人理解：Axios
Axios是用于浏览器和Node.js环境的基于Promise的HTTP客户端。主要用于发送HTTP请求并与后端交互数据，像发送GET、POST等各类请求获取或提交信息。其特性优势明显，支持Promise API让异步代码更简洁易读，跨浏览器兼容性好，可配置性强，能设置超时、请求头、响应格式等。与原生的XMLHttpRequest相比，Axios使用更便捷，功能也更丰富，例如有请求和响应拦截器，还可自动转换数据格式。
二 前后端分离开发
1 前后端开发模式
（1）前后端混合开发
（2）主流：前后端分离开发
前后端分离，根据接口文档共同开发：
如何维护接口文档：在线（团队协作工具）/离线
而接口文档是由产品经理根据页面原型与需求文档分析得来的：
（3）前后端分离开发流程：
2 YAPI 接口文档地管理平台
（1) 什么是YAPI
Mock服务指的是：通过YAPI这个平台可以模拟真实接口，生成接口的模拟测试数据，用于前端功能测试（即不用等后端开发完毕，前端就可以通过Mock服务进行功能测试）
（2）如何使用YAPI
分为三步：
添加项目
添加分类
添加接口
三 前端工程化
模块化、组件化、规范化、自动化
主要包括三个方面：
环境准备
Vue项目简介
Vue项目开发流程
该过程我已经整理在另一篇博客里 读者可自行阅读：
Vue3安装 运行教程-CSDN博客
四 Vue组件库Element
1 什么是Element
为什么要学Element？ 方便 优美
2 Element快速入门
（1）安装ElementUI组件库
npm install element-ui@2.15.3会被安装在node_modules目录下
（2）引入 ElementUI组件库
打开main.js
（3）定义Vue组件
views目录下新建目录：
默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入
效果展示：
3 常见组件
（1）表格
使用步骤
Ⅰ、从官网复制代码到 ElementView.vue ：
运行展示：
（2）分页组件
步骤同①，也是先从官方文档寻找自己想要的样式，进行复制粘贴：
layout属性
事件 size-change currrent-change
效果展示
（3）对话框组件
相同套路：复制官方文档代码
数据模型：
效果展示：
控制对话框的显示与隐藏：visible.sync="dialogTableVisible"
（4）表单组件
修改复制到的官方文档代码
效果展示
补充表单内容
数据模型
方法：
通过JSON.stringfy()将对象转为字符串
效果展示：
五 Vue路由
1 前端路由
URL中的hash指的是#号后面的部分，如下图hash为/dept：
2 Vue Router
（1）安装vue-router
(2) 定义路由配置信息 index.js
如果你要访问的是/emp路径，那么你要导入的就是EmpView.vue组件，/dept同理：
六 打包部署
1 如何打包
2 如何部署 Nginx
（1) 将dist目录下的文件复制到nginx安装目录
（2）启动nginx.exe
查错过程
Ⅰ、查看 80 端口的占用情况：
Ⅱ、检查任务管理器
Ⅲ、更换 nginx 的端口号
config目录 -> nginx.conf：
找到默认端口，将其改为90： 
Ⅳ、访问项目
（3）扩展：反向代理 负载均衡
反向代理可参考： 实现nginx反向代理（附nginx教程）
负载均衡可参考： Nginx如何优雅的实现负载均衡
相关文章：
Java Web 3 Axios Vue组件库
一 Ajax 1 同步 异步 2 原生Ajax 比较繁琐 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Documen…...
探索未来驾驶：全面解析现代汽车高级辅助驾驶系统功能（APA 、SDA 、TBA、RPA、HPA、PEB）
随着科技的不断进步，汽车行业正在经历一场革命，自动驾驶技术逐渐成为现实。从自适应巡航控制到完全自动驾驶，各种高级驾驶辅助系统（ADAS）正在改变我们的驾驶方式。今天，我们将深入探讨几种关键的高级驾驶辅…...
MYSQL - 索引详解
一 什么是索引？ 实际上在上一篇介绍MYSQL的体系结构当中我们稍微提及了一点，在引擎层，我们提到不同的引擎对应的索引的实现方式，选择是不一样的。 简单理解，索引（index）其实就是一种帮助MYSQL高…...
AI智能体Prompt预设词指令大全+GPTs应用使用
AI智能体使用指南 直接复制在AI工具助手中使用（提问前） 可前往SparkAi系统用户官网进行直接使用 SparkAI系统介绍文档：Docs 常见AI智能体GPTs应用大全在线使用 自定义添加制作AI智能体进行使用： 文章润色器 你是一位具有敏锐洞察…...
美团一面，有点难度
前几天分享过一篇训练营的朋友在阿里的一面面经，挺简单的她也是很轻松的过了，感兴趣的可以看一下我之前发的文章。 今天要分享的还是她的面经，美团的一面，感觉比阿里的难一些，各位观众老爷你怎么看？ 自我介…...
axios取消请求
Axios 使用 cancel token 取消请求 1、先在axios请求中加上cancelToken import request from ../utils/request // 配置过的Axios 对象 import axios from axios export function getDetail(params, that) { return request({url: /api/indexlineage/detail, method: get,par…...
Spark简介
Spark简介 菜鸟弹性分布式数据集 (RDDs)参考 Spark通过两种方式使用Hadoop：一种是存储，另一种是处理。由于Spark具有自己的集群管理计算，因此仅将Hadoop用于存储目的。 Spark 的关键思想是- [Resilient Distributed Datasets（RDD…...
visual studio2017版本的安装下载
绝绝子，官网找了半天都不知道在哪里下载的，和当初下载旧版本的qt一样难受，还是用百度云吧！！！！！！！！！！ 参考文章࿱…...
【Linux】ubuntu下一键配置vim
🔥个人主页🔥：孤寂大仙V 🌈收录专栏🌈：Linux 🌹往期回顾🌹：Linux权限（超详细彻底搞懂Linux的权限） 🔖流水不争，争的是滔滔…...
[光源控制] UI调节光源亮度参数失效
📢博客主页：https://loewen.blog.csdn.net📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！📢本文由 丶布布原创，首发于 CSDN，转载注明出处🙉📢现在的付出，都会是一种沉淀，只为让你成为更好的人✨文章预览： 一. 前言二. 串口调试助手辅助排查接线问题二. …...
C语言学习：速通指针（2）
这里要学习的有以下内容 1. const修饰指针 2. 野指针 3. assert断⾔ 4. 指针的使⽤和传址调⽤ 那么从这里开始 1. const 修饰指针 const修饰变量 首先我们知道变量是可以修改的，如果把变量的地址交给⼀个指针变量，通过指针变量的也可以修改这个变…...
方案拆解 | 打击矩阵新规频出！2025矩阵营销该怎么玩？
社媒平台的矩阵营销又要“变天”了？！ 11月18日，小红书官方发表了被安全薯 称为“小红书史上最严打击黑灰产专项”新规，其中就包括黑灰产矩阵号的公告。 ▲ 图源：小红书 实际上，不包括这次，今年…...
Ubuntu22.04深度学习环境安装【cuda+cudnn】
为了复现一篇深度学习论文，特意安装了Linux系统。前一天已经安装Linux显卡驱动，现在需要安装cuda、cudnn等。 论文代码 论文PDF 确定包版本： 根据论文提供的代码。在requirements.txt中发现cuda版本为11.7,cudnn为8.5.0，python没…...
etcd分布式存储系统快速入门指南
在分布式系统的复杂世界中，确保有效的数据管理至关重要。分布式可靠的键值存储在维护跨分布式环境的数据一致性和可伸缩性方面起着关键作用。 在这个全面的教程中，我们将深入研究etcd，这是一个开源的分布式键值存储。我们将探索其基本概念、特…...
dataTable
在 C# 中，DataTable 是 .NET Framework 中用于处理数据表格的一个类，属于 System.Data 命名空间。它是一种内存中表示数据表的结构，通常用于临时存储和操作数据，类似于数据库中的表。DataTable 的主要特点是行列结构，其…...
Flink学习连载文章11--双流Join
双流 Join 和两个流合并是不一样的 两个流合并：两个流变为 1 个流 union connect 双流 join: 两个流 join，其实这两个流还是原来的，只是满足条件的数据会变为一个新的流。 可以结合 sql 语句中的 union 和 join 的区别。 在离线 Hive 中&…...
RayLink远程控制技术助力教育领域的创新应用研究
远程控制技术在教育领域的应用确实改变了传统教学模式。想象一下，无论身处何地，只要有网络连接，就能通过远程软件加入课堂，这种体验是不是很吸引人？虽然远程控制听起来很技术化，但别担心，小编今…...
【Qt移植LVGL】QWidget手搓LVGL软件仿真模拟器（非直接运行图形库）
【Qt移植LVGL】QWidget手搓LVGL软件仿真模拟器（非直接运行图形库） 打包开源地址： Qt函数库gitee地址 更新以gitee为准 移植后的demo工程： gitee 有些没实现的 后续我会继续优化 文章目录 别碰瓷看清楚：是移植&#…...
PostgreSQL UNION 操作符
PostgreSQL UNION 操作符 引言 PostgreSQL 是一种功能强大的开源对象关系型数据库管理系统，它以其稳定性、可靠性和先进的特性而闻名。在处理数据库查询时，我们经常需要合并来自不同表的数据，或者合并同一表的不同查询结果。这时，UNION 操作符就变得非常有用。本文将详细…...
spring boot 测试 mybatis mapper类
spring boot 测试 mybatis mapper类 针对 mybatis plus不启动 webserver指定加载 xml 【过滤 “classpath*:/mapper/**/*.xml” 下的xml】, mapper xml文件名和mapper java文件名称要一样，是根据文件名称过滤的。默认情况加载和解析所有mapper.xml 自定义 MapperT…...
Python发kafka消息
要在Python中向Kafka发送消息，你可以使用kafka-python库。首先，你需要安装这个库。如果你还没有安装它，可以通过pip来安装： bash pip install kafka-python 接下来是一个简单的例子，展示如何创建一个生产者࿰…...
zipkin 引申一：如何遍历jar目录下的exec.jar并选择对应序号的jar启动
文章目录 一、Zipin概述二、如何下载三、需求描述四、代码实现1. pom设置2. 相关工具类3. 核心代码 五、打包部署1. 打包，在项目目录执行mvn clean package2. 部署3. 运行以及停止 六、源码放送 一、Zipin概述 Zipkin是Twitter开源的分布式跟踪系统，基于…...
使用 httputils + protostuff 实现高性能 rpc
1、先讲讲 protobuf protobuf 一直是高性能序列化的代表之一（google 出品）。但是用起来，可难受了，你得先申明 “.proto” 配置文件，并且要把这个配置文件编译转成类。所以必然要学习新语法、新工具。 可能真的太难受…...
Facebook广告文案流量秘诀
Facebook 广告文案是制作有效 Facebook 广告的关键方面。它侧重于伴随广告视觉元素的文本内容。今天我们的博客将深入探讨成功的 Facebook 广告文案的秘密！ 一、广告文案怎么写？ 正文：这是帖子的正文，出现在您姓名的正下方。它可…...
在Vue.js中生成二维码（将指定的url+参数 生成二维码）
在Vue.js中生成二维码，你可以使用JavaScript库如qrcode或qr.js。以下是一个简单的例子，展示如何在Vue组件中使用qrcode库将指定的URL加上参数生成二维码。 首先，你需要安装qrcode库。如果你使用的是npm或yarn，可以通过命令行安装…...
Face2QR:可根据人脸图像生成二维码，还可以扫描，以后个人名片就这样用了！
今天给大家介绍的是一种专为生成个性化二维码而设计的新方法Face2QR，可以将美观、人脸识别和可扫描性完美地融合在一起。 下图展示为Face2QR 生成的面部图像（第一行）和二维码图像（第二行）。生成的二维码不仅忠实地保留…...
【Linux网络编程】第六弹---构建TCP服务器：从基础到线程池版本的实现与测试详解
✨个人主页： 熬夜学编程的小林 💗系列专栏： 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【Linux网络编程】 目录 1、TcpServerMain.cc 2、TcpServer.hpp 2.1、TcpServer类基本结构 2.2、构造析构函数 2.3、InitServer(…...
XML 语言随笔
XML的含义 XML（eXtensible Markup Language，可扩展标记语言）是一种用于存储和传输数据的标记语言。XML与HTML（HyperText Markup Language，超文本标记语言）类似，但XML的设计目的是描述数据&…...
flex: 1 display:flex 导致的宽度失效问题
flex: 1 & display:flex 导致的宽度失效问题 问题复现 有这样的一个业务场景，详情项每行三项分别占33%宽度，每项有label字数不固定所以宽度不固定，还有content 占满标签剩余宽度，文字过多显示省略号， 鼠标划入展示…...
65页PDF | 企业IT信息化战略规划（限免下载）
一、前言 这份报告是企业IT信息化战略规划，报告详细阐述了企业在面对新兴技术成熟和行业竞争加剧的背景下，如何通过三个阶段的IT战略规划（IT 1.0基础建设、IT 2.0运营效率、IT 3.0持续发展），系统地构建IT管理架构、应…...
15.三数之和
给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意：答案中不可以包含重复的三元组。 示例 1&am…...
【Notepad++】---设置背景为护眼色（豆沙绿）最新最详细
在编程的艺术世界里，代码和灵感需要寻找到最佳的交融点，才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里，我们将共同追寻这种完美结合，为未来的世界留下属于我们的独特印记。 【Notepad】---设置背景为护眼色…...
项目代码第2讲：从0实现LoginController.cs，UsersController.cs、User相关的后端接口对应的前端界面
一、User 1、使用数据注解设置主键和外键 设置主键：在User类的U_uid属性上使用[Key]注解。 设置外键：在Order类中，创建一个表示外键的属性（例如UserU_uid），并使用[ForeignKey]注解指定它引用User类的哪个…...
电子商务人工智能指南 3/6 - 聊天机器人和客户服务
介绍 81% 的零售业高管表示， AI 至少在其组织中发挥了中等至完全的作用。然而，78% 的受访零售业高管表示，很难跟上不断发展的 AI 格局。 近年来，电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…...
vue.js组件开发的所有流程
1. 设计组件架构 首先，你需要考虑应用的结构，决定哪些部分应该成为独立的组件。这包括： 提取重复的UI元素：如按钮、输入框、卡片等。 功能模块：例如登录框、导航栏、数据表格等。 2. 设置开发环境 安装Node.js…...
从零开始学TiDB（1） 核心组件架构概述
首先TiDB深度兼容MySQL 5.7 1. TiDB Server SQL语句的解析与编译：首先一条SQL语句最先到达的地方是TiDB Server集群，TiDB Server是无状态的，不存储数据，SQL 发过来之后TiDB Server 负责 解析，优化，编译 这…...
VsCode运行Ts文件
1. 生成package.json文件 npm init 2. 生成tsconfig.json文件 tsc --init 3. Vscode运行ts文件 在ts文件点击右键执行Run Code,执行ts文件...
初始化webpack应用示例
1、初始化npm mkdir webpack_test cd webpack_test npm init 2、安装webpack依赖 npm install webpack webpack-cli -D 3、添加文件夹，入口文件 mkdir src touch index.js touch add-content.js 文件夹结构 index.js import addContent from "./add-cont…...
liunx docker 部署 nacos seata sentinel
部署nacos 1.按要求创建好数据库 2.创建docker 容器 docker run -d --name nacos-server -p 8848:8848 -e MODEstandalone -e SPRING_DATASOURCE_PLATFORMmysql -e MYSQL_SERVICE_HOST172.17.251.166 -e MYSQL_SERVICE_DB_NAMEry-config -e MYSQL_SERVICE_PORT3306 -e MYSQL…...
MySQL面试
文章目录 事务隔离级别需要解决的问题事务隔离级别 MySQL 中是如何实现事务隔离的实现可重复读 什么是存储引擎如何定位慢查询分析慢查询原因MySQL超大分页怎么处理索引失效什么时候建立唯一索引、前缀索引、联合索引？redolog与binlog是如何保证一致的redolog刷盘时…...
linux运维之shell编程
Shell 编程在系统运维中及其重要 1. Shell 编程概述 Shell 是一种命令行解释器，能够执行操作系统的命令。Shell 脚本是一个包含一系列 Shell 命令的文件，它可以被执行，以自动化和批量处理任务。常用的 Shell 类型包括 bash、sh、zsh 等。Shel…...
ssm 多数据源 注解版本
application.xml 配置如下 <!-- 使用 DruidDataSource 数据源 --><bean id"primaryDataSource" class"com.alibaba.druid.pool.DruidDataSource" init-method"init" destroy-method"close"></bean> <!-- 使用 数…...
Nginx核心配置详解
一、配置文件说明 nginx官方帮助文档：nginx documentation nginx的配置文件的组成部分： 主配置文件：nginx.conf子配置文件: include conf.d/*.conffastcgi， uwsgi，scgi 等协议相关的配置文件mime.types：…...
、XMLHttpRequest、Promise、简易axios封装、案例天气预报、lodash-debounce防抖)
十六(AJAX3)、XMLHttpRequest、Promise、简易axios封装、案例天气预报、lodash-debounce防抖
1. XMLHttpRequest 1.1 XMLHttpRequest-基本使用 /* 定义：XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更…...
12.06 深度学习-预训练
# 使用更深的神经网络 经典神经网络 import torch import cv2 from torchvision.models import resnet18,ResNet18_Weights from torch import optim,nn from torch.utils.data import DataLoader from torchvision.datasets import CIFAR10 from torchvision import tr…...
)
【计算机网络】期末速成(2)
部分内容来源于网络，侵删~ 第五章 传输层 概述 传输层提供进程和进程之间的逻辑通信，靠**套接字Socket(主机IP地址，端口号)**找到应用进程。 传输层会对收到的报文进行差错检测。 比特流(物理层)-> 数据帧(数据链路层) -> 分组 / I…...
Python学习笔记10-作用域
作用域 定义：Python程序程序可以直接访问命名空间的正文区域 作用：决定了哪一部分区域可以访问哪个特定的名称 分类： 局部作用域（Local）闭包函数外的函数中（Enclosing）全局作用域࿰…...
Sui 主网升级至 V1.38.3
Sui 主网现已升级至 V1.38.3 版本，同时协议升级至 69 版本。请开发者及时关注并调整！ 其他升级要点如下所示： 协议 #20199 在共识快速路径投票中设置允许的轮次数量。 节点（验证节点与全节点） #20238 为验证节点…...
linux的vdagent框架设计
1、vdagent Linux 的 spice 客户代理由两部分组成，一个系统范围的守护进程 spice-vdagentd 和一个 X11 会话代理 spice-vdagent，每个 X11 会话有一个。spice-vdagentd 通过 Sys-V initscript 或 systemd 单元启动。 如下图：spice-vdagent&a…...
vue3+elementPlus封装的一体表格
目录结构 源码 exportOptions.js export default reactive([{label: 导出本页,key: 1,},{label: 导出全部,key: 2,}, ])index.vue <template><div class"flex flex-justify-between flex-items-end"><div><el-button-group><slot name…...