从零开始搭建完整的电影全栈系统（二）—

先预览下网站的主要界面，一个列表页，一个详情页：

本着简洁不简单的原则，力求界面尽量简洁，功能尽量实用。
列表页可以根据影片名称、影片介绍、影片分类、演员、导演、地区、语言等搜索影片信息，还可以根据相应字段排序，使用的是yii框架提供的GridView小部件实现的。
详情页即展示一部影片的详情和播放地址。

再次说明：本人不会储存任何影片播放文件，所有的影片信息来自其他网站，仅供说明展示教程功能。

Yii框架的安装见：Yii框架的安装

本系列教程使用的是yii2 高级项目模板自带三个入口。分别是frontend（前台）、backend（后台）、console（命令行入口）。关于yii的多入口、目录结构，基础知识不展开。

安装好yii后，将《从零开始搭建完整的电影全栈系统（一）》中存放影视信息和播放地址的两张表 vod_detail和play_url导入到对应数据库。

使用Yii自带的脚手架工具gii根据数据库生成对应的MVC文件。gii工具号称可以帮我们写代码，很方便就生成了model类，view视图、控制器。

VodDetail：

 500],
            [['url_id'], 'string', 'max' => 100],
            [['vod_title', 'vod_sub_title', 'vod_blurb', 'vod_type', 'vod_class', 'vod_tag', 'vod_pic_url', 'vod_pic_path', 'vod_pic_thumb', 'vod_actor', 'vod_director', 'vod_writer', 'vod_remarks', 'vod_area', 'vod_lang', 'vod_year'], 'string', 'max' => 255],
            [['url_id'], 'unique'],
        ];
    }

    /**
     * {@inheritdoc}
     */
    public function attributeLabels()
    {
        return [
            'id' => 'ID',
            'url' => 'Url',
            'url_id' => 'Url ID',
            'vod_title' => '影片名称',
            'vod_sub_title' => '影片副标题',
            'vod_blurb' => 'Vod Blurb',
            'vod_content' => '影片介绍',
            'vod_status' => '状态',
            'vod_type' => '影片分类',
            'vod_class' => '扩展分类',
            'vod_tag' => '标签',
            'vod_pic_url' => '图片Url链接',
            'vod_pic_path' => '图片本地路径',
            'vod_pic_thumb' => '缩略图本地路径',
            'vod_actor' => '演员',
            'vod_director' => '导演',
            'vod_writer' => '编剧',
            'vod_remarks' => '备注',
            'vod_pubdate' => 'Vod Pubdate',
            'vod_area' => '地区',
            'vod_lang' => '语言',
            'vod_year' => '年代',
            'vod_hits' => '浏览次数',
            'vod_hits_day' => '日浏览次数',
            'vod_hits_week' => '周浏览次数',
            'vod_hits_month' => '月浏览次数',
            'vod_up' => '顶次数',
            'vod_down' => '踩次数',
            'vod_score' => '评分',
            'vod_score_all' => '总评分',
            'vod_score_num' => '评分次数',
            'vod_create_time' => '收录时间',
            'vod_update_time' => '更新时间',
            'vod_lately_hit_time' => '最近浏览时间',
        ];
    }

    /***
     * @return \yii\db\ActiveQuery
     * 获取视频对应的播放地址
     */
    public function getPlayurls()
    {
        return $this->hasMany(PlayUrl::className(), ['url_id' => 'url_id']);
//        $playurls = $this->hasMany(PlayUrl::className(), ['url_id' => 'url_id']);
//        return ArrayHelper::index($playurls, null, 'play_from');
    }
}

PlayUrl：

 255],
            [['play_url_aes', 'url_id'], 'string', 'max' => 100],
            [['play_url_aes'], 'unique'],
        ];
    }

    /**
     * {@inheritdoc}
     */
    public function attributeLabels()
    {
        return [
            'id' => 'ID',
            'play_title' => 'Play Title',
            'play_from' => 'Play From',
            'play_url' => 'Play Url',
            'play_url_aes' => 'Play Url Aes',
            'url_id' => 'Url ID',
            'create_time' => 'Create Time',
            'update_time' => 'Update Time',
        ];
    }
}

VodDetailSearch：

 $query,
            'pagination' => ['pageSize' => 50],
            'sort' => [
                'defaultOrder' => ['vod_update_time' => SORT_DESC],
//                'attributes' => ['id', 'title'],
            ],
        ]);

        $this->load($params);

        if (!$this->validate()) {
            // uncomment the following line if you do not want to return any records when validation fails
            // $query->where('0=1');
            return $dataProvider;
        }

        // grid filtering conditions
        $query->andFilterWhere([
            'id' => $this->id,
            'vod_status' => $this->vod_status,
            'vod_pubdate' => $this->vod_pubdate,
            'vod_hits' => $this->vod_hits,
            'vod_hits_day' => $this->vod_hits_day,
            'vod_hits_week' => $this->vod_hits_week,
            'vod_hits_month' => $this->vod_hits_month,
            'vod_up' => $this->vod_up,
            'vod_down' => $this->vod_down,
            'vod_score' => $this->vod_score,
            'vod_score_all' => $this->vod_score_all,
            'vod_score_num' => $this->vod_score_num,
            'vod_create_time' => $this->vod_create_time,
            'vod_update_time' => $this->vod_update_time,
            'vod_lately_hit_time' => $this->vod_lately_hit_time,
        ]);

        $query->andFilterWhere(['like', 'url', $this->url])
            ->andFilterWhere(['like', 'url_id', $this->url_id])
            ->andFilterWhere(['like', 'vod_title', $this->vod_title])
            ->andFilterWhere(['like', 'vod_sub_title', $this->vod_sub_title])
            ->andFilterWhere(['like', 'vod_blurb', $this->vod_blurb])
            ->andFilterWhere(['like', 'vod_content', $this->vod_content])
            ->andFilterWhere(['like', 'vod_type', $this->vod_type])
            ->andFilterWhere(['like', 'vod_class', $this->vod_class])
            ->andFilterWhere(['like', 'vod_tag', $this->vod_tag])
            ->andFilterWhere(['like', 'vod_pic_url', $this->vod_pic_url])
            ->andFilterWhere(['like', 'vod_pic_path', $this->vod_pic_path])
            ->andFilterWhere(['like', 'vod_pic_thumb', $this->vod_pic_thumb])
            ->andFilterWhere(['like', 'vod_actor', $this->vod_actor])
            ->andFilterWhere(['like', 'vod_director', $this->vod_director])
            ->andFilterWhere(['like', 'vod_writer', $this->vod_writer])
            ->andFilterWhere(['like', 'vod_remarks', $this->vod_remarks])
            ->andFilterWhere(['like', 'vod_area', $this->vod_area])
            ->andFilterWhere(['like', 'vod_lang', $this->vod_lang])
            ->andFilterWhere(['like', 'vod_year', $this->vod_year]);

        return $dataProvider;
    }
}

VodDetailController：

 [
                'class' => VerbFilter::className(),
                'actions' => [
                    'delete' => ['POST'],
                ],
            ],
        ];
    }

    /**
     * Lists all VodDetail models.
     * @return mixed
     */
    public function actionIndex()
    {
        $searchModel = new VodDetailSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }

    /**
     * Displays a single VodDetail model.
     * @param integer $id
     * @return mixed
     * @throws NotFoundHttpException if the model cannot be found
     */
    public function actionView($id)
    {
        return $this->render('view', [
            'model' => $this->findModel($id),
        ]);
    }

    /**
     * Creates a new VodDetail model.
     * If creation is successful, the browser will be redirected to the 'view' page.
     * @return mixed
     */
    public function actionCreate()
    {
        $model = new VodDetail();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->id]);
        }

        return $this->render('create', [
            'model' => $model,
        ]);
    }

    /**
     * Updates an existing VodDetail model.
     * If update is successful, the browser will be redirected to the 'view' page.
     * @param integer $id
     * @return mixed
     * @throws NotFoundHttpException if the model cannot be found
     */
    public function actionUpdate($id)
    {
        $model = $this->findModel($id);

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->id]);
        }

        return $this->render('update', [
            'model' => $model,
        ]);
    }

    /**
     * Deletes an existing VodDetail model.
     * If deletion is successful, the browser will be redirected to the 'index' page.
     * @param integer $id
     * @return mixed
     * @throws NotFoundHttpException if the model cannot be found
     * @throws \Throwable
     * @throws \yii\db\StaleObjectException
     */
    public function actionDelete($id)
    {
        $this->findModel($id)->delete();

        return $this->redirect(['index']);
    }

    /**
     * Finds the VodDetail model based on its primary key value.
     * If the model is not found, a 404 HTTP exception will be thrown.
     * @param integer $id
     * @return VodDetail the loaded model
     * @throws NotFoundHttpException if the model cannot be found
     */
    protected function findModel($id)
    {
        if (($model = VodDetail::findOne($id)) !== null) {
            return $model;
        }

        throw new NotFoundHttpException('The requested page does not exist.');
    }
}

视图文件：

影视列表：

title = '影片列表';
$this->params['breadcrumbs'][] = $this->title;
?>



    title) ?>

    
     'btn btn-success']) ?>
    

    render('_search', ['model' => $searchModel]); ?>

     $dataProvider,
        'filterModel' => $searchModel,
//        'showHeader' => false,
        'showFooter' => false,
        'columns' => [
            //['class' => 'yii\grid\SerialColumn'],

            //'id',
            //'url:url',
            //'url_id:url',
            //'vod_title',
            ['attribute' => 'vod_title', 'value' => function ($data) {
                return Html::a($data->vod_title, ['vod-detail/view', 'id' => $data->id], ['title' => '详情']);
            }, 'format' => ['html']],
            //'vod_sub_title',
            //'vod_blurb',
            //'vod_content:ntext',
            //'vod_status',
            //'vod_type',
            ['attribute' => 'vod_type', 'value' => function ($data) {
                return Html::a($data->vod_type, ['vod-detail/index', 'VodDetailSearch' => ['vod_type'=>$data->vod_type]], ['title' => '分类']);
            }, 'format' => ['html']],
            //'vod_class',
            //'vod_tag',
            //'vod_pic_url:url',
            //'vod_pic_path',
            //'vod_pic_thumb',
            //'vod_actor',
            //'vod_director',
            //'vod_writer',
            'vod_remarks',
            //'vod_pubdate',
            //'vod_area',
            //'vod_lang',
            //'vod_year',
            ['attribute' => 'vod_year', 'value' => function ($data) {
                return Html::a($data->vod_year, ['vod-detail/index', 'VodDetailSearch' => ['vod_year'=>$data->vod_year]], ['title' => '年代']);
            }, 'format' => ['html']],
            //'vod_hits',
            //'vod_hits_day',
            //'vod_hits_week',
            //'vod_hits_month',
            //'vod_up',
            //'vod_down',
            //'vod_score',
            //'vod_score_all',
            //'vod_score_num',
            //'vod_create_time:datetime',
            //'vod_update_time:datetime',
            ['attribute' => 'vod_update_time', 'format' => ['date', 'php:Y-m-d H:i:s']],
            //'vod_lately_hit_time:datetime',

            /*[
                'class' => 'yii\grid\ActionColumn',
                'template' => '{view}',
            ],*/
        ],
        'pager' => [
            //'options' => ['class' => 'hidden']//关闭分页（默认开启）
            /* 默认不显示的按钮设置 */
            'firstPageLabel' => '首页',
            'prevPageLabel' => '上一页',
            'nextPageLabel' => '下一页',
            'lastPageLabel' => '尾页'
        ]
    ]); ?>

影视详情：

title = $model->vod_title;
$this->params['breadcrumbs'][] = ['label' => '影片列表', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
\yii\web\YiiAsset::register($this);
$playurlsList = ArrayHelper::index($model->playurls, null, 'play_from');
?>

    
        
            vod_pic_url, ['class' => 'img-responsive',
                'alt' => $model->vod_title]), ['class' => 'thumb', 'href' => Url::toRoute(['vod-detail/view', 'id' => $model->id]),
                'title' => $model->vod_title]) ?>

            >复制图片地址
            
        
        
            vod_title . Html::tag('small', $model->vod_score, ['class' => 'text-red']), ['class' => 'title']) ?>
            vod_sub_title, ['class' => 'text-muted hidden-xs']), ['class' => 'data hidden-xs']) ?>
            vod_area, ['class' => 'text-muted']), ['class' => 'data hidden-md hidden-lg hidden-sm']) ?>
            
                 'text-muted']) ?>
                vod_remarks, ['class' => 'text-red']) ?>
                
                更新时间：vod_update_time)) ?>
            
            主演：vod_actor ?>
            导演：vod_director ?>
            
                分类：vod_type ?> 
                
                
                地区：vod_area ?> 
                年份：vod_year ?> 
            
                语言：vod_lang ?> 
                
            

                TAG： vod_tag ?>
            
        
    


    
        剧情介绍
    
    
        vod_content); ?>
    

 $playurls): ?>
    
        
            无需安装任何插件
             播放类型：
        


        
             $playurl): ?>
                
                    用App打开
                    play_title ?>play_url ?>
                
                
            
            
        
        
            tips：点击链接可以复制哦
            复制全部

别忘了注入自定义的js和css文件。

整个WEB网站的搭建自行代码写的最多的就是影视详情页的模板。列表页排序、搜索、分页是自定义yii自带的GridView小部件实现的。

对Yii基础知识不熟悉的同学可以自行学习。
整理完成后代码发布与github。

欢迎各位大佬入裙交流：

从零开始搭建完整的电影全栈系统（二）——简单的WEB展示网站的搭建

title) ?>

剧情介绍

播放类型：

你可能感兴趣的:(yii2)