基于Django+mysql的点餐系统设计第十篇(H5手机移动端点餐：登录)-今日头条

博客目录：

......

七、基于Django+mysql的点餐系统设计-第七篇(编写后台会员管理页面及后台系统技术点总结)

八、基于Django+mysql的点餐系统设计-第八篇(H5手机移动端点餐：主页调试-静态页面)

九、第九篇(H5手机移动端点餐："主页调试-动态页面"和店铺切换)

十、基于Django+mysql的点餐系统设计第十篇(H5手机移动端点餐：登录)

本章源码下载地址：https://github.com/hopeSuceess/testorder/tree/testorder_20220602_01

　　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 %}

运行工程，访问 http://localhost:8000/mobile/register

把登陆页面写完后，继续执行登录的逻辑。在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 %}

好了，访问http://localhost:8000/mobile/register，输入手机号、验证码，页面会跳到餐品浏览页

登录流程编写完了，是否发现一个问题，只有访问登陆链接(http://localhost:8000/mobile/register)才通过登录链接进入餐品浏览页，而且随意访问http://localhost:8000/mobile等链接都可以进入到对应的页面，这对于系统的安全是非常不利的。因此，移动端会员点餐也要像后台员工管理那样，增加登录校验。只要缓存中没有用户的信息，用户访问哪个链接都要跳转到登陆页面

　　在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"))

是否登录逻辑编写完成后，清除缓存后，访问任意链接，如http://localhost:8000/mobile/ ，页面跳转到登陆页面。好了，移动端的登录就编写完了。下一篇文章开始编写移动端会员点餐的主要功能：购物车

基于Django+mysql的点餐系统设计第十篇(H5手机移动端点餐：登录)

头条热榜

精彩视频