Web开发 Ajax 2024/3/31
Ajax
异步的Javascript和XML
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
原生Ajax
1.准备数据地址
2.创建XMLHttpRequest对象：用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>// 1.创建XMLHttpRequestvar xmlHttpRequest=new XMLHttpRequest();//2.发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//3.获取服务响应数据xmlHttpRequest.onreadystatechange=function(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;}}</script>
</html>Axios
对原生的Ajax进行了封装，简化书写，快速开发。
Axios入门
1.引入Axios的js文件
2.使用Axios发送请求，并获取响应结果
axios({method:"get",url:"xxx"}).then((result)=>{console.log(result.data);}); axios({method:"post",url:"xxx",data:"id=1"}).then((result)=>{console.log(result.data);});前后端分离开发
api接口文档
帮助实现前后端分离
YApi 接口文档管理平台
1.添加项目
2.添加分类
3.添加接口
mock服务
为前端生成测试数据
前端工程化
是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
vue-cli
是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
依赖环境：NodeJS