上节课我们做了简单的项目代码结构,这节课我们首先实现导航栏的动态数据加载。同时也要完善我们的代码结构,建立良好的代码机制。
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>
在created()
方法中调用loadData()
方法获取导航栏的数据;
模板上,通过this.$store.state.res.NavBar
拿到数据,该数据本质是在ResMoules.js
中存入了state
。