0、知识点
- 分类循环
- 列表循环
- vue-resource请求数据
- ES6语法
- 模块化model
- 封装API接口
1、安装vue-resource
- 安装命令
npm install vue-resource
- 引入VueResource，全局使用
// 请求数据配置VueResource
import VueResource from 'vue-resource';
Vue.use(VueResource);
2、请求数据
- 在Home.vue中，使用vue-resource的get()方法请求数据
// 定义一个 requestData()方法
requestData(){
// 方法1：这种方式不利于代码编程，当接口出现变化时，会导致因反复修改接口而出现增加代码工作量的问题，所以，我们一般使用模块化编程方式
// requestData(){
// 如果this.$http.get()方法无法获取到后台数据，需要进行jsonp跨域！变成：this.$http.jsonp(http://a.itying.com/api/productlist)的形式
// 但是，此处无需跨域，因为后台接口支持ajax等形式的跨域
// this.$http.get(http://a.itying.com/api/productlist).then(response => {
// console.log(response);
// },response => {
// // error callback
// });
// }
// 方法2：推荐使用这种方式，统一调用封装好的api接口，动态改变
var api=this.api+'api/productlist' // 拼接api接口数据
//this 要注意指向
this.$http.get(api).then(response => { // then后面的response表示成功回调
console.log(response); // 打印返回的数据
this.list=response.body.result; // 返回body的数值赋值给list数组
}, response => { // response表示失败回调
// error callback
});
}
},
// requestData()方法要在mounted()中进行调用，否则，会出现拿不到数据的情况！
mounted(){ /*生命周期函数*/
this.asideDomInit();
this.requestData(); // 调用requestData()方法
},
- 通过requestData()拿到的数据，位于body中!
3、分类数据渲染
- 在Home.vue文件中，进行分类数据渲染
- 菜品接口信息
- 定义一个list数组，用于存储返回的数据
export default{
data () { /*数据*/
return {
list:[], // 定义一个空数组，用于存储返回的数据
api:Config.api
}
},
}
- 对list数组绑定for循环，循环显示左侧悬浮框title.list食物分类的数据信息
<aside class="left_cate" id="left_cate">
<ul>
<li v-for="item in list">{{item.title}}</li>
</ul>
<div id="nav_cate" class="nav_cate">
<img src="../assets/images/nav.png"/>
<p>菜单</p>
</div>
</aside>
- 二级循环
<div class="content">
// 一级循环，对list数组绑定for循环，循环显示title列表的数据信息
<div class="item" v-for="item in list">
<h3 class="item_cate">{{item.title}}</h3>
<ul class="item_list">
// 二级循环，对list数组绑定for循环，循环显示content部分的food列表详情的数据信息
<li v-for="food in item.list">
<div class="inner">
<router-link to="/pcontent"> // router-link表示跳转到pcontent组件中
<img :src="api+food.img_url" /> // 显示图片信息，通过拼接公共的api接口和图片的url，获取到图片内容
<p class="title">{{food.title}}</p> // 显示food的标题内容
<p class="price">¥{{food.price}}</p> // 显示food的价格内容
</router-link>
</div>
</li>
</ul>
</div>
</div>
4、封装公共的API接口
- 在src文件夹下，新建一个model文件夹，在model当中再新建一个config配置文件，用于存放公共的数据内容，如公共的api接口
- config.js
var config={
api:'http://a.itying.com/' // 封装公共的api接口
}
export default config; // 把接口暴露出去，给外部的组件使用
5、在Home.vue中使用api接口
- 引入配置文件config.js
import Config from '../model/config.js';
- 实例化api
var api=this.api+'api/productlist'
6、后台界面
