分類管理

添加分類

初步使用彈出層

給 “添加分類” 綁定一個單擊事件
單擊事件中，使用 layer.open() 實現一個彈出層
- type: 1, 彈層的類型是頁面層
- title, “添加文字分類”
- content: ‘字符串，DOM’,
- area: [‘500px’, ‘250px’]

 // ------------------  點擊 添加類別 的時候，顯示彈出層 -------------$('#addBtn').click(function () {// layui官網 --> 文檔 --> 內置模塊 --> 彈出層 --> 獨立版本：layer.layui.com// 或者，直接打開彈出層的獨立版本網站：layer.layui.com//頁面層add_id = layer.open({type: 1,// skin: 'layui-layer-rim', //加上邊框title: '添加文章類別',area: ['500px', '250px'], //寬高content: $('#add').html() // 內容，可以使用字符串，也可以使用DOM});});

彈層的內容區，使用DOM

我們可以在html頁面中，先準備一個模板（比如id=“add”）。然后open方法的content選項，我們使用 $(’#add’).html()

js代碼：

// 點擊添加分類按鈕，顯示彈層$('#showAdd').click(function () {var index = layer.open({type: 1, // 層的類型，1表示頁面層title: '添加文章類別', // 標題content: $('#add').html(), // 內容area: ['500px', '250px'], // 寬度高度});});

html中，添加的模板

<!-- 添加的彈層模板 --><script type="text/html" id="add"><form class="layui-form" action="" style="margin-top: 15px; margin-right: 50px;"><!-- 第一行 分類名稱 --><div class="layui-form-item"><label class="layui-form-label">分類名稱</label><div class="layui-input-block"><input type="text" name="name" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input"></div></div><!-- 第二行 分類別名  --><div class="layui-form-item"><label class="layui-form-label">分類別名</label><div class="layui-input-block"><input type="text" name="alias" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input"></div></div><!-- 第三行 按鈕 --><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">確認添加</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></script>

完成添加分類

必須使用事件委托的方案，為添加的表單注冊submit事件
發送ajax請求，如果說成功了
- 關閉彈層
  - 設置彈層的時候，使用變量接受彈層的返回值（每個彈層都有一個索引或者叫做id）
  - layer.close(層的索引或id)
  - 注意彈層索引，要設置為全局變量
- 從新渲染數據
  - 調用renderHtml()即可渲染

刪除分類

接口是需要的id參數是一個動態參數，使用方法： /my/article/deletecate/3

// /my/article/deletecate/:id
// /my/article/deletecate/3   ---- 刪除id為3的數據
// /my/article/deletecate/12   ---- 刪除id為12的數據

也是，必須使用事件委托的方案，為刪除注冊單擊事件
使用 layer.confirm('是否要刪除', {icon: 3, title: '提示'}, function (index) {})
獲取分類的id
- 渲染頁面的時候，給每個刪除按鈕，設置一個data-id屬性，值就是當前分類的Id，注意 Id 的 I 是大寫的。
- 事件內部，可以通過事件源獲取到id，注意$(this)指向改變
按照接口要求發送ajax請求，完成刪除

// -----------------  點擊刪除，完成刪除功能 -----------------
$('body').on('click', '.delete', function () {let that = $(this);layer.confirm('確定刪除嗎?', { icon: 3, title: '提示' }, function (index) {//do something// 獲取idlet id = that.attr('data-id');// ajax請求$.ajax({url: '/my/article/deletecate/' + id,success: function (res) {layer.msg(res.message);if (res.status === 0) {// 刪除成功，重新渲染頁面renderHtml();}}});layer.close(index); // 關閉彈層});
})

編輯分類

思路：

點擊編輯，彈層窗口（樣子和添加的窗口一樣）
- 事件委托的方案，為“編輯”按鈕注冊單擊事件（給編輯按鈕，添加了一個類 edit）
- 彈層的JS代碼，復制添加的代碼，然后修改
- 彈層的內容，直接復制添加的模板（復制之后，記得修改模板的id和form的id）
為表單賦值
- 為 “編輯” 按鈕，添加三個自定義屬性，data-id / data-name / data-alias
- 表單中，有一個隱藏域（id）
- 快速為表單元素賦值（必須等彈層出來，然后在為表單賦值）
點擊確認修改之后，可以實現修改

    // ------------------ 點擊編輯，顯示彈出層 ------------------$('body').on('click', '.edit', function () {// 先獲取按鈕的三個 data-xxx 屬性值，他們分別是 id、name、aliaslet id = $(this).attr('data-id');let name = $(this).attr('data-name');let alias = $(this).attr('data-alias');edit_id = layer.open({type: 1,// skin: 'layui-layer-rim', //加上邊框title: '編輯文章類別',area: ['500px', '250px'], //寬高content: $('#edit').html(), // 內容，可以使用字符串，也可以使用DOMsuccess: function () {// 彈層成功后，觸發的一個函數。在這里快速為表單賦值form.val('editForm', {id, name, alias});}});});

在這里插入圖片描述

具體實現：

在頁面渲染的時候，使用{{each}} 循環tr的時候，我們為 “編輯” 按鈕，設置三個自定義的屬性

data-id
data-name
data-alias

<!-- 數據列表的模板 -->
<script type="text/html" id="tpl-cateList">{{each data val}}<tr><td>{{val.name}}</td><td>{{val.alias}}</td><td><button data-id="{{val.Id}}" data-name="{{val.name}}" data-alias="{{val.alias}}" type="button" class="layui-btn layui-btn-xs editCate">編輯</button><button data-id="{{val.Id}}" type="button" class="layui-btn layui-btn-xs layui-btn-danger deleteCate">刪除</button></td></tr>{{/each}}
</script>

點擊編輯的時候，獲取上述三個自定義屬性的值。值，分別設置給彈層的表單中的input

// 點擊編輯的時候，彈層
$('body').on('click', '.editCate', function () {// 先獲取按鈕的三個 data-xxx 屬性值，他們分別是 id、name、aliaslet id = $(this).attr('data-id');let name = $(this).attr('data-name');let alias = $(this).attr('data-alias');// 彈層editIndex = layer.open({type: 1, // 頁面層title: '編輯分類',content: $('#tpl-edit').html(),area: ['500px', '250px'],// 等彈層出來之后，執行下面的success方法success: function () {// 關于 editForm參數，自行查看文檔// editForm對應的是表單的lay-filter="editForm"form.val('editForm', {id, name, alias});}});
});

點擊確認修改的時候，獲取表單的三項值，處理一下Id，ajax提交，完成修改。

奇葩的Id，I 是大寫的。。。

// 當編輯的表單提交的時候，發送ajax請求，完成編輯
// $('#form-edit').submit(); // 直接注冊不行，必須使用事件委托
$('body').on('submit', '#form-edit', function (e) {e.preventDefault();// console.log($(this).serialize()); // name=xxx&alias=16&id=1// var data = $(this).serialize().replace('id', 'Id');// console.log($(this).serializeArray());var data = $(this).serializeArray();data[0].name = 'Id';console.log(data);// console.log(data);$.post('/my/article/updatecate', data, function (res) {if (res.status !== 0) {return layer.msg(res.message);}layer.msg('更新分類成功');// 1. 從新渲染頁面renderHtml();// 2. 關閉彈層layer.close(editIndex);});

})

## 提交一下`git add .``git commit -m '完成了文章分類的增刪改查'`# 文章管理## 文章列表- 準備工作（創建頁面、掛好鏈接、引入所需的css和js文件）- 頁面布局 - 搜索區- 找到“組裝行內表單”- 下拉框沒有顯示，需要把 layui.all.js 的加載放到頁面的后面- 表格區- 自行復制代碼，然后跳轉寬度、設置按鈕- 分頁區
- 定義渲染文章列表的函數 （renderArticle）
- 定義renderArticle函數，函數內容，發送ajax請求，獲取數據，并調用template渲染
- ajax請求參數，我們先定義成全局變量
- 通過模板引擎提供的過濾器功能，對時間進行處理## 刪除文章- 給刪除按鈕，添加一個data-id屬性，值就是當前文章的id
- 給刪除按鈕添加一個類 delete
- JS代碼中，事件委托的方案，給刪除注冊單擊事件
- 事件內部，獲取id
- 詢問是否要刪除
- 如果確定刪除，則發送ajax請求，完成刪除
- 完成刪除之后，從新渲染頁面## 添加文章- 準備工作```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/assets/lib/layui/css/layui.css"><link rel="stylesheet" href="/assets/lib/cropper/cropper.css"><link rel="stylesheet" href="/assets/css/article/publish.css"><script src="/assets/lib/jquery.js"></script><!-- 剪裁用的js --><script src="/assets/lib/cropper/Cropper.js"></script><script src="/assets/lib/cropper/jquery-cropper.js"></script><!-- 內容區的富文本編輯器用的js --><script src="/assets/lib/tinymce/tinymce.min.js"></script><script src="/assets/lib/tinymce/tinymce_setup.js"></script><!-- 模板引擎js --><script src="/assets/lib/template-web.js"></script><script src="/assets/js/common.js"></script><script src="/assets/js/article/publish.js"></script>
</head>
<body><script src="/assets/lib/layui/layui.all.js"></script>
</body>
</html>

頁面布局
- 使用卡片面板
- 內容區放表單
- 表單的內容區
  - 去 “富文本和封面.md” 中，復制html代碼
  - 在自己的js中，調用一個 initEditor() 函數，即可實現
- 表單的圖片裁剪區
  - 去 “富文本和封面.md” 中，復制html代碼
  - 去 “富文本和封面.md” 中，復制css代碼
  - 去 “富文本和封面.md” 中，復制js代碼，實現初始化剪裁效果
- 按鈕區
  - 不要使用重置按鈕
- 使用兩個提交按鈕，修改里面的文字為 “發布”和“存為草稿”即可
介紹一下富文本編輯器
- 富文本編輯，也叫做在線文本編輯器、或在線html編輯器
- 它就是一個插件，允許我們在頁面中，像編輯word一樣來編輯你的文章內容
- 常用的富文本編輯器舉例
  - tinymce （我們項目中使用的，可制定性比較高）
  - ueditor（百度的產品）
  - ckeditor （外國的）
  - kindeditor（博客園使用了它）
- 一般在發布文章的時候使用它。

發布文章的具體實現：

獲取所有的分類，渲染到下拉框
- ajax請求之后，獲取到分類
- 使用模板引擎渲染select框
- 動態添加select框之后，發現頁面中的下拉框看不見了
  - 解決辦法是：使用 form.render() 方法更新渲染即可

點擊發布的時候，讓狀態是已發布，點擊存為草稿，讓狀態是草稿

var state = '已發布';
// 給發布和存為草稿分別注冊一個單擊事件
$('button:contains("發布")').click(function () {state = '已發布';
});
$('button:contains("存為草稿")').click(function () {state = '草稿';
});

把表單中，每個表單元素的name檢查一下，因為FormData是根據name獲取值的
點擊發布或存為草稿的時候，同樣會觸發表單提交事件
- 收集表單各項數據（title/content/cate_id）
- 手動追加 state
- 完成圖片裁剪，并將得到的圖片追加到FormData中
  - 裁剪之后，完成ajax請求，提交數據到接口，從而完成添加