Yummy美食分享网站设计

Yummy美食分享网站 （Yummyfoodsharingwebsite） 摘要随着科技的进步与发展，互联网已经成为时代的主流，与我们的生活息息相关，饮食也是我们生活中不可缺少的一部分。随着人们生活水平的日渐提高，越来越多的人开始追求精致、健康的饮食，美食在线分享平台逐渐进入人们的视野。现在的年轻人都喜欢记录、分享自己制作的或者品尝过的美食，然后以美食为纽带形成新的社交关系。现在的市场上是缺乏主推美食社交的app，热爱美食的爱好者们没有一个能够互相交流、探讨美食的平台。我的Yummy美食在线分享平台就能够很好地满足美食爱好者的需求;并且这个美食分享平台还能为喜欢美食的人们提供一个寻找和分享的途径，美食爱好者间的互相交流沟通还有利于人与人之间的情感升华。现在我们所使用与熟知的美食相关的系统、app大多都是一些以外卖订餐系统为主的，它的主要是以盈利及为用户提供便利，节省时间为主，缺少了感情交流。 本文对Yummy美食分享网站的开发设计从需求分析到编码测试进行了详细的阐述，本网站开发用了Java语言及MySQL数据库，前端采用layui+jsp,后端采用springboot框架。完成了对美食的分享，删除，还可为他人的美食分享留言，互相沟通交流；网站还会发布一些有关饮食健康的文章和美食的做法，方便大家学习交流，分享心得。在构思与设计阶段遇到了很多问题，通过查资料，与指导老师交流解决了诸多问题，对软件开发有了新的认识，同时也积累了很多新知识和经验。关键词：Java；美食分享；springboot；AbstractWiththeprogressanddevelopmentofscienceandtechnology,theInternethasbecomethemainstreamofTheTimesandiscloselyrelatedtoourlife.Dietisalsoanindispensablepartofourlife.Withtheimprovementofpeople'slivingstandard,moreandmorepeoplebegintopursuedelicateandhealthydiet,andtheonlinefoodsharingplatformhasgraduallyenteredpeople'svision.Youngpeopletodayliketorecord,share,andusefoodasabondtoformnewsocialrelationships.Inthecurrentmarket,thereisalackoffoodsocialapps,andfoodloversdonothaveaplatformtocommunicatewitheachotheranddiscussfood.MyYummyfoodonlinesharingplatformcanwellmeettheneedsoffoodlovers;Inaddition,thisfoodsharingplatformcanalsoprovideawayforpeoplewholikefoodtofindandshare.Thecommunicationbetweenfoodloversisalsoconducivetotheemotionalsublimationbetweenpeople.Atpresent,mostofthesystemsandappsweuserelatedtofamiliarfoodarebasedonthesystemoforderingfood,whichmainlyaimsatmakingprofits,providingconvenienceforusersandsavingtime,withoutemotionalcommunication.ThispaperdescribesindetailthedevelopmentanddesignofYummyfoodsharingwebsitefromdemandanalysistocodingtest.ThiswebsiteisdevelopedwithJavalanguageandMySQLdatabase,withlayui+JSPatthefrontendandspringbootframeworkatthebackend.Completedthesharingoffood,delete,butalsoforotherstosharethefoodmessage,mutualcommunication;Thewebsitewillalsopublisharticlesonhealthyeatingandfoodpractices,sothatpeoplecanlearn,communicateandsharetheirideas.Iencounteredalotofproblemsintheconceptionanddesignstage.Isolvedmanyproblemsbyconsultingmaterialsandcommunicatingwiththeinstructor.Igainedanewunderstandingofsoftwaredevelopmentandaccumulatedalotofnewknowledgeandexperience.Keywords:Java;Foodsharing;Springtheboot;目录1.绪论 61.1选题的背景及意义 62.相关技术介绍 62.1idea简介及安装使用 62.2JSP简介 92.3springboot框架简介 102.4layui前端UI框架简介 102.5MySql数据库 113.Yummy美食分享系统需求分析 133.1项目概述 133.1.1用户功能 143.1.2管理员功能 164.数据库设计 184.1用户表：存储用户的相关信息，用user_typequ区分用户管理员 184.2美食分享表：存储用户分享美食的所有信息 184.3饮食健康表：存储饮食健康相关的文章 194.4菜谱：存储菜谱的所有信息 194.5留言表：存储用户对美食的所有评论 194.6食材表：存储各种食材信息 205.web平台的实现 215.1平台前端页面展示 215.1.1网站首页 215.1.2登陆页面 225.1.3注册页面 235.1.4菜谱页面 245.1.5饮食健康页面 255.1.6美食分享页面 265.1.7食材展示页面 275.1.8添加页面 285.1.9关键字搜索页面 305.1.10评论页面 315.1.11个人信息页面 325.2主要代码 345.2.1Controller代码示例 345.2.2前端页面代码示例 36致谢 41参考文献 41附录 41绪论1.1选题的背景及意义俗话说民以食为天，从古至今人们的生活就与美食紧密相连。随着科技的发展与时代的进步，人们进入了快节奏的生活，很少有时间去关心饮食健康问题，大多数人（特别是90后）开始依赖于外卖，很少花时间去自己制作美食。我这个美食网站设立的初衷就是为了让更多不会做菜的人自己动手制作美食，分享自己的美食，传递一份快乐，收获一份健康。让人们对吃的要求越来越高，把健康、绿色、有营养变成吃的标配，不要因为忙于工作没有时间而忽略了自己的饮食健康。快速发展的互联网为人们提供了极大的便利，让人们更真切的体会到了网络带来的便捷，美食分享网站将成为美食爱好者生活中不可缺少的一部分，他们可以通过美食分享平台，随时分享自己制作的美食，传达自己的心情，发表自己的看法，还可以形成一个美食爱好者分享的交流圈。虽然现在这个类别的系统不是很成熟，正处于起步期，却有极大的发展空间和发展潜力。2.相关技术介绍2.1idea简介及安装使用Idea被认为是最好的Java开发工具，是java编程语言开发的集成环境。它的智能编码，大大的减少了程序员的工作（get、set、toString以及构造方法都可自动生成，可以自动补全），可以更快捷、更高效的完成代码编写。2.1.1下载安装包并安装从官网下载idea安装包、jdk安装包，解压后按照提示进行安装，跳出提示框，选择输入激活码，进入到开发界面。2.1.2新建springboot项目（1）选择File—>new—>Project—>SpringInitializr（2）项目命名图2-1项目命名图（3）选择依赖，点击Finish,图2-2依赖选择图（4）创建完成后根据提示下载所需资源2.1.3配置环境（1）配置pom.xml,在pom.xml里添加如下依赖，然后根据提示下载对应资源。<!--添加servlet依赖模块-->

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>javax.servlet-api</artifactId>

<scope>provided</scope>

</dependency>

<!--添加jstl标签库依赖模块-->

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>jstl</artifactId>

</dependency>

<!--使用jsp引擎，springboot内置tomcat没有此依赖-->

<dependency>

<groupId>org.apache.tomcat.embed</groupId>

<artifactId>tomcat-embed-jasper</artifactId>

<scope>provided</scope>

</dependency>（2）配置perties，配置如下：#运行端口号

server.port=8085#数据库连接配置信息Ctrl+/注释

spring.datasource.driver-class-name=com.mysql.jdbc.Driver

spring.datasource.url=jdbc:mysql://localhost:3306/sharefood?useUnicode=true&characterEncoding=utf-8

spring.datasource.username=root

spring.datasource.password=root#jpa自动创建表

spring.jpa.hibernate.ddl-auto:update#显示jpa执行的sql语句

spring.jpa.show-sql:true#表示bean可以进行覆盖

spring.main.allow-bean-definition-overriding=true#视图解析器

spring.mvc.view.prefix=/

spring.mvc.view.suffix=.jsp2.2JSP简介JSP是一种基于Java的web服务器端的动态网页技术，可以响应客户端发送的请求，然后根据请求内容动态地生成Web网页，然后返回给请求者。Jsp技术可以实现网页的交互性，自动更新以及随时改变的动态网页特性；能以模板化的方式添加动态网页，更加的简单高效。可以使用标签库技术，将常用的部分代码写在一个jsp文件里，然后用jsp标签调用。浏览器Web服务器编译jsp（如果第一次调用），解析jsp，生成动态内容向表单中输入数据，单击“提交”显示服务器端产生的响应浏览器把客户端的编译jsp（如果第一次调用），解析jsp，生成动态内容向表单中输入数据，单击“提交”显示服务器端产生的响应数据发送给web服务器把生成的内容发送到客户端浏览器图2-3客户端请求和响应过程2.3springboot框架简介Springboot框架是全新开源的轻量级框架，继承了Spring框架原本的良好特性，还进一步简化了Spring应用的整个搭建和开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。其所具备的特征有：（1）内嵌Tomcat或Jetty等Servlet容器，使用嵌入式的servlet容器，应用无需打成WAR包；（2）SpringBoot能自动提供相关配置，简化开发；（3）可创建独立的Spring应用程序，基于Maven插件，可以创建可执行的JAR和WAR；（4）无需配置xml，无代码生成，开箱即用和约定优于配置2.4layui前端UI框架简介layui是采用自身模块规范编写的、开源的前端UI框架，它拥有自己的模式，更加轻量和简单。由布局、颜色、导航条、动画、字体图标按钮、表单、进度条、面包屑、选项卡、面板、静态表格、辅助元素、时间线、徽章等元素组成。它还提供了丰富的内置模块，皆可通过模块化的方式按需加载2.5MySql数据库2.5.1MySql数据库简介MySQL是一个关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，增加其速度并提高了灵活性。体积小、速度快、开放源码，降低了总体拥有成本。MySQL支持多种操作系统、支持多线程、支持多语言，使用了多种编译器进行测试，保证了源代码的可移植性。使用优化的SQL查询算法，提高了查询速度。2.5.2MySql数据库安装 （1）下载安装包并解压，打开文件夹，双击 （2）双击“启动MySql服务”，然后双击 （3）新建连接并进行如下配置，然后点击确定 图2-4数据库连接图（4）单击右键，选择新建数据库，点击确定。图2-5新建数据库图（5）双击打开，找到新建的数据库，然后双击，数据库就连接成功了3.Yummy美食分享系统需求分析3.1项目概述 Yummy美食分享网站是为了让更多热爱制作美食的小伙伴们分享自己制作的美食，探讨如何才能做的更好吃、更健康。本系统主要分为用户端（用户可以查看美食制作方法，分享自己制作的美食，与他人进行美食的探讨）和管理员端（新增美食菜谱，管理用户，定期发布饮食健康文章等），我希望通过我的美食分享平台，可以让更多的人找到自己的喜欢的美食，结交各种热爱美食的小伙伴。图3-1系统功能图3.1.1用户功能图3-2用户功能用例图（1）用户注册：新用户先进行注册，输入注册信息，如果用户名已存在则注册失败，重新输入注册名，注册成功后跳转到登陆界面；用户登陆：已注册用户输入用户名密码进行登陆，登陆后才可进行美食分享、美食评论；修改个人信息：根据用户编号修改自己呢昵称，头像，个人签名等；查看菜谱：点击菜谱按钮，查看全部菜谱及具体制作方法；查看食材：查看所有食材，包括时令食材，肉类。水产品类，蔬菜瓜果，调味品及药食等；查看美食分享：查看所有用户制作分享的美食；添加美食分享：将自己制作的美食分享到网站上，供他人评论参考； （8）删除美食分享：根据美食分享id删除自己分享的美食；注：分享美食部分代码评论美食：对他人的美食分享进行评论删除评论：删除自己对他人美食分享的评论查看美食评论：查看别人对自己美食的评论查看健康话题：查看网站不定期发布的有关饮食健康的文章搜索：输入关键字，搜索相关的菜谱及美食制作方法3.1.2管理员功能图3-3管理员功能用例图登陆:输入账号、密码进行登陆，进入管理员界面；查询菜谱：查看所有美食菜谱增加菜谱：增加新的美食菜谱及制作方法修改菜谱：对菜谱不恰当的地方进行修改删除菜谱：通过菜谱id删除菜谱查询食材：查询所有食材增加食材：在食材表中增加新的食材删除食材：通过id删除食材查看用户：查看所有本网站的用户删除用户：通过id删除不良用查看饮食健康文章：查看所有关于饮食健康的文章删除饮食健康文章：通过id删除饮食健康文章增加饮食健康文章：定期增加新的饮食健康文章查看美食分享：查看所有用户分享的美食删除美食分享：删除用户的不良美食分享查看美食评论：查看用户对美食分享的评论（17）删除美食评论：删除不良的美食分享的评论4.数据库设计4.1用户表表4-1用户表(user)名称数据类型属性说明User_idInt主键唯一标识一个用户User_namevarChar2不为空,唯一用户名（昵称）User_sexvarChar2检查用户性别User_typeintNotnull用户类型（1为管理员，0为普通用户）User_pasvarChar2用户登陆密码User_signvarChar2个性签名User_telint联系方式User_addrvarChar2居住地User_headporvarChar2用户头像(保存图片链接)4.2美食分享表表4-2美食分享表（share）名称数据类型属性说明Share_idInt主键唯一标识一次分享share_useridInt外键用户idShare_foodnamevarChar2非空分享的食物名称Share_picturevarChar2分享的图片Share_introvarChar2分享美食介绍4.3饮食健康表表4-3饮食健康表（health）名称数据类型属性说明health_idInt主键唯一标识一条饮食健康文章titlevarChar2饮食健康标题dateDate文章发布时间contentvarChar2文章具体内容regimenvarChar2养生方法4.4菜谱表4-4菜谱（food）名称数据类型属性说明Food_idint主键美食idFood_namevarChar2非空美食名称Food_picturevarChar2美食图片Food_introvarChar2美食简介4.5留言表表4-5留言表（message）名称数据类型属性说明Mess_idInt主键评论idMess_foodidInt外键美食idMess_useridInt外键用户idMess_messagevarChar2评论4.6食材表表4-6食材表（material）名称数据类型属性说明Foodmat_foodidint外键美食idFoodmat_idint主键用料idFoodmat_namevarChar2用料菜名Foodmat_volumevarChar2用料分量5.web平台的实现5.1平台前端页面展示5.1.1网站首页图5-1网站首页图5.1.2登陆页面图5-2登陆页面图5.1.3注册页面图5-3注册页面图5.1.4菜谱页面图5-4菜谱页面图5.1.5饮食健康页面图5-5饮食健康页面图5.1.6美食分享页面图5-6美食分享页面图5.1.7食材展示页面图5-7食材页面图5.1.8添加页面管理员添加菜谱图5-8-1添加菜谱页面图管理员添加饮食健康的文章图5-8-2添加文章页面图5.1.9关键字搜索页面图5-9关键字搜索页面图5.1.10评论页面图5-10评论页面图5.1.11个人信息页面图5-11-1个人信息页面图图5-11-2个人信息页面图5.2主要代码5.2.1Controller代码示例@ControllerpublicclassUserController{@AutowiredUserDaouserDao;//用户信息页面@RequestMapping("/userList")publicStringuserList(Modelm){List<User>all=userDao.findAll();m.addAttribute("users",all);return"userList";}//通过id删除违规用户@RequestMapping("/userDelete")publicStringuserDelete(Integerid){userDao.deleteById(id);return"redirect:userList";}//修改用户信息@RequestMapping("/userEdit")publicStringuserEdit(Integerid,Modelm){Useruser=userDao.getOne(id);m.addAttribute("user",user);return"userEdit";//转发到userEdit.jsp}//注册@RequestMapping("/userSave")publicStringuserSave(Useruser){Useru=userDao.findAllByUserName(user.getUserName());if(u!=null){return"test";}else{userDao.save(user);return"userLogin";}}//新增用户@RequestMapping("/userAdd")publicStringuserAdd(){return"userAdd";}//登陆@RequestMapping("/login")publicStringlogin(StringuserName,Stringpassword,Modelmodel){Useruser=userDao.findByUserNameAndPassword(userName,password);if(user!=null){model.addAttribute("user",user);if(user.getUserType()==0){return"index";}else{return"adminFirstPage";//管理员界面}}else{return"redirect:userLogin";}}}5.2.2前端页面代码示例 （1）导航栏代码示例<%@pagecontentType="text/html;charset=UTF-8"language="java"%>

<html>

<head>

<title>Title</title>

<!--引入layui的默认样式-->

<linkrel="stylesheet"href="layui/css/layui.css"media="all">

<!--引入layui的拓展样式-->

<linkrel="stylesheet"href="layui/style/admin.css"media="all">

<linkrel="stylesheet"href="layui/style/template.css"media="all">

<!--引入layui的js文件-->

<scriptsrc="layui/layui.js"></script>

</head>

<body>

<divclass="collapsenavbar-collapsenav-wil"id="bs-example-navbar-collapse-1">

<ulclass="navnavbar-nav">

<liclass="active"><ahref="index.jsp">首页</a></li>

<li><ahref="/foodList">菜谱</a></li>

<li><ahref="foodMaterial.jsp">食材</a></li>

<li><ahref="/healthList">健康</a></li>

<li><ahref="/shareList">美食分享</a></li>

<li><ahref="/messageList">美食评论</a></li>

<li><ahref="findFood.jsp">搜索</a></li>

<li><ahref="userLogin.jsp">登陆</a></li>

<li><ahref="userRegister.jsp">注册</a></li>

</ul>

</div>

<script>

//注意：导航依赖element模块，否则无法进行功能性操作

layui.use('element',function(){

varelement=layui.element;

});

</script>

</div><!--/.navbar-collapse-->

</body>

</html>（2）轮播图代码示例<%@pagecontentType="text/html;charset=UTF-8"language="java"%>

<html>

<head>

<title>Title</title>

<!--引入layui的默认样式-->

<linkrel="stylesheet"href="layui/css/layui.css"media="all">

<!--引入layui的拓展样式-->

<linkrel="stylesheet"href="layui/style/admin.css"media="all">

<linkrel="stylesheet"href="layui/style/template.css"media="all">

<!--引入layui的js文件-->

<scriptsrc="layui/layui.js"></script>

</head>

<body>

<!--轮播图页面start-->

<divclass="layui-carousel"id="bann"style="margin-bottom:20px;">

<divcarousel-item>

<divstyle="background-image:url('images/b1.jpg');background-size:100%100%;"></div>

<divstyle="background-image:url('images/bann2.jpg');background-size:100%100%;"></div>

<divstyle="background-image:url('images/b3.jpg');background-size:100%100%;"></div>

<divstyle="background-image:url('images/b4.jpg');background-size:100%100%;"></div>

</div>

</div>

<script>

layui.use('carousel',function(){

varcarousel=layui.carousel;

//建造实例

carousel.render({

elem:'#bann'

,width:'100%'//设置容器宽度

,arrow:'always'//始终显示箭头

//,anim:'updown'//切换动画方式

});

});

</script>

<!--轮播图页面end-->

</body>

</html>（3）菜谱页面代码示例<%@taglibprefix="c"uri="/jsp/jstl/core"%>

<%@pagecontentType="text/html;charset=UTF-8"language="java"%>

<html>

<head>

<title>Services</title>

<!--引入layui的默认样式-->

<linkrel="stylesheet"href="layui/css/layui.css"media="all">

<!--引入layui的拓展样式-->

<linkrel="stylesheet"href="layui/style/admin.css"media="all">

<linkrel="stylesheet"href="layui/style/template.css"media="all">

<!--引入layui的js文件-->

<scriptsrc="layui/layui.js"></script>

<linkhref="css/bootstrap.css"rel="stylesheet"type="text/css"media="all"/>

<linkhref="css/style.css"rel="stylesheet"type="text/css"media="all"/>

</head>

<body>

<jsp:includepage="nav.jsp"></jsp:include>

<jsp:includepage="banner.jsp"></jsp:include>

<!--services-->

<divclass="services">

<divclass="container">

<divclass="services-grid">