一、简要需求分析:
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中用到的数据展现都改写为完整形式 如:原价的
{{price}}
改写为
3、登陆注册的检验
答:分开检验,将能在前台做的都在前台完成。如非空检验,长度检验,套餐价格和单菜品价格检验
其他需要数据库支持的,放在后台检验
4、“套餐增加只可以增加单菜品中有的”
答:使用select来实现。直接将所有的单菜品显示出来,由管理员自己选择。而不必填写
5、想要在提交订单信息的同时,将使用户名和时间也提交到数据库中
答:利使用主页头部的使用户名显示,获取到相应信息。时间由Date对象直接得到。