Ajax-day2（圖書管理）-渲染列表

本篇筆記素材來自“黑馬程序員”

渲染列表

圖書管理
一、獲取數據
二、渲染數據
完整代碼

圖書管理

Bootstrap 框架
渲染列表（查）
新增圖書（增）
刪除圖書（刪）
編輯圖書（改）

自己的圖書數據：給自己起個名字，并告訴服務器，
默認會有三本書，基于這三本書做數據的增刪改查。

文件夾目錄：
在這里插入圖片描述
index.html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-圖書管理</title><!-- 字體圖標 --><link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css"><!-- 引入bootstrap.css --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"><!-- 核心樣式 --><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 主體區域 --><div class="container"><!-- 頭部標題和添加按鈕 --><div class="top"><h3>圖書管理</h3><button type="button" class="btn btn-primary plus-btn" data-bs-toggle="modal" data-bs-target=".add-modal"> + 添加</button></div><!-- 數據列表 --><table class="table"><thead class="table-light"><tr><th style="width: 150px;">序號</th><th>書名</th><th>作者</th><th>出版社</th><th style="width: 180px;">操作</th></tr></thead><tbody class="list"><tr><td>1</td><td>JavaScript程序設計</td><td>馬特·弗里斯比</td><td>人民郵電出版社</td><td><span class="del">刪除</span><span class="edit">編輯</span></td></tr></tbody></table></div><!-- 新增-彈出框 --><div class="modal fade add-modal"><!-- 中間白色區域 --><div class="modal-dialog"><div class="modal-content"><div class="modal-header top"><span>添加圖書</span><button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button></div><div class="modal-body form-wrap"><!-- 新增表單 --><form class="add-form"><div class="mb-3"><label for="bookname" class="form-label">書名</label><input type="text" class="form-control bookname" placeholder="請輸入書籍名稱" name="bookname"></div><div class="mb-3"><label for="author" class="form-label">作者</label><input type="text" class="form-control author" placeholder="請輸入作者名稱" name="author"></div><div class="mb-3"><label for="publisher" class="form-label">出版社</label><input type="text" class="form-control publisher" placeholder="請輸入出版社名稱" name="publisher"></div></form></div><div class="modal-footer btn-group"><button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button><button type="button" class="btn btn-primary add-btn"> 保存 </button></div></div></div></div><!-- 編輯-彈出框 --><div class="modal fade edit-modal"><!-- 中間白色區域 --><div class="modal-dialog"><div class="modal-content"><div class="modal-header top"><span>編輯圖書</span><button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button></div><div class="modal-body form-wrap"><!-- 編輯表單 --><form class="edit-form"><input type="hidden" class="id" name="id"><div class="mb-3"><label for="bookname" class="form-label">書名</label><input type="text" class="form-control bookname" placeholder="請輸入書籍名稱" name="bookname"></div><div class="mb-3"><label for="author" class="form-label">作者</label><input type="text" class="form-control author" placeholder="請輸入作者名稱" name="author"></div><div class="mb-3"><label for="publisher" class="form-label">出版社</label><input type="text" class="form-control publisher" placeholder="請輸入出版社名稱" name="publisher"></div></form></div><div class="modal-footer btn-group"><button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button><button type="button" class="btn btn-primary edit-btn"> 修改 </button></div></div></div></div><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script><script src="./lib/form-serialize.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script><!-- 核心邏輯 --><script src="./js/index.js"></script>
</body></html>

index.css：

/* 公共*/
html,
body {width: 100%;height: 100%;
}.container {width: 1340px;margin: 0 auto;padding-top: 60px;box-sizing: border-box;
}/* alert提示框 */
.toast {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);
}.toast .toast-body {padding: 0 !important;
}.toast .alert-success {margin-bottom: 0 !important;
}/* 頭部導航 */
.container .top {display: flex;justify-content: space-between;
}.container .top h3 {font-weight: 900;
}.container .top .plus-btn {background-color: #539ACB !important;color: #fff;border: none;
}/* 表格部分 */
.table {margin-top: 20px;text-align: center;font-size: 14px;
}.table-light th {background-color: #939CA7 !important;color: #ffffff;font-family: PingFangSC-Medium;font-size: 16px;text-align: center;font-weight: 500;border-right: 1px solid lightgray;
}.table-light th:last-of-type {border-right: none;
}/* 表格內容 */
.table tbody td {color: #696F77;
}.table .del {color: #E5964C;margin-right: 30px;
}.table .edit {color: #539ACB;
}.table tbody tr {height: 30px;line-height: 30px;
}.table tbody tr td:last-of-type span {cursor: pointer;
}/* 彈出層 */
.modal .top {display: flex;justify-content: center;background-color: #F0F3F7;padding: 15px 0;width: 100%;position: relative;color: #1E2023;
}/* 右上角-關閉按鈕 */
.modal .btn-close {font-size: 12px;position: absolute;top: 50%;transform: translateY(-50%);right: 23px;/* 覆蓋bootstrap樣式 */margin: 0;padding: 0;
}/* 表單容器 */
.form-wrap {box-sizing: border-box;background-color: white;padding: 40px;
}.form-wrap .form-label {color: #696F77;
}/* 修改輸入框默認占位文字webkit內核, firefox18-, firfox19+, 其他*/
.form-wrap input::-webkit-input-placeholder {color: #BFBFBF !important;font-size: 14px;
}/* 底部按鈕組 */
.modal-footer{border-top: 0;
}
.btn-group {text-align: center;width: 100%;
}/* 修改bs的按鈕彈性布局-改成自己設置大小 */
.btn-group,
.btn-group-vertical {display: block;
}.btn-group button {width: 120px
}.btn-group button:first-of-type {border: 1px solid #E3E3E3;background-color: #fff;color: black;margin-right: 60px;
}.btn-group button:last-of-type {background-color: #539ACB;
}.alert-success {border-color: transparent;
}.toast {border: none;
}

form-serialize.js：

// get successful control from form and assemble into object
// http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2// types which indicate a submit action and are not successful controls
// these will be ignored
var k_r_submitter = /^(?:submit|button|image|reset|file)$/i;// node names which could be successful controls
var k_r_success_contrls = /^(?:input|select|textarea|keygen)/i;// Matches bracket notation.
var brackets = /(\[[^\[\]]*\])/g;// serializes form fields
// @param form MUST be an HTMLForm element
// @param options is an optional argument to configure the serialization. Default output
// with no options specified is a url encoded string
//    - hash: [true | false] Configure the output type. If true, the output will
//    be a js object.
//    - serializer: [function] Optional serializer function to override the default one.
//    The function takes 3 arguments (result, key, value) and should return new result
//    hash and url encoded str serializers are provided with this module
//    - disabled: [true | false]. If true serialize disabled fields.
//    - empty: [true | false]. If true serialize empty fields
function serialize(form, options) {if (typeof options != 'object') {options = { hash: !!options };}else if (options.hash === undefined) {options.hash = true;}var result = (options.hash) ? {} : '';var serializer = options.serializer || ((options.hash) ? hash_serializer : str_serialize);var elements = form && form.elements ? form.elements : [];//Object store each radio and set if it's empty or notvar radio_store = Object.create(null);for (var i=0 ; i<elements.length ; ++i) {var element = elements[i];// ingore disabled fieldsif ((!options.disabled && element.disabled) || !element.name) {continue;}// ignore anyhting that is not considered a success fieldif (!k_r_success_contrls.test(element.nodeName) ||k_r_submitter.test(element.type)) {continue;}var key = element.name;var val = element.value;// we can't just use element.value for checkboxes cause some browsers lie to us// they say "on" for value when the box isn't checkedif ((element.type === 'checkbox' || element.type === 'radio') && !element.checked) {val = undefined;}// If we want empty elementsif (options.empty) {// for checkboxif (element.type === 'checkbox' && !element.checked) {val = '';}// for radioif (element.type === 'radio') {if (!radio_store[element.name] && !element.checked) {radio_store[element.name] = false;}else if (element.checked) {radio_store[element.name] = true;}}// if options empty is true, continue only if its radioif (val == undefined && element.type == 'radio') {continue;}}else {// value-less fields are ignored unless options.empty is trueif (!val) {continue;}}// multi select boxesif (element.type === 'select-multiple') {val = [];var selectOptions = element.options;var isSelectedOptions = false;for (var j=0 ; j<selectOptions.length ; ++j) {var option = selectOptions[j];var allowedEmpty = options.empty && !option.value;var hasValue = (option.value || allowedEmpty);if (option.selected && hasValue) {isSelectedOptions = true;// If using a hash serializer be sure to add the// correct notation for an array in the multi-select// context. Here the name attribute on the select element// might be missing the trailing bracket pair. Both names// "foo" and "foo[]" should be arrays.if (options.hash && key.slice(key.length - 2) !== '[]') {result = serializer(result, key + '[]', option.value);}else {result = serializer(result, key, option.value);}}}// Serialize if no selected options and options.empty is trueif (!isSelectedOptions && options.empty) {result = serializer(result, key, '');}continue;}result = serializer(result, key, val);}// Check for all empty radio buttons and serialize them with key=""if (options.empty) {for (var key in radio_store) {if (!radio_store[key]) {result = serializer(result, key, '');}}}return result;
}function parse_keys(string) {var keys = [];var prefix = /^([^\[\]]*)/;var children = new RegExp(brackets);var match = prefix.exec(string);if (match[1]) {keys.push(match[1]);}while ((match = children.exec(string)) !== null) {keys.push(match[1]);}return keys;
}function hash_assign(result, keys, value) {if (keys.length === 0) {result = value;return result;}var key = keys.shift();var between = key.match(/^\[(.+?)\]$/);if (key === '[]') {result = result || [];if (Array.isArray(result)) {result.push(hash_assign(null, keys, value));}else {// This might be the result of bad name attributes like "[][foo]",// in this case the original `result` object will already be// assigned to an object literal. Rather than coerce the object to// an array, or cause an exception the attribute "_values" is// assigned as an array.result._values = result._values || [];result._values.push(hash_assign(null, keys, value));}return result;}// Key is an attribute name and can be assigned directly.if (!between) {result[key] = hash_assign(result[key], keys, value);}else {var string = between[1];// +var converts the variable into a number// better than parseInt because it doesn't truncate away trailing// letters and actually fails if whole thing is not a numbervar index = +string;// If the characters between the brackets is not a number it is an// attribute name and can be assigned directly.if (isNaN(index)) {result = result || {};result[string] = hash_assign(result[string], keys, value);}else {result = result || [];result[index] = hash_assign(result[index], keys, value);}}return result;
}// Object/hash encoding serializer.
function hash_serializer(result, key, value) {var matches = key.match(brackets);// Has brackets? Use the recursive assignment function to walk the keys,// construct any missing objects in the result tree and make the assignment// at the end of the chain.if (matches) {var keys = parse_keys(key);hash_assign(result, keys, value);}else {// Non bracket notation can make assignments directly.var existing = result[key];// If the value has been assigned already (for instance when a radio and// a checkbox have the same name attribute) convert the previous value// into an array before pushing into it.//// NOTE: If this requirement were removed all hash creation and// assignment could go through `hash_assign`.if (existing) {if (!Array.isArray(existing)) {result[key] = [ existing ];}result[key].push(value);}else {result[key] = value;}}return result;
}// urlform encoding serializer
function str_serialize(result, key, value) {// encode newlines as \r\n cause the html spec says sovalue = value.replace(/(\r)?\n/g, '\r\n');value = encodeURIComponent(value);// spaces should be '+' rather than '%20'.value = value.replace(/%20/g, '+');return result + (result ? '&' : '') + encodeURIComponent(key) + '=' + value;
}

index.js：
（我們要寫的）

打開index.html，會有這樣的效果：

在這里插入圖片描述
而且點擊”添加“按鈕，會有彈框。

在這里插入圖片描述

一、獲取數據

1.首先，封裝函數，功能：獲取并渲染圖書列表。
而且每打開/刷新一次網頁，就獲取并渲染列表一次，即調用函數。

// 封裝-獲取并渲染圖書列表函數
function getBooksList() {// 函數體
}// 網頁加載運行，獲取并渲染列表一次
getBooksList()

2.獲取數據（axios）

下圖是接口文檔截圖。

在這里插入圖片描述

// 封裝-獲取并渲染圖書列表函數
function getBooksList() {// 1.1 獲取數據axios({url:'https://hmajax.itheima.net/api/books',   // 接口文檔有地址，最上面的框框params:{creator:'大魚'    // 接口文檔的“請求參數”，參數名 creator}}).then(result => {console.log(result)})
}// 網頁加載運行，獲取并渲染列表一次
getBooksList()

我們看一下控制臺打印結果：
在這里插入圖片描述

我們只想得到這個數組。

result.data.data

// 封裝-獲取并渲染圖書列表函數
function getBooksList() {// 1.1 獲取數據axios({url:'https://hmajax.itheima.net/api/books',   // 接口文檔有地址，最上面的框框params:{creator:'大魚'    // 接口文檔的“請求參數”，參數名 creator}}).then(result => {console.log(result)const bookList = result.data.dataconsole.log(bookList)})
}// 網頁加載運行，獲取并渲染列表一次
getBooksList()

在這里插入圖片描述

3.給自己起一個名字。
（一個圖書管理系統嘛，經過每個用戶編輯后的圖書列表都不一樣，但是不能影響別人的圖書列表）

const creator = '大魚'
// 封裝-獲取并渲染圖書列表函數
function getBooksList() {// 1.1 獲取數據axios({url:'https://hmajax.itheima.net/api/books',   // 接口文檔有地址，最上面的框框params:{// creator: creator（參數名和參數值相同，簡寫）creator   // 接口文檔的“請求參數”，參數名 creator}}).then(result => {console.log(result)const bookList = result.data.dataconsole.log(bookList)})
}// 網頁加載運行，獲取并渲染列表一次
getBooksList()

二、渲染數據

4.渲染數據

每一行圖書對應的是 <tr></tr>
在這里插入圖片描述

在這里插入圖片描述

然后復制。

// 1.2 渲染數據const htmlStr = bookList.map(item => {return `<tr><td>1</td><td>JavaScript程序設計</td><td>馬特·弗里斯比</td><td>人民郵電出版社</td><td><span class="del">刪除</span><span class="edit">編輯</span></td></tr>`})console.log(htmlStr)
})

在這里插入圖片描述

轉換成字符串,并渲染到頁面：

// 1.2 渲染數據const htmlStr = bookList.map(item => {return `<tr><td>1</td><td>JavaScript程序設計</td><td>馬特·弗里斯比</td><td>人民郵電出版社</td><td><span class="del">刪除</span><span class="edit">編輯</span></td></tr>`}).join('')console.log(htmlStr)document.querySelector('.list').innerHTML = htmlStr
})

在這里插入圖片描述

修改內容：

在這里插入圖片描述

        // 1.2 渲染數據
const htmlStr = bookList.map((item,index) => {return `<tr><td>${index + 1}</td><td>${item.bookList}</td><td>${item.author}</td><td>${item.publisher}</td><td><span class="del">刪除</span><span class="edit">編輯</span></td></tr>`
}).join('')
console.log(htmlStr)
document.querySelector('.list').innerHTML = htmlStr
})

完整代碼

const creator = '大魚'
// 封裝-獲取并渲染圖書列表函數
function getBooksList() {// 1.1 獲取數據axios({url:'https://hmajax.itheima.net/api/books',   // 接口文檔有地址，最上面的框框params:{// creator: creator（參數名和參數值相同，簡寫）creator   // 接口文檔的“請求參數”，參數名 creator}}).then(result => {console.log(result)const bookList = result.data.dataconsole.log(bookList)// 1.2 渲染數據const htmlStr = bookList.map((item,index) => {return `<tr><td>${index + 1}</td><td>${item.bookList}</td><td>${item.author}</td><td>${item.publisher}</td><td><span class="del">刪除</span><span class="edit">編輯</span></td></tr>`}).join('')console.log(htmlStr)document.querySelector('.list').innerHTML = htmlStr})
}// 網頁加載運行，獲取并渲染列表一次
getBooksList()