数据交互

ajax: 原理必须要能说出来流程即可。

jquery_ajax。我们promise要结合它

Promise + async函数的

前端的主要工作：1. 画页面、2. 请求ajax （后端给你接口和说明书）

有node环境和mysql环境。工作中就不需要搭建mysql环境了。

0.搭建后端接口项目

环境

node + mysql( phpstudy )
打开phpstudy启动mysql
使用navicate导入数据库
1. 先创建一个数据库（ xiaou_shop ）
2. 导入 shop_db.sql

修改代码的数据库配置文件

npm start 启动项目

http://localhost:3000/api/getcate 能出来内容就代表后端接口搭建完成。

一.axios简介

网址:axios中文网|axios API 中文文档 | axios

axios是一个基于Promise的http库,支持浏览器端和node.js端

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

二.安装及配置

npm i axios -S

三.跨域

只要前端向服务器发ajax请求，大概会发生跨域。

很多种方案触发：99%都是后端解决的。

cors 后端
修改服务器代理配置
jsonp(用的很少)

四.配置代理解决跨域: 仅是开发阶段而已

项目目录中u-shop/vue.config.js文件，这是vue脚手架的配置文件

module.exports = {//设置代理请求devServer:{proxy:{"/api":{target:"http://localhost:3000",//目标地址"^/api":""}}}
}
//设置代理请求  同一个项目配置多个地址
module.exports = {devServer: {proxy: {"/api1": { // 这是以/api开头的target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址pathRewrite: {'^/api1': '/apiv1'   // 这种接口配置出来     http://XX.XX.XX.XX:3000/api/login}},"/api2": { // 这是以/api开头的target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址pathRewrite: {'^/api2': '/apiv2'   // 这种接口配置出来     http://XX.XX.XX.XX:3000/api/login}}}}
}

//一个项目中只有一个接口地址
module.exports = {//设置代理请求devServer: {proxy: {"/api": { // 这是以/api开头的target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址}}}
}

重启项目: npm run serve

五.axios请求方式

get方式

axios.get( url?key=value )
axios.get( url ,{ params:{  } } )

axios.get("http://localhost:3000/api/getcates").then(function(response) { //成功的回调console.log(response,'ok');//接口返回的数据在 response.data中。因为axios库把返回数据和请求的数据进行了二次包装}).catch(function(error) { //失败的回调console.log(error);});

post方式

axio.post( url,{ 参数 } )
let result = await axios.post(api_url + "/api/register",{ phone:'15811111112',password:'123456',nickname:'鲁班' });

axios

let result = await axios({url: api_url + "/api/getgoodsinfo",method: "get",params: {//parmas是axios方法决定的id: 2 //这个参数是根据后端的接口文档来的}});

post

let result = await axios({url: api_url + "/api/register",method: "post",data: {phone: "15811111113",password: "123456",nickname: "鲁班小号"}});

返回结果的解释

{config,前端发送ajax的请求头相关的所有配置信息data,接口返回的内容headers,如果需要设置请求头需要在这里设置，{ authorization:token字符串 }status,状态码statusText,状态码对应描述request,原生ajax的内容
}

baseURL

六.axios的基本应用

6-1get请求

局部引入

在某一个具体的.vue页面中引入axios

全局引入

在main.js中引入axios挂载到Vue的原型链上

import axios from 'axios'
Vue.prototype.$axios = axios在其它.vue页面可以通过this实例访问到 $axios方法。this.$axios
async request1(){// console.log( this.$axios )let result = await this.$axios({url: api_url + "/api/getgoodsinfo",method: "get",params: {//parmas是axios方法决定的id: 2 //这个参数是根据后端的接口文档来的}});console.log(result, "$axios");
}

全局默认设置

axios.defaults.baseURL = 'http://localhost:3000';

七.axios.create() 了解

axios() 其实就是一个http请求的实例对象

axios.create可以用来自定义axios请求，相当于我们又封装了一个ajax方法

let http = axios.create({baseURL: "http://localhost:3000"
});http({url: "/api/getgoodsinfo",method: "get",params: {//parmas是axios方法决定的id: 2 //这个参数是根据后端的接口文档来的}})

八.执行多个并发请求

 function getCates() {return axios.get(api_url + '/api/getcates');}function getBanner() {return axios.get(  api_url + '/api/getbanner' );
}axios.all( [getCates(), getBanner()] ).then(axios.spread( (cates, banner)=> {// 两个请求现在都执行完成console.log( cates, banner,'----多并发' )
}));

九.axios拦截器

总结：统一加些操作。比如：

每次打印一上请求地址、响应的结果

每次请求统一加上token

请求拦截器

// 请求拦截器
axios.interceptors.request.use(config=>{return config
})

<template><div><h2>拦截器</h2><button @click="request1">发送请求</button></div>
</template><script>
import axios from 'axios'let api_url = 'http://localhost:3000'
//1. 响应拦截
axios.interceptors.response.use( res=>{//console.log(res,'响应拦截')console.group('-------------------------')console.log('本次请求地址为:' ,res.config.url)console.log('本次结果为：',res.data)console.groupEnd('-----')return res //否则后面拿不到结果
}  )//2. 请求拦截，可以统一设置请求的参数，比如统一在headers中加token//假设后端的所有接口要求 前端必须通过headers传递一个aa参数为123
axios.interceptors.request.use( config=>{// console.log(config,'请求拦截')//config.headers.aa = 1234config.headers.authorization = 'tokenstring' //登录成功后设置了token字符串到locastorage，从缓存中获取的return config  //必须return，否则请求信息不会发送给服务器
} )export default {methods:{async request1(){let result = await axios.get(api_url + '/api/getcates');//console.log(result,'request1触发了')},async request2(){}}
}
</script><style></style>

响应拦截器

// 响应拦截器
axios.interceptors.response.use(res=>{return res
})axios.interceptors.response.use( res=>{// console.log(res,'响应拦截')console.group('-------------------------')console.log('本次请求地址为:' ,res.config.url)console.log('本次结果为：',res.data)console.groupEnd('-----')return res //否则后面拿不到结果
}  )

十.请求层的封装

get请求

let get = ( url,params = {} )=>{return axios.get( url,{ parmas } )
}

封装post 请求

let post = ( url , parmas = {} )=>{return axios.post( url,parmas )
}

你们公司的项目可能过半年或一年，页面风格要变。但是？万一接口地址变了呢？

之前上线了一版，半年后风格变了又一版，当接口地址变了，那么之前的html页面的地址就都不对了。所以也要对前端中具体的页面中调用的接口也要统一一个封装。

api.js

实战

Vue中的数据交互axios相关推荐

在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
vue中data数据之间如何赋值
vue中data数据之间如何赋值前言实现方式前言最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景. ...
Vue学习：Vue中的数据代理
一.回顾Object.defineProperty Object.defineProperty方法可以用来增加和修改对象的属性,该方法有三个参数: 1.属性所在的对象: 2.属性的名字: 3.一个描述 ...
Vue中的数据代理与数据劫持
数据代理数据代理字面上是通过一个对象代理对另一个对象属性的操作在vue中的数据代理,实际上是通过vm上的属性代理对_data中属性的操作数据劫持数据劫持也可称作数据代理,字面上是劫持到某个属性 ...
Vue与服务端数据交互 [ axios ]
Vue生命周期每个Vue实例在被创建到销毁要经过一系列的过程,这整个过程称为Vue实例的生命周期 Vue在生命周期不同的阶段点会自动运行一些函数, 这些函数称为Vue生命周期的钩子(hook)函数 ...
Vue中使用数据可视化Echarts图表展示
目录 Echarts--商业级数据图表 Echarts支持的图表 Echarts的使用方法 Echarts--商业级数据图表商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览 ...
Angula中的数据交互
Angular get 请求数据 Angular5.x 以后 get.post 和和服务器交互使用的是 HttpClientModule 模块. 1.在 app.module.ts 中引入 Http ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...

Vue中的数据交互axios