一、項目背景
由于疫情原因，張家界旅游業(yè)受到很大的影響，為了促進旅游業(yè)的發(fā)展，吸引更多游客來到張家界旅游，幫助游客更好地了解張家界，創(chuàng)建張家界旅游網(wǎng)，推進旅游發(fā)展大會的開展，展示當?shù)仫L土人情。景區(qū)推薦和酒店預定使得游客出行更加的方便，通過游客留言，增加與當?shù)氐幕有?，將當?shù)靥禺a(chǎn)在網(wǎng)站上直接銷售，提高經(jīng)濟收益，加強宣傳效果。

二、業(yè)務概述
將系統(tǒng)分為普通用戶操作和管理員后臺管理。系統(tǒng)的最終用戶是管理員和普通用戶，具有一定的系統(tǒng)操作能力。管理員具有更新前臺系統(tǒng)，管理后臺系統(tǒng)的權限，而普通用戶只能在前臺界面進行操作。
三、詳細需求
1.1 系統(tǒng)功能模塊

管理員后臺管理功能模塊圖

普通用戶操作功能模塊圖
1.2功能需求
管理員后臺管理實現(xiàn)管理員對用戶信息、商品信息和網(wǎng)頁內容信息操作。
（1）用戶信息管理：管理員可見的用戶信息為：用戶id、用戶姓名、用戶性別、用戶電話，可對用戶信息進行刪除，可根據(jù)用戶姓名查詢用戶信息和對除id以外信息的修改。
（2）商品信息管理：可實現(xiàn)對商品名、商品單價和商品庫存的增刪改。
（3）頁面內容管理：對主頁面對用戶瀏覽張家界介紹信息的增刪改。
普通用戶操作實現(xiàn)用戶注冊和登錄、用戶瀏覽、商品的展示和購買、商品訂單中對商品數(shù)量的增減和刪除操作、對訂單金額統(tǒng)計的功能。
（1）注冊功能：用戶填寫用戶名、登錄密碼進行注冊，當用戶名已經(jīng)存在時，注冊失敗。否側注冊成功，用戶id自增。
（2）登錄功能：用戶填寫用戶名和密碼或者手機號和密碼或者用戶通過掃碼進行登錄操作。 用戶在進行操作之前，首先需要輸入自己的信息包括帳號和密碼，顯示器將這些信息發(fā)送給數(shù)據(jù)庫，在數(shù)據(jù)庫中將用戶的帳號和密碼進行比對，進行身份驗證，并將驗證的結果（包括用戶類型及是否登陸成功）返回給用戶。如果身份驗證成功則進入頁面，反之登錄失敗。
（3）商品展示功能：用戶對所有商品信息進行瀏覽，并且可以點擊加入購物車中。
（4）購物車管理：主要包括用戶對購物車全部商品的查看，商品數(shù)量的修改，商品的刪除，結算。
1.3功能流程圖

用戶流程圖

用戶減少購物車中商品數(shù)量流程圖
用戶進入登錄頁面，當輸入賬號和密碼后點擊登錄按鈕，若輸入為空時，彈出提示窗口，否則將數(shù)據(jù)傳入后端進行判斷，判斷成功后進入旅游頁面，瀏覽商品信息后可點擊加入購物車，如果購物車中已經(jīng)有該商品訂單，則購物車中該商品數(shù)量加1，改變商品總價，否則將商品信息加入購物車中，商品數(shù)量為1，商品總價等于商品單價，最后計算所有商品的價格。
一、主要功能
1.用戶信息管理功能
用戶登錄、用戶注冊、用戶修改、用戶刪除
2.瀏覽查詢功能
瀏覽（張家界地理環(huán)境、歷史文化、地方特產(chǎn)、風景名勝、著名人物等介紹）
3.商品展示功能
景區(qū)售票、特產(chǎn)的購買
4.購物車功能
我的購物車里面查看訂單詳情，可以進行商品增加、商品減少、商品刪除等功能
二、 概要設計

主要分為管理員、登錄、首頁、個人四個界面，在布局方面分為頁眉、導航欄、主體部分、頁腳，以html+css+js的模式進行編程。

ER圖

用戶表：用戶id、用戶名字、用戶密碼、用戶性別、用戶電話
商品表：商品id、商品名字、商品單價
購物車表：訂單id、商品名字、商品單價、商品數(shù)量、商品總計

1.用戶登錄頁面
以張家界風景照為背景，用表單標簽實現(xiàn)的登錄框在頁面的中心位置，里面包括賬號框和密碼框，下面設置登錄、注冊、忘記密碼按鈕。如果登錄成功就跳轉到主頁，登錄失敗時，在密碼框顯示“密碼錯誤或賬號不存在”。如果沒有注冊，點擊注冊按鈕，彈出注冊窗口，向用戶名框、設置密碼框輸入后，點擊確認按鈕實現(xiàn)注冊。
2.主題頁面
2.1 首頁設計
分為頁眉、導航欄、主體、頁腳四個部分，在頁眉部分將網(wǎng)頁名字放在左邊四分之一處，在靠近右邊的位置顯示個人賬號。導航欄有首頁、出行預定、旅游論壇、個人賬號四個內容，在導航欄下面有一個動態(tài)的、可點擊的圖片輪播板塊，放上景區(qū)和特產(chǎn)等圖片，在輪播圖上有搜索欄，在頁腳有“關于我們”的介紹。

2.2 首頁內容
張家界簡介包括地理環(huán)境、歷史文化、地方特產(chǎn)、風景名勝、著名人物等介紹，點擊后字體顏色有變化，并跳到相應的位置。
3.出行推薦

點擊或鼠標移動到出行推薦后，出現(xiàn)二級導航欄，分為景區(qū)預定、酒店預定、特產(chǎn)購買。分為三個區(qū)域，每個區(qū)域都是一個列表，并用邊框顯示商品圖片、介紹、價格，點擊可查看更多。圖片占邊框的二分之一，在圖片下面顯示商品名，然后另起一行顯示商品信息，左下顯示商品的價格，右下顯示購買按鈕。
三、詳細設計
1.用戶登錄頁面login
在login.html上實現(xiàn)登錄和注冊功能，分成兩個大的div區(qū)域，用a標簽實現(xiàn)登錄和注冊功能的跳轉，在login.css上使用overflow: hidden，將填寫框溢出的部分隱藏，這樣就不需要將登錄和注冊寫成兩個html文件了。

2.主題頁面index
(1)搜索功能
可實現(xiàn)百度搜索，采用form表單的action屬性將輸入內容提交到指定的URL里面來實現(xiàn)
(2)輪播圖
圖片自動切換:用ul標簽放入圖片，在js中設置圖片切換功能，設置引索，初始化使得當前圖片透明，切換引索的值（累加），使得當前圖片顯現(xiàn)，當引索值大于圖片數(shù)量時，使得值為0，當值小于0時，賦值為圖片數(shù)量，用定時器實現(xiàn)。
左右健點擊切換:設置左右按鍵的div，創(chuàng)建點擊事件，獲取左右健元素，點擊左鍵，引索減一，右鍵，引索加一。
(3)下拉列表
采用:hover偽元素模仿懸停事件。先在html中創(chuàng)建二級菜單，將第二級菜單用dispaly none隱藏起來，當鼠標懸停在上面時，使得二級列表用display: block成為塊級元素顯示出來。注意display：none 和 visibility：hidden 的區(qū)別。前者元素隱藏后，占據(jù)的空間消失。
(4)浮動導航/導航欄
用無序列表，導航欄部分用display: inline-block;使得設置對象做為行內元素顯示，浮動導航要用position:fixed 使得固定在頁面上。
3.出行推薦chuxing

3.1 商品展示
(1)用數(shù)組輸入商品信息。
(2)獲取商品展示區(qū)域的節(jié)點元素對象，通過遍歷數(shù)組，將商品信息輸出。
3.2 購物功能
（1）購物車功能
①　獲取“加入購物車”按鈕元素節(jié)點的集合，初始化商品數(shù)量。
②　當發(fā)生點擊事件時，創(chuàng)造div元素，將該商品信息輸出到購物車展示區(qū)域，將購物車節(jié)點的子節(jié)點列表末尾添加新的子節(jié)點，商品數(shù)量加1，并進行結算。
（2）商品計算功能
①　商品刪除：
a.獲取“加入購物車”按鈕元素節(jié)點的集合。
b.當發(fā)送點擊事件時，刪除該商品節(jié)點，即刪除購物車節(jié)點的子節(jié)點，商品數(shù)量減1，并進行結算。
②　商品數(shù)量增減：
讓商品的數(shù)量+1，點擊加入購物車彈出提示窗口，判斷是否第一個加入購物車，如果是，則在購物車界面加入商品列表，否則只能加商品的數(shù)量。這里把商品所有屬性放進一個集合里面。
a.獲取所有加、減號元素節(jié)點集合。
b.商品增加：對商品進行遍歷，當點擊加號時，獲取上一個兄弟元素節(jié)點，即商品數(shù)量，將商品數(shù)量的值進行累加后輸出。改變商品總計價格，并進行結算。
c.商品減少：對商品進行遍歷，當點擊減號時，獲取下一個兄弟元素節(jié)點，即商品數(shù)量，判斷商品數(shù)量是否小于1，如果商品小于1時，商品數(shù)量無法改變，否則使得商品數(shù)量的值減少后輸出。改變商品總計價格，并進行結算。
③　商品總計價格：
a.獲取單價節(jié)點，此時的作用域是在加號或者減號按鈕中，則父節(jié)點的父節(jié)點的上一個兄弟節(jié)點是單價節(jié)點，父節(jié)點的父節(jié)點的下一個兄弟節(jié)點是總計節(jié)點。
b.獲取商品單價的值，總計價格的值等于商品數(shù)量的值乘以商品單價的值，輸出商品總計，并進行結算。
④　商品結算
a.獲取購物車對象中孩子節(jié)點集合和總和對象的節(jié)點。
b.對所有商品進行遍歷，獲取每個商品的總計，并進行累加，最后輸出總計。

4.個人中心頁面：
右上角點擊“個人中心”進去個人頁面，導航欄顯示賬號設置、購物車等。

四、功能實現(xiàn)

1、登錄、注冊功能
(1)登錄：

①　密碼賬號為空時，彈出警示窗口，提示密碼或者賬號為空

②　將輸入的密碼與賬戶密碼比較，不相等時提示登錄失敗

③　密碼正確，提示登錄成功，跳轉到主頁面

(2)注冊：
①　設置驗證碼倒計時（當點擊按鈕后要將按鈕設置成不可點擊，直到倒計時為零）

②　提交后跳轉到登錄界面

2、主題頁面index

(1)整體展現(xiàn)

3、出行推薦(購物功能）
（1）商品展示

（2）點擊加入購物車

（3）商品數(shù)量增加

（4）商品數(shù)量減少

（5）商品輸刪除

（6）結算

4、論壇

5、管理員頁面

（1）用戶信息操作：能夠修改、刪除、查詢用戶

（2）商品信息操作：增加商品

完整代碼+文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-483367.html

到了這里，關于【javaweb+springboot】旅游網(wǎng)頁面設計（主購物車功能）——前后端分離+服務端客戶端增刪改查（完整代碼+文檔）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！