美食杰---菜谱大全

最新推荐文章于 2024-08-10 15:00:00 发布
最新推荐文章于 2024-08-10 15:00:00 发布
阅读量157 收藏
点赞数
文章标签： html5 mvc html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sco_114/article/details/120678241
版权
本文探讨了前端如何从API获取数据并渲染到页面，包括二级路由的动态绑定和筛选功能实现。同时，介绍了后端数据分页的处理方法，详细阐述了页面初始化、页码管理和数据加载的逻辑，确保用户在刷新页面时能保持之前的状态，并提供了加载遮罩层的优化策略。
摘要由CSDN通过智能技术生成

思路

左侧思路

首先定义一个空数组，然后我们从api里把数据请求到这个空数组中，在模板中把数组遍历渲染到页面

第一个数组里面还有一个数组（list）我们可以看做一个二级路由，然后把这个list遍历出来
动态绑定把数据储存到路由中，

筛选部分同样是把数据渲染到页面中，筛选中第一层为属性所有的数据，第二层为属性的分类，然后我们给第二层路由添加一个点击事件，如果选中就赋值，如果没选中就默认选中第一个，然后动态绑定class点击添加颜色，

为了用户的体验度我们可以设置一个空的数组把每一个点击过的分类项储存下来，存放到路由中，每次点击完成后不会收起来，只有刷新页面才会收起

代码展示

第一步 :
定义一个空数组，然后我们从api里把数据请求到这个空数组中，在模板中把数组遍历渲染到页面

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

定义一个字符串,用来存放刷新tab时的值(一级路由),默认显示第一个

在这里插入图片描述
在这里插入图片描述

第二步 :

第一个数组里面还有一个数组（list）我们可以看做一个二级路由，然后把这个list遍历出来,同时动态绑定类添加背景颜色
动态绑定把数据储存到路由中

在这里插入图片描述
在这里插入图片描述

筛选部分

第一步
同样是把数据渲染到页面中，筛选中第一层为属性所有的数据，第二层为属性的分类，然后我们给第二层路由添加一个点击事件，如果选中就赋值，如果没选中就默认选中第一个，然后动态绑定class点击添加颜色

在这里插入图片描述
在这里插入图片描述
点击事件

在这里插入图片描述

第二步

为了用户的体验度我们可以设置一个空的数组把每一个点击过的分类项储存下来，存放到路由中，每次点击完成后不会收起来，只有刷新页面才会收起

在这里插入图片描述

在这里插入图片描述

右侧思路

首先定义一个空数组(list)用于存放右侧所有的数据,其次自定义一个方法，数据从query中拿出来，然后用params存储新增的数据page
，有的话给个页码，没有的话给个默认值(默认值为1)
每次使用完页数和数据之后删除掉(防止点击过快数据错乱)

初始化的loading为false (遮罩层)

把挂载好的数据,页数,页码总数量渲染到页面中,

当页码改变时触发点击事件重新更新页码以及数据
如果触发loading加载项使用nextTick添加一个延时遮罩层

(优化)
当重新刷新浏览器时也可以加一个遮罩层
第一次加载数据默认显示第一条数据

代码展示

首先定义一个空数组(list)用于存放右侧所有的数据

在这里插入图片描述

请求右侧的数据

在这里插入图片描述

其次自定义一个方法，数据从query中拿出来，然后用params存储新增的数据page，有的话给个页码，没有的话给个默认值(默认值为1)
每次使用完页数和数据之后删除掉(防止点击过快数据错乱)

如果触发loading加载项使用nextTick添加一个延时遮罩层
在这里插入图片描述
初始化的loading为false (遮罩层)

在这里插入图片描述

把挂载好的数据,页数,页码总数量渲染到页面中,

在这里插入图片描述

当页码改变时触发点击事件重新更新页码以及数据

在这里插入图片描述

小tips:

因为我们改变页码时element ui中的组件不支持字符串,所以需要使用number把page转换成数字,这样就可以显示页码啦

在这里插入图片描述

(优化)
当重新刷新浏览器时也可以加一个遮罩层
第一次加载数据默认显示第一条数据

在这里插入图片描述

好想吃麻薯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
美食杰----菜谱大全
m0_62201566的博客
10-09 437
今天我们来写美食杰的菜谱大全页面，首先要讲的是实现这个页面的流程： 拿到数据----渲染数据----监听路由传参----判断----写点击事件 1.在api里面拿到数据getClassify, getProperty, getMenus。 2.再创建个空数组classify存放数据，把数据赋值给data。 3.渲染数据，用v-for渲染数据。 4.在watch里深度监听路由传参。 5.再用if判断，判断是否点击，如果点击过就取消；否则，选中。 6.用@click写点击事件，点击的时候地址栏中的
vue项目美食杰--菜谱大全
Im_xiaopei的博客
10-11 512
项目已经接近尾声了，难度也随之增加，不过，世上无难事，只要肯登攀，遇到困难，打倒它，然后在遇到更大的困难。。当然了，在这个过程中我们的技术和心理素质也会逐步的提高。。今天分享一个小小难度的部分，菜谱大全。。。 菜谱大全在项目中是处于首页的位置，是和首页展示页面通过路由的切换来展示的，所以第一步，配置好路由： { path: '/recipe', name: 'recipe', title:'菜谱...
美食杰-菜谱大全
as_long_的博客
10-09 150
一、介绍 菜谱大全通过element组件进行渲染，实现了tab切换和下拉列表效果。 二、过程 首先导入api，在data里面创建需要用到的属性。 import {getClassify, getProperty, getMenus} from '@/service/api'; data data() { return { classify:[],//存储tab切换的所有数据 classifyTyp.
美食杰--菜谱大全
weixin_57550930的博客
10-11 170
首先讲述一个需要实现的功能 点击那个给那个增加样式，说明被点中， 相当于父类，每大类细分为三个或四个 query传参，直接传子类 传的时候不止传classify，包括其它页码，一些属性等，不止新增或减少，随着用户的操作，所以我们可以加入 ...
美食杰-菜谱大全（一）
akuaiqwewqe的博客
10-10 222
一，效果展示 er
美食杰--------菜谱大全
weixin_55225560的博客
10-11 239
话不多说，直接看效果图： HTML: <template> <div class="recipe"> <!-- v-model="activeName" --> <!-- 菜谱分类 start --> <el-tabs type="border-card" v-model='classifyName'> <el-tab-pane .
美食杰----菜谱大全（二）
m0_62201566的博客
10-11 168
这篇文章接着续写上一篇菜谱大全，这篇文章主要写的是右边的侧栏部分。 一.思路：1.首先布局，要用到Element Ui组件来布局。 2.然后从后端获取数据。 3.将调用到的数据进行解构，再创建个空数组，将要用的数据保存的新建的数组里。 4.渲染数据。 5.实现Loading加载事件。 6.实现页码跳转效果，点击相应的代码，出现内容。 ...
美食杰-菜谱详情页
weixin_45571769的博客
10-12 263
一、 菜谱介绍 美食杰详情页页面，通过使用elementUI组件配合进行渲染页面，这里我们分为3个组件分别进行渲染，组件分为 头部组件(detail-header)、主体组件(detail-content)、评论组件(detail-comment) 配合 主组件(detail) 进行渲染； 这里我们看一下整体效果图 二、Detail组件传递数据 这里我们就开始进行渲染组件，我们先从detail组件开始进行编写，先在detail组件进行网络请求，这里我们在...
美食杰-菜谱大全右侧主体
oo_ring的博客
10-11 121
根据用户的选择，展示不同的数据 分页 在data中定义需要的数组 data() { return { classify: [], property: [], propertype: {}, //存储分类的属性 classifyType: "1-1", //子级 classifyName: "1", //刷新之后父级路由参数有，而视图没有变化。 propertyActiveName: [], //右..
精品美食杰网站源码
01-29
【标签】"美食杰"可能是一个品牌或者项目的名字，这表明源码是为这个特定的品牌或项目量身打造的，旨在提供一个展示美食资讯、菜谱分享、美食社区等功能的平台。 在【压缩包子文件的文件名称列表】中，我们可以看到...
mongodb-mock-data.zip
10-14
美食杰项目可能是一个专注于美食分享、食谱推荐或者餐饮服务的平台，而这个MongoDB的数据集则提供了其所需的基础数据。 MongoDB的特点在于它的灵活性和可扩展性，它使用JSON格式（BSON）来存储数据，这种格式允许...
美食杰官方网站时间进度条左右全屏多图焦点图
06-09
【标题解析】：“美食杰官方网站时间进度条左右全屏多图焦点图”是一个网页设计元素，主要用于美食杰官网的首页或者其他重要页面。这个焦点图设计独特，具备左右全屏展示的特点，可以展示多张美食图片，增加用户在...
meishijie-fe.zip
10-14
"美食杰"很可能是一个提供食谱、烹饪技巧或者美食分享的在线平台。这个"纯净版"的描述可能意味着这是一个没有额外插件或第三方库的精简版，专为开发者或者测试人员设计，以便更好地理解和研究项目的结构和功能。 ...
帝国7.2CMS仿做菜网美食食谱网站源码 附带采集规则.zip
11-11
92game仿《做菜网》 食谱网 美食菜谱 附带采集规则92kaifa帝国7.2CMS模板源码 烧菜网，原始数据太大，删了~不带数据，自己去采集吧！做菜网 – 中国最优质的美食，食谱，菜谱网。...找家常菜谱,上美食杰菜谱做菜网
JavaScript和 HTML5 Canvas实现图像绘制与处理
zhugedali_的博客
08-06 920
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) ：从源图像的 (sx, sy) 位置开始，截取 sWidth x sHeight 大小的区域，并将其绘制到目标位置 (dx, dy) ，绘制的大小为 dWidth x dHeight。- drawImage(image, x, y, width, height) ：在指定的 (x, y) 坐标位置绘制指定大小的图像。
HTML5+CSS3-HTML5入门
2302_77230857的博客
08-06 544
,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和
HTML5+JavaScript绘制彩虹和云朵
最新发布
cnds123的专栏
08-10 178
HTML5+JavaScript绘制彩虹和云朵，改进版云彩能动——从左向右不停地移动
vue3+vue-router4 路由HTML5模式（createWebHistory ），编译后部署到nginx，点击路由跳转正常，但是刷新页面报404
徐同保的专栏
08-07 322
vue3+vue-router4 路由HTML5模式（createWebHistory ），编译后部署到nginx，点击路由跳转正常，但是刷新页面报404
免费菜谱api接口-菜谱大全api
05-30
好的，您可以尝试使用下面这个免费的菜谱API接口： 接口名称：菜谱大全API 接口地址：http://apis.juhe.cn/cook/query.php 请求方式：GET 请求参数： - key：您申请的API Key - menu：菜谱关键词 - dtype：返回数据格式，可选值：json、xml，默认json - pn：数据返回起始下标，默认0 - rn：返回数据条数，最大30，默认10 例如，如果您要查询“红烧肉”的菜谱，可以使用以下URL： http://apis.juhe.cn/cook/query.php?key=您申请的API Key&menu=红烧肉 注意：在使用该API时，您需要先申请一个API Key才能使用。同时，请确保您的使用符合该API的使用规范，不要进行任何违法违规操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值