vue项目day03

迪丽热巴_女神
69 阅读7分钟

vue项目day03

页面权限-添加导航守卫
router.beforeEach((to, from ,next)=>{
    let token = localStorage.getItem("75-token")
    // 当用户跳转的页面为“个人中心”且 没有登录的时候 ，跳转到登录页面，否则直接放行
    if(to.path == "/personal" && !token){
        next("/login")
    }else{
        next()
    }
})

优化：添加白名单

// 白名单，所有在白名单中的路径都表示需要登录后才能访问的页面路径
let writeArr = [ "/personal", "/edit_profile" ] 
router.beforeEach((to, from ,next)=>{
    let token = localStorage.getItem("75-token")
    // 当用户跳转的页面为“个人中心”且 没有登录的时候 ，跳转到登录页面，否则直接放行
    // if(to.path == "/personal" && !token || to.path === "/edit_profile"&&!token){
    // 判断到to.path的值在writeArr数组中的时候，说明跳转的目标路由路径必须登录才能访问的。
    if(writeArr.indexOf(to.path) != -1 && !token ){
        next("/login")
    }else{
        next()
    }
})

1653656403356.png

5、个人信息编辑（edit_profile.vue）

1、完成个人信息渲染

用户角度分析：进入页面，就能马上看到个人 信息

程序员角度分析：进入页面，在created中调用接口，请求数据，渲染数据

拆解步骤：

  • 1、封装“用户详情”接口函数 ---- 在个人中心中已经完成了
  • 2、在页面引入接口函数，并在created中调用接口函数，请求并保存数据
  • 3、根据数据渲染即可
2、完成头像修改

用户角度分析：用户点击头像，显示弹窗用于选择图片，选中图片后修改头像。

程序员角度分析：给图片绑定点击事件，然后显示弹窗用于选择图片，用户选中调用接口上传图片，然后修改图片成功。

1、完成个人信息渲染
2、完成头像修改
3、完成昵称修改
3、完成性别修改

拆分步骤：

  • 1、实现显示弹窗，用于选择图片
  • 2、实现修改头像功能
    • 1、在成功获取图片对象的函数中，调换用“文件上传”接口，获取图片在线地址
      • 封装“文件上传” 接口函数
      • 在页面中引入接口函数，并在成功获取图片对象的函数中调用，并保存图片在线地址
    • 2、在成功获取到图片在线地址的地方，调用“编辑用户信息”接口，实现修改头像
      • 封装“编辑用户信息”接口函数
      • 在引入接口函数，并在在成功获取到图片在线地址的地方调用函数，实现修改头像

1653567102662.png

3、完成昵称修改

用户角度分析：点击昵称单元格的时候，显示编辑昵称弹窗，用户输入新的昵称，点击确认按钮，进行修改。

程序员角度分析：给单元格绑定点击事件，并在事件处理函数中实现“编辑昵称”弹窗的显示，收集用户输入的新昵称，给确认按钮绑定点击事件，调用修改昵称接口，实现修改功能。

拆解步骤：

  • 1、给单元格绑定点击事件，并声明事件处理函数

  • 2、准备好“编辑昵称”弹窗组件

  • 3、在点击事件处理函数中控制弹窗的显示

  • 4、收集昵称，声明变量双向绑定弹窗中的输入框

  • 5、给确认按钮绑定点击事件，并声明事件处理函数

  • 6、在事件处理函数中直接调用“编辑用户信息”接口，实现修改昵称。

  • 7、成功关闭弹窗，失败提示用户。

  • 8、优化：当用户输入的昵称为空的时候，且用户点击了确认按钮，此时阻止弹窗关闭。

    • 如何实现阻止弹窗关闭呢？答：看文档组件有没有提供这样的方法来阻止弹窗关闭

1653656742980.png

1653656780260.png

1653656817587.png

4、完成密码修改

用户角度分析：点击密码单元格，显示编辑密码弹窗，然后输入原密码和新密码，点击确认按钮实现修改。

程序员角度分析：给单元格添加点击事件，并声明事件处理函数，在事件处理函数中控制编辑密码弹窗的显示，收集用户输入的新旧密码，给确认按钮绑定事件，并在事件处理函数中调用接口实现修改密码。

拆解步骤：

  • 1、给单元格绑定点击事件，声明事件处理函数

  • 2、准备好“编辑密码”弹窗

  • 3、在事件处理函数中控制 "编辑密码弹窗"的显示

  • 4、收集新旧密码，声明变量，双向绑定输入框

  • 5、给“确认”按钮绑定confirm事件，并声明事件处理函数

  • 7、在事件处理函数中调用接口实现修改密码

    • 在调用接口前要添加判断
      • 判断一：原密码输入是否正确
      • 判断二：新密码和原密码不能相同
      • 判断三：新密码不能为空
    • 条件判断都通过后，再调用接口实现修改密码

  • 8、修改成功关闭弹窗，更新原密码，失败提示用户

  • 9、优化：当用户输入的内容不符合要求的时候，且点击了确认按钮，需要阻止弹窗关闭。

1653656841004.png

1653656948871.png

1653656983915.png

1653657020712.png

5、完成性别修改

用户角度分析：点击单元格，弹出性别框，点击选项实现修改性别功能。

程序员角度分析：给单元格绑定点击事件，声明事件处理函数，显示性别修改框，获取用户点击的性别，调用接口实现修改。

拆解步骤：

  • 1、给单元格绑定点击事件，声明事件处理函数
  • 2、准备好性别框组件
  • 3、在事件处理函数中控制性别框的显示
  • 4、给性别框组件绑定点击事件，并在事件处理函数中获取点击的性别
  • 5、调用接口实现修改

1653657054842.png

6、头部：点击左箭头回到上一页，点击右侧图标回到首页

1653657090097.png

6、首页(index.vue)

1、创建组件

2、配置路由

3、布局

  • 头部：使用navBar组件完成
  • 栏目列表：使用tab组件完成
  • 新闻列表
    • 封装src/components/newsItem.vue组件，结构和样式从上课资料中获取，然后再首页中引入注册使用
    • 有3种结构，并且一篇文只可能是其中的一种结构。
    • 那么，数据中肯定存在某个条件用来判断文章属于哪种结构。

1653657157946.png

<style lang="less" scoped>
/deep/.van-nav-bar{
    background: red;
    .iconnew{
        font-size: 50px;
        color: #fff;
    }
    .van-nav-bar__title{
        width: 60%;
        .search-box{
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 20px;
            background: rgba(255,255,255, 0.3);
            span{
                color: #fff;
            }
        }
    }


    .van-icon{
        color: #fff;
    }
}
</style>

1653657251299.png

4、实现功能

1、栏目列表渲染
2、文章列表渲染
3、下拉刷新
4、上拉加载
5、完成点击栏目，切换不同新闻列表数据
1、栏目列表渲染

用户角度分析：点击 登录，进入首页，直接就可以看到栏目列表数据

程序员角度分析：在created钩子函数中，发送请求，获取数据，然后根据数据渲染列表

拆解步骤：

  • 1、封装获取栏目列表的接口函数
  • 2、首页引入接口函数，把并在created中调用接口，请求并保存数据
  • 3、根据数据渲染

1653657282139.png

2、新闻(文章)列表渲染

用户角度分析：点击 登录，进入首页，直接就可以看到新闻列表数据

程序员角度分析：在created钩子函数中，发送请求，获取数据，然后根据数据渲染列表

拆解步骤：

  • 1、封装获取新闻列表的接口函数
  • 2、首页引入接口函数，把并在created中调用接口，请求并保存数据
  • 3、根据数据渲染
    • 每一篇文章都需要渲染自己的结构，这个结构如何判断呢？
    • 答：文章详情数据中有相应的属性进行判断
      • 左右结构：type值为1且cover数组长度小于3
      • 视频结构：type值为2
      • 上下结构：type值为1且 cover数组长度大于等于3

1653657331307.png

1653657351802.png

1653657372242.png

1653657394759.png

1653657407222.png

avatar
文章
阅读
粉丝