實戰點菜系統

一、簡要需求分析：

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對象直接得到。