主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!!
目录
前言
AJAX
原生Ajax
Axios
Axios入门
案例
前后端分离开发
YApi
前端工程化
环境准备
总结
前言
主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!!
AJAX
概念:Asynchronous JavaScript And XML,异步的JavaScript和XML。
作用:
- 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
原生Ajax
- 准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
- 创建XMLHttpRequest对象:用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应数据
<body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>function getData(){//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>
a'xio过于繁琐!!!
Axios
- 介绍:Axios 对原生的Ajax进行了封装,简化书写,快速开发。
- 官网: https://www.axios-http.cn/
Axios入门
官网下载后引入Axios的js文件
百度网盘下载
<script src="js/axios-0.18.0.js"></script>
或者在线引用:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
使用Axios发送请求,并获取响应结果
axios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {console.log(result.data);
});
method: "get"
:指定请求的方法为GET,这表示向服务器获取(或者说检索)位于指定URL上的资源,即获取员工列表的操作。url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
:指定请求的URL,即目标服务器上用于获取员工列表的API接口。then()
方法:Axios返回一个Promise对象,该方法用于处理异步操作的结果。当服务器响应成功时,会执行传入的回调函数。result.data
:表示从服务器返回的响应数据。在这段代码中,使用console.log()
将返回的员工列表数据输出到控制台。
axios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"
}).then((result) => {console.log(result.data);
});
method: "post"
:指定请求的方法为POST,这表示将向服务器发送一条指定URL的POST请求。url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById"
:指定请求的URL,即目标服务器上用于删除员工信息的API接口。data: "id=1"
:指定发送到服务器的数据。在这里,数据是以字符串形式指定的,表示要删除的员工ID是1。Axios会自动将此数据转换为适当的格式(通常是JSON)并发送给服务器。then()
方法:Axios返回一个Promise对象,该方法用于处理异步操作的结果。当服务器响应成功时,会执行传入的回调函数。result.data
:表示从服务器返回的响应数据。在这段代码中,使用console.log()
将返回的数据输出到控制台。
请求方式别名
- axios.get(url [, config])
- axios.delete(url [, config])
- axios.post(url [, data[, config]])
- axios.put(url [, data[, config]])
发送get请求
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {console.log(result.data);
});
发送post请求
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {console.log(result.data);
});
案例
基于Vue及Axios完成数据的动态加载展示
数据准备的url: http://yapi.smart-xwork.cn/mock/169327/emp/list 在页面加载完成后,自动发送异步请求,加载数据,渲染展示页面(性别:1 代表男,2 代表女)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/axios-0.18.0.js"></script><script src="./js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后操作时间</th></tr><tr align="center" v-for="(emp,index) in emps"><td>{{index+1}}</td><td>{{emp.name}}</td><td><img v-bind:src="emp.img" alt="" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new Vue({el: '#app',data:{emps: [],},mounted(){//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{this.emps = result.data.data;})},})
</script>
</html>
mounted()
生命周期钩子:在Vue实例挂载后立即执行。axios.get(...).then(...)
:使用Axios发送GET请求获取员工列表数据。result.data.data
:从请求结果中获取实际的员工数据数组,并赋值给emps
数组,实现页面的动态渲染。
前后端分离开发
当前最为主流的开发模式:前后端分离
YApi
介绍:YApi 是高效、易用、功能强大的 api 管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务
前端工程化
环境准备
介绍: Vue-cli 是Vue官方提供的一个脚手架,用于快速生成一个 Vue 的项目模板。
Vue-cli提供了如下功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境:NodeJS
安装NodeJS
安装 vue-cli
npm install -g @vue/cli
总结
主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!!