yii2 实现简单的留言板组件

来源：互联网发布：bugs软件编辑：程序博客网时间：2024/05/17 09:41

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

<?phpnamespace 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方法，其他的方法已经省略

<?phpnamespace 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的视图文件。

<?phpuse 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='聊天信息表';

0 0