分类管理
添加分类
初步使用弹出层
- 给 “添加分类” 绑定一个单击事件
- 单击事件中,使用 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,并重新渲染列表
搜索
- 先处理好搜索区的两个下拉框
- 监听表单的提交事件
- 获取下拉框的值
- 修改获取文章列表的请求参数
- 重新渲染文章列表