vue项目美食杰菜谱大全实现（二）

接上篇，vue项目美食杰菜谱大全实现

 效果图

分析：

 整体分为三大部分

1.先实现菜谱分类头部实现

    （1）先实现家常菜谱中华菜系和各地小吃的实现，通过后端获取到数据，渲染页面（2）再实现第一部中的每一项，获取数据渲染页面，实现局部功能

2.实现左边筛选中的功能

    （1）先实现工艺，口味，难度，人数，通过后端获取到数据，渲染页面（2）实现第一步中包含的每一项，获取数据渲染页面，实现局部功能

3.实现右边菜谱内容

 （1）通过后端拿到数据渲染页面（2）通过前两部分功能进行筛选，实现功能，筛选出结果有就渲染，没有就显示
暂时没有过滤到菜谱信息，请选择其他筛选条件（3）实现分页器中的功能，数据多的话就分页，点击前进后退，点击分页器数字也可以跳转

4.就这些功能（一步一步实现）

按照步骤来实现

首先先实现tab切换，通过后端api提供的getClassify（）的方法然后通过.then()方法来异步获取数据
解析数据

getClassify().then(({data})=>{console.log(data)//打印一下data，看看里面的数据`在这里插入代码片`});

获取到这些数据，先用一个空数组储存获取到的数据

data() {return {classify:[],//存储tab切换的所有数据}},mounted() {getClassify().then(({data})=>{console.log(data)this.classify = data;});
}

数据赋值给空数组然后逐步渲染

<el-tab-panev-for="item in classify":key="item.parent_type":label="item.parent_name":name="item.parent_type"
>
</el-tab-pane>

v-for遍历一下calssify渲染数据用到v-for一定要绑定key值（这里的key值是唯一的）label就是title值，渲染到页面上

渲染页面后，这个tab切换是Element ui插件中封装的方法

接下来实现家常菜谱，中华菜系，各地小吃中的每一项中的数据

渲染

 <div class="recipe-link"><router-link:to="{query:{...$router.query,classify:option.type,page:1}}"v-for="option in item.list":key="option.type":class="{active:classifyType === option.type}">{{option.name}}</router-link></div>

储存classifyType:“1-1”,动态绑定to是为了拼接二级路由

data() {return {classify:[],//存储tab切换的所有数据classifyType:"1-1",//tab切换的选中项（二级路由）classifyName:"1",//定义刷新tab时的值（一级路由）}
}，
watch: {$route: {handler(){const {classify} = this.$route.query;if(classify){this.classifyType = classify;//1-1this.classifyName = classify[0]; //1}},immediate:true}
},
mounted() {getClassify().then(({data})=>{console.log(data)this.classify = data;if(!this.$route.query.classify){this.classifyType = this.classify[0].list[0].type;//1-1this.classifyName = this.classify[0].parent_type; //1this.$router.push({query:{classify: this.classifyType,page:1}})}});
}

判断点击的时候路由添加
监听一级路由和二级路由切换哪个路由就渲染哪点数据

接着第二部分实现

跟上边实现一样通过后端api提供的getProperty（）的方法然后通过.then()方法来异步获取数据

getProperty().then(({data})=>{console.log(data);this.properties = data;
});

赋值properties 储存数据

data() {return {classify:[],//存储tab切换的所有数据classifyType:"1-1",//tab切换的选中项（二级路由）classifyName:"1",//定义刷新tab时的值（一级路由）//属性properties:[],//存储属性中的所有数据}
},

渲染

<el-collapse  v-model="propertyActiveName"><el-collapse-itemv-for="item in properties":key="item.parent_type":title="item.parent_name":name="item.parent_type"></el-collapse-item>
</el-collapse>

v-for遍历一下properties渲染数据用到v-for一定要绑定key值（这里的key值是唯一的）：title就是title值，渲染到页面上

接下来实现工艺，口味，难度，人数中每一项中的数据

跟上边一样，直接拿数据渲染

<div class="filter-tags"><el-tag type="info"v-for="option in item.list":key="option.type"@click="selectedTag(option)":class="{'tag-selected': propertyType[item.title] === option.type}">{{option.name}}</el-tag>
</div>

其中添加点击有颜色，字体颜色也改变了

mounted() {getProperty().then(({data})=>{// console.log(data);this.properties = data;const {query} = this.$route;this.propertyType = this.properties.reduce((o,item)=>{//  item.title :  工艺，难度，口味，人数o[item.title] = query[item.title] ? query[item.title]: "";if(o[item.title]){this.propertyActiveName.push(o[item.title][0]);}return o;},{});});
},
methods: {selectedTag(option){let query = {...this.$route.query};//判断是否点击，如果点击过，取消，否则，选中if(this.propertyType[option.title] === option.type){this.propertyType[option.title] = "";delete query[option.title];}else{this.propertyType[option.title] = option.type;query[option.title] = option.type;}this.$router.push({query})},}

判断是否点击点击过就取消删除地址栏中的路由，没点击过就选中

$router.push( ) 一下路由，反出路由

接着

判断下拉里边是否有数据，有就刷新不掉，没有就自动闭合

接着写右侧列表

右边列表整体代码

<el-main class="filter-menus-box"><div class="menu-empty" v-show="!list.length && !loading">暂时没有过滤到菜谱信息，请选择其他筛选条件</div><!-- 作品展示 --><menu-card style="min-height: 75%;" :info="list"></menu-card><!-- 分页展示 --><div style="text-align: right;" v-show="!loading"><el-paginationstyle="display: inline-block;":page-size="5"layout="total, prev, pager, next":total="total":current-page.sync="page"@current-change="handlerSelect":hide-on-single-page="true"></el-pagination></div>
</el-main>

先写作品展示
是通过组件写的
首先
先把数据放到页面上
后端获取数据自定义一个方法然后定义空数组，渲染页面total设置为1，current_page设置为1（注意一定要是数字类型），然后接收值

ThisgetMenus(){const query = {...this.$route.query}const params = {page:query.page || 1,classify:query.classify}delete query.pagedelete query.classifyif(Object.keys(query).length){params.property={...query}}//请求右侧的数据getMenus(params).then(({data}) =>{// console.log(data);if(this.loading) loading.close();this.loading = false;this.list = data.list;this.total = data.total;this.page = data.current_page;})
},

渲染到页面，":page-size=‘5’"是当前页面显示，每一页都有5个数据，多了，在写一页显示

然后watch监听一下页面数切换以及跟随更新

watch: {$route: {handler(){const {classify,page} = this.$route.query;if(classify){this.classifyType = classify;//1-1this.classifyName = classify[0]; //1this.page = Number(page);}this.ThisgetMenus();},immediate:true}
},

遮盖层设置，在data中设置loading值为false，false是隐藏，当为true的时候显示，所以在调用他之前需要把loading改为true

ThisgetMenus(){this.loading = true;let loading = null;// 遮罩层this.$nextTick(()=>{loading = this.$loading({target:'.filter-menus-box',text:"Loading...",spinner:"el-icon-loading",background:'rgba(0,0,0,0.7)'})});
},

加载的时候让原来的数据也隐藏清一下原来的数据this.list = [];

ThisgetMenus(){this.list = [];
},

效果

基本效果就是这样了
按照步骤一步一步操作，就可以实现了
整体代码：

<template><div class="recipe"><!-- 菜谱分类 start --><el-tabstype="border-card"v-model="classifyName"@tab-click="tabClick"><el-tab-panev-for="item in classify":key="item.parent_type":label="item.parent_name":name="item.parent_type"><div class="recipe-link"><router-link:to="{query:{...$router.query,classify:option.type,page:1}}"v-for="option in item.list":key="option.type":class="{active:classifyType === option.type}">{{option.name}}</router-link></div></el-tab-pane></el-tabs><!-- 菜谱分类 end --><h2>家常好味道，给你家一般的温暖</h2><el-container><!-- 左侧列表 --><el-aside width="220px" class="recipe-aside"><div class="filter-box"><h4>筛选</h4><el-collapse  v-model="propertyActiveName"><el-collapse-itemv-for="item in properties":key="item.parent_type":title="item.parent_name":name="item.parent_type"><div class="filter-tags"><el-tag type="info"v-for="option in item.list":key="option.type"@click="selectedTag(option)":class="{'tag-selected': propertyType[item.title] === option.type}">{{option.name}}</el-tag></div></el-collapse-item></el-collapse></div></el-aside><!-- 右侧列表 --><el-main class="filter-menus-box"><div class="menu-empty" v-show="!list.length && !loading">暂时没有过滤到菜谱信息，请选择其他筛选条件</div><!-- 作品展示 --><menu-card style="min-height: 75%;" :info="list"></menu-card><!-- 分页展示 --><div style="text-align: right;" v-show="!loading"><el-paginationstyle="display: inline-block;":page-size="5"layout="total, prev, pager, next":total="total":current-page.sync="page"@current-change="handlerSelect":hide-on-single-page="true"></el-pagination></div></el-main></el-container></div>
</template>
<script>import MenuCard from '@/components/menu-card.vue'import {getClassify, getProperty, getMenus} from '@/service/api';export default {components: {MenuCard},data() {return {classify:[],//存储tab切换的所有数据classifyType:"1-1",//tab切换的选中项（二级路由）classifyName:"1",//定义刷新tab时的值（一级路由）//属性properties:[],//存储属性中的所有数据propertyType:{},//存储属性的分类propertyActiveName:[],//记录所有的属性分类list:[],//存储右侧主题total:0,//总页数loading:false,//是否显示遮罩层page:1}},watch: {$route: {handler(){const {classify,page} = this.$route.query;if(classify){this.classifyType = classify;//1-1this.classifyName = classify[0]; //1this.page = Number(page);}this.ThisgetMenus();},immediate:true}},mounted() {getClassify().then(({data})=>{console.log(data)this.classify = data;if(!this.$route.query.classify){this.classifyType = this.classify[0].list[0].type;//1-1this.classifyName = this.classify[0].parent_type; //1this.$router.push({query:{classify: this.classifyType,page:1}})}});getProperty().then(({data})=>{// console.log(data);this.properties = data;const {query} = this.$route;this.propertyType = this.properties.reduce((o,item)=>{//  item.title :  工艺，难度，口味，人数o[item.title] = query[item.title] ? query[item.title]: "";if(o[item.title]){this.propertyActiveName.push(o[item.title][0]);}return o;},{});});},methods: {selectedTag(option){let query = {...this.$route.query};//判断是否点击，如果点击过，取消，否则，选中if(this.propertyType[option.title] === option.type){this.propertyType[option.title] = "";delete query[option.title];}else{this.propertyType[option.title] = option.type;query[option.title] = option.type;}this.$router.push({query})},ThisgetMenus(){const query = {...this.$route.query}const params = {page:query.page || 1,classify:query.classify}delete query.pagedelete query.classifyif(Object.keys(query).length){params.property={...query}}this.loading = true;let loading = null;// 遮罩层this.$nextTick(()=>{loading = this.$loading({target:'.filter-menus-box',text:"Loading...",spinner:"el-icon-loading",background:'rgba(0,0,0,0.7)'})});this.list = [];//请求右侧的数据getMenus(params).then(({data}) =>{// console.log(data);if(this.loading) loading.close();this.loading = false;this.list = data.list;this.total = data.total;this.page = data.current_page;})},//点击改变当前页handlerSelect(){// console.log(this.page)this.$router.push({query:{...this.$route.query,page:this.page}})},tabClick(){const classifyName = this.classifyNameconst item = this.classify.find(item => item.parent_type === classifyName);// console.log(item)//item 是当前被点击到的一级路由（整体路由）if(item){this.classifyName = item.parent_type//一级路由的typethis.classifyType = item.list[0].type;this.$router.push({query:{...this.$route.query,classify:this.classifyType}})}}}}
</script>
<style lang="stylus">.recipe-linkfont-size 0;margin-top 5pxadisplay inline-blockfont-size 12pxpadding 0px 8pxheight 28pxline-height 28px.activebackground #ff3232color #fff.recipeh2text-align centerline-height 150px.el-mainpadding 0.filter-boxbackground #fffpadding 10pxwidth 100%float leftbox-sizing border-box.filter-tagsdisplay flexflex-wrap wrapjustify-content space-around.tag-selectedbackground-color #ff3232 !importantcolor #fff !important.menu-emptywidth 100%text-align centerfont-size 20px
</style>

以上就是这页的整体代码了
总结：
写的时候一定要注意page值必须为Number类型，否则会一直报错，可以在这强行转为Number类型，要懂得分析，其实上边和下边的实现效果是一样的，都是通过后端提供的数据，拿到之后获取数据渲染到页面上，然后再一步一步实现效果，
每天及时更新项目，喜欢的话，点赞，关注，收藏。