分類管理

添加分類

初步使用彈出層

• 給 “添加分類” 綁定一個單擊事件
• 單擊事件中，使用 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請求，提交數據到接口，從而完成添加

編輯文章

• 復制添加文章頁為編輯頁面（edit.html）

• 文章列表頁，給“編輯掛超鏈接”，跳轉到編輯頁面，并掛id參數

  • id在編輯頁面可以區分當前修改的是那篇文章

• 到編輯頁面的js中

  • 獲取地址欄的id
  • 根據id獲取當前文章
  • 為表單快速賦值
  • 將剪裁區的圖片換成當前文章原始的圖片

其他JS代碼參照添加文章的代碼即可

分頁

• 文章列表頁，加載laypage模塊
• 編寫渲染分頁的函數 （renderPage）
• 渲染完文章列表之后，馬上渲染分頁
• renderPage函數
  • 根據官方文檔，生成分頁效果
  • jump事件中，修改請求參數中的pagenum和pagesize，并重新渲染列表

搜索

• 先處理好搜索區的兩個下拉框
• 監聽表單的提交事件
  • 獲取下拉框的值
  • 修改獲取文章列表的請求參數
  • 重新渲染文章列表

總結

以上是生活随笔為你收集整理的Ajax — 大事件项目（第四天）的全部內容，希望文章能夠幫你解決所遇到的問題。

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