黑马头条vue2.0项目实战（七）——文章详情

已于 2024-08-15 21:47:36 修改
阅读量1k 收藏 28
点赞数 16
CC 4.0 BY-SA版权
分类专栏： vue2.0项目实战（移动端黑马头条） 文章标签： 前端 javascript 开发语言
于 2024-08-11 23:06:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56370772/article/details/141111472

目录

1. 创建组件并配置路由

2. 页面布局

3. 展示文章详情

3.1 请求文章详情数据接口

4. 关于后端返回数据中的大数字问题

4.1 请求文章详情返回 404 问题

4.2 大整数解决方案

5. 处理内容加载状态

​编辑

6. 关于文章正文的样式

7. 图片点击预览

8. 关注用户

8.1 视图处理与功能处理

8.2 loading 效果

8.3 组件封装

9. 文章收藏

9.1 封装组件

9.2 处理视图

9.3 功能处理

10. 文章点赞

11. 分享功能

12. 组件中的 v-model

12.1 $event 就是传递过来的参数

12.2 v-model 默认方式

12.3 自定义 v-model 的属性名和事件名

fee531b4d2214cabb89eb82fc9b00f30.png

1. 创建组件并配置路由

① 创建 views/article/index.vue 组件

② 然后将该页面配置到根级路由

  • 根据文章的 id 获取文章的详情内容

  • 开启 prop传参，就是把路由中 params 传递的参数映射为组件中的 props 参数。

  • 虽然通过 $route.params.articleId 的方式也能拿到，但是这个 articleId 需要再组件能频繁使用，

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue2项目实战
C_jiayouya的博客
12-26 1544
本文仅仅简单介绍了项目的大概框架，一些简单的页面展示及简单的组件封装，在想成为高级开发的路上还是需要不断努力地！愿每个人都能在自己热衷的道路上越走越远。
vue2.0项目实践操作
weixin_49527298的博客
12-27 1356
页面的开始 1.1导入页面 1.2引入bootstrap以及jQuery 1.3引入element 页面中使用组件 2.1注册组件 2.2父子组件数据传输 使用axios 3.1axios的基本用法 3.2请求图片’@/assets 请求的接口json-serve 4.1安装 4.2json-serve的基本使用方法 vue.config.js配置手机访问项目 页面的开始 导入页面 fisrst.vue,模板生成，可以在vscode里面安装vue插件，然后文件中输入.vue &l..
构建Vue2单页面应用实战：Vue2Demo项目深度解析
最新发布
weixin_29097457的博客
06-08 699
Vue.js是一个轻量级的前端框架，由前谷歌工程师尤雨溪创建。它被设计为可以逐步集成到项目中，易于学习且富有表现力。Vue的核心库只关注视图层，易于上手，并且可以方便地与第三方库或既有项目整合。Vue通过虚拟DOM和组件化的概念，极大地简化了复杂单页应用的开发流程。组件化是现代前端开发中提高代码复用性、维护性和可读性的重要手段。在Vue.js框架中，组件化更是其核心设计之一。组件化开发不仅仅是将界面分割为独立的、可复用的部分，更是一种高效组织代码的开发哲学。
Vue项目实战-vue2(移动端)
m0_57860459的博客
03-07 9463
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) axios拦截器(背诵) (八) Sticky 粘性布局 (九) 图片懒加载 (十) 全局注册组件 (十一) slot插槽 (十二) 使用ui库需要关注的三点 (十三) 三种路由传参方式(背诵) (十四) 模拟数据 (十五) 计算属性computed和属性观察watch (十
B站尚硅谷---vue2实战项目《尚品汇》---第一天
m0_64804076的博客
11-30 840
B站尚硅谷---vue2实战项目《尚品汇》---第一天
B站尚硅谷---vue2实战项目《尚品汇》---第二天
m0_64804076的博客
12-02 632
B站尚硅谷---vue2实战项目《尚品汇》---第二天
黑马头条vue2.0项目实战（四）——首页—文章列表
weixin_56370772的博客
08-01 935
List 组件通过 loading 和 finished 两个变量控制加载状态， 当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 设置成 true，此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件。
黑马头条vue2.0项目实战（八）——文章评论
weixin_56370772的博客
08-14 1169
弹层渲染出来以后就只是简单的切换显示和隐藏，里面的内容也不再重新渲染了，所以会导致我们的评论的回复列表不会动态更新了。把当前的评论对象传递给 reply-comment组件，把当前点击之后展示弹出层的值传递给爷爷组件，让爷爷组件展示回复评论弹出层，但是当一个事件中同时使用两次 $emit触发的其他组件中的事件，可能导致状态更新延迟。解决方案：只传递当前的评论对象，让控制显示弹出层的变量的状态卸载，$on 事件监听里。② 当点击评论项组件中的回复按钮的时候展示弹层。回复列表和文章的评论列表几乎是一样的。
黑马头条vue2.0项目实战（五）——首页—频道编辑
weixin_56370772的博客
08-04 1248
Vant 中内置了组件。
黑马头条vue2.0项目实战（六）——文章搜索
weixin_56370772的博客
08-08 758
① 创建② 然后把搜索页面的路由配置到根组件路由（一级路由）
vue2.0项目案例
08-24
基于vue2 + vue-router2 + vuex + axios 的一个webapp项目！
vue项目开发实战
07-01
课程介绍：           《Vue项目开发实战》Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。             Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。              本课程从构建一个Vue开发项目到部署应用实践，由浅入深，引领学员逐步掌握各项技能，实战项目，且侧重技能不同，学员的知识体系会更加全面 课程内容涵盖：                 Vue入门                 显示todo列表/添加todo                 删除/编辑todo                 自定义指令实现自动聚焦                 筛选                 本地存储                 组件化todo应用                 V
2019 vue2.x最新视频从基础语法-进阶使用-源码解析-项目实战
04-03
2019 vue2.x最新视频从基础语法-进阶使用-源码解析-项目实战 让你玩转vue2.x
黑马头条vue2.0项目实战（三）——个人中心功能的实现
weixin_56370772的博客
07-30 1281
通过分析页面，可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。
Vue2.0实战
qq_42636335的博客
03-06 7094
目录 项目初始化 1.vue-cli脚手架初始化项目 2.项目的其他配置 3.项目路由分析 4.完成非路由组件Header和Footer业务 5.完成路由组件搭建 6. Footer组件显示与隐藏 7.路由传参 7.3路由传参面试题 Home模块组件拆分 1.三级联动组件 2.完成其余静态组件 3.postman测试接口 4.axios二次封装 5.接口统一管理 6.nprogress进度条的使用 6. vuex状态管理库 7.完成TypeNav三级联动展示数据业..
黑马头条项目 —3.4 调试方法
weixin_41672684的博客
10-13 443
调试方法 判断问题发生在前端还是后端 如果前端为网页，可以通过网页调试工具里面的network判断 在前端中触发一次接口调用的请求 查看network中对应的请求记录 如果没有发现有新的请求记录，表示前端有问题，并未发起请求 如果有请求记录，返回的状态码为200，但是页面没有想要的效果，表示前端没有正确处理200的响应 如果返回的状态码为4xx, 表示前端构造的请求有问题，比如404没有正确的请求网址，401、403请求的身份有问题，405请求的方式有问题，40
项目实践-Vue2
m0_65769258的博客
03-06 730
目录 (一) 创建项目# (1) 创建vue2项目# (二)vue2不需要vite,但需要禁用Eslint (三) 添加vant-ui vue2# (四)vue2,3都可以通用less,scss (六) vue路由配置(背诵)# 一) 创建项目# (1) 创建vue2项目# 01 安装vue-cli脚手架 npm install -g @vue/cli 02 查看vue脚手架版本 vue --version // 出现版本号表示成功 03 创建一个新项目 ...
Vue2.0 项目实战篇-学不会算我的；
Java.慈祥
08-13 2269
一级路由，定义为文件夹、index.vue主页面定义在所属的一级路由目录下；——————创建文件my-app/│├── src/│ ├── router/ # 定义路由组件配置 │ │ ├── index.js│ ├── views/ # 定义路由模块页面 │ │ ├── login/ #登录模块 │ │ │ │ ├── index.vue│ │ └── layout/ #首页模块——内涵多个二级子模块;│ │ │ │ ├── 首页.vue│ │ │ │ ├── 我的.vue。
vue项目实战2
sober30的博客
08-10 598
接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835。- 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用。官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/https://www.pnpm.cn/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值