项目概述与规划 (I)

项目概述与规划 (I)

JavaScript的学习已经接近尾声了,最后我们将通过一个项目来讲我们在JavaScript中学习到的所有都在这个项目中展现出来,这个项目的DEMO来自于Udemy中的课程,作者是Jonas Schmedtmann;

项目规划

项目步骤

  1. 用户故事
  2. 功能
  3. 流程图
  4. 架构
  5. 开发步骤

用户故事

  • 用户故事:从用户的角度描述应用程序的功能;
  • 常见格式:作为【用户类型】,我想要【一个动作】,以便于【获得利益】;
  1. 作为一个用户,我想要搜索食谱,这样我就能找到新的饮食点子;
  2. 作为一个用户,我希望能够更新份数,这样我就可以为不通数量的人做一顿饭;
  3. 作为一个用户,我想把书谱加到书签里,以便以后可以查看;
  4. 作为一个用户,我希望能够创建自己的食谱,这样我就可以在同一个应用程序中组织它们;
  5. 作为一个用户,我希望在离开应用程序和稍后再回来时能看到我的书签和自己的食谱,这样我可以再做饭后安全地关闭应用程序;

功能

  • 我们所有的功能都来自于用户提给我们的需求,所以我们要根据用户的需求来列出我们所要实现的功能;
  1. 搜索食谱
    • 搜索功能:输入字段,用搜索的关键字向API发送请求
    • 显示分页结果;
    • 显示包含烹饪事件、分数和成分的食谱;
  2. 更新份量
    • 更改配料功能,根据当前配料数量更新所有配料;
  3. 书签食谱
    • 书签功能:显示所有已有书签的食谱列表
  4. 创建我自己的食谱
    • 用户可以上传自己的食谱;
    • 用户食谱讲自动被收藏;
    • 用户只能看到自己的食谱,不能看到其他用户的食谱;
  5. 当我离开应用程序并稍后再来时,请查看我的书签和自己的食谱
    • 使用本地存储讲书签存储在浏览器中;
    • 在页面加载时,从本地存储器读取已保存的书签并显示;

流程图(第一部分)

  • 第一部分的流程图我们就先规划我们的搜索功能和带分页的结果,后面的显示配方之类的将在后面规划;

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/960030.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ 架构分析

文章目录 前言一、RabbitMQ架构分析1、Broker2、Vhost3、Producer4、Messages5、Connections6、Channel7、Exchange7、Queue8、Consumer 二、消息路由机制1、Direct Exchange2、Topic Exchange3、Fanout Exchange4、Headers Exchange5、notice5.1、备用交换机(Alter…

基于java线程池和EasyExcel实现数据异步导入

基于java线程池和EasyExcel实现数据异步导入 2.代码实现 2.1 controller层 PostMapping("import")public void importExcel(MultipartFile file) throws IOException {importService.importExcelAsync(file);}2.2 service层 Resource private SalariesListener sa…

微信阅读网站小程序的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…

【吉林乡镇界】面图层shp格式arcgis数据乡镇名称和编码wgs84无偏移内容测评

标题中的“吉林省乡镇界面图层shp格式arcgis数据乡镇名称和编码wgs84无偏移”揭示了这是一个地理信息系统(GIS)相关的数据集,主要用于描绘吉林省的乡镇边界。这个数据集包含了一系列的文件,它们是ArcGIS软件能够识别和处理的Shape…

71.在 Vue 3 中使用 OpenLayers 实现按住 Shift 拖拽、旋转和缩放效果

前言 在前端开发中,地图功能是一个常见的需求。OpenLayers 是一个强大的开源地图库,支持多种地图源和交互操作。本文将介绍如何在 Vue 3 中集成 OpenLayers,并实现按住 Shift 键拖拽、旋转和缩放地图的效果。 实现效果 按住 Shift 键&#…

Python NumPy(3):创建数组(2)

1 NumPy 从已有的数组创建数组 1.1 numpy.asarray numpy.asarray 类似 numpy.array,但 numpy.asarray 参数只有三个,比 numpy.array 少两个。 numpy.asarray(a, dtype None, order None) 参数描述a任意形式的输入参数,可以是&#xff0c…

qml Dialog详解

1、概述 Dialog是QML(Qt Modeling Language)中用于显示对话框的组件,它提供了一个模态窗口,通常用于与用户进行重要交互,如确认操作、输入信息或显示警告等。Dialog组件具有灵活的布局和样式选项,可以轻松…

二维数组一

目录 输出数组的第k行数输出数组的第k列数输出数组的每一行的和输出数组的每列的平均值最高成绩各个科目成绩的平均分求最大梯形的面积入门靶心数奇偶统计 输出数组的第k行数 题目描述 输入一个二维数组,显示他的第k行的值。 输入 第一行 n,m两个整数&…

单片机内存管理剖析

一、概述 在单片机系统中,内存资源通常是有限的,因此高效的内存管理至关重要。合理地分配和使用内存可以提高系统的性能和稳定性,避免内存泄漏和碎片化问题。单片机的内存主要包括程序存储器(如 Flash)和数据存储器&a…

计算机网络 (61)移动IP

前言 移动IP(Mobile IP)是由Internet工程任务小组(Internet Engineering Task Force,IETF)提出的一个协议,旨在解决移动设备在不同网络间切换时的通信问题,确保移动设备可以在离开原有网络或子网…

线性回归、协同过滤、基于内容过滤、主成分分析(PCA)

线性回归 使用item特征用户打分标签线性回归训练,最小化成本函数,得到每个用户的参数 协同过滤 协同过滤基于一个核心假设:相似的用户会有相似的兴趣,因此可以通过分析相似用户历史行为,来预测当前用户可能感兴趣的i…

引领产品创新: 2025 年 PM 效能倍增法则

本文讲述 PM 如何利用 AI 做到效率倍增,非常有借鉴意义,故而翻译于此。 原文链接:https://www.news.aakashg.com/p/the-ai-pms-playbook 在产品圈有一个广为流传的说法: “每个产品经理都应该成为 AI 产品经理。” 这个观点有一…

vscode无法格式化go代码的问题

CTRLshiftp 点击Go:Install/Update Tools 点击全选,OK!

【外文原版书阅读】《机器学习前置知识》1.线性代数的重要性,初识向量以及向量加法

目录 ​编辑 ​编辑 1.Chapter 2 Why Linear Algebra? 2.Chapter 3 What Is a Vector? 个人主页:Icomi 大家好,我是Icomi,本专栏是我阅读外文原版书《Before Machine Learning》对于文章中我认为能够增进线性代数与机器学习之间的理解的…

对神经网络基础的理解

目录 一、《python神经网络编程》 二、一些粗浅的认识 1) 神经网络也是一种拟合 2)神经网络不是真的大脑 3)网络构建需要反复迭代 三、数字图像识别的实现思路 1)建立一个神经网络类 2)权重更新的具体实现 3&am…

SOME/IP--协议英文原文讲解1

前言 SOME/IP协议越来越多的用于汽车电子行业中,关于协议详细完全的中文资料却没有,所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块: 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 一、SOM…

移动光猫怎么自己改桥接模式?

环境: 型号H3-8s 问题描述: 家里宽带用的是H3-8s 光猫,想改桥接模式。 解决方案: 1.默认管理员账号和密码: 账号:CMCCAdmin 密码:aDm8H%MdAWEB页面我试了登陆不了,显示错误 …

2D 超声心动图视频到 3D 心脏形状重建的临床应用| 文献速递-医学影像人工智能进展

Title 题目 2D echocardiography video to 3D heart shape reconstruction for clinicalapplication 2D 超声心动图视频到 3D 心脏形状重建的临床应用 01 文献速递介绍 超声心动图是心血管医学中一种至关重要且广泛应用的影像学技术,利用超声波技术捕捉心脏及其…

web端ActiveMq测试工具

如何用vue3创建简单的web端ActiveMq测试工具? 1、复用vue3模板框架 创建main.js,引入APP文件,createApp创建文件,并加载element插件,然后挂载dom节点 2、配置vue.config.js脚本配置 mport { defineConfig } from "vite&qu…

STM32 GPIO配置 点亮LED灯

本次是基于STM32F407ZET6做一个GPIO配置,实现点灯实验。 新建文件 LED.c、LED.h文件,将其封装到Driver文件中。 双击Driver文件将LED.c添加进来 编写头文件,这里注意需要将Driver头文件声明一下。 在LED.c、main.c里面引入头文件LED.h LED初…