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.创建XMLHttpRequest
		var 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 

Vue组件库Element

Vue路由

打包部署

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值