头条项目day-02：

获取表单数据，并进行注册登录：

使用vant组件插入表单格式，根据vant文档进行操作
1. 获取表单：
2. 表单验证：
表单以及验证码的规则和格式验证，为必填项，不能为空，使用正则表达式进行设置长度以及规则。

增加验证规则对象
mobile: [{
          required: true,
          message: '手机号不能为空'
        }, {
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机号格式错误'
        }],
        code: [{
          required: true,
          message: '验证码不能为空'
        }, {
          pattern: /^\d{6}$/,
          message: '验证码格式错误'
        }]

给标签绑定验证规则：
v-bind进行动态绑定，拿到data里的变量。

验证码处理：
使用vant组件，用插槽给表单内加一个发送验证码的按钮，并给属性native-type设置为button，form表单添加ref属性。
1. 校验手机号
使用this.$refs来获取表单信息
设置：validate    验证表单，支持传入 name 来验证单个或部分表单项。
验证通过显示倒计时。
2. 倒计时
vant组件---倒计时，可以定制倒计时格式
<van-count-down :time="1000 * 10"  format="ss s" @finishi="isCountDownShow = false"/>
用v-if和v-else 控制显示和隐藏
失败不会显示
this.isCountDownShow = true
倒计时结束让按钮显示出来

3. 发送验证码
封装请求api/user.js
url: `/v1_0/sms/codes/${mobile}`,
路径模板字符串进行拼接携带参数

引入求情

处理用户的Token值：
Token是用户登录成功之后服务端返回的一个身份令牌
访问需要授权的API接口
校验页面的访问权限

推荐使用vuex容器

登录成功之后，将token存储到vuex容器中，为了持久化，还需要把token放到本地存储。
const TOKEN_KEY = 'TOUTIAO_KEY'
state:{
//  user:null
 user:JSON.parse(window.localStorage.getItem(TOKEN_KEY))
}
mutations:{
setUser(state,data) {
state.user = data
window.localStorage.setItem(TOKEN_KEY,JSON.stringify(state.user))
}
}

在登录成功的地方引入
修改结构赋值 const  { data } = await ...
this.$store.setUser(data.data)
或
...mapMutations(['setUser'])

this.setUser(res.data)

封装本地存储模块src/utils/storage.js

获取数据export const getItem = key => {
const data = window.localStorage.getItem(key)
try {
    return JSON.parse(data);
  } catch (error) {
    return data;
  }
}
存储数据export const setItem = (key,value) => {
if (typeof value === "object") {
    value = JSON.stringify(value);
  }
  window.localStorage.setItem(key, value);
}
删除数据export const removeItem = key => {
 window.localStorage.removeItem(key);
}

Token 过期的问题
token： 访问令牌， 有效期2个小时
refresh_token： 刷新令牌， 有效期14天

使用refresh_token解决token过期

个人中心页铺设：
布置路由：
父路由：一个空页面，包含一个 tabbar，中间留子路由出口
子路由：- 首页- 问答- 视频- 我的

创建src/view/layout/index.vue
创建src/view/home/index.vue
创建src/view/qa/index.vue
创建src/view/video/index.vue
创建src/view/my/index.vue

铺设每个页面
router/index.js 配置响应路径
layout/index.vue文件内部引入vant --- tabbar 铺设底部导航，并用插槽引入标签。

铺设‘ 我的 ’页面：
设置背景图，布局内部模块，引入vant组件库进行辅助铺设页面。
部分需要绑定点击事件进行页面跳转。跳转到登录页进行登录。
已登录页面和未登录页面进行显示隐藏设置，v-if，v-else。

处理页面显示状态：
通过仓库中封装的user是否存在信息来判断是否已登录，从而决定页面呈现不同模板内容。
1. 导入辅助函数
import { mapState } from 'vuex'
2. 将user映射为当前组件的计算属性
computed: {
    ...mapState(['user'])
},
3. 根据user判断不同的状态
- 未登录，展示登录按钮
- 已登录，展示登录用户信息