窟美粒露校芭辰乳粹芒昏恼玲
在菜单添加编辑文章的url
创建artEdit()
<?php namespace app\admin\controller; use app\common\controller\Base; use app\common\model\Article as ArtModel; class Article extends Base { public function index() { //获取文档 //根据时间查询 paginate()可以分页 获取分页数据 每页8条 下方代码获取分页数据 $arts=ArtModel::order('create_time','desc')->paginate(8); //模板赋值 $this->view->arts = $arts; //渲染模板 return $this->view->fetch(); } //渲染添加文章模板 public function artAdd() { return $this->fetch(); } //处理富文本编辑器wangEditor中的图片上传 public function upload() { //接收图片信息,创建文件对象 $file=$this->request->file('img'); //将文件移动到目录目录中,并将结果返回给客户端处理 if($info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload')) { //客户端(wangEditor)要求返回的必须是JSON格式数据,默认没有加上上传目录,需要手工添加一下 $url=str_replace('\\','/',$info->getSaveName()); return json(['errno'=>0,'data'=>['/upload/'.$url]]); } else { return $file->getError(); } } //处理新增文章操作 public function doAdd() { //获取用户添加的文章数据 $data=$this->request->param(); //将数据添加到表中,并判断是否添加成功,如失败由客户端处理 if(ArtModel::create($data,true)) { return ['status'=>0,"msg"=>"添加成功"]; } } //处理编辑文章的操作 public function artEdit() { //编辑是基于查询的,所以必须先获取到要编辑的文档id $artId=$this->request->param('art_id'); ////获取到要更新的记录信息,并赋值给模板变量art $this->view->art=ArtModel::get($artId); //渲染文档编辑模板 return $this->view->fetch(); } }
导入x-admin里面的模板文件 并更名为art_edit.html
代码:
{include file="common@header"} <div class="x-body"> <form class="layui-form"> <div class="layui-form-item"> <label for="art_title" class="layui-form-label"> 文章标题 </label> <div class="layui-input-block"> <input type="text" id="art_title" value="{$art.art_title}" name="art_title" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label for="art_content" class="layui-form-label"> 文章内容 </label> <div class="layui-input-block" id="editor" > </div> </div> <div class="layui-form-item"> <label for="cate_id" class="layui-form-label"> 所属分类 </label> <div class="layui-input-inline"> <select id="cate_id" name="cate_id"> {//使用模型的助手函数获取所有的分类信息} {volist name=":model('category')->select()" id="cate"} <option value="{$cate.cate_id}" {eq name="cate.cate_id" value="$art.cate_id"} selected {/eq} >{$cate.cate_name}</option> {/volist} </select> </div> </div> <div class="layui-form-item"> <label for="art_order" class="layui-form-label"> 文章排序 </label> <div class="layui-input-inline"> <input type="text" id="art_order" value="{$art.art_order}" name="art_order" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label for="art_rec" class="layui-form-label"> 是否推荐 </label> <div class="layui-input-inline"> <input type="radio" name="art_rec" id="art_rec" value="1" title="推荐"> <input type="radio" name="art_rec" id="art_rec" value="0" title="普通" checked> </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> </label> <button class="layui-btn" lay-filter="add" lay-submit=""> 增加 </button> </div> </form> </div> <!-- 引入wangeditor编辑器的js文件 --> <script type="text/javascript" src="/static/admin/js/wangEditor.min.js"></script> <script> layui.use(['form','layer'], function(){ $ = layui.jquery; var form = layui.form,layer = layui.layer; //wangeditor的配置可以查看官网手册 //配置wangEditor富文本编辑器 ////将要用到的对象添加到全局 var E = window.wangEditor //生成editor对象 var editor = new E('#editor') //设置图片上传的控件名称:类似于input的name属性,供接口获取图片信息使用 //img中保存了上传图片的信息 可以在upload()中通过img对象获取这些信息 editor.customConfig.uploadFileName = 'img' //设置服务上的图片上传处理接口脚本 //上传图片的处理脚本是当前控制器(Article)下的upload() editor.customConfig.uploadImgServer = '{:url("upload")}' editor.create() //将当前文档的内容添加到编辑器,并将html代码进行反解析 editor.txt.html('{:htmlspecialchars_decode($art.art_content)}') //监听提交 form.on('submit(add)', function(data){ console.log(data); // 发异步,把数据提交给php $.post("{:url('doAdd')}",{ 'art_title' : $("#art_title").val(), //文档的内容必须以wangEditor规定的形式获取 'art_content' : editor.txt.html(), 'cate_id' : $("#cate_id").val(), 'art_order' : $("#art_order").val(), 'art_rec' : $("#art_rec").val() },function(data){ if(data.status==0) { layer.alert(data.msg, {icon: 6},function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(index); }); } else { layer.alert("添加失败", {icon: 6},function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(index); }); } }) return false; }); }); </script> </body> </html>
点击编辑
art_edit.html异步提交数据到doEdit()
{include file="common@header"} <div class="x-body"> <form class="layui-form"> <div class="layui-form-item"> <label for="art_title" class="layui-form-label"> 文章标题 </label> <div class="layui-input-block"> <input type="text" id="art_title" value="{$art.art_title}" name="art_title" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label for="art_content" class="layui-form-label"> 文章内容 </label> <div class="layui-input-block" id="editor" > </div> </div> <div class="layui-form-item"> <label for="cate_id" class="layui-form-label"> 所属分类 </label> <div class="layui-input-inline"> <select id="cate_id" name="cate_id"> {//使用模型的助手函数获取所有的分类信息} {volist name=":model('category')->select()" id="cate"} <option value="{$cate.cate_id}" {eq name="cate.cate_id" value="$art.cate_id"} selected {/eq} >{$cate.cate_name}</option> {/volist} </select> </div> </div> <div class="layui-form-item"> <label for="art_order" class="layui-form-label"> 文章排序 </label> <div class="layui-input-inline"> <input type="text" id="art_order" value="{$art.art_order}" name="art_order" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label for="art_rec" class="layui-form-label"> 是否推荐 </label> <div class="layui-input-inline"> <input type="radio" name="art_rec" id="art_rec" value="1" title="推荐"> <input type="radio" name="art_rec" id="art_rec" value="0" title="普通" checked> </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> </label> <button class="layui-btn" lay-filter="add" lay-submit=""> 保存 </button> </div> </form> </div> <!-- 引入wangeditor编辑器的js文件 --> <script type="text/javascript" src="/static/admin/js/wangEditor.min.js"></script> <script> layui.use(['form','layer'], function(){ $ = layui.jquery; var form = layui.form,layer = layui.layer; //wangeditor的配置可以查看官网手册 //配置wangEditor富文本编辑器 ////将要用到的对象添加到全局 var E = window.wangEditor //生成editor对象 var editor = new E('#editor') //设置图片上传的控件名称:类似于input的name属性,供接口获取图片信息使用 //img中保存了上传图片的信息 可以在upload()中通过img对象获取这些信息 editor.customConfig.uploadFileName = 'img' //设置服务上的图片上传处理接口脚本 //上传图片的处理脚本是当前控制器(Article)下的upload() editor.customConfig.uploadImgServer = '{:url("upload")}' editor.create() //将当前文档的内容添加到编辑器,并将html代码进行反解析 editor.txt.html('{:htmlspecialchars_decode($art.art_content)}') //监听提交 form.on('submit(add)', function(data){ console.log(data); // 发异步,把数据提交给php $.post("{:url('doEdit')}",{ 'art_id':{$art.art_id}, 'art_title' : $("#art_title").val(), //文档的内容必须以wangEditor规定的形式获取 'art_content' : editor.txt.html(), 'cate_id' : $("#cate_id").val(), 'art_order' : $("#art_order").val(), 'art_rec' : $("#art_rec").val() },function(data){ if(data.status==0) { layer.alert(data.msg, {icon: 6},function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(index); }); } else { layer.alert("更新失败", {icon: 6},function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(index); }); } }) return false; }); }); </script> </body> </html>
<?php namespace app\admin\controller; use app\common\controller\Base; use app\common\model\Article as ArtModel; class Article extends Base { public function index() { //获取文档 //根据时间查询 paginate()可以分页 获取分页数据 每页8条 下方代码获取分页数据 $arts=ArtModel::order('create_time','desc')->paginate(8); //模板赋值 $this->view->arts = $arts; //渲染模板 return $this->view->fetch(); } //渲染添加文章模板 public function artAdd() { return $this->fetch(); } //处理富文本编辑器wangEditor中的图片上传 public function upload() { //接收图片信息,创建文件对象 $file=$this->request->file('img'); //将文件移动到目录目录中,并将结果返回给客户端处理 if($info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload')) { //客户端(wangEditor)要求返回的必须是JSON格式数据,默认没有加上上传目录,需要手工添加一下 $url=str_replace('\\','/',$info->getSaveName()); return json(['errno'=>0,'data'=>['/upload/'.$url]]); } else { return $file->getError(); } } //处理新增文章操作 public function doAdd() { //获取用户添加的文章数据 $data=$this->request->param(); //将数据添加到表中,并判断是否添加成功,如失败由客户端处理 if(ArtModel::create($data,true)) { return ['status'=>0,"msg"=>"添加成功"]; } } //处理编辑文章的操作 public function artEdit() { //编辑是基于查询的,所以必须先获取到要编辑的文档id $artId=$this->request->param('art_id'); ////获取到要更新的记录信息,并赋值给模板变量art $this->view->art=ArtModel::get($artId); //渲染文档编辑模板 return $this->view->fetch(); } //处理编辑文章的操作 public function doEdit() { //必须有条件才能更新 可以先查询 再更新 //根据文章id查询文章模型,并返回该文章的实例对象 $art=ArtModel::get($this->request->param('art_id')); ////直接更新文章实例的对应字段信息:以对象属性方式 $art->art_title=$this->request->param('art_title'); $art->art_content=$this->request->param('art_content'); $art->cate_id=$this->request->param('cate_id'); $art->art_order=$this->request->param('art_order'); $art->art_rec=$this->request->param('art_rec'); //更新模型并判断是否成功? if($art->save()) { //可以返回状态0/1之间切换来测试前端的提示信息 return ['status'=>0,'msg'=>'更新成功']; } return ['status'=>1,'msg'=>'更新失败']; } }
修改文章
修改前
修改:
修改后:
文档软删除的实现
添加删除操作的url 及异步提交数据到del()
{include file="common@header"} <div class="x-nav"> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">文档</a> <a> <cite>文档列表</cite></a> </span> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"> <i class="layui-icon" style="line-height:30px">ဂ</i></a> </div> <div class="x-body"> <xblock> <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button> <button class="layui-btn" onclick="x_admin_show('添加用户','{:url(\"artAdd\")}')"><i class="layui-icon"></i>添加</button> </xblock> <table class="layui-table"> <thead> <tr> <th> <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div> </th> <th>ID</th> <th>标题</th> <th>分类</th> <th>排序</th> <th>推荐</th> <th>发布时间</th> <th>更新时间</th> <th >操作</th> </tr> </thead> <tbody> {volist name="arts" id="art"} <tr> <td> <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon"></i></div> </td> <td>{$art.art_id}</td> <!-- 这里使用系统函数mb_substr只获取标题的25个字符 --> <td>{:mb_substr($art.art_title,0,25,'utf8')}</td> {//为了直观,这里调用了自定义函数:根据分类id,自动获取对应的分类名称} <td>{:getCateName($art.cate_id)}</td> <td>{$art.art_order}</td> <td> {//如果变量art.art_rec值为1 输出推荐 否则输出普通} {eq name="art.art_rec" value="1"} 推荐 {else/} 普通 {/eq} </td> <td>{$art.create_time}</td> <td>{$art.update_time}</td> <td class="td-manage"> <a title="编辑" onclick="x_admin_show('编辑','{:url(\'artEdit\')}?art_id={$art.art_id}')" href="javascript:;"> <i class="layui-icon"></i> </a> <a title="删除" onclick="member_del(this,'{$art.art_id}')" href="javascript:;"> <i class="layui-icon"></i> </a> </td> </tr> {/volist} </tbody> </table> <div class="page"> <div> {//显示分页 raw将html代码进行解析} {$arts|raw} </div> </div> </div> <script> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#start' //指定元素 }); //执行一个laydate实例 laydate.render({ elem: '#end' //指定元素 }); }); /*用户-删除*/ function member_del(obj,id){ layer.confirm('确认要删除吗?',function(index){ //发异步删除数据 $.get("{:url('del')}",{ 'art_id':id },function (data){ if(data.status==0) { $(obj).parents("tr").remove(); layer.msg(data.msg,{icon:1,time:1000}); } else { layer.msg("删除失败",{icon:1,time:1000}); } }) }); } function delAll (argument) { var data = tableCheck.getData(); layer.confirm('确认要删除吗?'+data,function(index){ //捉到所有被选中的,发异步进行删除 layer.msg('删除成功', {icon: 1}); $(".layui-form-checked").not('.header').parents('tr').remove(); }); } </script> </body> </html>
<?php namespace app\admin\controller; use app\common\controller\Base; use app\common\model\Article as ArtModel; class Article extends Base { public function index() { //获取文档 //根据时间查询 paginate()可以分页 获取分页数据 每页8条 下方代码获取分页数据 $arts=ArtModel::order('create_time','desc')->paginate(8); //模板赋值 $this->view->arts = $arts; //渲染模板 return $this->view->fetch(); } //渲染添加文章模板 public function artAdd() { return $this->fetch(); } //处理富文本编辑器wangEditor中的图片上传 public function upload() { //接收图片信息,创建文件对象 $file=$this->request->file('img'); //将文件移动到目录目录中,并将结果返回给客户端处理 if($info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload')) { //客户端(wangEditor)要求返回的必须是JSON格式数据,默认没有加上上传目录,需要手工添加一下 $url=str_replace('\\','/',$info->getSaveName()); return json(['errno'=>0,'data'=>['/upload/'.$url]]); } else { return $file->getError(); } } //处理新增文章操作 public function doAdd() { //获取用户添加的文章数据 $data=$this->request->param(); //将数据添加到表中,并判断是否添加成功,如失败由客户端处理 if(ArtModel::create($data,true)) { return ['status'=>0,"msg"=>"添加成功"]; } } //处理编辑文章的操作 public function artEdit() { //编辑是基于查询的,所以必须先获取到要编辑的文档id $artId=$this->request->param('art_id'); ////获取到要更新的记录信息,并赋值给模板变量art $this->view->art=ArtModel::get($artId); //渲染文档编辑模板 return $this->view->fetch(); } //处理编辑文章的操作 public function doEdit() { //必须有条件才能更新 可以先查询 再更新 //根据文章id查询文章模型,并返回该文章的实例对象 $art=ArtModel::get($this->request->param('art_id')); ////直接更新文章实例的对应字段信息:以对象属性方式 $art->art_title=$this->request->param('art_title'); $art->art_content=$this->request->param('art_content'); $art->cate_id=$this->request->param('cate_id'); $art->art_order=$this->request->param('art_order'); $art->art_rec=$this->request->param('art_rec'); //更新模型并判断是否成功? if($art->save()) { //可以返回状态0/1之间切换来测试前端的提示信息 return ['status'=>0,'msg'=>'更新成功']; } return ['status'=>1,'msg'=>'更新失败']; } //软删除单篇文章 public function del() { $art_id=$this->request->param('art_id'); if(ArtModel::destroy($art_id)) { return ['status'=>0,'msg'=>'删除成功!']; } } }
删除单篇文章测试:
删除成功
多篇文章软删除实现
注意,要实现软删除,必须在数据前面的选择框的属性设置值为art_id:
即:
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{$art.art_id}'><i class="layui-icon"></i></div>
index.html:
{include file="common@header"} <div class="x-nav"> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">文档</a> <a> <cite>文档列表</cite></a> </span> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"> <i class="layui-icon" style="line-height:30px">ဂ</i></a> </div> <div class="x-body"> <xblock> <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button> <button class="layui-btn" onclick="x_admin_show('添加用户','{:url(\"artAdd\")}')"><i class="layui-icon"></i>添加</button> </xblock> <table class="layui-table"> <thead> <tr> <th> <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div> </th> <th>ID</th> <th>标题</th> <th>分类</th> <th>排序</th> <th>推荐</th> <th>发布时间</th> <th>更新时间</th> <th >操作</th> </tr> </thead> <tbody> {volist name="arts" id="art"} <tr> <td> <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{$art.art_id}'><i class="layui-icon"></i></div> </td> <td>{$art.art_id}</td> <!-- 这里使用系统函数mb_substr只获取标题的25个字符 --> <td>{:mb_substr($art.art_title,0,25,'utf8')}</td> {//为了直观,这里调用了自定义函数:根据分类id,自动获取对应的分类名称} <td>{:getCateName($art.cate_id)}</td> <td>{$art.art_order}</td> <td> {//如果变量art.art_rec值为1 输出推荐 否则输出普通} {eq name="art.art_rec" value="1"} 推荐 {else/} 普通 {/eq} </td> <td>{$art.create_time}</td> <td>{$art.update_time}</td> <td class="td-manage"> <a title="编辑" onclick="x_admin_show('编辑','{:url(\'artEdit\')}?art_id={$art.art_id}')" href="javascript:;"> <i class="layui-icon"></i> </a> <a title="删除" onclick="member_del(this,'{$art.art_id}')" href="javascript:;"> <i class="layui-icon"></i> </a> </td> </tr> {/volist} </tbody> </table> <div class="page"> <div> {//显示分页 raw将html代码进行解析} {$arts|raw} </div> </div> </div> <script> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#start' //指定元素 }); //执行一个laydate实例 laydate.render({ elem: '#end' //指定元素 }); }); /*用户-删除*/ function member_del(obj,id){ layer.confirm('确认要删除吗?',function(index){ //发异步删除数据 $.get("{:url('del')}",{ 'art_id':id },function (data){ if(data.status==0) { $(obj).parents("tr").remove(); layer.msg(data.msg,{icon:1,time:1000}); } else { layer.msg("删除失败",{icon:1,time:1000}); } }) }); } //批量删除需要在将数据前面的选择框的属性这样写才能获取到数据的id:data-id='{$art.art_id}' function delAll (argument) { var data = tableCheck.getData(); layer.confirm('确认要删除吗?'+data,function(index){ //捕捉到所有被选中的,发异步进行删除 $.get("{:url('delAll')}",{ //将js数组转为json发送给服务器 'id_list':JSON.stringify(data) },function(data){ if(data.status==0) { layer.msg(data.msg, {icon: 1}); $(".layui-form-checked").not('.header').parents('tr').remove(); } else { layer.msg("删除失败", {icon: 1}); } }) }); } </script> </body> </html>
<?php namespace app\admin\controller; use app\common\controller\Base; use app\common\model\Article as ArtModel; class Article extends Base { public function index() { //获取文档 //根据时间查询 paginate()可以分页 获取分页数据 每页8条 下方代码获取分页数据 $arts=ArtModel::order('create_time','desc')->paginate(8); //模板赋值 $this->view->arts = $arts; //渲染模板 return $this->view->fetch(); } //渲染添加文章模板 public function artAdd() { return $this->fetch(); } //处理富文本编辑器wangEditor中的图片上传 public function upload() { //接收图片信息,创建文件对象 $file=$this->request->file('img'); //将文件移动到目录目录中,并将结果返回给客户端处理 if($info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload')) { //客户端(wangEditor)要求返回的必须是JSON格式数据,默认没有加上上传目录,需要手工添加一下 $url=str_replace('\\','/',$info->getSaveName()); return json(['errno'=>0,'data'=>['/upload/'.$url]]); } else { return $file->getError(); } } //处理新增文章操作 public function doAdd() { //获取用户添加的文章数据 $data=$this->request->param(); //将数据添加到表中,并判断是否添加成功,如失败由客户端处理 if(ArtModel::create($data,true)) { return ['status'=>0,"msg"=>"添加成功"]; } } //处理编辑文章的操作 public function artEdit() { //编辑是基于查询的,所以必须先获取到要编辑的文档id $artId=$this->request->param('art_id'); ////获取到要更新的记录信息,并赋值给模板变量art $this->view->art=ArtModel::get($artId); //渲染文档编辑模板 return $this->view->fetch(); } //处理编辑文章的操作 public function doEdit() { //必须有条件才能更新 可以先查询 再更新 //根据文章id查询文章模型,并返回该文章的实例对象 $art=ArtModel::get($this->request->param('art_id')); ////直接更新文章实例的对应字段信息:以对象属性方式 $art->art_title=$this->request->param('art_title'); $art->art_content=$this->request->param('art_content'); $art->cate_id=$this->request->param('cate_id'); $art->art_order=$this->request->param('art_order'); $art->art_rec=$this->request->param('art_rec'); //更新模型并判断是否成功? if($art->save()) { //可以返回状态0/1之间切换来测试前端的提示信息 return ['status'=>0,'msg'=>'更新成功']; } return ['status'=>1,'msg'=>'更新失败']; } //软删除单篇文章 public function del() { $art_id=$this->request->param('art_id'); if(ArtModel::destroy($art_id)) { return ['status'=>0,'msg'=>'删除成功!']; } } //删除多篇数据 public function delAll() { //接收传递过来的json数据 $idList = $this->request->param('id_list'); //将传输过来的json数据转化为数组 $idList = json_decode($idList); //软删除多条数据 if (ArtModel::destroy($idList)) { return ['status'=>0, 'msg'=>'删除成功']; } } }
批量软删除:
款虽虾犯靛坟为文粟擒俊氓怒