赞
踩
目录
① 创建 views/article/index.vue
组件
② 然后将该页面配置到根级路由
根据文章的 id 获取文章的详情内容
开启 prop传参,就是把路由中 params 传递的参数映射为组件中的 props 参数。
虽然通过 $route.params.articleId 的方式也能拿到,但是这个 articleId 需要再组件能频繁使用,所以可以使用该种快捷方式映射参数
传递过来的参数可能是 number 类型也可能是 string 类型
如果通过点击文章列表项进来(to 路由的方式跳转过来),那么传递的过来的 id 的类型就是 number 类型,因为原始的 id 就是 number 类型
但是如果是通过地址的方式直接访问该页面,那么就是 string 类型,如:http://localhost:8080/#/article/11502073-e4c5-4254-887f-17eba7f1ba88
JSONBig.parse() 转化出来的大数字是一个对象,所以也可能是 object 类型
使用到的 Vant 中的组件:
思路:
找到数据接口
封装请求方法
请求获取数据
模板绑定
① 在 api/article.js
中新增封装接口方法
② 在组件中调用获取文章详情
③ 在created 生命周期函数中调用
④ 模板绑定
-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 的错。
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
复制上述的代码,在 src/utils/request.js 下导入 json-bigint 进行配置
扩展:ES2020 BigInt
ES2020 引入了一种新的数据类型 BigInt(大整数),来解决这个问题。BigInt 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。
参考链接:
需求:
加载中,显示 loading
加载成功,显示文章详情
加载失败,显示错误提示
如果 404,提示资源不存在
其它的,提示加载失败,用户可以点击重试重新加载
文章正文包括各种数据:段落、标题、列表、链接、图片、视频等资源。
将 github-markdown-css 样式文件下载到项目中
引入下载的 css 文件,添加作用的 class 类名
在 postcss 中配置不要转换样式文件中的字号
① ImagePreview 图片预览 的使用
② 处理图片点击预览
思路:
代码实现:
预览图片效果函数
console.log(this.$refs.article_content) // undefined
原因:拿不到,因为 Vue 更新 DOM 是异步的,此时使用 $nextTick 解决 或者使用延时函数延时 0秒
解决方案一:延时函数
解决方案二:$nextTick 解决,一次拿不到就两次。
思路:
给按钮注册点击事件
在事件处理函数中
如果已关注,则取消关注
如果没有关注,则添加关注
下面是具体实现。
视图处理
功能处理
找到数据接口
封装请求方法
请求调用
视图更新
① 在 api/
follow.js
中添加封装请求方法
② 给关注/取消关注按钮注册点击事件
③ 在事件处理函数中
两个作用:
交互反馈
防止网络慢用户多次点击按钮导致重复触发点击事件
思路:
给收藏按钮注册点击事件
如果已经收藏了,则取消收藏
如果没有收藏,则添加收藏
下面是具体实现。
① 在 api/article.js
添加封装数据接口
② 给收藏按钮注册点击事件
③ 处理函数
article 中的 attitude
表示用户对文章的态度
-1
无态度
0
不喜欢
1
已点赞
思路:
给点赞按钮注册点击事件
如果已经点赞,则请求取消点赞
如果没有点赞,则请求点赞
① 添加封装数据接口
② 封装组件
③ 给点赞按钮注册点击事件
④ 处理函数
ShareSheet 分享面板: Vant 2 - Mobile UI Components built on Vue
子组件:
父组件:
简写方式:在父组件组件上使用 v-model
默认传递 :value="count"
默认监听:@input="count = $event"
父组件:
子组件:
父组件:
子组件:
如果有多个数据需要保持同步,使用 .sync 修饰符,因为 v-model 在组件中只能使用一次。
子组件内使用不变。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。