福州美食網站建設,舌尖上的福州網站開發

  • 福州美食網站建設,舌尖上的福州網站開發已關閉評論
  • A+

閩菜在福州嘉藝網絡燕狂徒的眼里還是很好的,比如佛跳墻,還有三坊七巷的肉燕魚丸,等等,今天來說下福州美食網站建設和開發的過程。

福州美食網站建設,舌尖上的福州網站開發

1 引言

飲食是人們生活中非常重要的一部分, 如何做到既傳播中華文化, 又滿足大眾味蕾, 提供一個綠色、安全的飲食文化交流平臺, 互聯網首當其沖。

本網站面向全國所有的互聯網用戶, 網站的主旨為:

(1) 盡可能地搜集齊全美食資源和美食信息, 首先可以在各大平臺上搜集相關的美食信息, 然后可以在網頁上提供一個供用戶自己上傳美食信息的接口;

(2) 利用互聯網技術為平臺搭建一個可靠穩定的系統, 為了快捷開發一個復雜、穩定的系統, 采用了SSH框架整合技術;

(3) 注重用戶體驗, 完善的功能、好的頁面效果會給用戶帶來好的感覺, 使用起來也會很方便, 從而使用戶印象深刻, 使用前端框架Bootstrap、Amaze UI來實現頁面設計, 在開發過程中站在用戶的角度實現功能。

2 系統需求分析

為了滿足用戶的需求, 將網站分成模塊進行開發。

1) 登錄模塊:用于注冊用戶登錄, 方便記錄用戶的信息。在用戶登錄的前提下可以使用網站的部分功能。

2) 菜單模塊:主要展示菜系種類等, 根據分類, 可以引導用戶查詢到想要的內容。

3) 日記模塊:提供給用戶分享日常生活的平臺, 提高用戶間的互動性。

4) 菜譜教程:提供專業的美食制作教程。

5) 熱門菜譜:根據用戶關注度提供熱門菜譜。

6) 發布食譜:菜譜編輯頁面, 用戶自主發布菜譜功能。

7) 發布日記:日記編輯頁面, 用戶自主發布日記功能。

8) 個人中心:展示個人信息, 以及關聯與用戶相關的消息、日記和菜譜。

3 網站設計

3.1 網站結構設計

網站結構圖可以幫助開發者梳理開發思路, 使目的更加清晰。也可以讓讀者對整個系統有一個大致的了解。本系統的結構分為三個級別。

一級頁面:網站首頁

二級頁面:菜譜寶典、美食社區、發布菜譜、日記分享、個人中心、消息、關于我們

三級頁面:購物車、訂單頁

3.2 數據表E-R圖

4 系統實現

4.1 網站首頁

首頁分為三個模塊, 頂部導航模塊、主要展示內容模塊、底部鏈接著作聲明模塊。

頂部導航模塊是整個網站的概括, 通過導航中的鏈接可以到達網站中任意功能的頁面。菜譜寶典和美食社區數據庫的查詢方式為分頁查詢, 將查詢的內容通過分頁技術展示在二級頁面中。在未登錄前左上角顯示登錄按鈕, 提示瀏覽者要通過登錄才能使用部分功能, 登錄后替換為個人頭像, 點擊頭像可以導出列表, 包含個人中心、關于我們、發布菜譜、發布日記等功能鏈接。主要展示內容模塊展示了本網站的主要內容:菜譜、吃貨日記, 每個部分展示出相應的熱門文章, 通過點擊相應的鏈接可以導入到特定的文章頁。在主要內容展示模塊還有一個內容:吃貨排行榜和桌面日歷, 這兩個插件是在大分辨率下顯示的, 在手機等小分辨率屏幕下會自動隱藏, 充分體現了響應式的特點。底部鏈接和著作聲明模塊是每個網站的必備部分, 主要供用戶跳轉到與本網站有關聯的其他網站, 也是開發者向大眾聲明著作權的區域。

4.2 日記編輯效果

日記編輯頁面, 點擊頂部導航欄的發布日記即可進入編輯頁面, 在進入編輯頁面前, 首先會獲取session中的Curr User, 在提交編輯內容時會將這個Bean和編輯內容上傳到服務器, 便于服務器知道是哪個用戶編輯的日記。這個頁面主要內容為標題、圖片、文本編輯器等組成, 該頁面簡潔明了, 讓用戶可以專注于日記本身, 沒有任何多余的附帶內容要關心。

4.3 美食社區效果

點擊首頁導航欄中的美食論壇, 進入后臺程序, 查詢出所有的日記信息, 然后將查詢結果返回論壇頁面顯示, 點擊任意一篇文章即可進入相應的日記頁面, 在日記底部可以進行瀏覽和回復。

4.4 日記顯示效果

日記顯示頁面, 點擊首頁的吃貨日記中的一項鏈接即可進入日記頁面, 在這里, 用戶可以瀏覽所有人編寫的所有日記, 主要展示內容是標題、發布人、時間、主要內容、以及評論區, 在評論區, 只要是登錄的用戶都可以在這里為該日記留言。

4.5 菜譜編輯效果

菜譜編輯頁面, 點擊頂部導航欄的發布菜譜即可進入編輯頁面, 在進入編輯頁面前, 首先會獲取session中的Curr User, 在提交編輯內容時會將這個Bean和編輯內容上傳到服務器, 便于服務器知道是哪個用戶編輯的菜譜。這個頁面的主要內容為標題、圖片、視頻、文本編輯器等組成。

5 結論

基本測試結束后, 每個頁面都能正常顯示, 后臺代碼也正常運行, 基本達到了預期效果, 圓滿完成了網站的設計制作和調試等工作。目前網站已能正常運行了。