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

因为奋斗超太帅啦

已于 2024-08-12 10:47:32 修改

阅读量849

点赞数 16

分类专栏： vue2.0项目实战文章标签：前端 javascript 开发语言

于 2024-08-11 23:06:55 首次发布

本文链接：https://blog.csdn.net/weixin_56370772/article/details/141111472

版权

vue2.0项目实战专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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 中的组件：

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 类型的对象，对象数据是它内部的一个算法处理之后的，我们要做的就是在使用的时候转为字符串来使用。