分类管理

添加分类

初步使用弹出层

给 “添加分类” 绑定一个单击事件
单击事件中，使用 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
        // 获取id
        let 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、alias
        let 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(), // 内容，可以使用字符串，也可以使用DOM
            success: 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、alias
    let 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 — 大事件项目（第四天）