《Vue.js 前端开发技术与实践》课件-第11章　前后台数据交互

第11章前后台数据交互客户端通过url地址发送请求，调用后台的接口，后台根据不同的地址返回不同的数据，数据通常是json格式，再做前端数据的渲染。客户端通过url地址发送请求，调用后台的接口，后台根据不同的地址返回不同的数据，数据通常是json格式，再做前端数据的渲染。11.1

web前后台数据交互方式11.2后台接口文档后台开发人员提供后台API文档（接口文档），API文档详细描述每个接口的地址、请求方式、请求参数、响应结果信息返回格式及及返回参数说明等。11.3接口调用Ajax指的是最早出现的发送后端请求技术，Vue2.0之后，尤雨溪推荐大家用axios，Axios是一个基于promise的HTTP库，axios就是基于promise对ajax的封装，可以用在浏览器和node.js中。11.3.2axios的常用方法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.3axios的响应结果响应结果在then方法的参数函数的形参res接收，主要属性有:data:实际响应回来的数据headers：响应头信息status:响应状态码statusText:响应状态信息例：axios.get('

http://localhost:888/getaccount')

.then(res=>{

console.log(res);

})在控制台输出响应结果。11.3.4axios全局配置1）默认请求urlaxios.defaults.baseURL='请求url'（2）请求超时axios.defaults.timeout=1000;（3）请求拦截器在请求发出之前设置一些信息，语法格式：axios.Interceptors.request.use(functionc(onfig){//在请求发出之前设置一些信息returnconfig;}，function(err){

//处理错误信息})（4）响应拦截器在获取数据之前对响应结果做一些加工处理。语法格式：erceptors.response.use(functionc(res){//响应结果做一些加工处理returnres;}，function(err){

//处理错误信息})11.3.5在模块工程化使用axios（1）安装axios在命令工具行换切到项目目录下，执行npminstallaxios（2）在main.js中配置axios在main.js文件中引入axios