# 四、文章列表模塊## 創建組件并配置路由1、創建 `src/views/article/index.vue````html <template><div class="article-container">內容管理</div> </template><script> export default {name: 'ArticleIndex',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {} } </script><style scoped lang="less"></style>```2、配置路由<img src="assets/image-20200422171705412.png" alt="image-20200422171705412" style="zoom:50%;" />3、訪問測試。## 頁面布局```html <template><div class="article-container"><el-card class="filter-card"><div slot="header" class="clearfix"><!-- 面包屑路徑導航 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item to="/">首頁</el-breadcrumb-item><el-breadcrumb-item>內容管理</el-breadcrumb-item></el-breadcrumb><!-- /面包屑路徑導航 --></div><!-- 數據篩選表單 --><el-form ref="form" :model="form" label-width="40px" size="mini"><el-form-item label="狀態"><el-radio-group v-model="form.resource"><el-radio label="全部"></el-radio><el-radio label="草稿"></el-radio><el-radio label="待審核"></el-radio><el-radio label="審核通過"></el-radio><el-radio label="審核失敗"></el-radio><el-radio label="已刪除"></el-radio></el-radio-group></el-form-item><el-form-item label="頻道"><el-select v-model="form.region" placeholder="請選擇頻道"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="日期"><el-date-pickerv-model="form.date1"type="datetimerange"start-placeholder="開始日期"end-placeholder="結束日期":default-time="['12:00:00']"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form><!-- /數據篩選表單 --></el-card><el-card class="box-card"><div slot="header" class="clearfix">根據篩選條件共查詢到 46147 條結果：</div><!-- 數據列表 --><el-table:data="tableData"stripestyle="width: 100%"class="list-table"size="mini"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table><!-- /數據列表 --><!-- 列表分頁 --><el-paginationlayout="prev, pager, next"background:total="1000"></el-pagination><!-- /列表分頁 --></el-card></div> </template><script> export default {name: 'ArticleIndex',components: {},props: {},data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1516 弄'}]}},computed: {},watch: {},created () {},mounted () {},methods: {onSubmit () {console.log('submit!')}} } </script><style scoped lang="less"> .filter-card {margin-bottom: 30px; }.list-table {margin-bottom: 20px; } </style>```## 展示所有文章列表- 找到數據接口 - 封裝請求方法 - 在組件中初始調用獲取數據 - 把數據綁定到模板中### 請求獲取文章列表數據1、創建 `src/api/article.js````js /*** 文章相關請求模塊*/ import request from '@/utils/request'/*** 獲取文章列表*/ export const getArticles = params => {return request({method: 'GET',url: '/mp/v1_0/articles',// Body 參數使用 data 設置// Query 參數使用 params 設置// Headers 參數使用 headers 設置params}) }```2、在文章組件中請求獲取數據<img src="assets/image-20200422172140960.png" alt="image-20200422172140960" style="zoom:50%;" />### 表格組件數據綁定```html <!-- 數據列表 --> <!--Table 表格組件1、把需要展示的數組列表數據綁定給 table 組件的 data 屬性注意：你不用去 v-for 遍歷，它自己會遍歷2、設計表格列 el-table-columnwidth 可以設定表格列的寬度label 可以設定列的標題prop 用來設定要渲染的列表項數據字段，只能展示文本3、表格列默認只能渲染普通文本，如果需要展示其它內容，例如放個按鈕啊、放個圖片啊，那就需要自定義表格列模板了：https://element.eleme.cn/#/zh-CN/component/table#zi-ding-yi-lie-mo-ban--> <el-table:data="articles"stripestyle="width: 100%"class="list-table"size="mini" ><el-table-columnprop="date"label="封面"></el-table-column><el-table-columnprop="title"label="標題"></el-table-column><el-table-columnlabel="狀態"><!-- 如果需要在自定義列模板中獲取當前遍歷項數據，那么就在 template 上聲明 slot-scope="scope" --><template slot-scope="scope"><el-tag v-if="scope.row.status === 0" type="warning">草稿</el-tag><el-tag v-else-if="scope.row.status === 1">待審核</el-tag><el-tag v-else-if="scope.row.status === 2" type="success">審核通過</el-tag><el-tag v-else-if="scope.row.status === 3" type="danger">審核失敗</el-tag><el-tag v-else-if="scope.row.status === 4" type="info">已刪除</el-tag></template></el-table-column><el-table-columnprop="pubdate"label="發布時間"></el-table-column><el-table-columnlabel="操作"><!-- 如果需要自定義表格列模板，則把需要自定義的內容放到 template 里面 --><template><el-buttonsize="mini"circleicon="el-icon-edit"type="primary"></el-button><el-buttonsize="mini"type="danger"icon="el-icon-delete"circle></el-button></template></el-table-column> </el-table> <!-- /數據列表 --> ```### 優化文章狀態展示處理1、在數據 data 中添加如下數據```js articleStatus: [{ status: 0, text: '草稿', type: 'info' }, // 0{ status: 1, text: '待審核', type: '' }, // 1{ status: 2, text: '審核通過', type: 'success' }, // 2{ status: 3, text: '審核失敗', type: 'warning' }, // 3{ status: 4, text: '已刪除', type: 'danger' } // 4 ] ```2、在模板中綁定使用<img src="assets/image-20200424163859285.png" alt="image-20200424163859285" style="zoom:50%;" />### 處理文章封面展示> 這里是對 element 中 [image 圖片組件](https://element.eleme.cn/#/zh-CN/component/image) 的使用.<img src="assets/image-20200424164012752.png" alt="image-20200424164012752" style="zoom:50%;" />## 數據分頁``` 分頁？分頁的目的是為了緩解查詢數據的壓力，提高頁面的響應速度，讓用戶更快的看到頁面內容。假如是固定的數據，例如 10 條，20 條，以后不會增加了。那就沒有必要分頁，沒有意義。如果是動態產生的數據，例如文章列表，商品列表、評論列表。。。數據量增加的越來越多。100w、1000w、數據量很大響應速度就很慢，數據量很大頁面渲染也會變慢，。 所以分頁就是用來緩解數據查詢和渲染的壓力的。數據庫中有 100 條數據：- 第幾頁 - 每頁大小后端會從數據庫中獲取數據，假設每頁10條數據- 請求第1頁數據， 1-10 - 請求第2頁數據， 11-20 - 請求第3頁數據， 21-30 - ...然后后端通過接口提供給前端使用。- page 頁碼，默認第1頁 - per_page 每頁大小，默認每頁 10 條數據數據篩選：- 接口的參數 - 通過表單的交互得到接口參數```1、傳遞分頁參數<img src="./assets/image-20200424164440264.png" alt=""><img src="./assets/image-20200424164525922.png" alt="image-20200424164525922" style="zoom:50%;" />2、注冊分頁組件的 `current-change` 事件<img src="./assets/image-20200424164351169.png" alt="image-20200424164351169" style="zoom:50%;" />3、當頁碼改變，請求對應頁碼數據<img src="assets/image-20200424164440264.png" alt="image-20200424164440264" style="zoom:50%;" />## 總頁碼處理1、將數據列表接口中返回的總數據條數存儲到 data 數據中<img src="assets/image-20200424165042314.png" alt="image-20200424165042314" style="zoom:50%;" />2、將總記錄數和每頁大小綁定到分頁組件<img src="assets/image-20200424165004403.png" alt="image-20200424165004403" style="zoom:50%;" />## 數據篩選把視圖處理成接口需要的數據提交給后端。### 篩選狀態1、在 data 中初始化 status 并傳遞給請求方法<img src="assets/image-20200424165255629.png" alt="image-20200424165255629" style="zoom:50%;" />> 注：axios 不會發送值為 null、undefined 類型的數據，所以初始化為 null。2、處理表單綁定獲取 status 數據<img src="assets/image-20200424165349855.png" alt="image-20200424165349855" style="zoom:50%;" />3、點擊查詢的時候，調用 `loadArticles` 方法加載數據<img src="assets/image-20200424165507874.png" alt="image-20200424165507874" style="zoom:50%;" />### 篩選頻道一、在下拉列表中展示頻道列表1、在 `api/article.js` 中封裝請求獲取文章頻道的數據接口```js /*** 獲取文章頻道*/ export const getArticleChannels = () => {return request({method: 'GET',url: '/mp/v1_0/channels'}) } ```2、在文章組件中請求獲取頻道數據<img src="assets/image-20200424165752682.png" alt="image-20200424165752682" style="zoom:50%;" /><img src="assets/image-20200424165811236.png" alt="image-20200424165811236" style="zoom:50%;" />3、將頻道數據遍歷展示到表單選擇器中<img src="assets/image-20200424165905975.png" alt="image-20200424165905975" style="zoom:50%;" />二、處理篩選1、在 data 中初始化數據并傳遞給請求方法<img src="assets/image-20200424170010920.png" alt="image-20200424170010920" style="zoom:50%;" />2、將數據綁定到選擇器上<img src="assets/image-20200424170105358.png" alt="image-20200424170105358" style="zoom:50%;" />### 篩選時間1、在 data 中添加數據并傳遞給請求參數<img src="assets/image-20200424170253390.png" alt="image-20200424170253390" style="zoom:50%;" />2、將數據綁定到日期選擇器上<img src="assets/image-20200424170334096.png" alt="image-20200424170334096" style="zoom:50%;" />> value-format， 可選，綁定值的格式。不指定則綁定值為 Date 對象 > > 具體格式詳見： [日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi)## 加載中 loading1、初始化 loading 數據<img src="assets/image-20200424170522191.png" alt="image-20200424170522191" style="zoom:50%;" />2、設置表格的 loading 狀態<img src="assets/image-20200424170601176.png" alt="image-20200424170601176" style="zoom:50%;" /> 3、設置加載中禁用分頁組件<img src="assets/image-20200424170635462.png" alt="image-20200424170635462" style="zoom:50%;" />4、設置加載中禁用查詢按鈕<img src="assets/image-20200424170709443.png" alt="image-20200424170709443" style="zoom:50%;" />## 刪除文章### 解決后端返回數據中的大數字問題JavaScript 能夠準確表示的整數范圍在`-2^53`到`2^53`之間（不含兩個端點），超過這個范圍，無法精確表示這個值，這使得 JavaScript 不適合進行科學和金融方面的精確計算。```javascript Math.pow(2, 53) // 90071992547409929007199254740992 // 9007199254740992 9007199254740993 // 9007199254740992Math.pow(2, 53) === Math.pow(2, 53) + 1 // true ```上面代碼中，超出 2 的 53 次方之后，一個數就不精確了。 ES6 引入了`Number.MAX_SAFE_INTEGER`和`Number.MIN_SAFE_INTEGER`這兩個常量，用來表示這個范圍的上下限。```javascript Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1 // true Number.MAX_SAFE_INTEGER === 9007199254740991 // trueNumber.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER // true Number.MIN_SAFE_INTEGER === -9007199254740991 // true ```上面代碼中，可以看到 JavaScript 能夠精確表示的極限。后端返回的數據一般都是 **JSON 格式的字符串**。```json '{ "id": 9007199254740995, "name": "Jack", "age": 18 }' ```如果這個字符不做任何處理，你能方便的獲取到字符串中的指定數據嗎？非常麻煩。所以我們要把它轉換為 JavaScript 對象來使用就很方便了。幸運的是 axios 為了方便我們使用數據，它會在內部使用 `JSON.parse()` 把后端返回的數據轉為 JavaScript 對象。```javascript // { id: 9007199254740996, name: 'Jack', age: 18 } JSON.parse('{ "id": 9007199254740995, "name": "Jack", "age": 18 }') ```可以看到，超出安全整數范圍的 id 無法精確表示，這個問題并不是 axios 的錯。了解了什么是大整數的概念，接下來的問題是如何解決？[json-bigint](https://github.com/sidorares/json-bigint) 是一個第三方包，它可以幫我們很好的處理這個問題。使用它的第一步就是把它安裝到你的項目中。```shell npm i json-bigint ```下面是使用它的一個簡單示例。```javascript import JSONbig from 'json-bigint'const str = '{ "id": 1253585734669959168 }'console.log(JSON.parse(str)) // 1253585734669959200// 它會把超出 JS 安全整數范圍的數字轉為一種類型為 BigNumber 的對象 // 我們在使用的時候需要把這個 BigNumber.toString() 就能得到原來正確的數據了 console.log(JSONbig.parse(str)) console.log(JSONbig.parse(str).id.toString()) // 1253585734669959168const data = JSONbig.parse(str)console.log(JSON.stringify(data)) console.log(JSONbig.stringify(data)) ```> json-bigint 會把超出 JS 安全整數范圍的數字轉為一個 BigNumber 類型的對象，對象數據是它內部的一個算法處理之后的，我們要做的就是在使用的時候轉為字符串來使用。了解了 json-biginit 怎么回事兒之后，下一步是如何配置到我們的項目中？``` 解決思路：Axios 會在內部使用 JSON.parse 把后端返回的數據轉為 JavaScript 數據對象。所以解決思路就是：不要讓 axios 使用 JSON.parse 來轉換這個數據，而是使用 json-biginit 來做轉換處理。axios 提供了一個 API：transformResponse還有需要注意的是：不要使用 13911111111 這個賬號來測試刪除操作。 為什么？這是后端做了限制，防止你把數據刪沒了，別人沒法測試了，所以使用自己的賬戶去完整版中添加一些數據然后來到開發版中進行測試。 ```所以我們在 request.js 請求模塊中添加處理代碼：```js /*** 基于 axios 封裝的請求模塊*/ import axios from 'axios' import JSONbig from 'json-bigint'// 創建一個 axios 實例，說白了就是復制了一個 axios // 我們通過這個實例去發請求，把需要的配置配置給這個實例來處理 const request = axios.create({baseURL: 'http://ttapi.research.itcast.cn/', // 請求的基礎路徑// 定義后端返回的原始數據的處理// 參數 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}// axios 默認在內部使用 JSON.parse 來轉換處理原始數據// return JSON.parse(data)}] })// 請求攔截器 request.interceptors.request.use(// 任何所有請求會經過這里// config 是當前請求相關的配置信息對象// config 是可以修改的function (config) {const user = JSON.parse(window.localStorage.getItem('user'))// 如果有登錄用戶信息，則統一設置 tokenif (user) {config.headers.Authorization = `Bearer ${user.token}`}// 然后我們就可以在允許請求出去之前定制統一業務功能處理// 例如：統一的設置 token// 當這里 return config 之后請求在會真正的發出去return config},// 請求失敗，會經過這里function (error) {return Promise.reject(error)} )// 響應攔截器// 導出請求方法 export default request```> 擴展：ES2020 BigInt > > ES2020 引入了一種新的數據類型 BigInt（大整數），來解決這個問題。BigInt 只用來表示整數，沒有位數的限制，任何位數的整數都可以精確表示。 > > 參考鏈接： > > - [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt) > - [http://es6.ruanyifeng.com/#docs/number#BigInt-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B](http://es6.ruanyifeng.com/#docs/number#BigInt-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B)### 刪除操作1、封裝刪除文章請求方法```js /*** 刪除文章*/ export const deleteArticle = articleId => {return request({method: 'DELETE',// 接口文檔中的寫的路徑參數需要在 url 中傳遞// 凡是看見接口路徑中有的 :xxx 格式的字段，則需要傳遞路徑參數url: `/mp/v1_0/articles/${articleId}`}) } ```2、注冊刪除按鈕點擊事件<img src="assets/image-20200424171339650.png" alt="image-20200424171339650" style="zoom:50%;" />3、處理函數如下```js onDeleteArticle (articleId) {console.log(articleId)console.log(articleId.toString())this.$confirm('確認刪除嗎？', '刪除提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 確認執行這里deleteArticle(articleId.toString()).then(res => {this.$message({message: '刪除成功',type: 'success'})})}).catch(() => {this.$message({type: 'info',message: '已取消刪除'})}) } ```### 刪除成功更新當前頁數據1、在 data 中初始化 page 用來獲取當前頁碼<img src="assets/image-20200424171656219.png" alt="image-20200424171656219" style="zoom:50%;" />2、將 page 綁定到分頁組件上用來同步當前頁碼<img src="assets/image-20200424171736207.png" alt="image-20200424171736207" style="zoom:50%;" />3、刪除成功，更新當前頁數據<img src="assets/image-20200424171809182.png" alt="image-20200424171809182" style="zoom:50%;" />

?

總結

以上是生活随笔為你收集整理的前端学习（2456）：文章列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。