2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置

axios的使用

标题加*的为axios包装的使用,而其余的为了解

基本使用

(不使用vue-axios的原生axios)
Axios网络请求
https://www.kancloud.cn/yunye/axios/234845
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
1.安装
npm install axios --save
2.使用

 import Axios from 'axios' //引入
    Vue.prototype.$axios = Axios;//将axios挂载到vue实例

上,然后可以通过$axios($指全局变量)使用,在任意的vue实例中都可以访问到axios对象

在页面中axiosget,post的使用,

在这里插入图片描述

注意:post请求时,需将参数类型转换为string,否则可能报参数类型错误
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第1张图片

并发请求,就是同时2个axios,请求成功

注意:如函数内部访问不到this,需在上方定义一下this。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第2张图片

全局的axios配置

将原先的url,域名,去掉
注意:axios.改为Axios.,因为import处定义为了Axios
1.配置公共的url
2.配置默认的token
3.配置post请求类型
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第3张图片

全局拦截器

拦截器中的config中的信息

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第4张图片
在请求拦截器中配置post请求的参数类型转换(qs转化)
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第5张图片

axios的封装–api**

将axios封装成独立的组件
.新建utils/http.js,新建api文件夹

1。http.js配置**

1.引入axios
2.创建axios实例,并设置axios超时时间
3.配置axios的post请求类型,token
4.配置请求拦截器,在拦截器中对post请求参数进行qs转化,并在开始添加qs的引入。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第6张图片
5.配置相应信息拦截器
请求成功,返回成功信息,失败,返回失败信息

配置失败的信息(主要是针对断网的处理,发送请求成功,但拿到数据失败了(例如网断了)),首先将errror声明为respones变量,在errorHandle方法中配置错误信息(注意,一般项目中不配置这些,了解即可)
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第7张图片
配置错误信息,如不是以上情况,则返回默认的错误信息
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第8张图片
错误代码:200成功,300缓存,40客户端错误,500服务器错误

配置错误后跳转登录页面,401和403需跳转
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第9张图片
此处错误代码,对象没有全局导出
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第10张图片
instance全局导入,然后在其他文件中就可以使用到了

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第11张图片

没有拿到数据,数据解析失败
在这里插入图片描述
解决上放问题的办法,注释token,因为没有token,所有会报错,以后有token,再放开即可
注意下方的两个配置一个即可,第一个是配置全局的token(用第一个即可)
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第12张图片
此处错误是引入router时,实例化了对象,由于main。js中已经实例化了router,所以,不需要再次实例化。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第13张图片
删除该行代码,即可解决问题。
在这里插入图片描述

2.局部axios的使用

1.导入http.js文件,并声明为axios变量
2然后在mounted中使用axios即可
由于在http中配置错误信息,所以不需在配置catch
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第14张图片

3.全局api–axios的使用**

api文件中新建index.js,作为所有api文件出入的主入口,新建base.js
1.配置base.js信息
配置api域名,配置banner,导出 base变量
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第15张图片
2.新建banner.js,引入base,http,定义banner变量,返回axios,get请求,地址为base中的公共url和banner,导出banner
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第16张图片

3indes.js中引入banner,然后导出banner对象。2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第17张图片
4.局部使用,导入api,(不用指定index.js,会默认选中)变量名为api,调用api下的banner的bannerData()方法,设置返回then方法,即可
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第18张图片
5.全局使用。在main.js中引入api,变量名为api,并设置全部常量$api=api
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第19张图片
vue页面中不需要再每次引入api了
在这里插入图片描述

4.全局api-axios中的post的使用

此处需用到下方的express模拟服务器的功能
1.api下添加login.js,修改base.js中的url域名地址,添加login的访问地址
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第20张图片
2.login.js中添加
引入base,axios,定义login变量,编写logined方法
,方法中添加参数变量,返回axios的post,请求参数为(1.请求地址为
base中的baseurl和login拼接,2,logined方法中的传递的参数)
导出login
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第21张图片
3.index.js中添加login的导入,并添加login到暴露接口中。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第22张图片
4.login/index.vue中可以直接通过$api.login.logined,调用到方法,写入参数,控制台输出data数据。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第23张图片

跨域的配置

上方请求api服务的时候会产生跨域问题
在config/index.js中配置代理服务器(服务器之间允许跨域)
修改下方的target即可。
注意:
修改完重启,配制才生效。
修改base.js中的baseUrl为/api。
(否则会报请求的资源不存在)
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第24张图片

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第25张图片

token的验证

上方跨域解决后,登录需要完成token信息的存储,验证

1.token存储

由于没有学习vuex(存储数据)呢,所以
先存储到本地。
1.localstorage,将token和user存储到本地。
2.使用$router跳转到主页面。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第26张图片
3.这浏览器控制台的application中的local storage 中可以看到存储到本地的数据。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第27张图片

2我的页面的未登录拦截的实现

token完成后,跳转到主页面,也可以访问我的页面,但我的页面应该在未登录时调转到登录页面。
1.在router/index.js中的mine(我的页面)路由中添加meta(标志):isLogin:true时,才能进入。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第28张图片
2.判断页面是否需要isLogin(登录)
判断需要,则验证本地的token,
如果存在则正常执行,不存在跳转登录页面,最下方为不需要登录的操作。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第29张图片
小知识点
token验证失败后,清除本地token

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第30张图片

3.shoplist页面的实现(利用token验证是否可以获取数据)

1。在express-api服务器中添加list请求
获取本地token,验证token,token正确,返回数据,失败,返回失败信息。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第31张图片
2.通过postman测试
http://localhost:3000/api/list,
并添加相应的token信息

前端
3.,api中增加shoplist.js文件
复制其他api文件,
修改变量名为shotplist
修改变量方法为shoplistData,并参数为空
修改axios请求为get,参数只有baseurl+list
**问题:**发现list没有配置,下方配置
修改导出为shoplist
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第32张图片

4.base.js中配置list的访问地址。(即上方可以使用list了。)
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第33张图片
5.index.js中导出shoplist,并下方配置shoplist
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第34张图片

6.shop/index页面中添加axios,控制台显示数据。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第35张图片
7,测试,发现token验证失败
解决:在utils下的http中配置全局token
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第36张图片
测试:
1.点首页,点shop页面,获取到数据
2清除token,刷新页面(清缓存),获取数据失败
3,点登录,点shop(刷新),拿到数据
注意:数据不实时,暂用刷新代替

mock-express模拟后端api服务器的使用

新建mock 文件夹,新建index.js、router.js

1.编写index.js文件

1.导入express,实例化express并声明变量为app,导入router,body-parser,
2.进行相关配置(固定配置,不懂),设置端口为监听3000
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第37张图片

2.编写router.js文件

1.引入express文件,并声明为express,调用express的router方法,并声明为router
2.编写请求,url为login,从req中接受用户名、密码参数,进行判断,并设置返回参数。
3.导出router
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第38张图片

3.启动express

在mock文件夹下打开cmd,并执行node \index.js
**注意:**在mock同级下需有node_modules文件夹,中包含npm install 的所有依赖,以及vue-router和express依赖。如需独立项目,直接拷贝,项目中的依赖即可。
node ./index.js
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第39张图片

postman测试api服务

安装postman,注意需先注册。
https://www.postman.com/downloads/
注意:中间加api的名字
http://localhost:3000/api/list
测试:

get请求

1.输入url
2.选则get
3.设置请求头token
authorization
SFD3W43RSFD
4.查看获取数据
输入错误token,查看错误信息
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第40张图片

post请求

http://localhost:3000/api/login

1.输入url
2.选中post
3.选中body
4,选中x-www-form-urlencoded
5.填入参数
username iwen
password 123
6,测试数据
成功测试
错误测试

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第41张图片

全局组件的配置

1.新建hello组件
新建hello文件夹,下方有vue和index.js文件
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第42张图片

2.修改index.js文件
引入组件,将组件挂载到vue实例上。
、两个参数:hello.vue中的name,hello本身实例对象。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第43张图片
3.main.js中引入hello组件
通过use方法使用组件
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第44张图片
4.app.vue页面中就可以不用引入直接标签使用。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第45张图片

嵌套组件

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第46张图片
1.components中新建,tabs文件夹,
下方建立tab、tabs、content的vue文件
index.js文件
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第47张图片
index.js中将tab和tabs都声明为全局组件
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第48张图片

main.js中引入tabs组件地址为components/tabs,并use组件。

tabs组件,由templete改为render的方式编写代码,用插槽的方式获取,tab组件

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第49张图片
tab组件也改为用render方式
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第50张图片
添加组件样式后为
app.vue中tabs标签内部有多个tab标签。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第51张图片

嵌套组件tab组件高亮

app.vue中tabs添加currentindex属性,tab标签添加index属性
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第52张图片
tab组件中,
1添加props中获取index属性,设置类型为string或nubmer,默认值1
2添加计算方法,方法名称active,获取父组件tabs的currentindex属性,和tab的index比较相同返回true,否,false
3.render中添加classname变量,
值为对象:tab:“tab”,active,值为this.active, 调用active方法,此处为js语法
设置li标签的class属性等于classname变量。

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第53张图片

2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第54张图片
成功展示效果图
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第55张图片

嵌套组件中tab选中高亮

1.修改tab组件,添加点击事件,changeIndexhandler,并绑定一下
changeIndexhandler方法中调用父组件tabs中的onchangeindex,并将this。index,传入
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第56张图片
2.tabs组件添加onchangeindex方法,通过$emit给tabs的父组件app传递个事件changTab ,并将参数传递过去。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第57张图片

3.app页面将currentindex设置为动态的,前方添加:,并设置值为变量currentindex
data中添加currentindex设置默认值为1,
设置绑定事件@chantab,调用方法为changeTabHandler,方法接受tabs中传递的参数,设置currentindex值为传递来的参数。
2021-03-01 axios的基本使用,axios的封装,express的使用,token的验证,全局组件的配置_第58张图片

最终效果,可以实现点击标签,实现选中高亮

你可能感兴趣的:(学习笔记,vue,java,web)