實戰點菜系統


一、簡要需求分析:

1、註冊

2、登陸

3-1、菜單錄入(管理員)

3-2、點菜模塊(普通用戶)

 

二、項目說明:

1、整體架構:

--data  #數據

--db              #數據庫

       --menu.db

--static   #靜態資源

       --css   #css文件

       --js        #js文件

--templates   #html模板

       --index.html  #主頁

       --login.html   #登陸

       --register.html      #註冊

       --admin.html #管理員頁面

       --404.html            #404頁面

--app.py #flask文件,處理前端請求和獲取數據庫資源

--db.py    #處理有關數據庫的增刪查改

--cal.py  #線性規劃計算

--insert_db.py #將數據添加到數據庫

 

2、功能描述

//按照流程,對部分文件實現的功能描述

--login.html、register.html  #登陸註冊,完成了簡單檢驗

       #提供兩個賬號:用來登陸:

              管理員:username(admin) password(admin)

              普通用戶:username(guest1) password(guest)

       --登陸:

              --前端:   表單不能爲空

              --後端:用戶名是否存在

                            密碼是否正確

              --登陸成功:

                     如果用戶類型爲管理員,重定向到admin.html

                     如果用戶類型爲普通用戶,重定向到index.html

                           

       --註冊:      

              --前端:表單不能爲空

                            用戶名長度要求在5-20

                            密碼長度要求在5-20

                            兩次密碼一致

              --註冊成功:

                     重定向到login.html

--admin.html   #管理員頁面,完成單菜品添加,套餐添加

       --單菜品添加 #完成了一些檢驗

       --套餐添加    #完成了一些檢驗,包括套餐價格不能超過單菜品總和

--index.html       #主頁,完成展示,選購,組合套餐,提交記錄等功能

       --top#右上角的‘登出’,可以註銷登錄

                #如果登陸成功,會顯示出用戶名

       --left

              --單菜品展示  如果想要添加到購物車,點擊‘加入點菜單’按鈕即可

              --套餐展示   如果想要添加到購物車,點擊‘加入點菜單’按鈕即可

                                         

       --right   #實現三個div的切換(購物車,空購物車,正在支付)

              --空購物車   #如果購物車爲空,切換爲該div

              --購物車       #展示選購的所有的單品,可以做添加、減少、移除操作

                                   如果選購的物品再加一個,剛好可以省更多錢,就在下方出現提示(如選擇咖啡)和添加按鈕

              --正在支付    #展示最省錢的組合方式,點擊支付按鈕,可提交訂單

                                   #點擊提交的時候,會將時間和用戶提交到數據庫

--404.html     #如果找不到頁面會被調用

 

3、技術使用:

  前端: --html、css(less)、js

           --框架和庫:Vue.js、Jquery、Bootstrap

  後端: --python

           --框架:Flask



三、重點難點分析:

1、數據使用比較頻繁,且頻繁修改。原生js實現比較難

答:使用Vue.js。Vue.js是MVVM框架,實現了雙向數據綁定。而在我的項目中,數據使用比較頻繁,且可能頻繁修改。使用Vue.js會更加方便一些

2、如何將Vue.js和Flask結合起來

答:

兩者本身不存在矛盾,但是Flask使用的jinja2模板的‘{{}}’和Vue.js中的‘{{}}’會出現一些問題。

解決思路:將Vue.js中使用到的數據展示都改寫爲完整形式 如:原先的<p>{{price}}</p>改寫爲<pv-text="price"></p>

3、登陸註冊的檢驗

答:分開檢驗,將可以在前端做的都在前端完成。如非空檢驗,長度檢驗,套餐價格和單菜品價格檢驗 

其餘需要數據庫支持的,放在後端檢驗

4、“套餐添加只能添加單菜品中有的”

答:用select來實現。直接將所有的單菜品顯示出來,由管理員自己選擇。而不必填寫

5、想要在提交訂單信息的同時,將用戶名和時間也提交到數據庫中

答:利用主頁頭部的用戶名顯示,獲取到相應信息。時間由Date對象直接得到。

 

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章