16 文章数据表及界面处理

16 文章数据表及界面处理

喂氏姑旗环康亲屎蕾施期搅墟

文章表bk_article:

16 文章数据表及界面处理第1张

16 文章数据表及界面处理第2张

16 文章数据表及界面处理第3张

添加缩略图字段:

16 文章数据表及界面处理第4张

完整表结构:

16 文章数据表及界面处理第5张


复制cate的一系列内容改为article

16 文章数据表及界面处理第6张

16 文章数据表及界面处理第7张

<?php
namespace app\admin\controller;
use app\admin\controller\Common;
class Article extends Common
{
    public function lst()
    {

        return view();
    }

    public function add()
    {

        return view();
    }

    public function edit()
    {

        return view();
    }

}

16 文章数据表及界面处理第8张

链接左侧导航栏:

16 文章数据表及界面处理第9张

16 文章数据表及界面处理第10张

16 文章数据表及界面处理第11张

16 文章数据表及界面处理第12张

16 文章数据表及界面处理第13张


add功能实现:

点击add:

16 文章数据表及界面处理第14张

添加文章也需要使用无限级分类:

复制cate控制器的分类树:

16 文章数据表及界面处理第15张

<?php
namespace app\admin\controller;
use app\admin\model\Cate as CateModel;
use app\admin\controller\Common;
class Article extends Common
{
    public function lst()
    {
        return view();
    }

    public function add()
    {
        $cate=new CateModel();
        $cateres=$cate->catetree();
        $this->assign("cateres",$cateres);
        return view();
    }

    public function edit()
    {

        return view();
    }

}

执行:

16 文章数据表及界面处理第16张


16 文章数据表及界面处理第17张

<div class="widget-header bordered-bottom bordered-blue">
    <span class="widget-caption">添加文章</span>
</div>
<div class="widget-body">
    <div id="horizontal-form">
        <form class="form-horizontal" role="form" action="{:url('cate/add')}" method="post">

            <div class="form-group">
                <label for="username" class="col-sm-2 control-label no-padding-right">标题</label>
                <div class="col-sm-6">
                    <input class="form-control" placeholder="" name="catename" required="" type="text">
                </div>
                <p class="help-block col-sm-4 red">* 必填</p>
            </div>

            <div class="form-group">
                <label for="username" class="col-sm-2 control-label no-padding-right">作者</label>
                <div class="col-sm-6">
                    <input class="form-control" placeholder="" name="catename" required="" type="text">
                </div>
                <p class="help-block col-sm-4 red">* 必填</p>
            </div>

            <div class="form-group">
                <label for="username" class="col-sm-2 control-label no-padding-right">关键词</label>
                <div class="col-sm-6">
                    <input class="form-control" placeholder="" name="catename" required="" type="text">
                </div>
                <p class="help-block col-sm-4 red">* 必填</p>
            </div>

            <div class="form-group">
                <label for="username" class="col-sm-2 control-label no-padding-right">描述</label>
                <div class="col-sm-6">
                    <textarea class="form-control"></textarea>
                </div>
                <p class="help-block col-sm-4 red">* 必填</p>
            </div>

            <div class="form-group">
                <label for="username" class="col-sm-2 control-label no-padding-right">缩略图</label>
                <div class="col-sm-6">
                    <input placeholder="" name="catename" required="" type="file">
                </div>
                <p class="help-block col-sm-4 red">* 必填</p>
            </div>

            <div class="form-group">
                <label for="username" class="col-sm-2 control-label no-padding-right">所属栏目</label>
                <div class="col-sm-6">
                    <select name="pid">
                        <option value="0">顶级文章</option>
                        {volist name="cateres" id="cate"}
                        <option value="{$cate.id}">
                            <!--只有不是顶级文章才输出竖线-->
                            {if condition="$cate['level'] neq 0"} | {/if}
                            <!--将文章等级用-替换,替换的次数是等级*4-->
                            <?php echo str_repeat("-",$cate["level"]*4) ?>
                            {$cate.catename}
                        </option>
                        {/volist}
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="username" class="col-sm-2 control-label no-padding-right">内容</label>
                <div class="col-sm-6">
                    <textarea></textarea>
                </div>
                <p class="help-block col-sm-4 red">* 必填</p>
            </div>

执行:

16 文章数据表及界面处理第18张

在内容框引入百度编辑器ueditor

链接:https://pan.baidu.com/s/135zeUE8ckCU4FiWd9TtROg
提取码:09a1


ueditor的引入方法:

 

1、引入
ueditor.config.js
ueditor.all.min.js
lang/zh-cn/zh-cn.js

2、编辑器显示处 id=”content”

3、底部
<script type=”text/javascript”>

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(‘editor’)就能拿到相关的实例
UE.getEditor(‘content’,{initialFrameWidth:1500,initialFrameHeight:400,});

 

</script>


引入静态文件:

16 文章数据表及界面处理第19张

在add.html引入:

16 文章数据表及界面处理第20张

1、引入
ueditor.config.js
ueditor.all.min.js
lang/zh-cn/zh-cn.js

16 文章数据表及界面处理第21张

2、编辑器显示处 id=”content”

16 文章数据表及界面处理第22张

3、底部
<script type=”text/javascript”>

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(‘editor’)就能拿到相关的实例
UE.getEditor(‘content’,{initialFrameWidth:1500,initialFrameHeight:400,});

 

</script>

16 文章数据表及界面处理第23张

执行:

16 文章数据表及界面处理第24张

宽度改为700

UE.getEditor('content',{initialFrameWidth:700,initialFrameHeight:400,})

执行:

16 文章数据表及界面处理第25张


删除文章类型:

16 文章数据表及界面处理第26张

该看课时23

么韧佬识几锚阶纠辜诞伪嫌惧