前端新闻头条小程序——个人中心

肉肉爱吃饺子
131 阅读2分钟

一、TabBar处理

1、在view文件创建一个layout文件 来布局页面

<template>

  <div class="layout-container">组件布局</div>
    </template>

<script>
export default {
  name: 'LayoutIndex',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}

}
</script>

<style  scoped lang="less">

</style>

2、在路由配置页面配置路径

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

3、添加底部标签栏

在vant文档中找到tarbar标签栏选择想要的样式进行应用

<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>
tips：slot插槽来显示自己的icon
在样式调整大小
.layout-container {
.layout-tabbar {
i.toutiao {
font-size: 40px;
}
span.text {
font-size: 20px;
}
}
}

4、配置默认子路由

记得把父级路由的name去掉，否则会报错哦
{
path: '/',
// name: 'layout',
component: () => import('@/views/layout'),
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')
}
]
}
]

这样，点击组件就可以看到对应的页面了

二、个人中心的登录状态设置

$router.push（）可以点击跳转

未登录的用户

1、先定义一个类名

<div class="my-container">
    <div class="top">
    </div>
  </div>

2、添加头部样式背景

.my-container .top{
    height: 361px;
    background-image: url(../../assets/banner.png);
    background-size: cover;
  }
 <div class="my-container">
    <div class="top not-login">
      <div class="login-btn" @click="$router.push(&#x27;/login&#x27;)">
        <img class="img-mobile" src="转存失败，建议直接上传图片文件 ../../assets/mobile.png" alt="转存失败，建议直接上传图片文件">
        <span class="text">登录/注册</span>
      </div>
    </div>
  </div>

4、NavBar组件为登录界面添加×的退出按钮 来实现登录与不登录的切换

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

5、设置用户的头像网名等个人信息

已经登录的用户

 <div class="top user">
      <div class="base-info">
        <div class="left">
          <van-image
          class="image-touxiang"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          round
        />
        <span class="id-text">XX</span>
        </div>
        <div class="right">
          <van-button size="small" type="default" round="">编辑信息</van-button>
        </div>
      </div>

6、设置头像下方个人的浏览头条、关注、粉丝数、获赞数等信息

    <div class="data-status">
    <div class="data-item">
      <span class="count">8</span>
      <span class="text">头条</span>
    </div>
    <div class="data-item">
      <span class="count">66</span>
      <span class="text">关注</span>
    </div>
    <div class="data-item">
      <span class="count">88</span>
      <span class="text">粉丝</span>
    </div>
    <div class="data-item">
      <span class="count">88</span>
      <span class="text">获赞</span>
  </div>

三、grid窗格导航

1、vant组件库找到对应组件并且应用

2、图标显示用插槽 要在文字区域加上slot="text" 才会显示图标哦

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

四、处理登录状态显示

1、判断现在是否有用户登录 是的话就显示用户页面，否则显示未登录界面

用vuex中的mapState,在组件、界面中使用mapState获取vuex中state的数据，在计算属性中使用来获取用户的登录状态...mapState（['user']）
import { mapState } from 'vuex'
export default {
  name: 'MyIndex',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}

2、用v-if v-else来实现转换

<div class="top user" v-if="user">//已经登录的
<div class="top not-login" v-else >//未登录的 
    别忘记退出按钮也要加上！
       <span v-if="user" style="color: #e05757; ;">退出登录</span></van-button>

3、点击登录页面跳转到用户页面

简单的方法： this.$router.back()

五、显示用户退出

vant中的popup属性，点击弹出提示
<van-cell is-link >消息通知</van-cell>
<van-cell is-link>小智同学</van-cell>
<van-cell  v-if="user"
    class="logout-cell"
    @click="onLogout"
    clickable
    title="退出登录"
    />

调用函数：

methods: {
onLogout () {
  this.$dialog.confirm({
    title: '确认退出吗？'
  }).then(() => {
    console.log('确认退出')
  }).catch(() => {
    console.log('确认取消')
  })
}

}

在确认退出是，情况本地存储的用户信息

 methods: {
onLogout () {
  this.$dialog.confirm({
    title: '确认退出吗？'
  }).then(() => {
    this.$store.commit('setUser', null)
  }).catch(() => {
    console.log('确认取消')
  })
}

}

六、展示用户的信息

1、封装接口

export const getUserInfo = () => {
  return request({
    method: 'GET',
    url: '/v1_0/user',
    headers: {
      Authorization: `Bearer ${store.state.user.token}`
    }
  })
}

2、请求获取数据

引入
import { getUserInfo } from '@/api/user'
先判断用户是否登录了
data () {
    return {
      userInfo: {}
    }
  }
created () {
    // 如果用户登录了，请求加载
    if (this.user) {
      this.loadUserInfo()
    }
  }
成功获取用户的信息
async loadUserInfo () {
  try {
    const { data } = await getUserInfo()
    this.userInfo = data.data
    console.log(data)
  } catch (err) {
    this.$totast('获取数据失败，请稍后重试')
  }
}

3、接口必须授权才可以访问，否则会出现401

headers: {
  Authorization: `Bearer ${store.state.user.token}`
}

七、Token优化

请求拦截器来优化（因为token会在很多场景用到，项目中的接口除了登录之外大多数都需要提供 token 才有访问权限。）

GitHub - axios/axios: Promise based HTTP client for the browser and node.js 找到 Interceptors部分

优化后：

request.interceptors.request.use(function (config) {
  // Do something before request is sent
  // config ：本次请求的配置对象
  // config 里面有一个属性：headers
  // 解构
  const { user } = store.state
  if (user && user.token) {
    config.headers.Authorization = `Bearer ${user.token}`
  }
  // 一定要返回配置对象，不然请求出不去
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})
avatar
文章
阅读
粉丝