Vuejs 前端开发技术与实践第PPT课件（共12章）第11章前后台数据交互.pptxVIP

第11章　前后台数据交互客户端通过url地址发送请求，调用后台的接口，后台根据不同的地址返回不同的数据，数据通常是json格式，再做前端数据的渲染。11.1　web前后台数据交互方式客户端通过url地址发送请求，调用后台的接口，后台根据不同的地址返回不同的数据，数据通常是json格式，再做前端数据的渲染。11.2 后台接口文档后台开发人员提供后台API文档（接口文档），API文档详细描述每个接口的地址、请求方式、请求参数、响应结果信息返回格式及及返回参数说明等。11.3 接口调用Ajax 指的是最早出现的发送后端请求技术，Vue2.0之后，尤雨溪推荐大家用axios，Axios 是一个基于 promise 的 HTTP 库，axios就是基于promise对ajax的封装，可以用在浏览器和 node.js 中。11.3.2 axios 的常用方法1）get方法用于查询数据查询条件通过参数传递到服务器，传递方式有如下两种，具体用哪种方式传递，要根据服务器支持情况选用。（1） url传递参数①通过传统格式的url传递参数例：axios.get(http://localhost:3000/data?id=100)② get方法通过Restful格式的url传递参数//axios.get(http://localhost:3000/data/100)②通过params选项传递参数语法格式是如下：　axios.get(url,{params:{...}}).then(res=…) 例：要查询id为100的数据axios.get(http://localhost:3000/data,{params:{id:100}?})（2）post方法添加数据添加数据的数据通过传数传递到服务器，默认传递的是json格式的数据。语法格式是如下：axios.post(url,{...})例：添加一条用户名tom,密码为123456的一条数据axios.post(http://localhost:3000/data,{username:tom,?password:123456})（3）put方法修改数据修改的数据通过传数传递到服务器，参数传递方式与post方法类似。axios.put(http://localhost:3000/data,{username:tom,password:888888?})（4）delete删除数据删除条件通过参数传递到服务器，参数传递方式与get方法类似。例：要删除id为100的数据axios. delete (http://localhost:3000/data,{params:{id:100}})11.3.3 axios的响应结果响应结果在then 方法的参数函数的形参res接收，主要属性有:data:实际响应回来的数据headers：响应头信息status:响应状态码　statusText:响应状态信息例：axios.get( http://localhost:888/getaccount)?.then(res={?console.log(res);?})在控制台输出响应结果。11.3.4 axios全局配置1）默认请求urlaxios.defaults.baseURL=请求url（2）请求超时axios.defaults.timeout=1000;（3）请求拦截器在请求发出之前设置一些信息，语法格式：axios.Interceptors.request.use(functionc(onfig) { //在请求发出之前设置一些信息return config; }，function(err){ 　//处理错误信息 })（4）响应拦截器在获取数据之前对响应结果做一些加工处理。语法格式：erceptors. response.use(functionc(res) { //响应结果做一些加工处理return res; }，function(err){ 　//处理错误信息})11.3.5 在模块工程化使用axios（1）安装axios　在命令工具行换切到项目目录下，执行npm install axios（2）在main.js中配置axios在main.js文件中引入axios并注册到Vue上，代码如下：//引入axiosimport?axios?from?axios//挂载在Vue的原型上Vtotype.axios=axios;