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ā)經驗、提高了實踐能力。