前言:
目前我们对“h5mysql”都比较珍视,我们都想要知道一些“h5mysql”的相关资讯。那么小编同时在网摘上汇集了一些关于“h5mysql””的相关内容,希望兄弟们能喜欢,你们一起来了解一下吧!博客目录:
......
七、基于Django+mysql的点餐系统设计-第七篇(编写后台会员管理页面及后台系统技术点总结)
八、基于Django+mysql的点餐系统设计-第八篇(H5手机移动端点餐:主页调试-静态页面)
九、第九篇(H5手机移动端点餐:"主页调试-动态页面"和店铺切换)
十、基于Django+mysql的点餐系统设计第十篇(H5手机移动端点餐:登录)
本章源码下载地址:
H5手机移动端点餐访问页面首先需要获取用户的信息,这里就引入了登录。手机号登录了,才能获取到用户信息,进行后续的订餐等操作。
在mobile/urls.py中添加登录路由:
# 会员注册/登录 path('register', index.register, name = "mobile_register"), #移动端会员注册/登录表单页
路由添加完后,开始编写views层,在mobile/views/index.py中添加对路由的处理逻辑
def register(request): '''加载注册/登录页面''' return render(request, "mobile/register.html")
register函数没有数据处理结果,只是将流程渲染到templates/mobile/register.html页面。register.html代码如下:
{% extends 'mobile/base.html' %}{% load static %}{% block mainbody %}<!--头部--> <header> <div class="header"> <h1>登录</h1> <a href="#" class="return"></a> </div> </header><!--内容区--> <article class="main-container loginContent"> <form action="" method="post"> {% csrf_token %} <div class="list"> <ul class="line"> <li><i class="icon-head"></i><input type="text" name="mobile" id="name" placeholder="手机号码"></li> <li class="code"><i class="icon-sms"></i><input type="tel" name="code" id="code" placeholder="手机收到的校验码"><button>点击获取</button></li> </ul> </div> <div class="button"><button onclick="location.href='#'">快速登录</button></div> </form> <div style="text-align: center;padding: 10px;">测试验证码:1234</div> <div style="text-align: center;padding: 10px;color: #f00;">{{ info }}</div> </article>{% endblock %}{% block myjavascript %} <script type="text/javascript"> $("button:contains('点击获取')").click(function(){ bt = $(this); if (bt.html() != "点击获取"){ return; } var phone = $("#name").val(); bt = $(this); var t=60; bt.html(t+"秒") var mytime = setInterval(function(){ t = t-1; bt.html(t+"秒") if(t <= 0){ clearInterval(mytime) bt.html("点击获取"); } },1000); }); </script>{% endblock %}
运行工程,访问
把登陆页面写完后,继续执行登录的逻辑。在mobile/urls.py中添加执行登录路由
path('doregister', index.doRegister, name= "mobile_doregister"), # 执行注册或登录
对于新用户,输入验证码即代表登录,所以需要将新用户的数据新增到数据库,然后再跳到餐品浏览页。另外,发送验证码需要调用第三方接口,这里就在缓存中固定一个验证码,登陆页面输入固定的验证码就可以了。mobile/views/index.py中doRegister编写如下:
def doRegister(request): '''执行注册/登录''' # 验证短信码 verifycode = "1234" # request.session['verifycode'] code = request.POST['code'] if verifycode != code: context = {'info': '验证码错误'} return render(request, "mobile/register.html", context) try: #根据手机号码获取当前会员信息 member = Member.objects.get(mobile=request.POST['mobile']) except Exception as err: # 此处可以执行当前会员注册(添加) ob = Member() ob.nickname = "顾客" #默认会员名称 ob.avatar = "moren.png" # 默认头像 ob.mobile = request.POST['mobile'] # 手机号码 ob.status = 1 ob.create_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S") ob.update_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S") ob.save() member=ob # 检查当前会员状态 if member.status == 1: # 将当前会员信息转换成字典格式并存放到seession中 request.session['mobileuser'] = member.toDict() # 重定向到首页 return redirect(reverse("mobile_index")) else: context = {"info": '此账号信息禁用'} return render(request, "mobile/register.html", context)
最后,在templates/mobile/register.html中添加执行登录的路由
<!--内容区--> <article class="main-container loginContent"> <form action="{% url 'mobile_doregister' %}" method="post"> {% csrf_token %} ...... </article>{% endblock %}
好了,访问,输入手机号、验证码,页面会跳到餐品浏览页
登录流程编写完了,是否发现一个问题,只有访问登陆链接()才通过登录链接进入餐品浏览页,而且随意访问等链接都可以进入到对应的页面,这对于系统的安全是非常不利的。因此,移动端会员点餐也要像后台员工管理那样,增加登录校验。只要缓存中没有用户的信息,用户访问哪个链接都要跳转到登陆页面
在myadmin/views/shopmiddleware.py中编写移动会员端是否登录的校验逻辑
#判断H5移动会员端是否登录 #定义移动端不登录也可以直接访问的url列表 urllist1 = ['/mobile/register','/mobile/doregister'] # 判断当前请求url地址是否是以/mobile开头,并且不在urllist中,才做是否登陆判断 if re.match(r'^/mobile', path) and (path not in urllist1): # 判断是否登录(在于session中没有mobileuser) if 'mobileuser' not in request.session: # 重定向到登录页 return redirect(reverse("mobile_register"))
是否登录逻辑编写完成后,清除缓存后,访问任意链接,如 ,页面跳转到登陆页面。好了,移动端的登录就编写完了。下一篇文章开始编写移动端会员点餐的主要功能:购物车
标签: #h5mysql