实战点菜系统


一、简要需求分析:

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

 

 


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