摘 要
随着科技的发展、生活水平的提升，人们更加注重饮食搭配和饮食健康。通过网络技术来加强美食与健康知识的普及是当前一种可行的措施。通过网页浏览美食网，不仅可以普及每道美食的做法，通过制作美食来缓解心情，还可以通过美食网来关注健康理念，增强食品营养与健康知识的科学水平，促进全民健康水平的提升。
本文基于HTML5技术开发一款美食网，通过Python技术来对底层代码进行开发。该美食网是在Visual Studio Code上进行编译的。在美食网的前端中采用了Layui框架设计样式。应用SQLite数据库结合MVC框架设计了美食类别模块、食材模块、菜谱类别模块、菜谱模块、饮食常识模块、瘦身美容模块以及美食网后台模块等功能。该网站不仅可以在线分享美食制作和健康饮食知识，还可以在美食网后台中管理美食网前台的数据。方便网站管理员对美食网内容的更新和维护。
通过该美食网的开发可以方便游客在线浏览菜谱、学习饮食常识等操作，传播中华饮食文化。并且通过美食网后台可以方便管理者对美食网的管理。
关键词：美食网；HTML5；Python；MVC
Design and Implementation of Food Network based on HTML5
Abstract
With the development of technology and the improvement of living standards，people's pursuit of food pays more attention to quality．People pay more attention to diet collocation and healthy diet，it is a feasible measure to strengthen the popularization of food and health knowledge through network technology．Browsing the food network through the web page can not only popularize the practice of every food and relieve their mood by making food，but also pay attention to the concept of health through the food network，enhance the scientific level of food nutrition and health knowledge，and promote the improvement of the health level of the whole people．
This article develops a food network based on HTML5 technology，and uses Python technology to develop the underlying code．The food network is compiled on Visual Studio Code．Layui frame design style is adopted in the front end of the food network．Using SQLite database combined with MVC framework，functions such as gourmet category module，ingredient module，recipe category module，recipe module，diet knowledge module，limming beauty module，and food network backend module are designed．This website can not only share the knowledge of food making and healthy eating online，but also manage the data in the front desk of the food network．It is convenient for webmasters to update and maintain the content of gourmet website．
Through the development of the food network，it is convenient for tourists to browse the recipes online，learn common sense of food and other operations，so that the food culture can be spread．And through the food network background can facilitate the manager to manage the food network．
Key Words：Food Network；HTML5；Python；MVC
目 录
摘 要
Abstract
引 言
1 绪言
1.1 开发背景
1.2 国内外研究现状
1.3 项目的目的及意义
1.4 系统开发所采用的技术
2 系统分析
2.1 需求分析
2.1.1 食材类别用例
2.1.2 食材用例
2.1.3 菜谱类别用例
2.1.4 菜谱用例
2.1.5 饮食常识用例
2.1.6 瘦身美容用例
2.2 系统任务的可行性
2.2.1 技术可行性分析
2.2.2 经济可行性分析
2.2.3 应用可行性分析
2.3 系统开发与部署环境
3 系统总体设计
3.1 系统设计
3.2 数据库设计
3.2.1 实体-属性设计
3.2.2 数据库表设计
4 系统的实现
4.1 MVC设计模式
4.2 网站前端
4.3 网站后端
5 系统测试
5.1 测试方法
5.2 各模块测试
5.2.1 饮食常识测试用例
5.2.2 瘦身美容测试用例
5.2.3 食材测试用例
5.2.4 食材测试用例
5.2.5 菜谱类别测试用例
5.2.6 菜谱测试用例
结 论
参 考 文 献
引 言
本文基于HTML5技术开发美食网的前端样式，为了方便美食网站管理者操作美食网数据，本文同时开发美食网后台管理系统，通过美食网后台管理系统可以实时更新美食网数据。本文使用MVC框架来开发美食网和美食网后台，数据库采用SQLite。对于前端样式的设计中还同时使用了CSS和Layui等技术，在设计代码时只要将所需文件用语句引入就可以轻松设计美食网的框架、颜色、表格样式等。本文将详细阐述美食网开发的背景、研究现状和意义以及美食网的需求分析和系统实现以及测试内容。
1 绪言
1.1 开发背景
美食能给人们的是味蕾和精神的双重冲击。食物可以给人体提供每日需要的能量和营养物质、保障人体健康。因此食物与健康是紧密相连的，而人们可以通过改善每日的饮食习惯来预防一些疾病的发生，比如肥胖、糖尿病等。这使得健康有营养的饮食已经成为了人们追求的理念。虽然国内有传统的饮食文化，有健康的养生理念，但是养生实践开展较晚，人们整体的健康理念发展还不是很完善。面对科技发展的现状，通过网络技术来加强美食与健康知识的普及是当前情况下可行的一种措施。在人们利用上网的时间，通过网页浏览美食网时，不仅可以普及每道美食的做法，通过制作美食来缓解心情，还可以通过美食网来关注健康理念。与此同时提高人们自身对食品营养与健康知识的了解，促进全民健康水平的提升。
1.2 国内外研究现状
计算机的发展带动了网站的发展。在健康理念被提出的时代，并且由于当前疫情的发生，越来越多的人开始注重饮食的品质。以往的美食网更类似于商城模式，在分享美食制作方法的同时，必然还要推荐美食制作的材料的购买，主要是以消费为主。在这种模式下，人们对美食网的关注越来越低，因此平台失去了分享的意义，并且购买的商品不能保证商品的质量和时效。随着人们对生活质量的注重，美食网的改变前景可期。基于人们对美食的追求，在分享美食制作的同时，还可以分享一些健康美食知识。以往的网站开发大都是基于Java技术，而随着Python技术的提升，它可以快速开展这类网站并上线，通过Python技术来开发这类美食网站也会成为今后的一种技术使用模式。
1.3 项目的目的及意义
本文基于HTML5技术开发一款美食网，不仅可以在线分享美食制作和健康饮食知识，还可以在美食网后台中管理美食网前台的数据。方便网站管理员对美食网内容的更新和维护。通过美食网的分享、推荐自己尝试过的美食，可以拉近人与人的距离。帮助美食融入到生活中，借助美食建立更加温馨、和谐的人际关系。
1.4 系统开发所采用的技术
- HTML5
HTML5是构建Web内容的一种语言描述方式，是在HTML4.01的基础上进行了一定的改进[1]。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机[2]。
- CSS3
CSS3的语法是建立在CSS原先版本基础上的，它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript[3]。CSS选择器中的大部分并不是在CSS3中新添加的，只是在之前的版本中没有得到广泛的应用[4]。
- Python
Python是一门易读、易维护，并且被大量用户所欢迎的、用途广泛的语言[5]。Python完全支持继承、重载、派生、多继承，有益于增强源代码的复用性[6]。
- SQLite
SQLite是一款轻型的数据库，是遵守ACID的关系型数据库管理系统[7]。它所占用的资源非常的低，在嵌入式设备中，可能只需要几百K的内存就够了。
- MVC
MVC开始是存在于桌面程序中的，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式[9]。MVC好处是它能为应用程序处理很多不同的视图[10]。
2 系统分析
2.1 需求分析
美食网，实际上就是一个教用户如何制作美食的网站，根据对众多用户的调研，用户希望其中能够通过食材索引到美食的做法上，因此，本网站开发时考虑的用例如图2.1所示。
图2.1 系统用例图
在2.1中，一共包括了三个用例参与者，以及8个用例，本文通过对用例图进行解释，然后再对每个用例的需求进行定义，游客和网站管理者只能在前端对各个模块进行查看，系统管理者能对各个模块进行查看、修改、增加并且对网站管理者进行管理，如表2.1所示。
表2.1 用例参与者
| 序号 | 词汇 | 描述 |
| 1 | 游客 | 可以使用食材功能、饮食常识功能模块、菜谱类别模块、食材类别功能、菜谱功能、瘦身美容模块 |
续表2.1 用例参与者
| 序号 | 词汇 | 描述 | ||
| 2 | 网站管理者 | 可以使用食材类别模块、饮食常识功能、食材功能、菜谱类别功能、瘦身美容功能模块、菜谱功能 | ||
| 3 | 系统管理员 | 在美食网中可以使用菜谱模块、网站管理者信息管理模块、食材类别模块、食材模块、网站管理功能、瘦身美容模块、饮食常识功能模块、菜谱类别功能模块 | ||
在后端管理系统，系统管理员、网站管理者、游客可以参与食材类别、食材、菜谱类别、菜谱、饮食常识、瘦身美容的测试，而网站管理者信息管理和网站管理只有系统管理员可以参与，如表2.2所示。
表2.2 用例词汇表
| 序号 | 用例名称 | 预期的参与者和角色 |
| 1 | 食材类别 | 游客、网站管理者、系统管理员 |
| 2 | 食材 | 游客、网站管理者、系统管理员 |
| 3 | 菜谱类别 | 游客、网站管理者、系统管理员 |
| 4 | 菜谱 | 游客、网站管理者、系统管理员 |
| 5 | 饮食常识 | 游客、网站管理者、系统管理员 |
| 6 | 瘦身美容 | 游客、网站管理者、系统管理员 |
| 7 | 网站管理者信息管理 | 系统管理员 |
| 8 | 网站管理 | 系统管理员 |
2.1.1 食材类别用例
食材类别模块用例中所有参与者成功登录系统后，食材类别信息化的模块中通过点击食材类别按钮对食材类别信息进行添加和修改如表2.3所示。
表2.3 食材类别模块用例描述
| 用例条目 | 描述 |
| 用例名称 | 食材类别功能 |
| 主要业务参与者 | 游客、网站管理者、系统管理员 |
| 其他参与者 | 无 |
| 描述 | 食材类别信息化的模块 |
| 前置条件 | 以注册成功的身份登录系统 |
| 后置条件 | 对食材类别进行筛选 |
| 触发条件 | 通过导航栏中食材类别按钮进入食材类别页面 |
| 基本流程 | 成功登录系统 对食材类别信息进行添加 |
续表2.3 食材类别模块用例描述
| 用例条目 | 描述 | ||
|
| 无 | ||
| 结束 | 食材类别信息完成 | ||
| 实现约束和说明 | 无 | ||
| 待解决问题 | 无 | ||
2.1.2 食材用例
食材模块用例中所有参与者成功登录系统后，在实现食材的功能模块中，通过左侧食材按钮进入食材页面，进行身份验证，点击食材按钮实现食材信息的完成，如表2.4所示。
表2.4 食材模块用例描述
| 用例条目 | 描述 |
| 用例名称 | 食材功能 |
| 主要业务参与者 | 游客、网站管理者、系统管理员 |
| 其他参与者 | 无 |
| 描述 | 实现食材的功能模块 |
| 前置条件 | 成功登录系统 |
| 后置条件 | 对食材进行修改 |
| 触发条件 | 通过左侧食材按钮进入食材页面 |
| 基本流程 | 通过身份验证 |
| 替代流程 | 无 |
| 结束 | 食材信息完成 |
| 实现约束和说明 | 需要食材食材类别 |
| 待解决问题 | 无 |
2.1.3 菜谱类别用例
菜谱类别模块用例中所有参与者，在实现菜谱类别的功能中，成功登录系统后，点击导航栏中的菜谱类别按钮，添加菜谱类别，修改菜谱类别，如表2.5所示。
表2.5 菜谱类别模块用例描述
| 用例条目 | 描述 |
| 用例名称 | 菜谱类别功能 |
| 主要业务参与者 | 游客、网站管理者、系统管理员 |
| 其他参与者 | 无 |
| 描述 | 实现菜谱类别的功能 |
续表2.5 菜谱类别模块用例描述
| 用例条目 | 描述 | ||
| 前置条件 | 成功登录系统 | ||
| 后置条件 | 对菜谱类别进行筛选 | ||
| 触发条件 | 通过左侧菜谱类别按钮进入菜谱类别页面 | ||
| 基本流程 | 登录系统 添加菜谱类别 | ||
| 替代流程 | 无 | ||
| 结束 | 菜谱类别信息完成 | ||
| 实现约束和说明 | 无 | ||
| 待解决问题 | 暂无 | ||
2.1.4 菜谱用例
菜谱模块用例中所有参与者先进行身份验证，通过点击导航栏中菜谱按钮进入菜谱页面，对需要添加的菜谱进行录入，对不需要的菜谱进行删除，如表2.6所示。
表2.6 菜谱模块用例描述
| 用例条目 | 描述 |
| 用例名称 | 菜谱功能 |
| 主要业务参与者 | 游客、网站管理者、系统管理员 |
| 其他参与者 | 无 |
| 描述 | 菜谱信息化的模块 |
| 前置条件 | 通过身份验证 |
| 后置条件 | 对菜谱进行修改 |
| 触发条件 | 通过导航栏中菜谱按钮进入菜谱页面 |
| 基本流程 | 通过身份验证 录入菜谱 |
| 替代流程 | 无 |
| 结束 | 菜谱信息完成 |
| 实现约束和说明 | 需要菜谱菜谱类别 |
| 待解决问题 | 暂无 |
2.1.5 饮食常识用例
饮食常识模块用例中所有参与者以注册成功的身份登录系统，对饮食常识进行筛选，通过点击左侧的饮食常识按钮进入饮食常识页面，对需要增加的饮食常识信息进行录入如表2.7所示。
表2.7 饮食常识模块用例描述
| 用例条目 | 描述 |
| 用例名称 | 饮食常识功能 |
| 主要业务参与者 | 游客、网站管理者、系统管理员 |
| 其他参与者 | 无 |
| 描述 | 实现饮食常识的模块 |
| 前置条件 | 以注册成功的身份登录系统 |
| 后置条件 | 对饮食常识进行筛选 |
| 触发条件 | 通过左侧饮食常识按钮进入饮食常识页面 |
| 基本流程 | 成功登录系统 录入饮食常识信息 |
| 替代流程 | 无 |
| 结束 | 饮食常识信息完成 |
| 实现约束和说明 | 无 |
| 待解决问题 | 无 |
2.1.6 瘦身美容用例
瘦身美容模块用例中所有参与者成功登录系统后，在瘦身美容的模块中通过点击导航栏中瘦身美容模块按钮进入本模块，对需要增加的瘦身美容信息进行录入，如表2.8所示。
表2.8 瘦身美容模块用例描述
| 用例条目 | 描述 |
| 用例名称 | 瘦身美容功能 |
| 主要业务参与者 | 游客、网站管理者、系统管理员 |
| 其他参与者 | 无 |
| 描述 | 瘦身美容信息化的模块 |
| 前置条件 | 登录系统 |
| 后置条件 | 对瘦身美容进行导出 |
| 触发条件 | 通过导航栏中瘦身美容按钮进入本模块 |
| 基本流程 | 通过身份验证 录入瘦身美容信息 |
| 替代流程 | 无 |
| 结束 | 瘦身美容信息完成 |
| 实现约束和说明 | 无 |
| 待解决问题 | 暂无 |
2.2 系统任务的可行性
2.2.1 技术可行性分析
该美食网采用了Python技术在Visual Studio Code编译器上进行编译。数据库采用的SQLite，这几种使用到的技术都是成熟的，并且被广泛应用于开发这类网站的技术。
2.2.2 经济可行性分析
该美食网的开发是为了分享美食制作和健康美食知识，通过网站的形式可以获取大量的流量。美食网本身的开发只涉及到了开发人工费，使用的技术和编译平台都是开源的。
2.2.3 应用可行性分析
美食网的开发技术成熟，设计的数据库表是根据调研人群对美食网的需求设计的。美食网的功能操作使用简单，数据传输和保存有保障，因此应用可行。
2.3 系统开发与部署环境
本系统开发与部署在本人的笔记本电脑上，其配置为i5-5200u处理器，8GB内存，开发时，编译器采用了VS code。
3 系统总体设计
3.1 系统设计
通过需求分析，本设计一共分为6个模块，前后端分别采用HTML、Python进行编写。此外，数据库由于逻辑比较简单，所以采用了SQLite。
系统总体上设计如图3.1所示。本设计分为三个部分，前端提供了四个模块，其中菜谱中包含了食材，而每个食材又可以定位到对应的菜谱。另两个模块则完全独立。后端提供了六个模块的管理，包括了CURD的功能，最后管理员模块可以对网站的静态资源进行管理，并且还可以管理后端入口用户。
图3.1 系统总体设计图
系统总体上采用B/S结构设计，这是一种浏览器-服务器的结构，由浏览器提供人机交互的内容，由服务器提供数据，以及业务逻辑等。
3.2 数据库设计
3.2.1 实体-属性设计
食材信息实体属性图，主要记录了食材的所有属性信息，包括食材名称、食材认识与选购、食材食用宜忌、食材营养功效等，如下图3.2所示。
图3.2 食材信息实体属性图
菜谱类别信息实体属性图，主要记录了菜谱类别的所有属性信息，包括菜谱类别名称等，如下图3.3所示。
图3.3 菜谱类别信息实体属性图
菜谱信息实体属性图，主要记录了菜谱的所有属性信息，包括菜谱名称、菜谱主料、菜谱辅料、菜谱口味、菜谱工艺、菜谱耗时、菜谱难度、菜谱做法步骤、菜谱小窍门等，如下图3.4所示。
图3.4 菜谱信息实体属性图
饮食常识信息实体属性图，主要记录了饮食常识的所有属性信息，包括饮食常识标题、饮食常识时间、饮食常识内容等，如下图3.5所示。
图3.5 饮食常识信息实体属性图
瘦身美容信息实体属性图，主要记录了瘦身美容的所有属性信息，包括瘦身美容标题、瘦身美容时间、瘦身美容内容等，如下图3.6所示。
图3.6 瘦身美容信息实体属性图
食材类别信息实体属性图，主要记录了食材类别的所有属性信息，包括食材类别名称等，如下图3.7所示。
图3.7 食材类别信息实体属性图
3.2.2 数据库表设计
食材类别信息表：在数据库里用来记录食材类别的信息，对食材类别信息进行存储，如表3.1所示。
表3.1 food_material_category 食材类别信息表
| 列名 | 数据类型 | 长度 | 主键 | 允许空 | 注释 |
| food_material_category_id | int | 11 | 是 | 否 | 食材类别编号 |
| name_of_food_material_category | char | 100 | 否 | 是 | 食材类别名称 |
食材信息表：在数据库里用来记录食材的信息，对食材信息进行存储，如表3.2所示。
表3.2 ingredients 食材信息表
| 列名 | 数据类型 | 长度 | 主键 | 允许空 | 注释 |
| ingredients_id | int | 11 | 是 | 否 | 食材编号 |
| name_of_ingredients | char | 512 | 否 | 是 | 食材名称 |
| food_material_category | char | 100 | 否 | 是 | 食材类别 |
| food_material_picture | image | 100 | 否 | 是 | 食材图片 |
| understanding_and_ purchase_of_food_materials | char | 200 | 否 | 是 | 食材认识与购选 |
| food_materials_should_not_ be_eaten | char | 1024 | 否 | 是 | 食材食用宜忌 |
| nutritional_efficacy_of_food_ materials | char | 1024 | 否 | 是 | 食材营养功效 |
菜谱类别信息表：在数据库里用来记录菜谱类别的信息，对菜谱类别信息进行存储，如表3.3所示。
表3.3 menu_category菜谱类别信息表
| 列名 | 数据类型 | 长度 | 主键 | 允许空 | 注释 |
| menu_category_id | int | 11 | 是 | 否 | 菜谱类别编号 |
| menu_category_name | char | 1024 | 否 | 是 | 菜谱类别名称 |
菜谱信息表：在数据库里用来记录菜谱的信息，对菜谱信息进行存储，如表3.4所示。
表3.4 menu菜谱信息表
| 列名 | 数据类型 | 长度 | 主键 | 允许空 | 注释 |
| menu_id | int | 11 | 是 | 否 | 菜谱编号 |
| recipe_name | char | 128 | 否 | 是 | 菜谱名称 |
| menu_category | char | 100 | 否 | 是 | 菜谱菜谱类别 |
| menu_picture | image | 100 | 否 | 是 | 菜谱图片 |
| main_ingredients_of_recipe | char | 128 | 否 | 是 | 菜谱主料 |
| recipe_accessories | char | 500 | 否 | 是 | 菜谱辅料 |
续表3.4 menu菜谱信息表
| 列名 | 数据类型 | 长度 | 主键 | 允许空 | 注释 | ||||||||||||
| menu_taste | char | 128 | 否 | 是 | 菜谱口味 | ||||||||||||
| recipe_technology | char | 2048 | 否 | 是 | 菜谱工艺 | ||||||||||||
| time_consuming_recipes | char | 1000 | 否 | 是 | 菜谱耗时 | ||||||||||||
| menu_difficulty | char | 100 | 否 | 是 | 菜谱难度 | ||||||||||||
| recipe_steps | char | 500 | 否 | 是 | 菜谱做法步骤 | ||||||||||||
| recipe_tips | char | 1000 | 否 | 是 | 菜谱小窍门 | ||||||||||||
饮食常识信息表：在数据库里用来记录饮食常识的信息，对饮食常识信息进行存储，如表3.5所示。
表3.5 common_sense_of_diet饮食常识信息表
| 列名 | 数据类型 | 长度 | 主键 | 允许空 | 注释 |
| common_sense_of_diet_id | int | 11 | 是 | 否 | 饮食常识编号 |
| diet_knowledge_title | char | 100 | 否 | 是 | 饮食常识标题 |
| diet_knowledge_time | datetime | 100 | 否 | 是 | 饮食常识时间 |
| diet_knowledge_content | char | 128 | 否 | 是 | 饮食常识内容 |
瘦身美容信息表：在数据库里用来记录瘦身美容的信息，对瘦身美容信息进行存储，如表3.6所示。
表3.6 slimming_and_beauty 瘦身美容信息表
| 列名 | 数据类型 | 长度 | 主键 | 允许空 | 注释 |
| slimming_and_beauty_id | int | 11 | 是 | 否 | 瘦身美容编号 |
| slim_beauty_title | char | 64 | 否 | 是 | 瘦身美容标题 |
| slimming_beauty_time | datetime | 100 | 否 | 是 | 瘦身美容时间 |
| slimming_beauty_content | char | 500 | 否 | 是 | 瘦身美容内容 |
