yii2 实现简单的留言板组件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Rodgexue/article/details/53378856

这个主要描述的就是如何写一个自定义组件。
首先,建立frontend/widgets/ 目录,这个目录主要存放在前台使用的所有组件。
前台使用的所有组件目录
一个组件主要包括一个以Widget结尾的php文件和views里面的视图文件。
ChatWidget.php 代码

<?php
namespace frontend\widgets\chat;

use frontend\models\FeedForm;
use Yii;
use yii\bootstrap\Widget;

class ChatWidget extends Widget
{
    public function run()
    {
        $feed = new FeedForm();
        $data['feed'] = $feed->getList();
        return $this->render('index', ['data' => $data]);
    }
}

涉及到的FeedForm这个model层的代码,由于里面只用到了getList方法,其他的方法已经省略

<?php
namespace frontend\models;

use common\models\FeedsModel;
use yii\base\Model;
use Yii;

class FeedForm extends Model
{
    public $content;

    public $_lastError;

    public function rules()
    {
        return [
            ['content', 'required'],
            ['content', 'string', 'max' => 255],
        ];
    }

    public function attributeLabels()
    {
        return [
            'id' => 'ID',
            'content' => '内容'
        ];
    }

    public function getList()
    {
        $model = new FeedsModel();
        $res = $model->find()->limit(10)->with('user')->orderBy(['id' => SORT_DESC])->asArray()->all();
        return $res?:[];
    }
}

然后在ChatWidget.php文件中,渲染了index.php的视图文件。

<?php
use yii\helpers\Url;

?>
<div class="panel">
    <div class="panel-title box-title" style="border-bottom:none">
        <span><strong>只言片语</strong></span>
        <span class="pull-right"><a href="" class="font-12">更多>></a></span>
    </div>
    <div class="pannel-boy">
        <form id="w0" action="/" method="post">
            <div class="form-group input-group field-feed-content required">
    <textarea name="" id="feed-content" cols="30" rows="10" class="form-control" name="content">

    </textarea>
                <span class="input-group-btn">
                <button type="button" data-url="<?= Url::to(['site/add-feed']) ?>"
                        class='btn btn-success btn-feed j-feed'>发布</button>
            </span>
            </div>

        </form>
        <?php if (!empty($data['feed'])): ?>
            <ul class="media-list media-feed feed-index ps-container ps-active-y">
                <?php foreach ($data['feed'] as $list): ?>
                    <li class="media">
                        <div class="media-left"><a href="#" rel="author" data-original-title="" title="">
                                <img width="30px" src="<?= $list['user']['avatar']; ?>"/>
                            </a></div>
                        <div class="media-body" style="font-size: 12px;">
                            <div class="media-content">
                                <?= $list['user']['username'] ?>说:<?= $list['content'] ?>
                            </div>
                            <div class="media-action">
                                <?= date('Y-m-d h:i:s', $list['created_at']) ?>
                            </div>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>

        <?php endif; ?>
    </div>
</div>

涉及到这个视图的css文件

.border-bottom {
    border-bottom: 1px solid #ccc;
}

.panel-body .media-feed {
    font-size: 12px;
    line-height: 1.5em;
}

.panel-body .media-feed .media .media-object {
    width: 40px;
    height: 40px;
    padding: 1px;
    border: #ddd solid 1px;
}

.panel-body .media-feed .media-action {
    margin-top: 5px;
}

.panel-body {
    padding-left:0px;
    padding-right:0px;
}

.feed .panel-body {
    padding-bottom:0px;
}
.btn-feed {
    height:50px;
    border-radius:0px;
}

.form-group textarea {
    height: 50px;
    resize: none;
    font-size: 12px;
}

.panel-body .media-feed {
    height: 360px;
    position: relative;
    word-break: break-all;
    overflow:auto;
}

.panel-body ul {
    padding: 0;
    margin: 0;
}

还有一个js文件

/**
 * 
 */
$(function () { 
    //最新文章
    $(".J_lastTime ul li").eq(0).addClass("hov");
    $(".J_lastTime ul li").hover(function(){
        var id = $(this).index();
        $(".J_lastTime ul li").removeClass("hov").eq(id).addClass("hov");
    })

    //说一说
    $(".j-feed").click(function(){
        var url = $(this).attr("data-url");
        var content = $("textarea").val(); //获取文本框内容

        if(content == ''){
            $(".field-feed-content").addClass("has-error");
            return false;
        }


        $.ajax(url,{
            type:"post",
            dataType:"json",
            data:{ content:content },
            success:function(data){
                if(data.status){
                    location.reload();
                }else{
                    alert(data.msg);
                }
            },
        })
    })

//  $("button").click(function(){
//        var url = "";  //调用的地址
//        var content = $("textarea").val(); //获取文本框内容
//        $.ajax(url,{
//            type : "get",
//            dataType : "json",
//            data:{ content:content },
//            success : function (data) {
//                if(data.status == 0){
//                    //成功后执行的代码写在这里
//                }
//                else{
//                    alert(data.msg);
//                    return false;
//                }
//            },
//            error : function () {
//                alert("接口网络错误");
//                return false;
//            }
//        })
//    })

});

当然,最后还有最重要的数据库

CREATE TABLE `feeds` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL COMMENT '用户id',
  `content` varchar(255) NOT NULL COMMENT '内容',
  `created_at` int(11) NOT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=10 DEFAULT CHARSET=utf8 COMMENT='聊天信息表';
阅读更多
换一批

没有更多推荐了,返回首页