视频电商网站实战 - 构建视频提交页面(上)

最新推荐文章于 2021-04-08 13:47:48 发布

原创最新推荐文章于 2021-04-08 13:47:48 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

VUEJS+PHP+NODEJS实战专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何使用Vue和ElementUI构建视频发布页面，包括表单设计、视频分类选择及利用Vuex进行数据过滤。

1.构建视频提交页面，需要一个form表单，我们修改publish.vue视频发布组件：

<template>
    <div>
        <el-form :model="video"  label-width="100px" class="demo-ruleForm">
            <el-col :span="12">
                <el-form-item label="视频标题" prop="v_title">
                    <el-input v-model="video.v_title" placeholder="请输入视频标题"></el-input>
                </el-form-item>
                <el-form-item label="视频分类" prop="v_class">
                    <el-select v-model="video.v_class" placeholder="请选择">
                        <el-option
                            v-for="item in this.$store.state.res.NavBar"
                            :label="item.nav_text"
                            :value="item.nav_id"
                        >
                            {{item.nav_text}}
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="12"></el-col>

        </el-form>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                video:{
                    v_title:'',
                    v_class:2
                },
            }
        },
    }
</script>

上面代码，select元素我们循环了item in this.$store.state.res.NavBar，这是我们之前导航栏的数据。我们查看一下页面效果：
这里写图片描述
视频分类默认选中了“健身”，是因为我们select元素的绑定了数据模型v-model="video.v_class"。

2.关于页面布局，因为我们用的是elementUI，都可以直接看文档。
这里我们再来学习一个Vuex的知识点Getters，视频分类有“首页、健身、饮食、私人定制”，我们这里想过滤掉“首页”。

来到ResModules.js 文件，这个模块就是我们处理导航数据的模块。

import Vue from 'vue';
export default{
    state:{
        NavBar:[] //导航栏
    },
    mutations:{
        //设置数据的方法
        setData(state,{key,data}){
            state[key] = data;
        }
    },
    actions:{
        //加载远程数据的方法
        loadData(context,{url,key}){ //params是一个对象参数,里面包含url

            Vue.http.get(url).then((rs)=>{
                //alert(rs.body);
                context.commit('setData',{key:key,data:rs.body});
            },(rs)=>{
                console.log('获取数据失败');
            });
        }
    },
    getters:{
        navForVideoClass:state=>{
            return state.NavBar.filter(item=>{
                return item.nav_text != '首页';
            })
        }
    }
}

注意我们在getters里面写了一个navForVideoClass 方法，此方法最后返回的数据就没有“首页”这一项数据了。

3.我们视频分类选择处，还需要修改，来到publish.vue，之前我们是这样循环展示数据的：v-for="item in this.$store.state.res.NavBar，现在需要需用到用ResModules.js 中写的方法，应该修改为如下：

v-for="item in this.$store.getters.navForVideoClass"

这样循环展示出来的选择项，就没有“首页”了。
这里写图片描述