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

最新推荐文章于 2025-03-31 17:51:24 发布

原创

最新推荐文章于 2025-03-31 17:51:24 发布 · 490 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #html5 #webpack #移动端

本文深入探讨了前端开发中的关键技术和实践，包括响应式设计、JWT鉴权、路由守卫、axios请求管理、组件间通信及递归组件的使用，同时介绍了如何利用Vant UI提升开发效率。

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

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:

最低0.47元/天解锁文章