闽侯福州网站建设,广元园区建设投资有限公司网站,仪征网站建设公司哪家好,莱芜金点子招工招聘分类管理
添加分类
初步使用弹出层
给 “添加分类” 绑定一个单击事件单击事件中#xff0c;使用 layer.open() 实现一个弹出层 type: 1, 弹层的类型是页面层title, “添加文字分类”content: ‘字符串#xff0c;DOM’,area: [‘500px’, ‘250px’] // ---------------…分类管理
添加分类
初步使用弹出层
给 “添加分类” 绑定一个单击事件单击事件中使用 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 typetext/html idaddform classlayui-form action stylemargin-top: 15px; margin-right: 50px;!-- 第一行 分类名称 --div classlayui-form-itemlabel classlayui-form-label分类名称/labeldiv classlayui-input-blockinput typetext namename required lay-verifyrequired placeholder请输入标题 autocompleteoff classlayui-input/div/div!-- 第二行 分类别名 --div classlayui-form-itemlabel classlayui-form-label分类别名/labeldiv classlayui-input-blockinput typetext namealias required lay-verifyrequired placeholder请输入标题 autocompleteoff classlayui-input/div/div!-- 第三行 按钮 --div classlayui-form-itemdiv classlayui-input-blockbutton classlayui-btn lay-submit lay-filterformDemo确认添加/buttonbutton typereset classlayui-btn layui-btn-primary重置/button/div/div/form/script完成添加分类
必须使用事件委托的方案为添加的表单注册submit事件发送ajax请求如果说成功了 关闭弹层 设置弹层的时候使用变量接受弹层的返回值每个弹层都有一个索引或者叫做idlayer.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-iddata-namedata-alias !-- 数据列表的模板 --
script typetext/html idtpl-cateList{{each data val}}trtd{{val.name}}/tdtd{{val.alias}}/tdtdbutton data-id{{val.Id}} data-name{{val.name}} data-alias{{val.alias}} typebutton classlayui-btn layui-btn-xs editCate编辑/buttonbutton data-id{{val.Id}} typebutton classlayui-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-filtereditFormform.val(editForm, {id, name, alias});}});
});点击确认修改的时候获取表单的三项值处理一下Idajax提交完成修改。 奇葩的IdI 是大写的。。。 // 当编辑的表单提交的时候发送ajax请求完成编辑
// $(#form-edit).submit(); // 直接注册不行必须使用事件委托
$(body).on(submit, #form-edit, function (e) {e.preventDefault();// console.log($(this).serialize()); // namexxxalias16id1// 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href/assets/lib/layui/css/layui.csslink relstylesheet href/assets/lib/cropper/cropper.csslink relstylesheet href/assets/css/article/publish.cssscript src/assets/lib/jquery.js/script!-- 剪裁用的js --script src/assets/lib/cropper/Cropper.js/scriptscript src/assets/lib/cropper/jquery-cropper.js/script!-- 内容区的富文本编辑器用的js --script src/assets/lib/tinymce/tinymce.min.js/scriptscript src/assets/lib/tinymce/tinymce_setup.js/script!-- 模板引擎js --script src/assets/lib/template-web.js/scriptscript src/assets/js/common.js/scriptscript src/assets/js/article/publish.js/script
/head
bodyscript 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并重新渲染列表
搜索
先处理好搜索区的两个下拉框监听表单的提交事件 获取下拉框的值修改获取文章列表的请求参数重新渲染文章列表
