视频电商网站实战 - 逐步完善代码结构、动态加载导航栏

本文链接：https://blog.csdn.net/github_26672553/article/details/54582910

上节课我们做了简单的项目代码结构，这节课我们首先实现导航栏的动态数据加载。同时也要完善我们的代码结构，建立良好的代码机制。

1.后端API准备
比如，请求一个地址，返回类似导航栏数据：

[{"nav_id":1,"nav_text":"首页","nav_url":"/","nav_order":1,"nav_pid":0},{"nav_id":2,"nav_text":"健身","nav_url":"/fitness","nav_order":1,"nav_pid":0},{"nav_id":3,"nav_text":"饮食","nav_url":"/diet","nav_order":1,"nav_pid":0},{"nav_id":4,"nav_text":"私人定制","nav_url":"/pit","nav_order":1,"nav_pid":0}]

这里写图片描述
API服务端主要是允许跨域访问。

这个地址就是我们Vue项目中ApiConfig.js 需要的：

export default{
    API_NavBar:'http://localhost/yiiserver/web/index.php/navbar'
}

2.前端准备
需要安装可以发送http请求的扩展vue-resource

npm install vue-resource --save-dev

使用

import VueResource from 'vue-resource';
Vue.use(VueResource);

3.这里我们的Vuex就要上场了，我们在src/Store/modules目录新建一个名为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('获取数据失败');
            });
        }
    }
}

上面代码，loadData()方法完成了GET请求从远程服务器获取然后，然后调用setData()方法，把数据存入了state中(这个state是Vuex中的概念)。

4.上面只创建了一个modules还不行，还没有配置到Vux中呢。
来到入口文件member-index.js中：

//引入模块(Vuex中的概念)
import ResModule from './../Store/modules/ResModules';
const vuex_config = new Vuex.Store({
    modules: {
        res:ResModule,
    }
});

这是Vuex的module配置，配置完成还需要在Vue实例化的时候传入：

new Vue({
    el:'.container',
    store:vuex_config,
});

这样以后可this.$store 拿到其中的数据了。

5.来到navbar.vue组件，修改代码如下：

<template>
    <div>
        <el-menu theme="light" default-active="/" class="el-menu-demo" mode="horizontal">
            <el-menu-item :index="item.nav_url" v-for="item in this.$store.state.res.NavBar">{{item.nav_text}}</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    export default{
        created(){
            //alert(this.APIConfig.API_NavBar);
            this.$store.dispatch('loadData',{url:this.APIConfig.API_NavBar,key:'NavBar'})
        }
    }
</script>