卡片
table
pagention
axios 拦截器
token
401 没有权限 有可能:令牌错误
实现article文章
1、通过element组件实现article组件,使用了card卡片、table表格等组件
2、登录之后在控制台 Application里查看token信息
- 处理登录相关接口之后,其它接口必须在请求头通过 Authorization 字段提供用户token
- 当我们登录成功,服务端生成一个token 令牌,放到用户信息中
3、请求拦截器
- 文档在githup上 axios拦截器,Axios 请求拦截器
- axios 响应拦截器
知识点:
1、 401 没有权限
2、userinfo存在了本地存储里,使用的是(sessinsage本地持久存储)
2.1 判断用户是否登录,登录,不登录
2.3 使用token
3、路由拦截器:每次发送请求的时候都会经过路由拦截器
3.1 在路由拦截器里判断是否有user,如果有user本次请求中添加用户 tonken
4、路由响应器:200后台响应数据会返回给'路由相应器',如果返回400,判断看后端要求是什么类型的数据&&返回什么数据,如果返回401,请求本地存储中的无效的token的用户信息,跳转到登录页面
5、后台数据意思:page是第几页,pre_page:这个页面有几条数据,results返回的具体信息数据、total——count:总共有多少条数据
6、实现文章动态数据(后台返回的数据),
1.table表格自动遍历,
- 给表格(el-table)里的data是一个数组名字,在return里定义一个数组,
- 在请求数据里获取到数据,赋值给当前定义那个数组名,
- 在修改-组件属性意思是:prop:title
列
自动遍历、lable列头标题、表格默认是字* * 符串格式的(显示图片只能显示出文本字符串, - 解决:标签里加+template(如果写遍历项需要配置(固定slot-scop)="scop自己起的") ),
- 结果就是:通过scop.row访问到当前遍历对象(就好比itme一样),template需要自* 己写img在属性里循环遍历,四个状态使用的组件是tag标签组件,
- pagination组件:支持分页组件,获取到事件页码数,获取到事件页码之后改变:当前的页码=组件当前的页码
7、loding组件:加载-- -
Element 提供了
两种调用 Loading 的方法:指令和服务。对于自定义指令
v-loading,只需要绑定
Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。
开始的时候设置为true,结束的时候设置为false
8、(登录按钮)--点击按钮的时候设置loading,加载期间按钮禁用
老师最后总结一个小问题:是登录的时候(访问任何页面),进度条不动
解决办法:在路由钩子做判断,看代码
文章
页面组件使用的是form表单:1:状态,1.2inout下拉,1.3:日期组件是datapicker日期选择器,绑定接口数据,接口里有,一组状态v-modeo,lable是获取的是文本
- input下拉获取,发请求获取数据 赋值,在data里定义数据,组件里循环遍历,设置,循环,key,lable,value
- 处理日期组件(data-pocker日期选择器)
1 绑定change时间,获取时间触发的数据,默认参数是value,绑定v-model,使用value-foma="yyyy-mm-dd"处理获取到的数据