这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
日期
写代码时组件展示的是预期的效果，却无法筛选查看后台接收参数可知，格式需要转化
-
由于组件已经格式化了所以这里不使用（format="yyyy-MM-dd"）
-
只把传过去的值改变下：
value-format="yyyy-MM-dd"
清空会导致rangeDate变成[null[0],null[1]]
而我们想要的是【null,null】
这里需要在接收时进行判断
begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,
end_pubdate: this.rangeDate ? this.rangeDate[1] : null
具体流程：
- 在data中添加rangeDate: []
2. 在初始化文章列表的函数中进行日期的接收
3. 在组件的v-model处绑定rangeDate
加载文章显示加载中特效
- UI组件中有v-loading可绑定一个boolean变量进行控制
这里可根据官方文档进行自定义设置
2.data中添加loading
- 在初始化文章列表的函数里，进行渲染表格前开启（改变页码），接收到后关闭
loadArticles (page = 1) {
this.loading = true
getArticles({
// 接收传过的的页码
page: page,
per_page: this.pageSize,
// 每页的文章数
// 文章状态
status: this.status,
// 频道id
channel_id: this.channelId,
begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,
end_pubdate: this.rangeDate ? this.rangeDate[1] : null
}).then(res => {
// 使用两个常量接收，由于只支持驼峰命名要给一个重命名total_count: totalCount
const { results, total_count: totalCount } = res.data.data
this.articles = results
this.totalCount = totalCount
// 得到数据关闭加载
this.loading = false
})
},
// page为回传的值
onCurrentPage (page) {
this.loadArticles(page)
},
onSizeChange (perPage) {
this.pageSize = perPage
// 这里由于改变了每页条数对应的per_page，要再次回调接口
this.loadArticles()
}
删除文章
- 封装请求接口（api/article.js）
// 删除文章
export const deleteArticles = articleId => {
return request({
method: 'DELETE',
url: `/mp/v1_0/articles/${articleId}`
})
}
2.组件接收接口
（1）import
(2) 注册点击事件+接口函数
deleteArticle (articleId) {
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteArticles(articleId).then(res => {
this.$message({
message: '删除成功',
type: 'success'
})
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消退出'
})
})
}
出现问题
解决后端返回数据中的大数字问题：
JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。
Math.pow(2, 53) // 9007199254740992
9007199254740992 // 9007199254740992
9007199254740993 // 9007199254740992
Math.pow(2, 53) === Math.pow(2, 53) + 1
// true
上面代码中，超出 2 的 53 次方之后，一个数就不精确了。
ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。
Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MAX_SAFE_INTEGER === 9007199254740991
// true
Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true
Number.MIN_SAFE_INTEGER === -9007199254740991
// true
如果这个字符不做任何处理，你能方便的获取到字符串中的指定数据吗？非常麻烦。
所以我们要把它转换为 JavaScript 对象来使用就很方便了。 axios 为了方便我们使用数据，它会在内部使用 JSON.parse() 把后端返回的数据转为 JavaScript 对象。
可以看到，超出安全整数范围的 id 无法精确表示，这个问题并不是 axios 的错。
因此我们这里就是这样的转换
vue视图里的：
实际的：
了解了什么是大整数的概念，接下来的问题是如何解决？
json-bigint 是一个第三方包，它可以帮我们很好的处理这个问题。
使用它的第一步就是把它安装到你的项目中。
npm i json-bigint
或
yarn add json-bigint
json-bigint 会把超出 JS 安全整数范围的数字转为一个 BigNumber 类型的对象，对象数据是它内部的一个算法处理之后的，我们要做的就是在使用的时候转为字符串来使用。
了解了 json-biginit 怎么回事儿之后，下一步是如何配置到我们的项目中？
解决思路：
Axios 会在内部使用 JSON.parse 把后端返回的数据转为 JavaScript 数据对象。
所以解决思路就是：不要让 axios 使用 JSON.parse 来转换这个数据，而是使用 json-biginit 来做转换处理。
axios 提供了一个 API：transformResponse可以使用json-biginit设置data
具体操作
- request.js 请求模块中添加处理代码：
/**
* 基于 axios 封装的请求模块
*/
import axios from 'axios'
import JSONbig from 'json-bigint'
// 创建一个 axios 实例，说白了就是复制了一个 axios
// 我们通过这个实例去发请求，把需要的配置配置给这个实例来处理
const request = axios.create({
baseURL: 'http://ttapi.research.itcast.cn/', // 请求的基础路径
// 定义后端返回的原始数据的处理，阻止axios通过JSON.pares()转换造成的误差
// 参数 data 就是后端返回的原始数据（未经处理的 JSON 格式字符串）
transformResponse: [function (data) {
// Do whatever you want to transform the data
// console.log(data)
// 后端返回的数据可能不是 JSON 格式字符串
// 如果不是的话，那么 JSONbig.parse 调用就会报错
// 所以我们使用 try-catch 来捕获异常，处理异常的发生
try {
// 如果转换成功，则直接把结果返回
return JSONbig.parse(data)
} catch (err) {
console.log('转换失败', err)
// 如果转换失败了，则进入这里
// 我们在这里把数据原封不动的直接返回给请求使用
return data
}
}]
})
………………………………
……………………………………
// 导出请求方法
export default request
2.接收id时要转换成字符串
原因是，json-bigint是一个数组，不是我们想要的的数据格式
扩展：ES2020 BigInt
ES2020 引入了一种新的数据类型 BigInt（大整数），来解决这个问题。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。
参考链接：
删除成功更新当前页数据
1、在 data 中初始化 page 用来获取当前页码
2、将 page 绑定到分页组件上用来同步当前页码
:current-page.sync="page"
sync修饰符，保证page与页码改变同步
3、删除成功，更新当前页数据
