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

因为奋斗超太帅啦 2024-09-09 11:03:01 阅读 79

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 的属性名和事件名

1. 创建组件并配置路由

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

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

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

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

虽然通过 $route.params.articleId 的方式也能拿到，但是这个 articleId 需要再组件能频繁使用，所以可以使用该种快捷方式映射参数

官方文档：路由 props 传参

传递过来的参数可能是 number 类型也可能是 string 类型

如果通过点击文章列表项进来(to 路由的方式跳转过来)，那么传递的过来的 id 的类型就是 number 类型，因为原始的 id 就是 number 类型

但是如果是通过地址的方式直接访问该页面，那么就是 string 类型，如：http://localhost:8080/#/article/11502073-e4c5-4254-887f-17eba7f1ba88

JSONBig.parse() 转化出来的大数字是一个对象，所以也可能是 object 类型

2. 页面布局

使用到的 Vant 中的组件：

NavBar 导航栏

Loading 加载

Cell 单元格

Button 按钮

Image 图片

Divider 分割线

Icon 图标

3. 展示文章详情

思路：

找到数据接口

封装请求方法

请求获取数据

模板绑定

3.1 请求文章详情数据接口

① 在 api/article.js 中新增封装接口方法

② 在组件中调用获取文章详情

③ 在created 生命周期函数中调用

④ 模板绑定

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

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

之所以请求文章详情返回 404 是因为我们请求发送的文章 ID （article.art_id）不正确。JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。

上面代码中，超出 2 的 53 次方之后，一个数就不精确了。 ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。

上面代码中，可以看到 JavaScript 能够精确表示的极限。

后端返回的数据一般都是 JSON 格式的字符串。

如果这个字符不做任何处理，你能方便的获取到字符串中的指定数据吗？非常麻烦。所以我们要把它转换为 JavaScript 对象来使用就很方便了。幸运的是 axios 为了方便我们使用数据，它会在内部使用 JSON.parse() 把后端返回的数据转为 JavaScript 对象。

// { id: 9007199254740996, name: 'Jack', age: 18 }

JSON.parse('{ "id": 9007199254740995, "name": "Jack", "age": 18 }')

可以看到，超出安全整数范围的 id 无法精确表示，这个问题并不是 axios 的错。

4.2 大整数解决方案

了解了什么是大整数的概念，接下来的问题是如何解决？

json-bigint 是一个第三方包，它可以帮我们很好的处理这个问题。使用步骤：

使用它的第一步就是把它安装到你的项目中。

npm i json-bigint导入到项目中

import JSONBig from 'json-bigint'

JSONBig.parse() 把 JSON 格式的字符串转化为 js 对象

JSONBig.stringify() 把 js 对象转为 JSON 格式的字符串

JSONBig与原始 JSON 方法的区别就是上面的两个可以处理大数字的问题，不丢失精度

json-bigint 会把超出 JS 安全整数范围的数字转为一个 BigNumber 类型的对象，对象数据是它内部的一个算法处理之后的，我们要做的就是在使用的时候转为字符串来使用。

通过 Axios 请求得到的数据都是 Axios 处理（JSON.parse）之后的，我们应该在 Axios 执行处理之前手动使用 json-bigint 来解析处理。Axios 提供了自定义处理原始后端返回数据的 API：transformResponse 。

axios官网GitHub - axios/axios: Promise based HTTP client for the browser and node.js：GitHub - axios/axios: Promise based HTTP client for the browser and node.js