vue基础语法-11day

卡片
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"处理获取到的数据