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如何优雅的实现负载均衡