网站关键词优化,acaa网页设计师,安徽省建设工程安全 协会网站,wordpress文件结构主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装#xff01;#xff01;#xff01; 目录
前言
AJAX
原生Ajax Axios
Axios入门 案例
前后端分离开发
YApi
前端工程化
环境准备
总结 前言
主要介绍了AJAX、前后端分离所需的YApi、前端工… 主要介绍了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对象用于和服务器交换数据向服务器发送请求获取服务器响应数据
bodyinput typebutton value获取数据 onclickgetData()div iddiv1/div/bodyscriptfunction 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;}}}
/scriptaxio过于繁琐 Axios
介绍Axios 对原生的Ajax进行了封装简化书写快速开发。官网 https://www.axios-http.cn/
Axios入门
官网下载后引入Axios的js文件
百度网盘下载
script srcjs/axios-0.18.0.js/script或者在线引用
script srchttps://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: id1
}).then((result) {console.log(result.data);
});method: post指定请求的方法为POST这表示将向服务器发送一条指定URL的POST请求。url: http://yapi.smart-xwork.cn/mock/169327/emp/deleteById指定请求的URL即目标服务器上用于删除员工信息的API接口。data: id1指定发送到服务器的数据。在这里数据是以字符串形式指定的表示要删除的员工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,id1).then((result) {console.log(result.data);
}); 案例
基于Vue及Axios完成数据的动态加载展示
数据准备的url http://yapi.smart-xwork.cn/mock/169327/emp/list 在页面加载完成后自动发送异步请求加载数据渲染展示页面(性别1 代表男2 代表女)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/axios-0.18.0.js/scriptscript src./js/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/trtr aligncenter v-for(emp,index) in empstd{{index1}}/tdtd{{emp.name}}/tdtdimg v-bind:srcemp.img alt width70px height50px/tdtdspan v-ifemp.gender 1男/spanspan v-ifemp.gender 2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td/tr/table/div
/body
scriptnew 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、前端工程化所需要的环境安装
