新闻移动端练习知识点记录

目录

1.部分页面效果

2.环境

3.本项目遇到的知识点

3.1.长度尺寸单位vw

3.2 token鉴权

 3.3.个人中心

  3.4.路由守卫

3.5.axios部分设置 

 3.6.css穿透scoped修改子组件样式

  3.7.video标签使用 

 3.8.父组件中子组件标签上添加点击事件

  3.9.组件递归嵌套 

  3.10.vantUI使用（非按需引入）

---

1.部分页面效果

登录

首页

 文章详情

视频详情

 

2.环境

win7+vue.js+h5+vantUI

 

3.本项目遇到的知识点

3.1.长度尺寸单位vw

 使用vw实现页面尺寸适配

1vw 相当于1%的屏幕宽度

1vh 相当于1%的屏幕高度

如果用vw就永远只用宽作为标准，那么就可以指定所有的相对尺寸，因为vw有一个固定的参照物（宽度）

元素像素 / 设计稿宽度 * 100 = 以vw 为单位的长度数据

可以利用vscode插件px-to-vw自动转换px为vw,输入像素按alt+z即可转换

 

3.2 token鉴权

token和用户id放入本地存储，发送请求是在请求头传入

                       // 本地储存
                    localStorage.setItem('token',res.data.data.token);
                    localStorage.setItem('userId',res.data.data.user.id);

 

//headers 请求头中带上 ( JWT标准 json web token)
this.$axios({
    url,
    method,
    headers: {
        Authorization: "Bearer " + localStorage.getItem('token')
    }
}).then(res => {
    console.log(res.data);
    
})

  

 3.3.个人中心

 切换class

 通过判断性别来切换不同样式class

<i class="iconfont" :class="user.gender == 0 ? 'iconxingbienv col_pink':'iconxingbienan col_blue'" ></i>

<span :class="{heightlight:!obj.has_follow}" @click="handleFollow">{
  
  {obj.has_follow?'已关注':'关注'}}</span>

.heightlight{
     color:#fff !important;
     background-color: #ffc0cb !important;
}

 

 切换页面

$router.push()把路由添加到最后一位 

@click="$router.push({name:'editInfo'})"

 $router.replace()把路由替换到最后一位

this.$router.replace('/login');

 

  3.4.路由守卫

  路由守卫可以理解为页面跳转之前的拦截手段，可以在拦截时判断验证用户信息

 全局的前置路由守卫

•  to 目标路由
•  from 来源路由
•  next 放行函数 

这里通过前置路由守卫来对页面的跳转进行拦截，当判断需要鉴权的页面没有token时，则跳转到登录页，有token则放行 

// 路由守卫
// 全局前置路由守卫，会在所有路由发生变化之前进行拦截
// 调用 router 的 beforeEach 方法
// router.beforeEach() 拦截所有跳转，跳转之前都会执行一个函数，我们要作为参数传进去
router.beforeEach((to,from,next)=>{
    // //写法一 直接判断 to.name
    // if (to.name == 'personalPage' || to.name == 'editPage') {

    // // 另外一种写法，是将需要校验的路由封装在一个数组中
    // var pageNeedAuth = [
    //   'editPage',
    //   'personalPage'
    // ]
    // // 如果在这个数组中能够找到 to.name 就证明需要校验
    // if(pageNeedAuth.indexOf(to.name) >= 0) {
    // 第三种判断方式， 直接在路由配置时， 添加 meta 数据
    // 就可以在这里进行判断
    if(to.meta.auth){
        const token = localStorage.getItem('token');
        if(token){
          next();
        }else{
          router.push('/login')
        }
    }else{
        next();
    }
});

 

  meta  在routes中自定义数据

  这里在路由中使用meta来设置需要鉴权的页面，辅助路由守卫鉴权

const routes = [
    {path:'/login',component:Login},
    {path:'/register',component:Register},
    {path:'/',component:index},
    {name:'myFollow',path:'/myFollow',component:MyFollow,meta:{auth:true}},
    {name:'personalCenter',path:'/personalCenter',component:PersonalCenter,meta:{auth:true}},
    {name:'editInfo',path:'/editInfo',component:EditInfo,meta:{auth:true}},
    {name:'channel',path:'/channel',component:Channel},
    {name:'search',path:'/search',component:Search},
    {name:'myCollection',path:'/myCollection',component:myCollection},
    {name:'newsDetail',path:'/newsDetail/:id',component:NewsDetail},
    {name:'myPost',path:'/myPost',component:MyPost},
    {name:'funnyComment',path:'/funnyComment/:id',component:FunnyComment}
  ]

 

3.5.axios部分设置 

3.5.1.axios默认基准路径 

提取请求的统一的服务器域名的部分进行抽离设置

在main.js中设置axios.defaults.baseURL

axios.defaults.baseURL = 'http://127.0.0.1: