创建购物清单 Web 应用程序

Creating shopping list web application

本文关键字：Web 应用程序 创建      更新时间：2023-09-26

我正在通过尝试构建一个简单的购物清单Web应用程序来学习Python，Django，Javascript和jQuery。我想听听有经验的开发人员的意见，如果我的方法是正确的：

功能性：网页将显示食物列表。当我点击某种食物时，我希望显示一份成分列表（这将是我的购物清单）。点击另一种食物会将更多成分添加到购物清单中。

我的方法：我已经用django构建了一个简单的页面。我能够显示已输入数据库的所有食物的列表。我现在需要的是当我点击食物项目时开始建立一个成分列表。

我想我会在第一页加载时从数据库中加载一个成分列表，但使用 css 隐藏它们。当我点击一个食品项目时，我会使用 jquery/css 取消隐藏与该食品相关的成分。

这种方法对我来说似乎很笨拙。您能给我一些建议如何使用上述技术创建购物清单应用程序吗？我的方法正确吗？

这是我的做法。 但请注意，这个问题没有正确的答案。

让我们调用您单击食物的页面，index.php .

在index，我会拥有所有可以点击的食物，以及一个带有 id "ingredients" 的空div - 例如。 <div id="ingredients"></div>

当食物被点击时，他们会在main.js中调用jQuery处理程序。

onClick 处理程序将：

  • 跟踪当前选择的食物
  • 通过 AJAX 将 JSON 或其他格式的列表发送到get_ingredients.php页面。
  • （此页面将返回我想在"成分"部分中显示的 HTML）
  • 使用 AJAX 调用返回的 html 设置成分div 的内容。

更明确地说，get_ingredients.php会：

  • 解析由index发送（通过 AJAX）的食物的 GET/POST 列表
  • 查询数据库以查看所选食物所需的成分
  • 构造与应放入面向用户的页面上的"成分"div 的查询结果相对应的 HTML。
  • 通过echo/print/printf/etc"显示它"，这并没有真正与AJAX一起显示，而是作为AJAX响应发送。

这样，您只需跟踪所选食物，而无需在选择和取消选择食物时处理添加/减去单个成分的数量。

这样做的缺点是重新传输"您已经知道"的东西，即先前选择的食物成分，但是它消除了许多原本需要的工作。

@jedwards的评论是正确的。而不是在开始时为每个项目加载所有内容（这可能会导致初始页面加载缓慢）。您应该在 jquery 中执行一个 on-click 事件，该事件对服务器执行ajax回调，并在数据库中传递对象的名称或 id 并返回其成分，然后用它们填充包含成分的div。

相关文章：