黑马头条vue2.0项目实战（三）——个人中心功能的实现

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：