Yummy美食分享網(wǎng)站設(shè)計(jì)

Yummy美食分享網(wǎng)站 （Yummyfoodsharingwebsite） 摘要隨著科技的進(jìn)步與發(fā)展，互聯(lián)網(wǎng)已經(jīng)成為時代的主流，與我們的生活息息相關(guān)，飲食也是我們生活中不可缺少的一部分。隨著人們生活水平的日漸提高，越來越多的人開始追求精致、健康的飲食，美食在線分享平臺逐漸進(jìn)入人們的視野?，F(xiàn)在的年輕人都喜歡記錄、分享自己制作的或者品嘗過的美食，然后以美食為紐帶形成新的社交關(guān)系?，F(xiàn)在的市場上是缺乏主推美食社交的app，熱愛美食的愛好者們沒有一個能夠互相交流、探討美食的平臺。我的Yummy美食在線分享平臺就能夠很好地滿足美食愛好者的需求;并且這個美食分享平臺還能為喜歡美食的人們提供一個尋找和分享的途徑，美食愛好者間的互相交流溝通還有利于人與人之間的情感升華?，F(xiàn)在我們所使用與熟知的美食相關(guān)的系統(tǒng)、app大多都是一些以外賣訂餐系統(tǒng)為主的，它的主要是以盈利及為用戶提供便利，節(jié)省時間為主，缺少了感情交流。 本文對Yummy美食分享網(wǎng)站的開發(fā)設(shè)計(jì)從需求分析到編碼測試進(jìn)行了詳細(xì)的闡述，本網(wǎng)站開發(fā)用了Java語言及MySQL數(shù)據(jù)庫，前端采用layui+jsp,后端采用springboot框架。完成了對美食的分享，刪除，還可為他人的美食分享留言，互相溝通交流；網(wǎng)站還會發(fā)布一些有關(guān)飲食健康的文章和美食的做法，方便大家學(xué)習(xí)交流，分享心得。在構(gòu)思與設(shè)計(jì)階段遇到了很多問題，通過查資料，與指導(dǎo)老師交流解決了諸多問題，對軟件開發(fā)有了新的認(rèn)識，同時也積累了很多新知識和經(jīng)驗(yàn)。關(guān)鍵詞：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.相關(guān)技術(shù)介紹 62.1idea簡介及安裝使用 62.2JSP簡介 92.3springboot框架簡介 102.4layui前端UI框架簡介 102.5MySql數(shù)據(jù)庫 113.Yummy美食分享系統(tǒng)需求分析 133.1項(xiàng)目概述 133.1.1用戶功能 143.1.2管理員功能 164.數(shù)據(jù)庫設(shè)計(jì) 184.1用戶表：存儲用戶的相關(guān)信息，用user_typequ區(qū)分用戶管理員 184.2美食分享表：存儲用戶分享美食的所有信息 184.3飲食健康表：存儲飲食健康相關(guān)的文章 194.4菜譜：存儲菜譜的所有信息 194.5留言表：存儲用戶對美食的所有評論 194.6食材表：存儲各種食材信息 205.web平臺的實(shí)現(xiàn) 215.1平臺前端頁面展示 215.1.1網(wǎng)站首頁 215.1.2登陸頁面 225.1.3注冊頁面 235.1.4菜譜頁面 245.1.5飲食健康頁面 255.1.6美食分享頁面 265.1.7食材展示頁面 275.1.8添加頁面 285.1.9關(guān)鍵字搜索頁面 305.1.10評論頁面 315.1.11個人信息頁面 325.2主要代碼 345.2.1Controller代碼示例 345.2.2前端頁面代碼示例 36致謝 41參考文獻(xiàn) 41附錄 41緒論1.1選題的背景及意義俗話說民以食為天，從古至今人們的生活就與美食緊密相連。隨著科技的發(fā)展與時代的進(jìn)步，人們進(jìn)入了快節(jié)奏的生活，很少有時間去關(guān)心飲食健康問題，大多數(shù)人（特別是90后）開始依賴于外賣，很少花時間去自己制作美食。我這個美食網(wǎng)站設(shè)立的初衷就是為了讓更多不會做菜的人自己動手制作美食，分享自己的美食，傳遞一份快樂，收獲一份健康。讓人們對吃的要求越來越高，把健康、綠色、有營養(yǎng)變成吃的標(biāo)配，不要因?yàn)槊τ诠ぷ鳑]有時間而忽略了自己的飲食健康。快速發(fā)展的互聯(lián)網(wǎng)為人們提供了極大的便利，讓人們更真切的體會到了網(wǎng)絡(luò)帶來的便捷，美食分享網(wǎng)站將成為美食愛好者生活中不可缺少的一部分，他們可以通過美食分享平臺，隨時分享自己制作的美食，傳達(dá)自己的心情，發(fā)表自己的看法，還可以形成一個美食愛好者分享的交流圈。雖然現(xiàn)在這個類別的系統(tǒng)不是很成熟，正處于起步期，卻有極大的發(fā)展空間和發(fā)展?jié)摿Α?.相關(guān)技術(shù)介紹2.1idea簡介及安裝使用Idea被認(rèn)為是最好的Java開發(fā)工具，是java編程語言開發(fā)的集成環(huán)境。它的智能編碼，大大的減少了程序員的工作（get、set、toString以及構(gòu)造方法都可自動生成，可以自動補(bǔ)全），可以更快捷、更高效的完成代碼編寫。2.1.1下載安裝包并安裝從官網(wǎng)下載idea安裝包、jdk安裝包，解壓后按照提示進(jìn)行安裝，跳出提示框，選擇輸入激活碼，進(jìn)入到開發(fā)界面。2.1.2新建springboot項(xiàng)目（1）選擇File—>new—>Project—>SpringInitializr（2）項(xiàng)目命名圖2-1項(xiàng)目命名圖（3）選擇依賴，點(diǎn)擊Finish,圖2-2依賴選擇圖（4）創(chuàng)建完成后根據(jù)提示下載所需資源2.1.3配置環(huán)境（1）配置pom.xml,在pom.xml里添加如下依賴，然后根據(jù)提示下載對應(yīng)資源。<!--添加servlet依賴模塊-->

<dependency>

<groupId>javax.servlet</groupId>

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

<scope>provided</scope>

</dependency>

<!--添加jstl標(biāo)簽庫依賴模塊-->

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>jstl</artifactId>

</dependency>

<!--使用jsp引擎，springboot內(nèi)置tomcat沒有此依賴-->

<dependency>

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

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

<scope>provided</scope>

</dependency>（2）配置perties，配置如下：#運(yùn)行端口號

server.port=8085#數(shù)據(jù)庫連接配置信息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自動創(chuàng)建表

spring.jpa.hibernate.ddl-auto:update#顯示jpa執(zhí)行的sql語句

spring.jpa.show-sql:true#表示bean可以進(jìn)行覆蓋

spring.main.allow-bean-definition-overriding=true#視圖解析器

spring.mvc.view.prefix=/

spring.mvc.view.suffix=.jsp2.2JSP簡介JSP是一種基于Java的web服務(wù)器端的動態(tài)網(wǎng)頁技術(shù)，可以響應(yīng)客戶端發(fā)送的請求，然后根據(jù)請求內(nèi)容動態(tài)地生成Web網(wǎng)頁，然后返回給請求者。Jsp技術(shù)可以實(shí)現(xiàn)網(wǎng)頁的交互性，自動更新以及隨時改變的動態(tài)網(wǎng)頁特性；能以模板化的方式添加動態(tài)網(wǎng)頁，更加的簡單高效。可以使用標(biāo)簽庫技術(shù)，將常用的部分代碼寫在一個jsp文件里，然后用jsp標(biāo)簽調(diào)用。瀏覽器Web服務(wù)器編譯jsp（如果第一次調(diào)用），解析jsp，生成動態(tài)內(nèi)容向表單中輸入數(shù)據(jù)，單擊“提交”顯示服務(wù)器端產(chǎn)生的響應(yīng)瀏覽器把客戶端的編譯jsp（如果第一次調(diào)用），解析jsp，生成動態(tài)內(nèi)容向表單中輸入數(shù)據(jù)，單擊“提交”顯示服務(wù)器端產(chǎn)生的響應(yīng)數(shù)據(jù)發(fā)送給web服務(wù)器把生成的內(nèi)容發(fā)送到客戶端瀏覽器圖2-3客戶端請求和響應(yīng)過程2.3springboot框架簡介Springboot框架是全新開源的輕量級框架，繼承了Spring框架原本的良好特性，還進(jìn)一步簡化了Spring應(yīng)用的整個搭建和開發(fā)過程。該框架使用了特定的方式來進(jìn)行配置，從而使開發(fā)人員不再需要定義樣板化的配置。其所具備的特征有：（1）內(nèi)嵌Tomcat或Jetty等Servlet容器，使用嵌入式的servlet容器，應(yīng)用無需打成WAR包；（2）SpringBoot能自動提供相關(guān)配置，簡化開發(fā)；（3）可創(chuàng)建獨(dú)立的Spring應(yīng)用程序，基于Maven插件，可以創(chuàng)建可執(zhí)行的JAR和WAR；（4）無需配置xml，無代碼生成，開箱即用和約定優(yōu)于配置2.4layui前端UI框架簡介layui是采用自身模塊規(guī)范編寫的、開源的前端UI框架，它擁有自己的模式，更加輕量和簡單。由布局、顏色、導(dǎo)航條、動畫、字體圖標(biāo)按鈕、表單、進(jìn)度條、面包屑、選項(xiàng)卡、面板、靜態(tài)表格、輔助元素、時間線、徽章等元素組成。它還提供了豐富的內(nèi)置模塊，皆可通過模塊化的方式按需加載2.5MySql數(shù)據(jù)庫2.5.1MySql數(shù)據(jù)庫簡介MySQL是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，關(guān)系數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)，增加其速度并提高了靈活性。體積小、速度快、開放源碼，降低了總體擁有成本。MySQL支持多種操作系統(tǒng)、支持多線程、支持多語言，使用了多種編譯器進(jìn)行測試，保證了源代碼的可移植性。使用優(yōu)化的SQL查詢算法，提高了查詢速度。2.5.2MySql數(shù)據(jù)庫安裝 （1）下載安裝包并解壓，打開文件夾，雙擊 （2）雙擊“啟動MySql服務(wù)”，然后雙擊 （3）新建連接并進(jìn)行如下配置，然后點(diǎn)擊確定 圖2-4數(shù)據(jù)庫連接圖（4）單擊右鍵，選擇新建數(shù)據(jù)庫，點(diǎn)擊確定。圖2-5新建數(shù)據(jù)庫圖（5）雙擊打開，找到新建的數(shù)據(jù)庫，然后雙擊，數(shù)據(jù)庫就連接成功了3.Yummy美食分享系統(tǒng)需求分析3.1項(xiàng)目概述 Yummy美食分享網(wǎng)站是為了讓更多熱愛制作美食的小伙伴們分享自己制作的美食，探討如何才能做的更好吃、更健康。本系統(tǒng)主要分為用戶端（用戶可以查看美食制作方法，分享自己制作的美食，與他人進(jìn)行美食的探討）和管理員端（新增美食菜譜，管理用戶，定期發(fā)布飲食健康文章等），我希望通過我的美食分享平臺，可以讓更多的人找到自己的喜歡的美食，結(jié)交各種熱愛美食的小伙伴。圖3-1系統(tǒng)功能圖3.1.1用戶功能圖3-2用戶功能用例圖（1）用戶注冊：新用戶先進(jìn)行注冊，輸入注冊信息，如果用戶名已存在則注冊失敗，重新輸入注冊名，注冊成功后跳轉(zhuǎn)到登陸界面；用戶登陸：已注冊用戶輸入用戶名密碼進(jìn)行登陸，登陸后才可進(jìn)行美食分享、美食評論；修改個人信息：根據(jù)用戶編號修改自己呢昵稱，頭像，個人簽名等；查看菜譜：點(diǎn)擊菜譜按鈕，查看全部菜譜及具體制作方法；查看食材：查看所有食材，包括時令食材，肉類。水產(chǎn)品類，蔬菜瓜果，調(diào)味品及藥食等；查看美食分享：查看所有用戶制作分享的美食；添加美食分享：將自己制作的美食分享到網(wǎng)站上，供他人評論參考； （8）刪除美食分享：根據(jù)美食分享id刪除自己分享的美食；注：分享美食部分代碼評論美食：對他人的美食分享進(jìn)行評論刪除評論：刪除自己對他人美食分享的評論查看美食評論：查看別人對自己美食的評論查看健康話題：查看網(wǎng)站不定期發(fā)布的有關(guān)飲食健康的文章搜索：輸入關(guān)鍵字，搜索相關(guān)的菜譜及美食制作方法3.1.2管理員功能圖3-3管理員功能用例圖登陸:輸入賬號、密碼進(jìn)行登陸，進(jìn)入管理員界面；查詢菜譜：查看所有美食菜譜增加菜譜：增加新的美食菜譜及制作方法修改菜譜：對菜譜不恰當(dāng)?shù)牡胤竭M(jìn)行修改刪除菜譜：通過菜譜id刪除菜譜查詢食材：查詢所有食材增加食材：在食材表中增加新的食材刪除食材：通過id刪除食材查看用戶：查看所有本網(wǎng)站的用戶刪除用戶：通過id刪除不良用查看飲食健康文章：查看所有關(guān)于飲食健康的文章刪除飲食健康文章：通過id刪除飲食健康文章增加飲食健康文章：定期增加新的飲食健康文章查看美食分享：查看所有用戶分享的美食刪除美食分享：刪除用戶的不良美食分享查看美食評論：查看用戶對美食分享的評論（17）刪除美食評論：刪除不良的美食分享的評論4.數(shù)據(jù)庫設(shè)計(jì)4.1用戶表表4-1用戶表(user)名稱數(shù)據(jù)類型屬性說明User_idInt主鍵唯一標(biāo)識一個用戶User_namevarChar2不為空,唯一用戶名（昵稱）User_sexvarChar2檢查用戶性別User_typeintNotnull用戶類型（1為管理員，0為普通用戶）User_pasvarChar2用戶登陸密碼User_signvarChar2個性簽名User_telint聯(lián)系方式User_addrvarChar2居住地User_headporvarChar2用戶頭像(保存圖片鏈接)4.2美食分享表表4-2美食分享表（share）名稱數(shù)據(jù)類型屬性說明Share_idInt主鍵唯一標(biāo)識一次分享share_useridInt外鍵用戶idShare_foodnamevarChar2非空分享的食物名稱Share_picturevarChar2分享的圖片Share_introvarChar2分享美食介紹4.3飲食健康表表4-3飲食健康表（health）名稱數(shù)據(jù)類型屬性說明health_idInt主鍵唯一標(biāo)識一條飲食健康文章titlevarChar2飲食健康標(biāo)題dateDate文章發(fā)布時間contentvarChar2文章具體內(nèi)容regimenvarChar2養(yǎng)生方法4.4菜譜表4-4菜譜（food）名稱數(shù)據(jù)類型屬性說明Food_idint主鍵美食idFood_namevarChar2非空美食名稱Food_picturevarChar2美食圖片F(xiàn)ood_introvarChar2美食簡介4.5留言表表4-5留言表（message）名稱數(shù)據(jù)類型屬性說明Mess_idInt主鍵評論idMess_foodidInt外鍵美食idMess_useridInt外鍵用戶idMess_messagevarChar2評論4.6食材表表4-6食材表（material）名稱數(shù)據(jù)類型屬性說明Foodmat_foodidint外鍵美食idFoodmat_idint主鍵用料idFoodmat_namevarChar2用料菜名Foodmat_volumevarChar2用料分量5.web平臺的實(shí)現(xiàn)5.1平臺前端頁面展示5.1.1網(wǎng)站首頁圖5-1網(wǎng)站首頁圖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關(guān)鍵字搜索頁面圖5-9關(guān)鍵字搜索頁面圖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刪除違規(guī)用戶@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";//轉(zhuǎn)發(fā)到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）導(dǎo)航欄代碼示例<%@pagecontentType="text/html;charset=UTF-8"language="java"%>

<html>

<head>

<title>Title</title>

<!--引入layui的默認(rèn)樣式-->

<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>

//注意：導(dǎo)航依賴element模塊，否則無法進(jìn)行功能性操作

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的默認(rèn)樣式-->

<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;

//建造實(shí)例

carousel.render({

elem:'#bann'

,width:'100%'//設(shè)置容器寬度

,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的默認(rèn)樣式-->

<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">