分类管理

添加分类

初步使用弹出层

给 “添加分类” 绑定一个单击事件
单击事件中，使用 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请求，提交数据到接口，从而完成添加