仿今日头条项目—

1.TabBar处理

通过分析页面，我们可以看到，首页、问答、视频、我的都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理

父路由：一个空页面，包含一个 tabbar，中间留子路由出口
子路由：首页、问答、视频、我的

1.创建 tabbar 组件并配置路由

src/views/layout/index.vue:

<template><div class="layout-container"><!-- 子路由出口 --><router-view /><!-- /子路由出口 --><!-- 标签导航栏 --><!--route: 开启路由模式--><van-tabbar class="layout-tabbar" route><van-tabbar-item to="/"><i slot="icon" class="toutiao toutiao-shouye"></i><span class="text">首页</span></van-tabbar-item><van-tabbar-item to="/qa"><i slot="icon" class="toutiao toutiao-wenda"></i><span class="text">问答</span></van-tabbar-item><van-tabbar-item to="/video"><i slot="icon" class="toutiao toutiao-shipin"></i><span class="text">视频</span></van-tabbar-item><van-tabbar-item to="/my"><i slot="icon" class="toutiao toutiao-wode"></i><span class="text">我的</span></van-tabbar-item></van-tabbar><!-- /标签导航栏 --></div>
</template><script>
export default {name: 'LayoutIndex',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {}
}
</script><style scoped lang="less">
.layout-container {.layout-tabbar {i.toutiao {font-size: 40px;}span.text {font-size: 20px;}}
}
</style>

2、然后将 layout 组件配置到一级路由

router/index.js:

{path: '/',component: () => import('@/views/layout')
}

3.分别创建首页、问答、视频、我的页面组件

4.将四个主页面配置为 tab-bar 的子路由

{path: '/',name: 'tab-bar',component: () => import('@/views/tab-bar'),children: [{path: '', // 默认子路由name: 'home',component: () => import('@/views/home')},{path: 'qa',name: 'qa',component: () => import('@/views/qa')},{path: 'video',name: 'video',component: () => import('@/views/video')},{path: 'my',name: 'my',component: () => import('@/views/my')}]
}

2.页面布局 ——顶部未登录

<template><div class="my-container"><div class="header"><imgclass="mobile-img"src="~@/assets/mobile.png"@click="$router.push('/login')"></div><div class="grid-nav"></div><van-cell title="消息通知" is-link url="" /><van-cell title="实名认证" is-link url="" /><van-cell title="用户反馈" is-link url="" /><van-cell title="小智同学" is-link url="" /><van-cell title="系统设置" is-link url="" /></div>
</template><script>
export default {name: 'MyIndex',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {}
}
</script><style scoped lang="less">
.my-container {> .header {height: 361px;background: url("~@/assets/banner.png") no-repeat;background-size: cover;display: flex;justify-content: center;align-items: center;.mobile-img {width: 132px;height: 132px;}}
}
</style>

@click="$router.push('/login')" 点击跳转login界面

@click="$router.back()" 点击返回上一状态

在login界面设置返回按钮，回到上一状态：

    <van-nav-bar class="page-nav-bar" title="登录"><van-icon slot="left" name="cross" @click="$router.back()" /></van-nav-bar>

3.页面布局——顶部已登录状态

1.样式：

  .user-info {.base-info {height: 231px;padding: 76px 32px 23px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;.left {display: flex;align-items: center;.avatar {width: 132px;height: 132px;border: 4px solid #fff;margin-right: 23px;}.name {font-size: 30px;color: #fff;}}}.data-stats {display: flex;.data-item {height: 130px;flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;.count {font-size: 36px;}.text {font-size: 23px;}}}}

2.布局：

<div class="header user-info"><div class="base-info"><div class="left"><van-imageroundfit="cover"class="avatar"src="https://img01.yzcdn.cn/vant/cat.jpeg"/><span class="name">今日头条号</span></div><div class="right"><van-button size="mini" round>编辑资料</van-button></div></div><div class="data-stats"><div class="data-item"><span class="count">10</span><span class="text">头条</span></div><div class="data-item"><span class="count">10</span><span class="text">关注</span></div><div class="data-item"><span class="count">10</span><span class="text">粉丝</span></div><div class="data-item"><span class="count">10</span><span class="text">获赞</span></div></div></div>

4.页面布局——宫格导航

1.样式：

  .grid-nav {.grid-item {height: 141px;i.iconfont {font-size: 45px;}.icon-shoucang {color: #eb5253;}.icon-lishi {color: #ff9d1d;}span.text {font-size: 28px;}}}

2.布局：

    <van-grid class="grid-nav" :column-num="2" clickable><van-grid-item class="grid-item"><i slot="icon" class="iconfont icon-shoucang"></i><span slot="text" class="text">收藏</span></van-grid-item><van-grid-item class="grid-item"><i slot="icon" class="iconfont icon-lishi"></i><span slot="text" class="text">历史</span></van-grid-item></van-grid>

5.样式布局——其他

6.处理页面显示状态

- 未登录，展示登录按钮
- 已登录，展示登录用户信息

<!-- 已登录：用户信息 -->
<div v-if="$store.state.user" class="user-info-wrap">...
</div>
<!-- /已登录：用户信息 --><!-- 未登录 -->
<div v-else class="not-login" @click="$router.push('/login')">...
</div>
<!-- /未登录 --><!-- 退出 -->
<van-cell-group v-if="$store.state.user">...
</van-cell-group>
<!-- /退出 --><script>
import { mapState } from 'vuex'
export default {name: 'MyIndex',computed: {...mapState(['user'])}
}
</script>

底部导航栏在登录时显示我的，未登录时显示未登录

layout/index.vue：

<van-tabbar-item to="/my"><i slot="icon" class="iconfont icon-wode"></i><span class="text">{{$store.state.user ? '我的' : '未登录'}}
</span></van-tabbar-item>

登录界面登录成功跳转回原来页面：

      // 3.提交表单请求登录try {const { data } = await login(this.user)console.log('登录成功')this.$store.commit('setUser', data.data)this.$toast.success('登录成功')//登录成功跳转回原来页面this.$router.back()//back方式不严谨} catch (err) {if (err.response.status === 400) {this.$toast.fail('手机号或验证码错误')} else {//   console.log('登录失败,请稍后重试', err)this.$toast.fail('登录失败,请稍后重试')}}

7. 用户退出

1、给退出按钮注册点击事件

2、退出处理

在组件中需要使用 this.$dialog 来调用弹框组件

onLogout () {// 退出提示// 在组件中需要使用 this.$dialog 来调用弹框组件this.$dialog.confirm({title: '确认退出吗？'}).then(() => {// on confirm// 确认退出：清除登录状态（容器中的 user + 本地存储中的 user）this.$store.commit('setUser', null)}).catch(() => {// on cancelconsole.log('取消执行这里')})
}

8.展示登录用户信息

1.在 api/user.js`中添加封装数据接口

import store from '@/store'/*** 获取用户自己的信息*/
export const getUserInfo = () => {return request({method: 'GET',url: '/app/v1_0/user',// 发送请求头数据headers: {// 注意：该接口需要授权才能访问//       token的数据格式：Bearer token数据，注意 Bearer 后面有个空格Authorization: `Bearer ${store.state.user.token}`}})
}

2.在 views/my/index.vue请求加载数据

import { getUserInfo } from '@/api/user'export default {name: 'MyPage',components: {},props: {},data () {return {userInfo: {} // 用户信息}},computed: {},watch: {},created () {// 初始化的时候，如果用户登录了，我才请求获取当前登录用户的信息if (this.$store.state.user) {this.loadUser()}},mounted () {},methods: {async loadUser () {try {const { data } = await getUserInfo()this.user = data.data} catch (err) {console.log(err)this.$toast('获取数据失败')}}}
}

3、模板绑定

    <!-- 已登录 --><div v-if="user" class="header user-info"><div class="base-info"><div class="left"><van-image round fit="cover" class="avatar" :src="userInfo.photo" /><span class="name">{{ userInfo.name }}</span></div><div class="right"><van-button size="mini" round>编辑资料</van-button></div></div><div class="data-stats"><div class="data-item"><span class="count">{{ userInfo.art_count }}</span><span class="text">头条</span></div><div class="data-item"><span class="count">{{ userInfo.follow_count }}</span><span class="text">关注</span></div><div class="data-item"><span class="count">{{ userInfo.fans_count }}</span><span class="text">粉丝</span></div><div class="data-item"><span class="count">{{ userInfo.like_count }}</span><span class="text">获赞</span></div></div></div><!-- 已登录 -->

9.优化设置 Token

项目中的接口除了登录之外大多数都需要提供 token 才有访问权限。

使用请求拦截器统一添加（推荐，更方便）

在 `src/utils/request.js` 中添加拦截器统一设置 token：

/*** 请求模块*/
import axios from 'axios'
import store from '@/store'const request = axios.create({baseURL: 'http://ttapi.research.itcast.cn/' // 接口的基准路径
})// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {// Do something before request is sent// config ：本次请求的配置对象// config 里面有一个属性：headersconst { user } = store.stateif (user && user.token) {config.headers.Authorization = `Bearer ${user.token}`}return config
}, function (error) {// Do something with request errorreturn Promise.reject(error)
})// 响应拦截器export default request