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

Java Web 3 Axios Vue组件库

news 2026/5/20 17:37:53

一 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…...

编程日记 2024/12/6 19:44:29

双目相机的标定，视差图，深度图，点云生成思路与实现。

该文档记录从双目相机标定到点云生成的所有过程&#xff0c;同时会附上代码。 代码直接能跑。https://github.com/stu-yzZ/stereoCamera 目录 大致思路如下&#xff1a; 一、相机标定 1、相机参数介绍 2、单目相机标定 3、双目相机标定 二、图片畸变矫正 三、极线矫正…...

编程日记 2024/12/6 19:39:25

【H2O2|全栈】MySQL的基本操作（三）

目录 前言 开篇语 准备工作 案例准备 多表查询 笛卡尔积 等值连接 外连接 内连接 自连接 子查询 存在和所有 含于 分页查询 建表语句 结束语 前言 开篇语 本篇继续讲解MySQL的一些基础的操作——数据字段的查询中的多表查询和分页查询&#xff0c;与单表查询…...

编程日记 2024/12/6 19:38:24

2、C++命名空间

命名空间 命名空间是一种用来避免命名冲突的机制; 原理是将一个全局的作用域分成一个个命名空间&#xff0c;每个命名空间是个单独的作用域,从而有效避免命名冲突。 注意&#xff1a;命名空间定义在全局 命名空间定义格式 使用&#xff1a; …...

编程日记 2024/12/6 19:32:18

Elemenu-UI时间日期单个组件，限制当前日期之后的时间

element的时间日期组件&#xff0c; type"datetime" &#xff0c;当你设置了:picker-options"pickerOptions"之后 pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, }, 会发现&#xff0c;他只会限制日期&#xff0c;但不…...

编程日记 2024/12/6 19:30:12

flutter修改状态栏学习

在flutter中如何动态更改状态栏的颜色和风格。 前置知识点学习 AnnotatedRegion AnnotatedRegion 是 Flutter 中的一个小部件&#xff0c;用于在特定区域中提供元数据&#xff08;metadata&#xff09;以影响某些系统级的行为或外观。它通常用于改变系统 UI 的外观&#xff…...

编程日记 2024/12/6 19:27:07

解决Unity编辑器Inspector视图中文注释乱码

1.问题介绍 新创建一个脚本&#xff0c;用VS打开编辑&#xff0c;增加一行中文注释保存&#xff0c;在Unity中找到该脚本并选中&#xff0c;Inspector视图中预览的显示内容&#xff0c;该中文注释显示为乱码&#xff0c;如下图所示&#xff1a; 2.图示解决步骤 按上述步骤操作…...

编程日记 2024/12/6 19:26:06

关于csgo的游戏作弊与封禁

关于csgo的游戏作弊与封禁 一.关于作弊 什么叫作弊&#xff1f; 1.换肤&#xff0c;换库存 2.各种参&#xff08;回溯&#xff0c;自瞄&#xff0c;透视&#xff0c;急停&#xff0c;连跳&#xff0c;假身&#xff0c;子弹跟踪等&#xff09; 3.某一部分更改游戏内存&…...

编程日记 2024/12/6 19:24:03

严格单元测试造就安全软件

在信息技术迅速发展的今天&#xff0c;软件在各个行业中扮演着至关重要的角色&#xff0c;尤其是在汽车行业&#xff0c;其中软件的可靠性和安全性直接影响到人们的生命安全。软件缺陷所带来的潜在风险不容小觑&#xff0c;尤其在涉及到自动驾驶和车辆控制等关键系统时&#xf…...

编程日记 2024/12/6 19:23:02

ubuntu 根分区逻辑卷扩容

1、虚拟机关机通过管理界面给磁盘扩容。 rootcurtis:/home/curtis/git_code# pvdisplay--- Physical volume ---PV Name /dev/vda3VG Name ubuntu-vgPV Size <239.00 GiB / not usable 0Allocatable yes (but full)PE…...

编程日记 2024/12/6 19:17:56

如何查看电脑生产日期

查看电脑的生产日期通常可以通过以下方法实现&#xff0c;具体方式取决于操作系统和电脑类型&#xff1a; 方法 1&#xff1a;检查电脑 BIOS 生产日期通常记录在 BIOS 中。可以通过以下步骤查看&#xff1a; 重启电脑并进入 BIOS&#xff1a; 启动时按下特定的键&#xff08;…...

编程日记 2024/12/6 19:12:52

MAC M1 mysql 8.0 如何修改root用户密码

关闭mysql服务 使用brew方式安装&#xff0c;可以通过一下命令关闭 brew services stop mysql使用安装包安装的方式 可以选择&#x1f34e;->系统偏好设置->最下方单机MySQL图标->stop mysql server 启动 MySQL 到安全模式 sudo mysqld_safe --skip-grant-tables …...

编程日记 2024/12/6 19:11:51

漫画之家系统：Spring Boot框架下的漫画版权保护

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&a…...

编程日记 2024/12/6 19:09:46

在 MacOS 上为 LM Studio 更换镜像源

在 MacOS 之中使用 LM Studio 部署本地 LLM时&#xff0c;用户可能会遇到无法下载模型的问题。 一般的解决方法是在 huggingface.co 或者国内的镜像站 hf-mirror.com 的项目介绍卡页面下载模型后拖入 LM Studio 的模型文件夹。这样无法利用 LM Studio 本身的搜索功能。 本文将…...

编程日记 2024/12/6 19:06:41

Nginx配置https（Ubuntu、Debian、Linux、麒麟）

Ubuntu操作系统&#xff0c;Debian系统底层是Ubuntu&#xff0c;差异不大 ubuntu 安装nginx 1.安装依赖 sudo apt-get update sudo apt-get install gcc sudo apt-get install libpcre3 libpcre3-dev sudo apt-get install zlib1g zlib1g-dev sudo apt-get install openssl lib…...

编程日记 2024/12/6 19:05:40

「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局

本篇将带你实现一个简单的照片墙布局应用&#xff0c;通过展示多张图片组成照片墙效果&#xff0c;用户可以点击图片查看其状态变化。 关键词 UI互动应用照片墙布局Grid 布局动态图片加载用户交互 一、功能说明 照片墙布局应用的特点&#xff1a; 动态加载多张图片组成网格布…...

编程日记 2024/12/6 19:02:35

VMware Workstation 安装Ubuntu 系统(图文步骤）

之前一直在讲Ubuntu Linux的用户和组 链接&#xff1a; Linux专栏 今天来讲讲Ubuntu 系统基础的安装步骤&#xff01;&#xff01;&#xff01; 废话少说&#xff0c;马上开始&#xff01; 文章目录 前言准备安装环境先下载Ubuntu 镜像 详细安装步骤如下新建虚拟机默认使用 15.…...

编程日记 2024/12/6 18:59:32

mybatis用pagehelper 然后用CountJSqlParser45,发现自己手写的mapper查询效率很慢

如题 效率慢疑惑 效率慢 分页查询,发现效率很慢,然后发现是比较复杂的sql,CountJSqlParser45它不会帮忙优化掉,就是select多少字段它count的时候也还是这么多字段 框架里的用法是这样的 所以去看了CountJSqlParser45里面的代码,发现如果有group之类的,它就不帮忙把count优化…...

编程日记 2024/12/6 18:58:29

【优选算法 二分查找】二分查找入门详解：二分查找 ＆ 在排序数组中查找元素的第一个和最后一个位置

二分查找 题目描述 题目解析 暴力解法 我们可以从左往右遍历一次数组&#xff0c;如果存在 target 则返回数组的下标&#xff0c;否则返回 -1&#xff1b; 时间复杂度 O(N)&#xff0c;因为没有利用数组有序的特点&#xff0c;每次比较只能舍弃一个要比较的数&…...

编程日记 2024/12/6 18:57:28

WPF编写工业相机镜头选型程序

该程序满足面阵和线阵的要求。 前端代码 <Window x:Class"相机镜头选型.MainWindow" Loaded"Window_Loaded"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml…...

编程日记 2024/12/6 18:56:23

从继电器到MOS管：电源控制电路选型实战与仿真验证

1. 继电器与MOS管&#xff1a;电源控制的双面选择 第一次接触电源控制电路时&#xff0c;我像大多数新手一样纠结&#xff1a;到底该用继电器还是MOS管&#xff1f;这个问题困扰了我整整两周&#xff0c;直到在某个深夜调试电路时&#xff0c;继电器"咔嗒"的机械声突…...

编程新知 2026/5/20 17:15:02

从游戏画面Bug到图形学原理：一次深度测试失败的排查与透视矫正插值的深度理解

从游戏画面Bug到图形学原理&#xff1a;深度测试失败的排查与透视矫正插值解析 深夜调试游戏引擎时&#xff0c;屏幕上的三角形边缘突然出现诡异的闪烁——这种被称为"深度冲突"的现象&#xff0c;往往让开发者陷入漫长的调试循环。本文将以一个实际开发中的深度测试…...

编程新知 2026/5/20 15:40:35

2026年初中生赴新加坡留学，费用究竟几何？一文为你揭秘！

在教育全球化的今天&#xff0c;越来越多的家长将目光投向海外&#xff0c;新加坡凭借其优质的教育资源、安全的社会环境和多元的文化氛围&#xff0c;成为众多初中生留学的热门选择。那么&#xff0c;2026年初中生赴新加坡留学的费用到底是多少呢&#xff1f;本文将为你详细揭…...

编程新知 2026/5/20 14:57:04

避开这些坑：Tessent Shell中MBIST流程的DRC检查与调试指南

避开这些坑&#xff1a;Tessent Shell中MBIST流程的DRC检查与调试指南 在芯片设计领域&#xff0c;可测试性设计&#xff08;DFT&#xff09;是确保产品质量的关键环节。而作为DFT的重要组成部分&#xff0c;存储器内建自测试&#xff08;MBIST&#xff09;的实现质量直接影响着…...

编程新知 2026/5/20 14:02:31

游戏逆向实战：从CALL定位到功能复现，构建自动化辅助框架

1. 游戏逆向基础&#xff1a;理解CALL与基址 游戏逆向工程的核心目标之一就是找到并理解游戏中的关键功能调用&#xff08;CALL&#xff09;。这些CALL就像是游戏的"遥控器按钮"&#xff0c;按下它们就能触发特定功能。比如释放技能、打开背包、自动寻路等操作&…...

编程新知 2026/5/20 14:00:27

Allegro PCB设计自查清单：用Quick Reports快速搞定投板前的关键检查（附Dangling Line定位技巧）

Allegro PCB设计投板前终极自查指南&#xff1a;用Quick Reports构建高效质检流水线 在PCB设计领域&#xff0c;最后的5%往往消耗50%的精力。当设计进入投板前的关键阶段&#xff0c;工程师们常陷入两难&#xff1a;要么因过度谨慎反复全盘检查导致项目延期&#xff0c;要么因遗…...

编程新知 2026/5/20 13:19:08

终极指南：如何在Mac上完美使用Xbox控制器玩游戏

终极指南&#xff1a;如何在Mac上完美使用Xbox控制器玩游戏 【免费下载链接】360Controller TattieBogle Xbox 360 Driver (with improvements) 项目地址: https://gitcode.com/gh_mirrors/36/360Controller 你是否曾经在Mac上尝试连接Xbox控制器&#xff0c;却发现按键…...

编程新知 2026/5/20 12:52:37

别再只盯着Transformer了！用PyTorch手把手复现加性注意力（Additive Attention），理解注意力机制的起点

从加性注意力到Transformer&#xff1a;PyTorch实战与演进逻辑解析 在Transformer架构横扫NLP领域的今天&#xff0c;回望2014年提出的加性注意力机制&#xff08;Additive Attention&#xff09;&#xff0c;犹如在摩天大楼顶端俯瞰地基。这个由Bahdanau在神经机器翻译中首次提…...

编程新知 2026/5/20 12:37:37

Cursor Pro免费激活终极指南：简单快速解锁AI编程高级功能

Cursor Pro免费激活终极指南&#xff1a;简单快速解锁AI编程高级功能 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your …...

编程新知 2026/5/20 12:18:42

告别645，聊聊698协议：面向对象的电表通信到底好在哪？

698协议深度解析&#xff1a;面向对象设计如何重塑电表通信生态 当电力行业从单向计量迈向双向互动时&#xff0c;传统645协议的数据标识系统开始显露出架构层面的局限性。某省级电网公司的技术团队在2020年做过一次压力测试&#xff1a;在使用645协议的场景下&#xff0c;要实…...

编程新知 2026/5/20 11:56:55