首页的显示

进入应用myhome里的urls.py,并输入

1
2
3
4
5
6
7
8
# 登录
url(r'^login/',LoginViews.myhome_login,name="myhome_login"),
url(r'^dologin/',LoginViews.myhome_dologin,name="myhome_dologin"),
url(r'^logout/',LoginViews.myhome_logout,name="myhome_logout"),

# 注册
url(r'^register/',LoginViews.myhome_register,name="myhome_register"),
url(r'^doregister/',LoginViews.myhome_doregister,name="myhome_doregister"),

进入应用myhome/views,创建LoginViews.py,并输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
from django.shortcuts import render, reverse
from django.http import HttpResponse,JsonResponse
from django.contrib.auth.hashers import make_password, check_password
from myadmin.models import Users
# 显示登录页面
def myhome_login(request):
  # 加载页面
  return render(request,'myhome/login/login.html')

# 执行登录
def myhome_dologin(request):
  return HttpResponse('myhome_dologin')

# 退出登录
def myhome_logout(request):
  return HttpResponse('退出登录')

# 显示注册页面
def myhome_register(request):
  # 加载页面
  return render(request,'myhome/login/register.html')

# 执行注册
def myhome_doregister(request):
   return HttpResponse('myhome_doregister')

进入templates/myhome,创建login.html,并输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en" class="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>
            Flyme 账号 - 登录
        </title>
        <meta name="description" content="欢迎登录和注册 Flyme 账号，您可以体验手机云服务功能，包括：在线下载应用，同步手机数据和查找手机等，让您的手机管理更加智能。"/>
        <meta name="keywords" content="魅族  meizu 登录flyme 云服务  查找手机  充值账号  MX M9 MX2"
        />
        <link href="/static/myhome/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon"
        />
        <link href="/static/myhome/public/img/favicon.ico" rel="icon" type="image/x-icon">
        <!-- Bootstrap -->
        <link href="/static/myhome/public/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="/static/myhome/public/js/jquery-1.12.4.min.js">
        </script>
        <!-- Include all compiled plugins (below), or include individual files
        as needed -->
        <script src="/static/myhome/public/js/bootstrap.min.js">
        </script>
        <!-- 兼任ie9以下 -->
        <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js">
            </script>
            <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js">
            </script>
        <![endif]-->
        <!-- 自定义 -->
        <link rel="stylesheet" type="text/css" href="/static/myhome/public/css/global.css">
        <link rel="stylesheet" type="text/css" href="/static/myhome/public/css/register.css">
        <script type="text/javascript" src="/static/myhome/public/js/rem.js">
        </script>
        <script type="text/javascript" src="/static/myhome/public/js/topNav.js">
        </script>
    </head>

    <body>
        <!-- 导航 -->
        <div class="layout-header hidden-xs hidden-sm" id="scroll-wrap">
            <nav class="navbar navbar-default header ">
                <div class="container clearfix">
                    <div class="layout-header-logo navbar-left">
                        <a target="_blank" href="./index.html" class="layout-header-logo-link"
                        alt="魅族科技">
                            <img src="/static/myhome/public/img/logo.png">
                        </a>
                    </div>
                </div>
            </nav>
        </div>
        <!-- 导航 E-->
        <!-- 主内容区域 -->
        <div id="content" class="content">
            <div class="container-fluid">
                <div class="banner-box hidden-xs hidden-sm">
                    <div class="container">
                        <form action="{% url 'myhome_dologin' %}" method="post" id="mainForm" class="main-form">
                            {% csrf_token %}
                            <div class="tab-title">
                                <a class="linkAGray" id="toAccountLogin" href="javascript:void(0);">
                                    账号登录
                                </a>
                            </div>
                            <div class="tip-box visiblility-hidden">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <i class="glyphicon glyphicon-exclamation-sign">
                                    </i>
                                    <span class="tip-font">
                                    </span>
                                    <span aria-hidden="true" class="cha">
                                        &times;
                                    </span>
                                </button>
                            </div>
                            <div class="normalInput cycode-box fieldInput" id="cycode-box">
                                <div class="cycode-selectbox">
                                    <input class="ipt-account inp-focus" name="phone" id="account" required maxlength="50"
                                    placeholder="手机号" autocomplete="off">
                                </div>
                            </div>
                            <div class="normalInput fieldInput passwd-box">
                                <input class="inp-focus" name="password" id="password" required maxlength="16"
                                placeholder="密码" autocomplete="off" type="password">
                            </div>
                            <a id="register" class="fullBtnBlue">
                                登录
                            </a>
                            <div class="transferField">
                                <a class="go2forgetpwd linkABlue rememberFieldForA" href="#">
                                    忘记密码?
                                </a>
                                <a class="go2register linkABlue" href="{% url 'myhome_register' %}" id="toRegister">
                                    注册
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
        <!-- 主内容区域 E-->
        <!-- 底部区域 -->
        <div id="flymeFooter " class="footerWrap hidden-xs hidden-sm">
            <div class="container">
                <div class="footer-layer1">
                    <div class="footer-innerLink">
                        <a href="#" target="_blank" title="关于魅族">
                            关于魅族
                        </a>
                        <img class="foot-line" src="/static/myhome/public/img/space.gif">
                        <a href="#" target="_blank" title="工作机会">
                            工作机会
                        </a>
                        <img class="foot-line" src="/static/myhome/public/img/space.gif">
                        <a href="#" target="_blank" title="联系我们">
                            联系我们
                        </a>
                        <img class="foot-line" src="/static/myhome/public/img/space.gif">
                        <a href="#" target="_blank" title="法律声明">
                            法律声明
                        </a>
                        <img class="foot-line" src="/static/myhome/public/img/space.gif">
                        <div href="javascript:void(0);" id="globalName" class="footer-language"
                        title="简体中文">
                            简体中文&nbsp;&nbsp;&nbsp;
                            <div id="globalContainer" class="footer-language_menu">
                                <a href="#" id="i18n-link" title="English" class="ClobalItem">
                                    English
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="footer-service">
                        <span class="service-label">
                            客服热线
                        </span>
                        <span class="service-num">
                            400-788-3333
                        </span>
                        <a id="service-online" class="service-online" href="javascript:void(0);"
                        title="在线客服">
                            在线客服
                        </a>
                    </div>
                    <div class="footer-outerLink">
                        <a class="footer-sinaMblog" href="#" target="_blank">
                            <i class="i_icon">
                            </i>
                        </a>
                        <a id="footer-weChat" class="footer-weChat" href="javascript:void(0);"
                        target="_blank">
                            <i class="i_icon">
                            </i>
                        </a>
                        <a class="footer-qzone" href="#" target="_blank">
                            <i class="i_icon">
                            </i>
                        </a>
                    </div>
                </div>
                <div class="clear">
                </div>
                <div id="flymeCopyright" class="copyrightWrap">
                    <div class="copyrightInner">
                        <span>
                            &copy;2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.
                        </span>
                        <a href="#" class="linkAGray" target="_blank">
                            备案号: 粤ICP备13003602号-4
                        </a>
                        <a href="#" class="linkAGray" target="_blank">
                            经营许可证编号: 粤B2-20130198
                        </a>
                        <a target="_blank" href="#" class="linkAGray">
                            营业执照
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部区域 E -->
        <script type="text/javascript">
            //
            // nLogin();

            $('#register').click(function(){
                // 获取当前元素的父级 表单
                $(this).parents('form').submit()
            })
        </script>
    </body>

</html>

进入templates/myhome/index,然后创建register.html,并输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en" class="">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>
            Flyme 账号 - 注册
        </title>
        <meta name="description" content="欢迎登录和注册 Flyme 账号，您可以体验手机云服务功能，包括：在线下载应用，同步手机数据和查找手机等，让您的手机管理更加智能。">
        <meta name="keywords" content="魅族 meizu 登录flyme 云服务 查找手机 充值账号 MX M9 MX2">
        <link href="/static/myhome/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon"
        />
        <link href="/static/myhome/public/img/favicon.ico" rel="icon" type="image/x-icon">
        <!-- Bootstrap -->
        <link href="/static/myhome/public/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="/static/myhome/public/js/jquery-1.12.4.min.js">
        </script>
        <!-- Include all compiled plugins (below), or include individual files
        as needed -->
        <script src="/static/myhome/public/js/bootstrap.min.js">
        </script>
        <!-- 兼任ie9以下 -->
        <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js">
            </script>
            <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js">
            </script>
        <![endif]-->
        <!-- 自定义 -->
        <link rel="stylesheet" type="text/css" href="/static/myhome/public/css/global.css">
        <link rel="stylesheet" type="text/css" href="/static/myhome/public/css/register.css">
        <script type="text/javascript" src="/static/myhome/public/js/rem.js">
        </script>
        <script type="text/javascript" src="/static/myhome/public/js/topNav.js">
        </script>
    </head>

    <body>
        <!-- 导航 -->
        <div class="layout-header hidden-xs hidden-sm" id="scroll-wrap">
            <nav class="navbar navbar-default header ">
                <div class="container clearfix">
                    <div class="layout-header-logo navbar-left">
                        <a target="_blank" href="./index.html" class="layout-header-logo-link"
                        alt="魅族科技">
                            <img src="/static/myhome/public/img/logo.png">
                        </a>
                    </div>
                </div>
            </nav>
        </div>
        <!-- 导航 E-->
        <!-- 主内容区域 -->
        <div id="content" class="content">
            <div class="container-fluid">
                <div class="banner-box hidden-xs hidden-sm">
                    <div class="container">
                        <form action="{% url 'myhome_doregister' %}" method="POST" id="mainForm" class="main-form">
                            <div class="tab-title">
                                <a class="linkABlue" id="toTelRegister" href="javascript:void(0)">
                                    注册 Flyme 账号
                                </a>
                            </div>
                            <div class="tip-box visiblility-hidden">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <i class="glyphicon glyphicon-exclamation-sign">
                                    </i>
                                    <span class="tip-font">
                                        请输入合法的手机号码
                                    </span>
                                    <span aria-hidden="true" class="cha">
                                        &times;
                                    </span>
                                </button>
                            </div>
                            <div class="normalInput cycode-box fieldInput" >
                                <div class="cycode-selectbox">
                                    <input class="ipt-account inp-focus" name="nikename" required maxlength="50"
                                    placeholder="昵称" autocomplete="off">
                                </div>
                            </div>
                            <div class="normalInput cycode-box fieldInput" id="cycode-box">
                                <div class="cycode-selectbox">
                                    <input class="ipt-account inp-focus" name="phone" id="account" required maxlength="50"
                                    placeholder="手机号" autocomplete="off">
                                </div>
                            </div>
                            <div class="normalInput fieldInput passwd-box">
                                <input class="inp-focus" name="password" id="password" required maxlength="16"
                                placeholder="密码" autocomplete="off" type="password">
                            </div>
                            <div class="normalInput fieldInput passwd-box" style="position: relative;">
                                <input class="inp-focus" name="vcode"  required maxlength="16"
                                placeholder="手机验证码" autocomplete="off" type="text">
                                <button type="button" id="SendMsg" style="position: absolute;top:10px;right:2px;height: 30px;line-height: 30px;">发送短信</button>
                            </div>
                            <div id="flymeService" class="rememberField" style="font-size:12px;">
                                <label class="pointer" for="acceptFlyme" tabindex="0">
                                    点击立即注册，即表示您同意并愿意遵守
                                </label>
                                <a href="/serviceAgreement" target="_blank" class="linkABlue">
                                    Flyme服务协议
                                </a>
                                <label class="pointer">
                                    和
                                </label>
                                <a href="#" target="_blank" class="linkABlue">
                                    法律声明
                                </a>
                            </div>
                            <a id="nextStep" class="fullBtnBlue register-btn" data-step="1">
                                立即注册
                            </a>
                            <div class="transferField">
                                <a class="go2register linkABlue" href="{% url 'myhome_login' %}" id="toLogin">
                                    登录
                                </a>
                            </div>
                            {% csrf_token %}
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主内容区域 E-->
        <!-- 底部区域 -->
        <div id="flymeFooter " class="footerWrap hidden-xs hidden-sm">
            <div class="container">
                <div class="footer-layer1">
                    <div class="footer-innerLink">
                        <a href="#" target="_blank" title="关于魅族">
                            关于魅族
                        </a>
                        <img class="foot-line" src="/static/myhome/public/img/space.gif">
                        <a href="#" target="_blank" title="工作机会">
                            工作机会
                        </a>
                        <img class="foot-line" src="/static/myhome/public/img/space.gif">
                        <a href="#" target="_blank" title="联系我们">
                            联系我们
                        </a>
                        <img class="foot-line" src="/static/myhome/public/img/space.gif">
                        <a href="#" target="_blank" title="法律声明">
                            法律声明
                        </a>
                        <img class="foot-line" src="/static/myhome/public/img/space.gif">
                        <div href="javascript:void(0);" id="globalName" class="footer-language"
                        title="简体中文">
                            简体中文&nbsp;&nbsp;&nbsp;
                            <div id="globalContainer" class="footer-language_menu">
                                <a href="#" id="i18n-link" title="English" class="ClobalItem">
                                    English
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="footer-service">
                        <span class="service-label">
                            客服热线
                        </span>
                        <span class="service-num">
                            400-788-3333
                        </span>
                        <a id="service-online" class="service-online" href="javascript:void(0);"
                        title="在线客服">
                            在线客服
                        </a>
                    </div>
                    <div class="footer-outerLink">
                        <a class="footer-sinaMblog" href="#" target="_blank">
                            <i class="i_icon">
                            </i>
                        </a>
                        <a id="footer-weChat" class="footer-weChat" href="javascript:void(0);"
                        target="_blank">
                            <i class="i_icon">
                            </i>
                        </a>
                        <a class="footer-qzone" href="#" target="_blank">
                            <i class="i_icon">
                            </i>
                        </a>
                    </div>
                </div>
                <div class="clear">
                </div>
                <div id="flymeCopyright" class="copyrightWrap">
                    <div class="copyrightInner">
                        <span>
                            &copy;2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.
                        </span>
                        <a href="#" class="linkAGray" target="_blank">
                            备案号: 粤ICP备13003602号-4
                        </a>
                        <a href="#" class="linkAGray" target="_blank">
                            经营许可证编号: 粤B2-20130198
                        </a>
                        <a target="_blank" href="#" class="linkAGray">
                            营业执照
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部区域 E -->
        <script type="text/javascript">
            // 绑定单击事件,获取手机号,发送短信验证
            $('#SendMsg').click(function(){
                // 获取手机号
                var phone = $('#account').val()
                // 验证手机号是否正确
                reg = /^\d{11}$/
                if(reg.test(phone)){
                    // 发送短信验证码
                    $.get('{% url 'myhome_sendMsg' %}',{'phone':phone},function(data){
                        // console.log(data)
                        // 设置按钮不可点击,倒计时
                        $('#SendMsg').attr("disabled",true);
                        setTimeout(function(){$('#SendMsg').attr("disabled",false)}, 60 * 1000);
                    },'json')
                }
            })
            $('#nextStep').click(function(){
                // 获取当前元素的父级 表单
                $(this).parents('form').submit()
            })
        </script>
    </body>
</html>

登录、注册和退出

进入应用myhome/views/LoginViews.py,并修改myhome_dologin、myhome_doregister、myhome_logout函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 执行登录
def myhome_dologin(request):
  # 验证手机号 用户是否存在
  try:
      ob = Users.objects.get(phone=request.POST['phone'])
      # 验证密码
      res =  check_password(request.POST['password'],ob.password)
      if res:
          # 验证成功
          request.session['VipUser'] = {'uid':ob.id,'nikename':ob.nikename,'phone':ob.phone,'pic_url':ob.pic_url}
          return HttpResponse('<script>alert("登录成功");location.href="'+reverse('myhome_index')+'";</script>')
  except:
      pass

  return HttpResponse('<script>alert("手机号或密码不正确");history.back(-1);</script>')

# 执行注册
def myhome_doregister(request):
  try:
      # 接收表单注册的数据
      data = request.POST.dict()
      data.pop('csrfmiddlewaretoken')

      # 删除表单中的 vcode
      data.pop('vcode')
      # # 验证手机号是否存在
      # res = Users.objects.filter(phone=data['phone']).count()
      # if res:
      #     # 手机号已存在
      #     return HttpResponse('<script>alert("手机号已存在");history.back(-1);</script>')
      # 密码进行加密处理
      data['password'] = make_password(data['password'], None, 'pbkdf2_sha256')

      # 执行注册 ,数据的添加
      ob = Users(**data)
      ob.save()
      return HttpResponse('<script>alert("注册成功,请登录");location.href="'+reverse('myhome_login')+'";</script>')
  except:
      pass
  return HttpResponse('<script>alert("注册失败,请联系管理员");location.href="'+reverse('myhome_register')+'";</script>')

# 退出登录
def myhome_logout(request):
  del request.session['VipUser']
  return HttpResponse('<script>alert("退出登录");location.href="'+reverse('myhome_index')+'";</script>')

注册的短信验证码

进入应用myhome里的urls.py,并增加路径

1
2
# 短信发送
url(r'^sendMsg/',LoginViews.myhome_sendMsg,name="myhome_sendMsg"),

进入应用myhome/views,创建LoginViews.py,并增加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# 短信发送...
def myhome_sendMsg(request):
  import random
  # 接收手机号码
  phone = request.GET.get('phone')
  # 随机验证码
  code = str(random.randint(10000,99999))
  # 把验证码存入session
  request.session['msgcode'] = {'code':code,'phone':phone}
  # 调用方法 发送短信验证
  res = hywx_send(phone,code)
  # 返回json数据
  return JsonResponse(res)

def hywx_send(mobile,code):
  #接口类型：互亿无线触发短信接口，支持发送验证码短信、订单通知短信等。
  #账户注册：请通过该地址开通账户http://user.ihuyi.com/register.html
  #注意事项：
  #（1）调试期间，请用默认的模板进行测试，默认模板详见接口文档；
  #（2）请使用 用户名 及 APIkey来调用接口，APIkey在会员中心可以获取；
  #（3）该代码仅供接入互亿无线短信接口参考使用，客户可根据实际需要自行编写；
  # import urllib2
  import urllib
  import urllib.request
  import json

  #用户名 查看用户名请登录用户中心->验证码、通知短信->帐户及签名设置->APIID
  account  = "C38835597"
  #密码 查看密码请登录用户中心->验证码、通知短信->帐户及签名设置->APIKEY
  password = "b51ce646656d57b3b3a6051e4aaa1a8d"
  # mobile = request.GET.get('phone')

  text = "您的验证码是："+code+"。请不要把验证码泄露给其他人。"
  data = {'account': account, 'password' : password, 'content': text, 'mobile':mobile,'format':'json' }
  # req = urllib.request.urlopen(
  #     url= 'http://106.ihuyi.com/webservice/sms.php?method=Submit',
  #     data= urllib.parse.urlencode(data).encode('utf-8')
  # )
  # 获取接口响应的内容
  # content = req.read()
  # res = json.loads(content.decode('utf-8'))
  res = {'code':2,'msg':'提交成功','id':'1111','yzm':code}
  return res