Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第18章 cms实战开发9（内容列表新增和删除作业）-2019年11月26日20时00分
Blogger Information
Blog 34
fans 0
comment 0
visits 22916
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第18章 cms实战开发9（内容列表新增和删除作业）-2019年11月26日20时00分
Tommy-黄天浩的博客
Original
817 people have browsed it

参考课程内容，完成后台文章修改及删除功能 

内容列表首页index.blade.php新增js代码：

<script type="text/javascript">
    //文章添加/修改
    function add(id) {
        window.location.href='/admins/content/add?id='+id;
    }

    // 文章删除
    function del(id){
        layer.confirm('确定要删除吗？', {
            icon:3,
            btn: ['确定','取消']
        }, function(){
            $.post('/admins/content/del',{id:id,_token:$('input[name="_token"]').val()},function(res){
                if(res.code>0){
                    layer.msg(res.msg,{icon:2});
                }else{
                    layer.msg(res.msg,{icon:1});
                    setTimeout(function(){window.location.reload();},1000);
                }
            },'json');
        });
    }
</script>

完整的index.blade.php页面代码如下：

<!DOCTYPE html>
<head>
    <title>内容管理</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/css/style.css"  media="all">
    <script type="text/javascript" src="/static/js/jquery3.4.1.js"></script>
    <script type="text/javascript" src="/static/layer/layer.js"></script>
    <script type="text/javascript" src="/static/js/phpcn.js"></script>
</head>
<body>
<div class="phpcn-pd-10 phpcn-bg-fff">
    @csrf
    <div class="phpcn-list-header phpcn-mb-20 phpcn-clear">
        <div class="phpcn-row">
            <div class="phpcn-title phpcn-ps-r">内容列表</div>
            <button class="phpcn-button phpcn-bg-black phpcn-button-edit" onclick="add()" style="color:#fff;float:right;">添加</button>
            <div class="phpcn-col-md6 phpcn-mt-20">
                <div class="phpcn-form phpcn-bg-fff ">
                    <div class="phpcn-form-item phpcn-bg-fff ">
                        <div class="phpcn-input-block phpcn-col-md3">
                            <select name="type">
                                <option value="1" {{isset($type) && $type==1?'selected':''}}>标题</option>
                                <option value="2" {{isset($type) && $type==2?'selected':''}}>作者</option>
                            </select>
                        </div>
                        <div class="phpcn-input-block phpcn-col-md3">
                            <input type="text" name="wd" placeholder="搜索内容" class="phpcn-input" value="{{isset($wd)?$wd:''}}">
                        </div>
                        <div class="phpcn-input-block phpcn-col-md2 phpcn-ml-10">
                            <button class="phpcn-button" onclick="searchs()">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <table class="phpcn-table">
        <thead>
        <tr>
            <th>ID</th>
{{--            <th>模版</th>--}}
            <th>标题</th>
            <th>分类</th>
            <th>作者</th>
            <th>修改时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        @foreach($lists as $item)
        <tr>
            <td>{{$item['id']}}</td>
            <td>{{$item['title']}}</td>
            <td>{{$item['cate_title']}}</td>
            <td>{{$item['author']}}</td>
            <td>{{date('Y-m-d H:i:s',$item['edit_time'])}}</td>
            <td>{!!$item['status']==0?'待发布':'<span style="color:#FF5722">已发布</span>'!!}</td>
            <td>
                <button class="phpcn-button phpcn-bg-black phpcn-button-edit" onclick="add({{$item['id']}})">修改</button>
                <button class="phpcn-button phpcn-bg-red phpcn-button-edit" onclick="del({{$item['id']}})">删除</button>
            </td>
        </tr>
        @endforeach
        </tbody>
    </table>
    {{$links}}
</div>
<script type="text/javascript">
    function searchs() {
        var type=$('select[name="type"]').val();
        var wd=$.trim($('input[name="wd"]').val());
        window.location.href='/admins/content/index?type='+type+'&wd='+wd;
    }

    function add(id) {
        window.location.href='/admins/content/add?id='+id;
    }

    // 文章删除
    function del(id){
        layer.confirm('确定要删除吗？', {
            icon:3,
            btn: ['确定','取消']
        }, function(){
            $.post('/admins/content/del',{id:id,_token:$('input[name="_token"]').val()},function(res){
                if(res.code>0){
                    layer.msg(res.msg,{icon:2});
                }else{
                    layer.msg(res.msg,{icon:1});
                    setTimeout(function(){window.location.reload();},1000);
                }
            },'json');
        });
    }
</script>
</body>
</html>

完整的add.blade.php文章添加/修改页面代码如下：

<!DOCTYPE html>
<head>
    <title>内容添加</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/css/style.css"  media="all">
    <script type="text/javascript" src="/static/js/jquery3.4.1.js"></script>
    <script type="text/javascript" src="/static/layer/layer.js"></script>
    <script type="text/javascript" src="/static/js/phpcn.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
</head>
<body>
<form class="phpcn-form phpcn-bg-fff phpcn-p-10 phpcn-clear">
    @csrf
    <input type="hidden" name="id" value="{{$id}}">
    <div class='phpcn-l phpcn-col-xs6 phpcn-box-sizing'>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">标题</label>
            <div class="phpcn-input-inline">
                <input type="text" class="phpcn-input" name="title" value="{{$article['title']}}">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">副标题</label>
            <div class="phpcn-input-inline">
                <input type="text" class="phpcn-input" name="subtitle" value="{{$article['subtitle']}}">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">分类</label>
            <div class="phpcn-input-inline phpcn-form-select">
                <select name="cate_id" lay-filter="cate_id">
                    @foreach($lists as $item)
                    <option value="{{$item['id']}}" {{isset($article['cate_id']) && $article['cate_id']==$item['id']?'selected':''}}>{{$item['title']}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">封面图</label>
            <div class="phpcn-input-inline phpcn-form-file">
                <button class="phpcn-button" type='button' onclick="$('#file_upload').click();"><i class="phpcn-icon phpcn-icon-jindutiaodaishangchuan"></i>选择文件</button>

                <img id="pre_img"  style="height: 38px;" onmouseover="show_img()" onmouseleave="hide_img()" />
                <span style="color: gray;">封面图 为PNG/JPG/GIF 格式图片</span>
                <iframe name="frame1" id="frame1" style="display: none;"></iframe>
                <input type="hidden" name="cover_img" id="imgurl" value="">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">seo标题</label>
            <div class="phpcn-input-inline">
                <input type="text" class="phpcn-input" name="seo_title" value="{{$article['seo_title']}}">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">keyword</label>
            <div class="phpcn-input-inline">
                <input type="text" class="phpcn-input" name="keyword" value="{{$article['keyword']}}">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">文章摘要</label>
            <div class="phpcn-input-inline">
                <input type="text" class="phpcn-input" name="descs" value="{{$article['descs']}}">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">作者</label>
            <div class="phpcn-input-inline">
                <input type="text" class="phpcn-input" name="author" value="{{$article['author']}}">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">来源</label>
            <div class="phpcn-input-inline">
                <input type="text" class="phpcn-input" name="from_site" value="{{$article['from_site']}}">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">来源URL</label>
            <div class="phpcn-input-inline">
                <input type="text" class="phpcn-input" name="from_url" value="{{$article['from_url']}}">
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">评论</label>
            <div class="phpcn-input-inline phpcn-form-radio">
                <input type="radio" name="is_comment" value="1" title="开启" {{isset($article['is_comment']) && $article['is_comment']==1?'checked':''}}>
                <input type="radio" name="is_comment" value="0" title="关闭" {{isset($article['is_comment']) && $article['is_comment']==0?'checked':''}}>
            </div>
        </div>
        <div class="phpcn-form-item">
            <label class="phpcn-form-lable">状态</label>
            <div class="phpcn-input-inline phpcn-form-radio">
                <input type="radio" name="status" value="1" title="开启" {{isset($article['status']) && $article['status']==1?'checked':''}}>
                <input type="radio" name="status" value="0" title="关闭" {{isset($article['status']) && $article['status']==0?'checked':''}}>
            </div>
        </div>
    </div>
    <div class="phpcn-form-item phpcn-r">
        <div class="phpcn-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id='content' name="contents">{{isset($content['contents'])?$content['contents']:''}}</textarea>
        </div>
    </div>
</form>
<form target="frame1" enctype="multipart/form-data" action="/admins/image/index" method="post" style="display: none;">
    @csrf
    <input type="file" name="file_upload" id="file_upload" onchange="upload_img(this)">
</form>
<div class="phpcn-form-item phpcn-bg-fff phpcn-clear">
    <div class="phpcn-tx-c">
        <button type="button" class="phpcn-button" onclick="content_save();">保存</button>
        <button type="button" class="phpcn-button phpcn-bg-black" onclick="cancel();">取消</button>
    </div>
</div>
<script type="text/javascript">
    //文章保存
    function content_save() {
        $.post('/admins/content/save',$('.phpcn-form').serialize(),function (res) {
            if(res.code>0){
                layer.alert(res.msg,{icon:2});
            }else{
                layer.msg(res.msg,{icon:1});
                setTimeout(function(){window.location.href='/admins/content/index';},1000);
            }
        },'json')
    }

    // 取消
    function cancel(){
        history.go(-1);
    }

    init_editor();
    function init_editor() {
        var ue_width = $('.phpcn-col-xs6').width() - 20;
        var ue_height = $(window).height() - 180;
        var ue = UE.getEditor('content',{initialFrameWidth:ue_width,initialFrameHeight:ue_height});
    }
</script>
</body>
</html>

控制器Content.php代码：

<?php

namespace xpcms\Http\Controllers\admins;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use xpcms\Http\Controllers\Controller;

class Content extends Controller{
    //内容管理首页
    public function index(Request $req){
        $type=(int)$req->type;
        $wd=trim($req->wd);
        $appends=['type'=>$type,'wd'=>$wd];
        $objDb=DB::table('xpcms_article');
        if ($type==1){
            $objDb=$objDb->where('title','like','%'.$wd.'%');
        }
        if ($type==2){
            $objD=$objDb->where('author','like','%'.$wd.'%');
        }
        $data=$objDb->orderBy('id','desc')->pages(10,$appends);

        //把数组中某一个字段取出来作为一个单独的数组
        $cate_id=array_column($data['lists'],'cate_id');
        //whereIn 方法验证字段的值必须存在指定的数组里
        $category=DB::table('xpcms_article_category')->whereIn('id',$cate_id)->cates('id');
        //把分类的title加进去
        foreach ($data['lists'] as $key=>$list){
            $data['lists'][$key]['cate_title']=$category[$list['cate_id']]['title'];
        }

        $data['type']=$type;
        $data['wd']=$wd;
        return view('admins/content/index',$data);
    }

    //内容添加
    public function add(Request $req){
        $id=(int)$req->id;
        $res=DB::table('xpcms_article_category')->lists();
        $article=DB::table('xpcms_article')->where('id',$id)->item();
        $content=DB::table('xpcms_article_content')->where('aid',$id)->item();

        $data['lists']=$res;
        $data['id']=$id;
        $data['article']=$article;
        $data['content']=$content;
        return view('admins/content/add',$data);
    }

    //内容保存
    public function save(Request $req){
        $id = (int)$req->id;
        $data['title'] = trim($req->title);
        $data['subtitle'] = trim($req->subtitle);
        $data['model_id'] = (int)$req->model_id;
        $data['seo_title'] = trim($req->seo_title);
        $data['keyword'] = trim($req->keyword);
        $data['descs'] = trim($req->descs);
        $data['author'] = trim($req->author);
        $data['cover_img'] = trim($req->cover_img);
        $data['author_editor'] = trim($req->author_editor);
        $data['from_site'] = trim($req->from_site);
        $data['from_url'] = trim($req->from_url);
        $data['is_comment'] = (int)$req->is_comment;
        $data['status'] = (int)$req->status;
        $data['cate_id'] = (int)$req->cate_id;
        $data['edit_time'] = time();
        $data['add_time'] = time();
        $detail['contents'] = $req->contents;

        if ($data['title']==''){
            exit(json_encode(array('code'=>1,'msg'=>'标题不能为空')));
        }
        if ($data['subtitle']==''){
            exit(json_encode(array('code'=>1,'msg'=>'副标题不能为空')));
        }
        if ($data['cate_id']==''){
            exit(json_encode(array('code'=>1,'msg'=>'分类必选')));
        }
        if ($data['author']==''){
            exit(json_encode(array('code'=>1,'msg'=>'作者不能为空')));
        }
        if ($data['subtitle']==''){
            exit(json_encode(array('code'=>1,'msg'=>'副标题不能为空')));
        }

        //判断是新增还是更新
        if ($id){
            $aid=DB::table('xpcms_article')->where('id',$id)->update($data);
        }else{
            $aid=DB::table('xpcms_article')->insertGetId($data);
        }

        if (!$aid) {
            exit(json_encode(array('code' => 1, 'msg' => '文章保存失败')));
        }
        if ($id){
            $res=DB::table('xpcms_article_content')->where('aid',$id)->update($detail);
            exit(json_encode(array('code'=>0,'msg'=>'文章保存成功')));
        }else{
            $detail['aid']=$aid;
            $res=DB::table('xpcms_article_content')->insert($detail);
        }

        if (!$res){
            exit(json_encode(array('code'=>1,'msg'=>'文章保存失败')));
        }else{
            exit(json_encode(array('code'=>0,'msg'=>'文章保存成功')));
        }
    }

    //内容删除
    public function del(Request $req){
        $id=(int)$req->id;
        $res1=DB::table('xpcms_article')->where('id',$id)->delete();
        $res2=DB::table('xpcms_article_content')->where('aid',$id)->delete();
        if ($res1 && $res2){
            exit(json_encode(array('code'=>0,'msg'=>'文章删除成功')));
        }else{
            exit(json_encode(array('code'=>1,'msg'=>'文章删除失败')));
        }
    }
}

路由也需要新增：

// 内容管理
    Route::get('admins/content/index', 'Content@index');//主页
    Route::get('admins/content/add', 'Content@add');//添加
    Route::post('admins/content/save', 'Content@save');//保存
    Route::post('admins/content/del', 'Content@del');//删除

运行后效果如图所示：

文章添加页面：

QQ截图20191129231741.png

文章修改页面：

QQ截图20191129231902.png

文章删除页面：

QQ截图20191129231953.png

总结：还有文件上传这块没有弄，准备看了下一节文件上传的视频再去做。这里容易遇到的老坑是判断到底是新增还是修改，如果不进行判断，会把修改也弄成新增。

关于文章保存的js代码跳转，之前写的是：parent.window.location.reload();但是始终保存后跳转的是admins/home/index，后面就使用了window.location.href这个方法。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：页面间的跳转, js和php都可以实现, 但js更灵活
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post