大事件项目之发布文章、文章列表、分页以及删除文章功能

大事件项目day03
注意：
一、文章分类
1、获取并使用模板引擎渲染表格的数据
（1）利用模板引擎来进行渲染
（2）在页面底部导入模板引擎
（3）定义模板

（4）发起请求获取数据

2、使用layer.open实现弹出层效果
（1）导入 layer
（2）为按钮添加 id 属性
（3）在按钮的点击事件中，通过 layer.open() 展示弹出层
** area控制弹出层大小**
3、在弹出层中渲染form表单结构
4、实现添加文章分类的功能
（1）发起Ajax请求，注意，我们这个按钮不是写死的，是弹框出来的时候动态生成的，所以我们通过事件委派方式给表单绑定submit事件

（2）预先保存弹出层的索引，方便进行关闭

二、文章类别
1、编辑功能
（1）点击编辑按钮展示修改文章分类的弹出层
（2）为修改文章分类的弹出层填充表单数据
①为编辑按钮绑定 data-id 自定义属性
②在展示弹出层之后，根据 id 的值发起请求获取文章分类的数据，并填充到表单中
（3）更新文章分类的数据
①通过 事件委派 的方式，给修改按钮绑定点击事件
②查阅接口文档，利用 $.ajax() 发送 post 请求
③判断服务器返回的 status 是否等于0，如果不等于，利用 layer.msg 提示用户
④如果等于0，代表编辑成功，关闭当前弹出层，调用 initArtCateList() 方法获取最新的数据
2、删除功能
（1）为删除按钮绑定 btn-delete 类名，并添加 data-id 自定义属性
（2）通过代理的形式，为删除按钮绑定点击事件
三、发布文章
1、创建文章发布页面的基本结构
2、渲染富文本编辑器
3、渲染封面裁剪区域
4、点击选择封面按钮打开文件选择框
（1）修改 UI 结构，为 选择封面 按钮添加 id，并且在按钮后面添加 文件选择框
（2）为选择封面的按钮，绑定点击事件处理函数
5、将选择的图片设置到裁剪区域中
（1）监听 coverFile 的 change 事件，获取用户选择的文件列表
（2）跟进文件，创建对应的 URL 地址
（3）为裁剪区域重新设置图片
①销毁旧的裁剪区域
②重新设置图片路径
③重新初始化裁剪区域

6、分析发布文章的实现步骤
（1）为 存为草稿 按钮添加 id 属性
（2）定义文章的发布状态
（3）为存为草稿按钮，绑定点击事件处理函数
7、基于Form表单创建FormData对象
（1）为发布文章的 Form 表单添加 id 属性、
（2）为表单绑定 submit 提交事件
①阻止表单默认提交行为
②基于 form 表单，快速创建一个 FormData 对象
③将文章的发布状态，存到 FormData 对象中

8、将裁剪后的封面追加到FormData对象中
（1）将裁剪后的图片输出成一个文件
（2）把文件追加到 formData 中即可

9、发起Ajax请求实现发布文章的功能
（1）定义一个发布文章的方法
注意：如果是提交的是FormData格式数据，需要添加 contentType：false ，processData：false

（2）把裁剪的图片追加到 FormData 对象中之后，调用 publishArticle 方法

四、分页功能
1、定义渲染分页的 renderPage 方法
2、调用 laypage.render 方法渲染分页的基本结构
调用 laypage.render() 方法来渲染分页的结构
（1）elem 分页容器的 id
（2）count 总数据条数
（3）limit 每页显示几条数据
（4）curr 设置默认被选中的分页

3、在jump回调函数中通过obj.curr获取到最新的页码值
（1）分页发生切换的时候，触发 jump 回调
（2）把最新的页码值赋值给请求参数 q

4、解决 jump 回调函数发生死循环的问题
（1）触发jump的原因
①点击页码的时候会触发 jump 的回调
②只要调用了 laypage.render() 方法就会触发jump回调
★我们在定义分页结构的时候，我们调用了 laypage.render() 方法，一旦调用，我们触发了 jump回调
★我们在 jump回调里面又调用了 initTable() 方法
★initTable() 里面请求成功之后，又调用了 laypage.render() 方法，所以发生了死循环
（2）判断 jump 回调的触发方式就可以解决了
（3）jump 的第二个参数就能帮我们判断出来，如果第二个参数为true，就代表是利用 laypage.render() 方法触发的
5、自定义分页的功能项

6、实现切换每页展示多少条数据的功能
（1）通过 jump 回调来实现，当我们切换了 每页显示条目数后，会触发这个回调
（2）通过 obj.limit 就能获取用户选择的是第几条
（3）拿到最新条目数后，我们设置给请求对象q里面
（4）然后重新调用 initTable() 来获取最新数据

五、删除文章
1、实现删除文章的功能
（1）为删除按钮绑定 btn-delete 类名和 data-id 自定义属性
（2）通过代理的形式，为删除按钮绑定点击事件处理函数
①弹出确认取消框提示用户
②用户点击确认，发送请求，删除当前文章，携带文章id
③请求成功之后，获取最新的文章列表信息
④关闭当前弹出层
2、解决删除文章时的小 Bug
问题：删除后，页码值虽然正常，但是当前页码的数据没有渲染出来
解决：
判断删除后，页面上是否还有数据
（1）判断当前页面的删除按钮的长度是否等于1
（2）如果等于1，那么我们让当前页码-1即可，如果不等于1，不用处理

六、文章列表功能
1、创建文章列表页面
2、定义查询参数对象q
（1）pagenum 告知服务器我们需要的是第几页数据
（2）pagesize 每页能够显示的条目数
（3）cate_id 你需要找哪一个分类下的文章，默认是所有文章
（4）state 你需要查找的是什么状态的文章

3、请求文章列表数据并使用模板引擎渲染列表结构
（1）定义获取文章列表数据的方法 initTable()

（2）在页面中添加表格结构
（3）定义列表数据的模板结构

4、定义美化时间格式的过滤器
（1）通过 template.defaults.imports 定义过滤器

（2）在模板引擎中使用过滤器

5、绘制筛选区域的UI结构
6、发起请求获取并渲染文章分类的下拉选择框
（1）定义 initCate 函数请求文章分类的列表数据
①利用$.ajax() 发送get请求
②判断服务器返回的 status 是否等于0，如果不等于，提示用户
③如果等于，通过template得到渲染完毕后的html结构
④利用属性选择器渲染到第一个select里面

（2）定义分类可选项的模板结构

7、实现筛选的功能
（1）需要先绑定表单的 submit 事件
（2）在事件里面获取到表单中选中的值
（3）然后把这个值同步到我们 参数对象 q 里面
（4）再次调用 initTable() 方法即可

有关大事件项目用户基本资料修改请点击a=href"https://i.cnblogs.com/posts/edit;postId=14287382"