一、背景意義

如今實體經濟受到了互聯網經濟的巨大沖擊,消費者體驗訴求逐步提高,傳統線下企業(yè)積極拓展線上模式,零售行業(yè)的積" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網站運營 > JavaWeb網站項目開發(fā):Sweets甜品線上門店設計與開發(fā)

JavaWeb網站項目開發(fā):Sweets甜品線上門店設計與開發(fā)

時間:2023-09-20 20:12:01 | 來源:網站運營

時間:2023-09-20 20:12:01 來源:網站運營

JavaWeb網站項目開發(fā):Sweets甜品線上門店設計與開發(fā):也算是一個比較完整的項目報告了!沖呀!




一、背景意義

如今實體經濟受到了互聯網經濟的巨大沖擊,消費者體驗訴求逐步提高,傳統線下企業(yè)積極拓展線上模式,零售行業(yè)的積極變革和創(chuàng)新能力激發(fā)了行業(yè)新的活力。因此本項目選擇為線下中小店鋪設計網上門店,這一模式不但可以拓寬銷售渠道,滿足用戶對產品的加購、意見反饋等需求,還可以將線上的用戶吸引到線下進行消費,為線下實體渠道帶來更多的用戶,也讓用戶享受到更多的實惠。同時為企業(yè)積攢用戶數據,對之后的用戶畫像分析、營銷方案設計等分析與決策提供數據支持。使銷售過程實現智能化控制和管理,以提高效率、降低成本。




二、項目目標

Sweets甜品店線上門店系統致力于實現前臺用戶購物系統和后臺企業(yè)管理系統兩部分系統。在前臺系統中實現用戶注冊、登錄、信息瀏覽、產品搜索、購物車增刪改、訂單提交、反饋提交等功能,滿足顧客網上瀏覽購物的基本需求。在后臺系統中為不同級別或部門管理員提供不同的管理頁面,實現對用戶、商品、員工、反饋等信息增刪改查等日常管理操作,以滿足門店智能管理的需要。




三、技術工具

本項目使用Java語言開發(fā)、Eclipse編碼、使用Linux系統虛擬機CentOS上的MySql數據庫存儲數據,以JavaWeb三層架構思想為基礎,同時運用數據庫連接池c3p0技術、JSTL標準標簽庫、Ajax、Jquery等技術以實現項目目標。并采用Chrome瀏覽器進行測試。




四、項目周期

20xx年x月x日 確定項目方向

20xx年x月x日 - 20xx年x月x日 構建網站、完成頁面總體設計

20xx年x月x日 - 20xx年x月x日 搭建三層架構

20xx年x月x日 - 20xx年x月x日 實現具體功能

20xx年x月x日 - 2019年x月x日 修改完善細節(jié)

20xx年x月x日 - x月x日 撰寫報告

20xx年x月x日 回顧總結、完善細節(jié)

20xx年x月x日 答辯

五、項目設計

(一)功能模塊設計

1.前臺功能列表

圖1 前臺功能列表




2.后臺功能列表

圖2 后臺功能列表

(二)網站結構設計

本項目基于由數據訪問層、業(yè)務邏輯層、表示層組成的三層結構模式搭建,具體如下圖3所示:

圖3 JavaWeb三層架構模型




1. Sweets甜品線上門店平臺前臺系統使用三層結構:

表示層:包括HTML、JSP、CSS。

業(yè)務邏輯層:使用Servlet、Service接口和實現類。主要包括:InitServlet、UserServlet、ProductServlet、CartServlet、UserService、ProductService、CartService及其實現類。

數據訪問層:使用Dao接口及其實現類。主要包括:UserDao、ProductDao、CartDao及其實現類。

圖4程序結構




2. Sweets甜品線上門店平臺后臺系統使用三層結構:

表示層:包括JSP、CSS。

業(yè)務邏輯層:使用Servlet、Service接口和實現類。主要包括:AdminServlet、FunctionServlet和UserService、ProductService、AdminService、RoleService、MenuService及其實現類。

數據訪問層:使用Dao接口及其實現類。主要包括:UserDao、ProductDao、AdminDao、RoleDao、MenuDao及其實現類。

(三)數據庫設計

本網站使用CentOS虛擬機上的MySql數據庫進行數據管理,使用有自動回收空閑連接功能的c3p0數據庫連接池技術實現于數據庫的連接,配置信息見config源文件夾下c3p0-config.xml文件。Sweet數據庫包括12個基本表,相關的表使用外鍵連接,結構圖如下圖5所示。

圖5 MySql表設計




六、項目實施

(一)前臺系統

1. 首頁index.jsp

前臺項目首頁(見圖6)頂部左側通過choose語句實現未登錄時顯示“Welcome Back!”歡迎語和Sign In鏈接,登陸后顯示“Welcome xxx(當前用戶名)!”歡迎語和Sign Out鏈接,如下圖7顯示,代碼見圖8。除此之外還有注冊頁Register鏈接和搜素頁Search鏈接,中部項目名和右側第三方賬號連接。并通過下方輪播圖展示相關信息。

圖6 首頁

圖7 頂部鏈接是否登錄的顯示區(qū)別

圖8 根據是否登錄顯示不同的鏈接

前臺通過從數據庫調取全部商品信息,顯示在如下圖9顯示的輪播圖中,全部16件商品循環(huán)展示,可向左或向右點擊更換。

圖9 全部商品輪播圖

除了顯示全部商品之外,還從數據庫中根據不同屬性值(如isnew屬性、discount屬性等)選取特定商品并顯示了最熱商品、最新商品、無糖商品、打折商品等特殊分類產品。通過點擊上方類型標簽分類顯示如圖10,代碼如圖11所示。

圖10 特殊類型商品展示




圖11 獲得不同分類商品

頁面最下方頁腳處(見圖12),用戶可以點擊About Us的Read More按鈕跳轉留言頁。也可以在Subscribe for hot updates中提交郵箱以獲取最新商品信息和優(yōu)惠券。但此文本框會判斷郵箱是否在數據庫中已經存在,已提交的用戶不可獲得二次優(yōu)惠,顯示“您已獲得優(yōu)惠”信息,若為第一次提交成功顯示“提交成功”信息。

圖12 提交郵箱

除此之外,前臺主頁還包括企業(yè)歷史信息、企業(yè)日志記錄、圖片展示、顧客反饋輪播圖等模塊。




2. 企業(yè)信息頁about.jsp

企業(yè)信息頁(見圖13)主要顯示企業(yè)介紹、員工介紹等基本信息,方便用戶了解企業(yè)文化及管理信息。

圖13 企業(yè)歷史信息

3. 登錄頁login.jsp

登錄頁如下圖14所示,其輸入為:用戶名、密碼、驗證碼。其中4位驗證碼通過項目com.ali.business.utils包中CaptchaImgUtils.java文件隨機生成,且具有兩條干擾線。同時,點擊驗證碼圖片再次調用此方法生成新的驗證碼,實現點擊更換驗證碼的功能(見圖15)。

輸入后進行信息檢驗:

1.用戶名檢查:在login.js中利用Ajax(見圖16)實現判斷用戶是否存在,若存在顯示“用戶名存在”信息,若不存顯示“用戶名不存在”信息無法登錄。

2.賬號權限檢查:判斷用戶賬號是否被凍結,若會員等級sid為0則為凍結不可登錄。

3.驗證碼:驗證碼生成、點擊更換并判斷驗證碼輸入結果是否正確。

4.非空檢驗:login.js中checkEmpty()函數實現驗證所有輸入框不得為空。

5.密碼驗證:若如上均正確點擊提交,判斷密碼是否正確,不正確不可登錄。

登錄頁輸出:若登陸成功跳轉主頁,若登陸失敗顯示“登陸失敗”信息。

圖14 登錄頁

圖15 點擊更換驗證碼

圖16 用戶驗證

4. 注冊頁register.jsp

注冊頁如下圖17所示,其輸入為:用戶名、郵箱、密碼、密碼確認、聯系電話、小區(qū)地址。其中校區(qū)地址通過regist.js中showVillage()函數(見圖18)實現從數據庫內獲取小區(qū)信息,并通過下拉列表顯示。

輸入后進行信息檢驗:

1.用戶名檢查:在regist.js中利用Ajax實現判斷用戶是否存在,若存在無法注冊。

2.密碼確認:兩次密碼輸入一致顯示“密碼確認成功”信息,不一致顯示“兩次密碼不一致”信息,則無法登錄。

3.非空校驗:在regist.js文件中的checkEmpty()函數實現驗證所有輸入框不得為空。

4.數據格式前臺檢驗:regist.js中checkData()函數(見圖19)中兩個正則表達式實現驗證“用戶名長度必須2-14位,字母開頭、可包含數字或_”及郵箱格式檢驗。

注冊頁輸出:點擊提交時,若以上條件均符合則為注冊成功跳轉登錄頁,若失敗在按鈕旁顯示“注冊失敗”信息。

圖17 注冊頁




圖18 獲取小區(qū)列表

圖19 數據格式校驗

5. 菜單頁menu.jsp

菜單頁如下圖20所示,顯示產品列表并實現分頁。在com.ali.business.utils包中Common.java文件設置每頁顯示6條數據,每次只從數據庫中取相應條數據顯示,而非取出全部數據再進行分頁顯示。并且可以通過點擊第一頁、前一頁、下一頁(見圖21)、最后一頁四個按鈕實現分頁跳轉。可以點擊每條信息后方的“加入購物車”按鈕,若用戶未登錄不可加購,使其跳轉登錄頁登錄,若用戶已登錄則加入一件對應的商品進入購物車,并跳轉至購物車cart.jsp頁面。

圖20 商品列表




圖21 下一頁按鈕

在前臺menu.jsp頁面右側如下圖22所示Search區(qū)域,實現通過獲取文本框中輸入的名稱,利用SQL語句中LIKE語句(見圖23)實現通過商品名模糊查詢相似商品信息的功能,并分頁顯示于網頁左下方原全部商品分頁顯示位置,同樣為6條每頁且可翻頁。

圖22 搜索功能

圖23 LIKE搜索

6. 商品詳細信息頁product.jsp

點擊商品目錄指定產品信息可以調換到商品詳細信息頁(見圖24)。商品詳細頁根據傳入的商品ID顯示對應商品的圖片、名稱、分類、價格、庫存信息。并通過不可更改的文本框,點擊加號或減號按鈕實現架構數量的增減,變化范圍為1至庫存商品數量。

點擊“Add in cart”按鈕,若登錄則加入對應的產品和數量到購物車或更改相應的數量和金額(見圖25),并跳轉至購物車cart.jsp頁面,若未登錄跳轉至登陸頁面先進行登錄。

圖24 商品詳細信息頁

圖25 加入購物車

7. 購物車頁cart.jsp

每次用戶登錄,從數據庫中調取用戶購物車信息,顯示在如下圖26所示的cart.jsp頁面中,若為新用戶其購物車為空。通過在如上商品列表頁menu.jsp或商品詳細頁product.jsp添加商品到此頁,cart.jsp中顯示購物車內容,并計算商品金額。點擊“刪除”按鈕實現對應產品架構記錄的刪除;點擊“清空購物車”清空該用戶的所有加購項;點擊“提交訂單”實現清空購物車并增加對應金額的積分,實現對數據庫相關信息的增刪改查操作(見圖27)。

圖26 購物車頁

圖27 購物車頁操作

8. 留言頁single.jsp

如下圖28所示,留言頁不連接數據庫,只實現用戶提交留言信息,顯示在上方空白用戶頭像位置,代碼見圖29。

圖28 網頁留言

圖29 留言

9. 聯系頁contact.jsp

如下圖30所示,在前臺contact.jsp頁面利用iframe標簽調取百度地圖網頁顯示定位的門店信息,代碼見圖31。地圖可以放大或縮小,并點擊選取,與地圖網站操作相同。

圖30 地圖




圖31 獲取地圖

下方圖32位置顯示門店地址、郵件、電話等聯系方式。

圖32 信息

之后為用戶反饋頁面如下圖33所示,無論用戶是否登錄或是否為會員均可對商品和服務進行評價。對于產品和服務采取下拉列表框評分機制,同時可在右側提出意見或建議,可供企業(yè)進行對應的數據分析??啥啻芜M行評價,將評價結構收集到數據庫對應的feedback表中。

圖33 用戶反饋

(二)后臺系統

1. 登錄頁/首頁

門店后臺以管理員登錄頁為主頁,如下圖34所示,只有登陸后才可顯示菜單。管理頁面根據管理員角色不同顯示不同的管理菜單(如下圖35所示,代碼見圖36):

(1)對于門店店主/超級管理員

用戶名:aa 密碼:111

可實現所有的功能操作。在后臺頁面顯示用戶管理、庫存管理、人力管理、反饋管理、管理員管理菜單,包括用戶增加、會員管理、商品增加、商品查改、員工管理、角色/菜單增加、反饋查看、管理員添加頁面。

(2)對于門店銷售人員

用戶名:bb 密碼:222

在后臺頁面顯示庫存管理菜單,包括商品增加、商品查改頁面。

(3)對于門店人力部

用戶名:cc 密碼:333

在后臺頁面顯示人力管理菜單,包括員工管理、角色/菜單增加頁面。

(4)對于門店客服人員

用戶名:dd 密碼:444

在后臺頁面顯示用戶管理、反饋管理菜單,包括用戶增加、會員管理、反饋查看頁面。

其信息驗證部分與前臺相同,在此不再贅述。

圖34 登錄頁

圖35 不同用戶導航欄對比

圖36 不同用戶導航欄顯示不同菜單

2. 用戶管理:

2.1用戶增加

如下圖37所示增加用戶,填寫相關信息,信息檢驗與注冊頁相同。若成功顯示“添加成功”信息,否則顯示“添加失敗”信息。

圖37 用戶添加

2.2用戶管理

如下圖38所示用戶管理頁面顯示數據庫中所有用戶的信息。

圖38 用戶管理

2.2.1會員等級修改/凍結

點擊上圖修改按鈕可以更改用戶等級或對違規(guī)用戶進行凍結。如下圖39所示,傳入對應用戶的ID值,若設置state屬性為-1(對應sid屬性為0)則該用戶被凍結,再次登錄時顯示如下圖40所示“用戶被凍結”信息。若state屬性為1,0.95,0.9,0.85,0.8(對應sid屬性分別為1,2,3,4,5),則與用戶結算時計算相應的折扣值。

圖39 用戶凍結/更改等級

圖40 凍結用戶登錄

2.2.2用戶刪除

點擊如上圖38“刪除”按鈕,傳遞用戶ID刪除相應的用戶信息,并跳轉回當前頁面。

3. 庫存管理:

3.1庫存增加

在如下圖41所示頁面添加商品。判斷商品名是否存在,存在則顯示“該商品已存在,請轉到修改頁”信息,此時無法增加該商品;若商品名不存在顯示“該商品為新商品”信息。且信息不得為空。

圖41 商品添加

3.2庫存管理

庫存管理界面如下圖42所示,可以查看庫存商品的全部信息,包括編號、名稱、價格、庫存、折扣等。

圖42 商品管理

3.2.1信息修改

點擊上圖所示畫面每件商品對應的修改按鈕時,跳轉到如下圖43所示的商品信息修改頁面。通過傳遞的商品ID獲得全部商品信息并顯示在表格中,其中對于下拉列表和單選按鈕利用Jquery獲取并設置,以是否折扣和是否含糖屬性為例,代碼見圖44。對需要更改的項進行更改并提交,成功則顯示“修改成功”信息,否則顯示“修改失敗”信息。

圖43 商品修改




圖44 顯示商品信息

3.2.2庫存商品刪除

點擊圖42中“刪除”按鈕,在數據庫中刪除對應產品編號的商品信息,并跳轉到庫存管理頁面。

4. 人力管理:

4.1角色增加

在如下圖45中添加角色,判斷角色是否存在,如果存在顯示“該角色已存在”,否則顯示“該角色為新角色”,點擊“Add”按鈕加入數據庫。

圖45 角色添加

4.2菜單增加

在如下圖46中添加菜單,判斷菜單是否存在,如果存在顯示“該菜單已存在”,否則顯示“該菜單為新菜單”,點擊“Add”按鈕加入數據庫。

圖46 菜單添加

4.3員工信息刪除

通過如下圖47所示頁面查看管理員信息,包括該管理員的角色和角色所包含的菜單信息。點擊后方“刪除”按鈕,刪除該員工及其所有信息,代碼見圖48。

圖47 員工管理

圖48 員工信息刪除

5. 反饋管理:

通過如下圖49所示頁面顯示用戶反饋信息,包含用戶名、商品評分、服務評分和評價信息等內容,不可修改。

圖49 反饋管理

6. 管理員管理:

只有超級用戶/店主才可以獲得此功能的菜單,可以添加普通管理員,而普通管理員無此權限。在如下圖50所示界面添加新管理員,并設置其密碼、工資,并通過多選設置其用戶角色,代碼見圖51。

圖50 管理員添加

圖51 管理員添加代碼

七、項目測試

1.進行黑盒測試

黑盒測試也稱功能測試或數據驅動測試,它是在已知產品所應具有的功能,通過測試來檢測每個功能是否都能正常使用。在不考慮程序內部結構和內部特性的情況下,進行測試。此項目程序通過了黑盒測試。

2.進行白盒測試:

白盒測試也稱結構測試或邏輯驅動測試,它是知道產品內部工作過程,可通過測試來檢測產品內部動作是否按照規(guī)格說明書的規(guī)定正常進行,按照程序內部的結構測試程序,檢驗程序中的每條通路是否都有能按預定要求正確工作。此項目程序通過了白盒測試。

八、總結

本項目實現了用戶登陸、注冊、商品展示、商品分頁,多用戶的商品購物車以及后臺用戶角色權限管理等功能。并為項目中設計了數據庫和三層架構。實習期間加深了對以前學習過的JavaWeb、JQuery、Ajax、EL和JSTL等知識點的理解和應用,積累了項目開發(fā)經驗、提高了實踐能力。

關鍵詞:設計,項目,甜品

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉