基于web的食谱管理系统设计与实现

1. 绪论
   1. 课题背景及意义

随着网络的发展，人们已经无法离开网络，并且人们的生活质量正在提高，人们对于美食的需求也越来越高，在这样的趋势下，美食网站的存在还是很有必要的，根据网站上详细的制作步骤以及食材详细的用料和用量，这样就可以让更多的人自己动手制作属于自己的美食，享受属于自己的美好时光。

国内美食网站的现状：随着国外美食沪东社区的兴起，国内的美食网站也逐渐发展起来，其中较为成熟的有美食杰、豆果、天天美食、菜婆婆等一些具有中国特色的菜谱网站。虽然目前大部分此类网站已专注于提升菜谱的数量和广度，但却仍有不足之处。其一，这些传统美食网站对于用户的理解和定位还不够清晰，因此功能千篇一律，用户量也少。其二，这些网站缺乏互动性内容较为粗糙。其三，大多数的家庭并不清楚十五的营养成分及适当的搭配方法，且现有的基于健康推荐的服务在计算个人食谱的营养和搭配上缺乏易用性。

国外美食网站的现状：美食互动社区在国内兴起之前，在已在美日等地形成了固定的产业模式，比较流行的美食社区类网站包括美国的Allreipes，Yummly，Food52和日本的Coodpad。根据Alexa的网站排名，上述美食社区网站中Allrecipes和Cookpad的流量、用户量以及访问量排名最高且接近。其中日本网站Cookpad是目前日本最受欢迎的食谱网站之一，已于2009年在东京政交所上市。它主要面向家庭成员提供美食分享社区。

1. 1. 课题研究内容

本课题主要研究内容是管理员对食谱内容和用户信息的管理，使用Vue.js和springboot技术来完成一个前后端分离的项目，该项目需要完成的功能是：前台界面用来给普通用户查看食谱内容，有一个完整的登录注册界面，能够根据菜名和种类来搜索。

后台管理界面的菜单要根据登录者的身份权限来显示，普通用户进入后台界面无法进行任何操作。

1. 可行性研究
   1. 可行性分析

此阶段是对系统的开发背景、意义以及必要性进行进一步的研究和调查，经过具体全面的分析后提出开发系统的方案和计划并提出可行性的办法进行论述。主要从技术、经济、操作以及法律几个方面进行详细的讨论和说明。

1. 技术上的可行性：在大学学习的课程中，《数据库原理》、《计算机网络》、《软件工程导论》等专业课的知识为系统的开发提供了不小的帮助，奠定了比较监视的基础。Vue.js是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层不仅易于上手，还便于与第三方库或既有项目整合，足以用来完成该项目的前端展示。Spring boot不需要在服务器上部署tomcat，对xml没有配置要求，可以更加简便的完成后台的配置，使用jpa技术只要接口命名符合规则就可以不用写sql语句，也能查询数据库。这些技术易于掌握且能满足软件的开发，所以系统在技术上是可行的。
2. 经济上的可行性：软件的经济可行性是指软件所能带来的经济效益与开发设计所需要的投资相比，是否相适宜，同时还要看此软件能否带来足够的经济效益。我所开发的这套系统不需要的大量的经费，是由个人独立设计以及网上的一些开源项目实现，可以节省很多经费，同时提高个人的实际动手能力，所以系统在经济上是可行的。
3. 操作上的可行性：本系统中的信息都以网页展示，而且操作界面简便，对于使用人员较为友好，用户只需懂得简单的计算机操作知识，就能使用该系统。所以系统在操作上是可行的。
4. 法律上的可行性：系统以遵守国家的法律为前提条件，在不违反国家现行的相关法律法规的基础上，也没有侵犯他人任何的合法权益，更没有损害及侵犯国家和人民的利益，所以系统在法律上是可行的。
   1. 设计目标

1. 可靠性：确保数据库的有效连接和数据的及时更新，对于管理员要根据分级的不同权限的可靠的管理，避免权限管理给错误异常。以及系统在操作期间，能够保持良好的运行能力。
2. 实用性：根据现实中做菜的需要，能够提供较为全面的信息。
3. 友好性：对于使用系统的所有用户，前端的设计上要保证操作上功能的齐全、方便快捷，对于信息的查询等功能能够快速实现，方便用户的使用；即使对于不是很熟悉计算机操作的用户，也能轻易实现自己想要实现的功能和操作。
4. 可扩展性：可扩展性对于系统来说很重要，对于系统在扩展性和功能上的增加需要有较为灵活和较大的开放的空间，，并且扩展易于实现。

1. 关键技术介绍
   1. vue.js

Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还方便与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持库类结合使用时，Vue也完全能够为复杂的单页面应用提供驱动。本系统中使用了Vue-cli框架帮助快速构建项目，所有的页面都是使用该框架完成。

1. 1. spring boot

SpringBoot是由Pivotal团队在2013年开始研发、2014年4月发布第一个版本的全新开源的轻量级框架。它基于Spring4.0设计，不仅继承了Spring框架原有的优秀特性，而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程。

1. 1. Java Persistence API

Java Persistence API中文名Java持久层API，是JDK 5.0注解或XML描述对象-关系表的映射关系，并将运行的实体对象持久化到数据库中。

1. 1. Axios

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中，他的特性有：从浏览器中创建XMLHttpRequests、从node.js创建http请求、支持Promise API、拦截请求和响应、转换请求数据和响应数据、取消请求、自动转换JSON数据、客户端支持防御XSRF。本系统中主要是用来解决跨域问题。

1. 1. Vuex

Vuex是专为Vue.js应用程序开发的状态管理模式，当我们遇到多个组件共享状态时，多层组件的传值非常繁琐，不利于维护，因此我们把组件的共享状态抽取出来，以一个单例模式管理，在这种模式下，不管在哪个组件都可以获取状态或触发行为。

1. 1. ElementUI

Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库，本系统中的大部分组件都是从中引入的。

1. 1. MySQL数据库

MySQL是当下最流行的关系型数据库管理系统之一，目前是属于Oracle的产品，由瑞典MySQL AB公司开发。SQL语言是访问数据库最常用的标准语言，在MySQL数据库中也使用SQL语句；数据库中使用各种不同的表将数据完好的保存具有很强的灵活性且快速。同时软件具有体积小、速度快、成本低的特点受到很多中小型网站开发的喜爱。对于本系统的数据，MySQL数据库可以很好的实现对数据的保存和各种操作功能，保证了数据的完整性和一致性。

1. 需求分析
   1. 系统功能

本系统是基于web的食谱管理系统，为了区分管理员和用户，所以本系统需要设计前台查询界面和后台管理界面。系统中网页的样式是使用WebStorm软件和Vue.js框架来编写，后端代码是使用IntelliJ IDEA编译器、springboot技术和API来连接数据库和前端，达到对数据的增加、删除、更改、查询操作和对前端数据的实时更新。

根据分析和调研的条件需要，本系统除了正常的登录注册功能外还要有搜索功能、分类功能、用户信息管理功能、角色管理功能、食谱管理功能、图片上传功能。

1. 用户登录注册功能：对登录系统的用户进行身份验证，密码需要进行加密。
2. 搜索功能：用户在前台可以根据食谱的名称或食谱的种类来搜索。
3. 分类功能：为了丰富前台界面，在界面左侧设置一个类别导航栏。
4. 用户信息管理：只有管理员或拥有管理用户权限的角色才能看到该界面，此功能可以修改用户的基本信息，可以添加/删除用户，也可以禁用用户使其无法登录，还可以授予用户权限。
5. 角色管理功能：管理员可以修改对于角色权限的描述。
6. 食谱管理功能：只有管理员或拥有内容管理权限的角色才能看到该界面，此功能可以修改食谱的信息，可以添加/删除食谱。
   1. 系统开发环境

处理器：Inter(R) Core(TM) i5-4210U CPU @ 1.70GHz 2.40GHz

操作系统：Window 10

应用软件：WebStorm，IntelliJ IDEA，MySQL Workbench 8.0 CE

1. 1. 用例描述

用例图是通过例图的形式观察到的系统功能的模型图。以下用例图是对本系统中拥有不同权限的用户与其之间的功能进行描述，如图4.1所示。

图 4. 1 系统用例描述

1. 注册用例

注册用例是用户进行注册的行为操作，它的描述如表4.1所示。

表 4. 1 注册用例描述

用例名称	注册
参与者	用户
前置条件	启动系统，用户进入注册界面
基本事件流	用户进入注册界面。 用户输入注册表格中的信息。 用户提交，用例结束。
异常事件流	用户输入了无效的数据，如空白或重复的用户名，显示注册失败并返回步骤2。
后置条件	注册成功后进入登录界面。

1. 登录用例

登录用例是已经注册的用户进行登录的行为操作，它的描述如表4.2所示。

表 4. 2 登录用例描述

用例名称	登录
参与者	已注册用户
前置条件	启动系统，用户进入登录界面
基本事件流	用户进入登录界面。 用户输入用户名和密码。 用户点击登录按钮，用例结束。
异常事件流	用户输入了无效的数据，如空白、未注册的用户名或错误的密码等，显示登录失败并返回步骤2。
后置条件	登录成功后进入后台首页。

1. 食谱内容管理用例

食谱内容管理用例是管理员或拥有食谱内容管理权限的用户对食谱内容修改的行为操作，它的描述如表4.3所示。

表 4. 3 食谱内容管理用例描述

用例名称	食谱内容管理
参与者	管理员或拥有食谱内容管理权限的用户
前置条件	启动系统，参与者登录成功并进入内容管理界面。
基本事件流	点击新增按钮或修改按钮，显示对应的界面。 输入食谱内容信息。 点击确定按钮，用例结束。
异常事件流	无
后置条件	新增或修改过的食谱会在查询页面显示。

1. 角色权限管理用例

角色权限管理用例是管理员给已注册用户分配权限的行为操作，它的描述如表4.4所示。

表 4. 4 角色权限管理用例描述

用例名称	角色权限管理
参与者	管理员
前置条件	启动系统，管理员登录成功并进入角色管理界面。
基本事件流	选中一个用户并进入修改界面。 将需要分配给该角色的权限选中。 点击确定按钮，用例结束。
异常事件流	无
后置条件	无

1. 用户信息管理用例

用户信息管理用例是管理员或拥有用户信息管理权限的用户对其他用户信息进行修改的行为操作，它的描述如表4.5所示。

表 4. 5 用户信息管理用例

用例名称	用户信息管理
参与者	管理员或拥有用户信息管理权限的用户
前置条件	启动系统，参与者登录成功并进入用户管理界面。
基本事件流	点击新增或修改按钮，显示对应的界面。 填入对应的用户信息。 点击确认按钮，用例结束。
异常事件流	用户名已被使用或密码为空时，显示新增或修改失败。
后置条件	无

1. 系统设计
   1. 数据库结构设计

本系统包含10个表，即用户信息表、食谱信息表、食谱步骤表、食谱种类表、菜单表、权限表、角色表、用户角色表、角色权限表、角色菜单表，这些表的结构如下：

1. 用户信息表（user），用于记录用户的基本信息，逻辑结构如表5.1所示。
2. 食谱信息表（food），用于存储食谱的基本信息，逻辑结构如表5.2所示。
3. 食谱步骤表（step），用于存储食谱中的步骤信息，逻辑结构如表5.3所示。
4. 食谱种类表（category），用于存储食谱的种类，逻辑结构如表5.4所示。
5. 菜单表（admin_menu），用于存储后台管理界面的菜单信息，逻辑结构如表5.5所示。
6. 权限表（admin_permission），用于存储权限功能信息，逻辑结构如表5.6所示。
7. 角色表（admin_role），用于存储角色信息，逻辑结构如表5.7所示。
8. 用户角色表（admin_user_role），将用户表和角色表关联起来的表，逻辑结构如表5.8所示。
9. 角色权限表（admin_role_permission），将角色表和权限表关联起来的表，逻辑结构如表5.9所示。
10. 角色菜单表（admin_role_menu），将角色表和菜单表关联起来的表，逻辑结构如表5.10所示。

表 5. 1 用户信息表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
username	varchar	255	登录使用的账号
password	varchar	255	登录使用的密码
salt	varchar	255	密码加密时使用的字段
name	varchar	255	名称
phone	varchar	255	手机号
email	varchar	255	电子邮箱
enabled	tinyint	1	是否禁用的标志

表 5. 2 食谱信息表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
cover	varchar	255	存储封面图片的名称
title	varchar	255	食物的名称
material	varchar	255	主料
fmaterial	varchar	255	辅料
effect	varchar	255	功效
cid	int	11	外键，关联食谱种类表id

表 5. 3 食谱步骤表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
step_content	varchar	255	步骤描述
img	varchar	255	存储步骤图片的名称
fid	int	255	外键，关联食谱信息表id

表 5. 4 食谱种类表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
name	varchar	255	种类名称

表 5. 5 菜单表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
path	varchar	64	与Vue路由中的path对应，即地址路径
name	varchar	64	与Vue路由中的name属性对应
name_zh	varchar	64	中文名称，用于渲染菜单界面
icon_cls	varchar	64	element图标类名，用于渲染菜单名称前的小图标
component	varchae	64	组件名，用于解析路由对应的组件
parent_id	int	11	父节点id，用于存储导航栏层级关系

表 5. 6 权限表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
name	varchar	100	权限的名称
desc_	varchar	100	对权限功能的具体描述
url	varchar	100	权限对应的接口，实现功能控制的关键

表 5. 7 角色表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
name	varchar	100	角色名称
name_zh	varchar	100	角色对应的中文名称
enabled	tinyint	1	是否禁用的标志

表 5. 8 用户角色表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
uid	int	11	外键，关联用户信息表id
rid	int	11	外键，关联角色表id

表 5. 9 角色权限表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
rid	int	11	外键，关联角色表id
pid	int	11	外键，关联权限表id

表 5. 10 角色菜单表

字段名	字段类型	宽度	说明
id	int	11	主键，自增
rid	int	11	外键，关联角色表id
mid	int	11	外键，关联菜单表id

1. 1. 功能模块设计

本系统的系统模块结构图如图5.1所示。

图 5. 1 系统模块结构图

1. 登录功能模块
2. 注册功能模块
3. 搜索功能模块
4. 分类功能模块
5. 运行情况功能模块
6. 用户信息管理模块
7. 角色管理功能模块
8. 食谱管理功能模块

1. 系统实现

1. 1. 登录功能模块实现
   2. 

1. 1. 注册功能模块实现
   2. 

1. 1. 搜索功能模块实现

1. 1. 运行情况功能模块实现
   2. 
    其他的定制服务  下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者