1. Tabbar 处理
通过分析页面，可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。
- 父路由：一个空页面（layout布局页面），包含一个 tabbar，中间留子路由出口
- 子路由：
- 首页
- 问答
- 视频
- 我的
1.1 创建 tabbar 组件并配置路由
这里主要使用到的 Vant 组件：
-
Tabbar 标签栏
① 创建 src/views/layout/index.vue。
② 然后将 layout 组件配置到一级路由，注意访问 / 测试。
③ 分别创建首页、问答、视频、我的页面组件。
④ 将四个主页面配置为 tab-bar 的子路由
2. 个人中心页面布局
- 未登录头部状态
- 已登录头部
- 头像：van-image组件
- flex布局需要熟练运用。
- 宫格导航（收藏与历史）
-
van-grid 组件
-
clickable 点击有反馈交互效果
-
slot 自定插入的标签与文字
-
- 单元格导航（消息通知与小智同学）
-
退出登陆按钮
-
cell 单元格，只设置 value 或者 title 时，内容和标题会靠左对齐。
-
-
解决方案：设置文本内容居中对齐 text-align: center;（css基础，不要忘）
-
3. 处理已登录和未登录的页面展示
- 未登录，展示登录按钮
- 已登录，展示登录用户信息
用户登录与否的判断标准是 token 是否存在，token 存在全局共享数据的 store里。（辅助函数的使用）
4. 用户退出
- 给退出按钮注册点击事件
- 退出处理
注意点：
-
dialog 组件的使用，由于在全局导入所有组件，所以可以通过 this.$dialog 直接调用（字母d小写）， 手动按需引入组件方式调用如下：
-
退出之后将 sotre 中共享的值 user 设置为null，清除浏览器缓存，即将 token 和 refresh_token 清除。在 store 中先设置了共享的 user 的值，之后再将 user 的值存入缓存，把 null 传递过去的时候，共享的 user 被设置为了null，之后缓存的值也被设置为了null。
5. 展示登录用户信息
步骤：
① 封装接口
- 在 api/my.js 中添加封装数据接口，之后导出。
- 注意此类接口是需要授权才能使用的接口，所以需要提供 token 才有访问权限，后端接口要求我们将 token 放到请求头 Header 中并以下面的格式发送。headers配置对象中的 'Content-Type': 'application/json' 可以省略不写。
- Authorization属性值固定写法：Bearer + 空格 + token
- 在 api/index.js 导入接口添加 API 后缀，再导出该接口。
② 请求获取数据
- 在 views/my/index.vue 的 methods 里封装该方法，之后在组件被创建（created）的时候调用该方法
③ 模板绑定
6. 优化设置 Token（添加请求拦截器）
项目中的接口除了登录之外大多数都需要提供 token 才有访问权限。
通过接口文档可以看到，后端接口要求我们将 token 放到请求头 Header 中并以下面的格式发送。
字段名称：Authorization
字段值：Bearer + 空格 + token，注意 Bearer 和 token 之间有一个空格。
方式一：在每次请求的时候手动添加（麻烦）。
方式二：使用请求拦截器统一添加（推荐，更方便）。
- sequenceDiagram
- participant A as 发起请求
- participant B as 请求拦截器
- participant C as 服务端
- A-->>B: http://xxx
- Note right of B: 设置 token
- B->>C: 请求发出
查看 axios 官网关于请求拦截器的用法(拦截器 | Axios中文文档 | Axios中文网)
粘贴代码在 src/utils/request.js 中添加拦截器统一设置 token：
