项目概述与规划 (I)

项目概述与规划 (I)

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

项目规划

项目步骤

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

用户故事

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

功能

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

流程图(第一部分)

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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入探讨Web应用开发:从前端到后端的全栈实践

目录 引言 1. Web应用开发的基本架构 2. 前端开发技术 HTML、CSS 和 JavaScript 前端框架与库 响应式设计与移动优先 3. 后端开发技术 Node.js(JavaScript后端) Python(Flask和Django) Ruby on Rails Java(S…

docker如何查看容器启动命令(已运行的容器)

docker ps 查看正在运行的容器 该命令主要是为了详细展示查看运行时的command参数 # 通过docker --no-trunc参数来详细展示容器运行命令 docker ps -a --no-trunc | grep <container_name>通过docker inspect命令 使用docker inspect&#xff0c;但是docker inspect打…

为AI聊天工具添加一个知识系统 之62 详细设计 之3:AI操作系统 之1

本文要点 要点 考虑下面的一组整理&#xff08;重点看一下用词、分组分行分类以及 排列组合&#xff09;&#xff0c;看看应该如何将他们组织到本项目程序中&#xff0c;是否同时还丰富了前面讨论的AI操作系统和Lexicographer 程序的内容。 1、工作任务&#xff1a;运行时编译…

项目集成RabbitMQ

文章目录 1.common-rabbitmq-starter1.创建common-rabbitmq-starter2.pom.xml3.自动配置1.RabbitMQAutoConfiguration.java2.spring.factories 2.测试使用1.创建common-rabbitmq-starter-demo2.目录结构3.pom.xml4.application.yml5.TestConfig.java 配置交换机和队列6.TestCon…

LLM大模型推理中的常见数字

1. 聊天机器人Chatbot&#xff0c;一般&#xff0c;input tokens : output tokens 1100:15 2. LLama2的tokenizer&#xff0c;中文情况下&#xff0c;token:汉字1:1.01 3. prefilling阶段的吞吐量(tokens/s)&#xff0c;一般是decoding阶段的50~100倍。 4. 4张带有NVLink的…

【AI日记】25.01.26

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛&#xff1a;Forecasting Sticker Sales 读书 书名&#xff1a;自由宪章 律己 AI&#xff1a;6 小时作息&#xff1a;00:30-8:30短视频&#xff1a;大于 1 小时读书和写作&a…

RK3568 adb使用

文章目录 一、adb介绍**ADB 主要功能****常用 ADB 命令****如何使用 ADB****总结** 二、Linux下载adb**方法 1&#xff1a;使用包管理器&#xff08;适用于 Ubuntu/Debian 系统&#xff09;****方法 2&#xff1a;通过 Snap 安装&#xff08;适用于支持 Snap 的系统&#xff09…

STM32项目分享:智能宠物喂食系统(升级版)

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 PCB图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; STM32智能宠物喂食系统(升级版) &#xff08;资…

JS 时间格式大全(含大量示例)

在 JS 中&#xff0c;处理时间和日期是常见的需求。无论是展示当前时间、格式化日期字符串&#xff0c;还是进行时间计算&#xff0c;JavaScript 都提供了丰富的 API 来满足这些需求。本文将详细介绍如何使用 JavaScript 生成各种时间格式&#xff0c;从基础到高级&#xff0c;…

软件测试 —— 性能测试(jmeter)

软件测试 —— 性能测试&#xff08;jmeter&#xff09; 什么是jmeter安装jmeterjmeter常用组件线程组取样器结果树 我们之前学习了接口测试工具Postman&#xff0c;我们今天要学习的是性能测试工具——jmeter 什么是jmeter Apache JMeter 是一个开源的性能测试工具&#xff…

element-plus 的table section如何实现单选

如果是单选那么全新的按钮应该隐藏或者不可编辑的状态。但是我没找到改变成不可编辑的方法&#xff0c;只能采取隐藏 <template><!-- 注意要包一层div根元素&#xff0c;否则css样式可能会不生效&#xff0c;原因不详 --><div><el-table ref"proTab…

电阻补偿OTA的噪声分析

上文&#xff08;补偿电阻对ota零极点的影响-CSDN博客&#xff09;分析了补偿电阻对五管OTA零极点的影响&#xff0c;该篇借分析电阻补偿OTA的噪声来串联复习下噪声章节的一些基础概念。 1.噪声分析 辅助定理 开始分析OTA噪声之前&#xff0c;先引入一个辅助定理&#xff08;R…

从CRUD到高级功能:EF Core在.NET Core中全面应用(四)

初识表达式树 表达式树&#xff1a;是一种可以描述代码结构的数据结构&#xff0c;它由一个节点组成&#xff0c;节点表示代码中的操作、方法调用或条件表达式等&#xff0c;它将代码中的表达式转换成一个树形结构&#xff0c;每个节点代表了代码中的操作例如&#xff0c;如果…

C语言初阶力扣刷题——349. 两个数组的交集【难度:简单】

1. 题目描述 力扣在线OJ题目 给定两个数组&#xff0c;编写一个函数来计算它们的交集。 示例&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[2] 输入&#xff1a;nums1 [4,9,5], nums2 [9,4,9,8,4] 输出&#xff1a;[9,4] 2. 思路 直接暴力…

在Qt中实现点击一个界面上的按钮弹窗到另一个界面

文章目录 步骤 1&#xff1a;创建新窗口类步骤 2&#xff1a;设计窗口的 UI步骤 3&#xff1a;设计响应函数 以下是一个完整的示例&#xff0c;展示在Qt中如何实现在一个窗口中通过点击按钮弹出一个新窗口。 步骤 1&#xff1a;创建新窗口类 假设你要创建一个名为 WelcomeWidg…

StarRocks 安装部署

StarRocks 安装部署 StarRocks端口&#xff1a; 官方《配置检查》有服务端口详细描述&#xff1a; https://docs.starrocks.io/zh/docs/deployment/environment_configurations/ StarRocks架构&#xff1a;https://docs.starrocks.io/zh/docs/introduction/Architecture/ Sta…

二叉树的最大深度(力扣104)

所谓二叉树的最大深度其实也是根节点的最大高度&#xff0c;同时也是该二叉树的高度。那么要解决这个问题&#xff0c;我们该选择哪一种遍历方式呢&#xff1f; 要获取最大高度&#xff0c;我们需要比较节点的左右子树的高度&#xff0c;取较大的那个值返回给父节点。通过不断…

dm8在Linux环境安装精简步骤说明(2024年12月更新版dm8)

dm8在Linux环境安装详细步骤 - - 2025年1月之后dm8 环境介绍1 修改操作系统资源限制2 操作系统创建用户3 操作系统配置4 数据库安装5 初始化数据库6 实例参数优化7 登录数据库配置归档与备份8 配置审计9 创建用户10 屏蔽关键字与数据库兼容模式11 jdbc连接串配置12 更多达梦数据…

kafka-保姆级配置说明(consumer)

bootstrap.servers #deserializer应该与producer保持对应 #key.deserializer #value.deserializer ##fetch请求返回时&#xff0c;至少获取的字节数&#xff0c;默认值为1 ##当数据量不足时&#xff0c;客户端请求将会阻塞 ##此值越大&#xff0c;客户端请求阻塞的时间越长&…

Spring MVC 综合案例

目录 一. 加法计算器 1. 准备工作 2. 约定前后端交互接口 需求分析 接口定义 3. 服务器端代码 4. 运行测试 二. 用户登录 1. 准备工作 2. 约定前后端交互接口 需求分析 接口定义 (1) 登录界面接口 (2) 首页接口 3. 服务器端代码 4. 运行测试 三. 留言板 1. 准备…