头条移动端

目录

一、全局引入vant组件

二、移动适配

1.使用 （lib-flexible )动态设置 REM 基准值（html 标签的字体大小）

①安装

②在 main.js 中加载执行该模块

2.使用 postcss-pxtorem (opens new window)将 px 转为 rem

②设置设计稿尺寸

三、路由配置

四、底部导航栏-tabbar

1.在tabbar中添加自定义字体图标

五、登录页

 1.头部-navbar

 2.登录表单

3.连接登录接口

4.登录成功、失败提示

 5.登录表单验证

 6.发送验证码

①样式铺设

②发送验证码倒计时

 ③验证码按钮和倒计时按钮切换逻辑

 ④连接接口发送验证码

 ⑤存储用户token

六、封装存储和取数据的方法

1.封装存储数据方法

 2.封装取数据方法​编辑

七、我的页面

1、头部铺设

 2.收藏、历史、消息通知

3.获取个人信息并渲染

 4.将请求头token写入请求拦截器中

 5.token过期处理

 6.退出登录

 ① 底部导航状态

 ②退出登录确认弹框​编辑

 ③退出登录按钮​编辑

八、首页

 1.tab栏

2.文章列表组件复用 

3.单个文章组件复用

4.渲染文章列表

①渲染列表框架

②渲染列表数据

 5.tab栏粘性布局(将tab栏固定在页上)

 6.文章列表数据上拉加载

 上拉加载所有文章数据情况处理​编辑

 7.文章列表数据下拉刷新

  ①上拉加载框架

 ②上拉加载数据​编辑

8.频道编辑按钮 

9.弹出层

10.频道编辑

 ①获取用户频道​编辑

 ②选中的频道高亮

 ③获取所有频道数据

 ④推荐频道数据 

 ⑤点击频道，首页显示对应频道内容 

⑥我的频道删除，推荐频道自动增加

 ⑦ 删除索引不关闭弹框，并且处理删除索引导致的频道高亮变化问题

 ⑧频道添加

 ⑨未登录状态，删除频道数据缓存

 ⑩处理首页tab栏频道数据---数据删除（登录/未登录）

 ⑩添加频道数据

⑩登录状态下，新增频道 

九.搜索页面

1.搜索路由

 2.头部搜索布局

3.搜索结果、搜索历史、搜索建议组件展示

 4.搜索建议接口

 5.关键词高亮

 7.输入关键词监听，添加防抖

 8.搜索结果

①输入关键词传值

 ②引入搜索结果列表组件——>van-list

 ③搜索结果数据接口请求

④处理请求搜索结果失败的提示

⑤获取搜索历史数据

十、文章详情

1.配置路由

 2.请求数据

 3.请求数据异常情况处理

4.富文本编辑器

 5.文章图片预览

①图片预览组件

②获取所有图片​编辑

 ③图片预览​编辑

6.关注作者

①页面渲染

 ②添加多次点击的节流阀

 ③组件复用

7.收藏功能

①页面渲染

8.点赞文章

​编辑

 9.文章评论

①评论接口

 ②获取评论数据

 ③处理评论列表数据​编辑

 ④处理评论总数打开显示

 10.渲染评论数据

11.评论点赞

①接口获取

 ②数据渲染

12.发布文章评论

①评论回复组件

 ②发布文章评论

 ③关闭弹框、增加评论总数

 ④评论内容置顶--兄弟组件传值

13.评论回复

①组件使用

 ②打开评论回复组件弹框

③获取当前要回复的评论数据

④评论条数

⑤设置写评论弹框

 ⑥回复评论置顶

十一.编辑用户资料

1.配置路由

 2.渲染用户资料数据

3.设置昵称

①昵称弹框

 ②修改昵称

4.设置性别

①弹框设置

 ②设置初始性别

 ③设置性别--使用.sync修饰符

5.修改生日

①准备弹框

②修改生日

 6.修改头像

①点击选择头像文件

 ②获取选择的文件信息 

③文件信息弹框

 ④导入裁剪框---cropperjs

⑤更新头像

十二、优化需要登录才可进入的界面

1.绘制界面

2.优化思路

①思路一

​编辑 ②思路二

​编辑3.我的历史返回上一页

 4.处理token过期 

十三、项目打包

---

接口：黑马头条移动端

一、全局引入vant组件

二、移动适配

1.使用 （lib-flexible )动态设置 REM 基准值（html 标签的字体大小）

①安装

yarn add amfe-flexible

②在 main.js 中加载执行该模块

import "amfe-flexible";

2.使用 postcss-pxtorem (opens new window)将 px 转为 rem

①安装

yarn add yarn add postcss-pxtorem -D

②设置设计稿尺寸

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

三、路由配置

四、底部导航栏-tabbar

1.在tabbar中添加自定义字体图标

五、登录页

 1.头部-navbar

<template>
  <div class="login-container">
    <van-nav-bar title="登录" left-arrow @click-left="$router.go(-1)" />
  </div>
</template>

给头部添加样式

添加scoped后，没有哈希值的类，配置的样式无效，:deep()可以渗透样式

<style lang="less" scoped>
.login-container {
  .van-nav-bar {
    background-color: #3296fa;
    :deep(.van-icon) {
      color: #fff;
    }
  }
  :deep(.van-nav-bar__title) {
    color: #fff;
  }
}
</style>

 2.登录表单

3.连接登录接口

4.登录成功、失败提示

 5.登录表单验证

 6.发送验证码

①样式铺设

②发送验证码倒计时

 ③验证码按钮和倒计时按钮切换逻辑

 

 ④连接接口发送验证码

 

 ⑤存储用户token

 

六、封装存储和取数据的方法

1.封装存储数据方法

 2.封装取数据方法

七、我的页面

1、头部铺设

 2.收藏、历史、消息通知

3.获取个人信息并渲染

 4.将请求头token写入请求拦截器中

 5.token过期处理

 6.退出登录

 ① 底部导航状态

 ②退出登录确认弹框

 ③退出登录按钮

八、首页

 1.tab栏

2.文章列表组件复用 

3.单个文章组件复用

4.渲染文章列表

①渲染列表框架

②渲染列表数据

计算指定事件与当前事件的间隔年

 5.tab栏粘性布局(将tab栏固定在页上)

 6.文章列表数据上拉加载

 

 上拉加载所有文章数据情况处理

 7.文章列表数据下拉刷新

  ①上拉加载框架

 ②上拉加载数据

 

8.频道编辑按钮 

9.弹出层

10.频道编辑

 ①获取用户频道

 ②选中的频道高亮

 ③获取所有频道数据

 ④推荐频道数据 

方法一：

方法二：

 ⑤点击频道，首页显示对应频道内容 

⑥我的频道删除，推荐频道自动增加

 ⑦ 删除索引不关闭弹框，并且处理删除索引导致的频道高亮变化问题

 ⑧频道添加

 ⑨未登录状态，删除频道数据缓存

 ⑩处理首页tab栏频道数据---数据删除（登录/未登录）

 ⑩添加频道数据

⑩登录状态下，新增频道 

九.搜索页面

1.搜索路由

 2.头部搜索布局

3.搜索结果、搜索历史、搜索建议组件展示

 4.搜索建议接口

 5.关键词高亮

 6.处理接口异常返回null的情况

 7.输入关键词监听，添加防抖

自定义防抖

 

 8.搜索结果

①输入关键词传值

 ②引入搜索结果列表组件——>van-list

 ③搜索结果数据接口请求

④处理请求搜索结果失败的提示

⑤获取搜索历史数据

十、文章详情

1.配置路由

 2.请求数据

 3.请求数据异常情况处理

4.富文本编辑器

 5.文章图片预览

①图片预览组件

②获取所有图片

 ③图片预览

6.关注作者

①页面渲染

 ②添加多次点击的节流阀

 ③组件复用

 

 

④子父组件传参

利用v-model简写

7.收藏功能

①页面渲染

8.点赞文章

①页面渲染

 9.文章评论

①评论接口

 ②获取评论数据

 ③处理评论列表数据

 ④处理评论总数打开显示

关闭v-list位置监听 、初始化时调用获取评论列表数据

 10.渲染评论数据

11.评论点赞

①接口获取

 ②数据渲染

12.发布文章评论

①评论回复组件

 ②发布文章评论

 ③关闭弹框、增加评论总数

 ④评论内容置顶--兄弟组件传值

子--父

 通过this.$refs.组件    获取兄弟组件实例

13.评论回复

①组件使用

 ②打开评论回复组件弹框

③获取当前要回复的评论数据

④评论条数

⑤设置写评论弹框

 ⑥回复评论置顶

十一.编辑用户资料

1.配置路由

 2.渲染用户资料数据

3.设置昵称

①昵称弹框

 ②修改昵称

4.设置性别

①弹框设置

 ②设置初始性别

 ③设置性别--使用.sync修饰符

5.修改生日

①准备弹框

②修改生日

 6.修改头像

①点击选择头像文件

 ②获取选择的文件信息 

③文件信息弹框

 

 ④导入裁剪框---cropperjs

⑤更新头像

十二、优化需要登录才可进入的界面

1.绘制界面

2.优化思路

①思路一

 ②思路二

3.我的历史返回上一页

使用push跳转会有历史记录，返回到登录界面

使用replace没有历史记录问题

 4.处理token过期 

十三、项目打包