【博学谷】黑马头条项目实战

前端开发

课程简介

黑马头条这个项目在前端训练里出现频率很高，原因不复杂：它是一个「信息流 + 详情 + 评论 + 个人中心」的典型内容型 App，页面结构、路由组织、接口联调、状态管理这几件事都能在里面跑一遍。GetFromCode 上这份《黑马头条项目实战》适合拿来当对照工程用——先看它怎么切模块，再回到自己项目里改。技术栈与项目形态这套资料围绕 Vue 技术栈展开，…

已有 1 人浏览发布 2026-09-10 更新 2026-09-11

黑马头条这个项目在前端训练里出现频率很高，原因不复杂：它是一个「信息流 + 详情 + 评论 + 个人中心」的典型内容型 App，页面结构、路由组织、接口联调、状态管理这几件事都能在里面跑一遍。GetFromCode 上这份《黑马头条项目实战》适合拿来当对照工程用——先看它怎么切模块，再回到自己项目里改。

技术栈与项目形态

这套资料围绕 Vue 技术栈展开，属于移动端 H5 形态的单页应用。核心依赖大致是 Vue + Vue Router + Vuex + Axios，配合 Vant 这类移动端组件库完成列表、下拉刷新、上拉加载、弹层等交互。样式层面用 Less 或 SCSS 做变量与嵌套管理，rem 或 vw 做移动端适配。

值得注意的是它的数据来源。项目里通常会有一套 Mock 或本地接口服务来提供频道列表、文章流、文章详情、评论、用户登录等数据，这一点对自学很关键：你不必先搭好后端才能跑通前端逻辑，可以先把请求层和数据流理顺，再替换成真实接口。

项目结构怎么切

拿到源码后不要急着从第一行往下读，先看目录划分方式。这类项目一般会按「视图层 / 组件层 / 状态层 / 请求层 / 工具层」拆开：

视图层按路由页面组织，首页、频道、搜索、详情、登录、个人中心各占一块；
公共组件抽离复用，比如文章卡片、加载占位、空状态、导航栏；
请求层统一封装 Axios 实例，集中处理 baseURL、拦截器、token 注入和错误提示；
状态层用 Vuex 管理跨页面共享的数据，比如登录态、频道列表、用户信息；
工具层放适配、时间格式化、本地存储这类与业务无关的函数。

看清楚这五层的关系，再回头看具体页面代码，理解成本会低很多。很多同学看实战项目卡住，不是语法不会，而是没先建立「代码放在哪一层」的心智模型。

值得单独拆出来复用的模块

这个项目里有几块代码的复用价值高于页面本身，建议单独抠出来：

请求封装：拦截器里做 token 携带、401 跳登录、统一错误提示，这套写法可以直接搬到任何中后台或移动端项目；
列表分页逻辑：下拉刷新 + 上拉加载 + 触底判断 + 加载状态，抽成一个组合式函数或 mixin 后，多个列表页共用；
路由守卫：区分需要登录和免登录页面，处理未登录时的重定向与回跳；
频道管理：频道的增删排序、本地持久化、与文章流的联动，是信息流类产品的高频需求；
详情页渲染：富文本或 HTML 内容的展示、图片懒加载、评论区的分页与发布。

把这些模块当作独立的小练习去做，比通读整个项目更有效率。你可以只实现请求封装 + 列表分页两件事，跑通后再往上叠频道和详情。

自学路径建议

给一个可执行的顺序：第一步，先跑起来，确认依赖安装与 Mock 服务正常；第二步，读路由表和请求封装，画出页面跳转与数据流向；第三步，挑首页信息流一条线走通，从发请求到渲染到分页；第四步，做登录与鉴权，理解 token 在请求层和路由层的双重作用；第五步，自己动手改一处功能，比如给文章卡片加收藏按钮，把改动落到状态层和请求层。

过程中建议边看边写注释，把每个文件负责什么记下来。视频或文档只能给你顺序，真正的理解来自你改坏一次再修回来。

适合谁、不适合谁

如果你已经掌握 Vue 基础语法，会用组件和路由，但缺少一个完整项目把知识点串起来，这份资料合适。如果你还没写过组件通信、不理解生命周期，建议先补基础，否则容易变成照着敲代码。

另外，实战项目天然带有版本时效性。看的时候关注它的分层思路和封装手法，具体 API 写法按你当前使用的版本来，不必逐字照搬。

【博学谷】黑马头条项目实战

实战头条项目，掌握核心技能

编辑点评

项目实战，全面覆盖头条项目开发流程，从页面布局到数据交互，提升实战能力。

⭐ 编辑推荐

跟随实战项目，深入学习头条项目开发，掌握前端核心技能。

✨ 课程亮点

✦实战头条项目

✦全面覆盖开发流程

✦提升实战能力

课程目录

098_文章详情_关注作者_取关作者实现.mp4 [101.5 MB]
032_首页_tab导航_粘性布局.mp4 [60.4 MB]
185_解决了不同浏览器内核_滚动条获取和设置问题.mp4 [31.4 MB]
174_知识点_撤销发布的工具包【更多精选‖公众号：CunWorknotes】 .mp4 [8.5 MB]
003_清空欢迎界面.mp4 [17.0 MB]
050_首页_文章列表_网络请求的优化_合并代码【更多精选‖公众号：CunWorknotes】 .mp4 [70.7 MB]
176_知识点_打包后产物介绍.mp4 [54.9 MB]
066_频道管理_筛选数组_算法讲解了优化一遍【更多精选‖公众号：CunWorknotes】 .mp4 [37.6 MB]
005_ESLint在Vscode使用插件_一键修复.mp4 [73.2 MB]
087_搜索结果_列表数据获取【优质资源‖关注：cunWorkNotes 解锁】.mp4 [40.4 MB]
040_首页_文章Item_图片判断和铺设【整理不易‖记得关注：CunWorKNotes】.mp4 [36.1 MB]
068_频道管理_新增频道.mp4 [63.0 MB]
052_反馈面板_二级面板数据切换.mp4 [38.3 MB]
049_首页_文章列表_顶部刷新【资源精选‖更多关注：CunworkNotes】.mp4 [52.8 MB]
015_登录页面_头部导航_vant组件自定义样式_方式2【不易整理‖请关注：CunWorkNoteS】.mp4 [116.0 MB]
028_首页_顶部导航标签铺设【不易整理‖请关注：CunWorkNoteS】.mp4 [87.7 MB]
109_文章评论_显示评论数量【更多精选‖公众号：CunWorknotes】 .mp4 [56.1 MB]
020_登录页面_登录接口调用.mp4 [88.1 MB]
150_优化_刷新token的思路总结.mp4 [44.5 MB]
012_try和catch的使用.mp4 [19.7 MB]
029_首页_顶部导航_右侧图标适配问题【公重号：CunWorkNotes】.mp4 [16.7 MB]
160_优化_登录未遂地址.mp4 [65.3 MB]
030_首页_tab导航_铺设和阅读【整理不易‖记得关注：CunWorKNotes】.mp4 [80.4 MB]
107_文章评论_发布评论_底部安全距离判断使用哦【持续更新‖免费提供：CunworknoteS】.mp4 [48.4 MB]
025_Layout页面_创建和路由配置.mp4 [45.1 MB]
105_文章评论_发布评论_标签和样式_互斥设置【优质资源‖关注：cunWorkNotes 解锁】.mp4 [41.4 MB]
111_文章评论_点击发布_获取评论内容【资源精选‖更多关注：CunworkNotes】.mp4 [75.7 MB]
044_首页_文章列表_加载更多_list组件准备.mp4 [38.6 MB]
055_反馈面板_不感兴趣_功能实现【公重号：CunWorkNotes】.mp4 [111.7 MB]
037_首页_文章列表_数据获取【公重号：CunWorkNotes】.mp4 [76.1 MB]
008_引入Vant组件库_并配置按需加载插件.mp4 [25.0 MB]
122_个人中心_修改头像_点击选择图片.mp4 [56.3 MB]
027_Layout页面_登录跳转到这里【优质资源‖关注：cunWorkNotes 解锁】.mp4 [44.3 MB]
045_首页_文档列表_加载更多_请求下一页数据.mp4 [62.2 MB]
117_分享实现的思路.mp4 [77.4 MB]
159_优化_文章详情_加载中组件使用.mp4 [95.5 MB]
018_登录页面_登录表单_正则校验pattern【更多精选‖公众号：CunWorknotes】 .mp4 [57.3 MB]
057_axios_响应拦截器_统一判断401.mp4 [109.5 MB]
046_首页_文章列表_重复key的问题_list组件初始化判定关闭.mp4 [74.1 MB]
158_优化_文章详情_代码高亮_设置样式.mp4 [21.4 MB]
110_文章评论_滚动效果【更多精选‖公众号：CunWorknotes】 .mp4 [231.4 MB]
153_优化_如果refresh_token也过期怎么办【更多精选‖公众号：CunWorknotes】 .mp4 [43.4 MB]
097_文章详情_数据铺设.mp4 [64.6 MB]
039_首页_文章Item_图片标签位置.mp4 [50.2 MB]
011_接口方法封装.mp4 [32.6 MB]
041_首页_文章Item_时间处理【持续更新‖免费提供：CunworknoteS】.mp4 [52.7 MB]
031_首页_顶部导航_固定定位_tab导航留出顶部内边距.mp4 [85.6 MB]
062_频道管理_ChannelEdit使用.mp4 [32.7 MB]
023_登录页面_优化_登录等待给用户提示.mp4 [77.2 MB]
138_socket.io包使用前后端实现即时通信.mp4 [112.2 MB]
134_个人中心_生日编辑_调用接口.mp4 [61.1 MB]
141_小思同学_socket功能集成聊天【不易整理‖请关注：CunWorkNoteS】.mp4 [101.0 MB]
145_优化_路由懒加载使用_首页打开更快.mp4 [81.2 MB]
168_知识点_大数问题_解决方案.mp4 [141.8 MB]
132_个人中心_生日编辑_日期选择器准备.mp4 [67.4 MB]
137_webSocket的原生介绍_脚手架和前端也有socket链.mp4 [62.7 MB]
131_个人中心_姓名修改_调用接口_回显页面【持续更新‖免费提供：CunworknoteS】.mp4 [12.5 MB]
136_即时通信介绍_什么时候需要使用.mp4 [56.6 MB]
094_文章详情_首页点击文章跳转实现【优质资源‖关注：cunWorkNotes 解锁】.mp4 [32.9 MB]
054_反馈面板_点击遮罩_恢复一级数据【持续更新‖免费提供：CunworknoteS】.mp4 [40.9 MB]
143_小思同学_vuex保存头像地址使用【资源精选‖更多关注：CunworkNotes】.mp4 [67.6 MB]
081_搜索页面_历史记录_铺设.mp4 [16.0 MB]
090_搜索结果_加载更多【优质资源‖关注：cunWorkNotes 解锁】.mp4 [58.4 MB]
166_优化_本地持久化存储方式的封装和替换.mp4 [40.0 MB]
182_项目部署_公司自己服务器上流程.mp4 [106.5 MB]
079_搜索页面_联想菜单_关键字高亮_1_基础使用.mp4 [26.9 MB]
167_优化_封装统一的Notify提示框.mp4 [84.8 MB]
070_频道管理_删除频道.mp4 [89.5 MB]
183_项目部署_买云服务器_买域名【持续更新‖免费提供：CunworknoteS】.mp4 [92.4 MB]
175_知识点_vue【资源精选‖更多关注：CunworkNotes】.mp4 [71.7 MB]
078_搜索页面_联想菜单_清空处理.mp4 [9.0 MB]
086_学生遇到的问题解决.mp4 [24.8 MB]
184_用Hbuilder打包app安装到了手机上.mp4 [183.9 MB]
071_频道管理_导航上关闭弹出层实现.mp4 [50.0 MB]
133_个人中心_生日编辑_日期选择_范围和默认值设置.mp4 [31.2 MB]
140_小思同学_数据准备和渲染.mp4 [30.5 MB]
161_优化_图片懒加载使用.mp4 [103.0 MB]
142_小思同学_最后一条消息滚入屏幕.mp4 [41.7 MB]
171_知识点_RestFul风格接口.mp4 [13.3 MB]
092_文章详情_页面创建和路由配置.mp4 [28.3 MB]
084_搜索记录_本地存储.mp4 [52.8 MB]
163_优化_抽离vant组件注册代码.mp4 [15.5 MB]
162_优化_全局指令_工具包封装.mp4 [16.6 MB]
173_知识点_发布工具包.mp4 [30.6 MB]
064_频道管理_筛选数据_计算属性得到用户未选频道.mp4 [45.1 MB]
072_频道管理_点击进入频道_复习v-model作用.mp4 [35.2 MB]
077_搜索页面_联想菜单铺设.mp4 [61.0 MB]
083_搜索页面_上一个视频方法合并优化.mp4 [18.9 MB]
093_文章详情_点击跳转到详情页_传文章ID.mp4 [46.0 MB]
170_知识点_复习v-model原理.mp4 [22.3 MB]
088_搜索结果_列表铺设_复用ArticleItem.mp4 [62.0 MB]
082_搜索页面_跳转传参到搜索结果页面.mp4 [81.9 MB]
076_搜索页面_输入框_防抖操作.mp4 [40.2 MB]
147_优化_路由独享守卫.mp4 [13.2 MB]
139_小思同学_创建页面和路由配置和跳转.mp4 [28.2 MB]
129_个人中心_姓名修改_输入框值的正则校验.mp4 [72.5 MB]
148_优化_遇到401时刷新token回来.mp4 [77.8 MB]
034_首页_tab导航_数据获取.mp4 [55.4 MB]
108_文章评论_发表评论_失焦事件.mp4 [7.3 MB]
080_搜索页面_联想菜单_关键字高亮_全匹配和大小写问题.mp4 [47.8 MB]

适合人群

前端开发者
项目实战者

🎯 学习收获

掌握头条项目开发
提升前端技能
增强实战经验

🎉 祝您学习愉快！