【django】用户登录模块 之 用户中心-添加邮箱前后端逻辑【35】

一、添加邮箱前端逻辑

user_center.js

let vue=new Vue({
    el:'#user_center',
    delimiters:['${','}'],
    data:{
        // v-model
        email:'',
        //当前登陆用户的id
        userid:userid,

        error_email:false,
        error_email_msg:'保存邮箱失败！',

    },
    methods:{
        getCookie:function(name){
            var value = '; ' + document.cookie
            var parts = value.split('; ' + name + '=')
            if (parts.length === 2) return
            parts.pop().split(';').shift()
        },
        save_email:function(){
            //给当前等了用户绑定邮箱
            axios.post('/emails/',{
                'email':this.email,
                'userid':this.userid
            },{
                headers:
                    {
                        'X-CSRFToken': this.getCookie('csrftoken')
                    }//解决axios.post跨域访问
            }).then(response=>{
                if(response.data.code=='200') {
                    //刷新页面
                    location.reload();
                    this.error_email = false;
                }else{
                    this.error_email=true;
                    this.error_email_msg=response.data.errormsg;
                }
            }).catch(error=>{
                console.log(error.response);
            });
        }
    }
});

user_center.html

{% extends 'base.html' %}


{% block title %}绑定用户{% endblock %}


{% block css %}
    <link rel="stylesheet" href="/static/css/main.css" />
    <link rel="stylesheet" href="/static/icon/iconfont.css">
    <style>
        .iconsize{
            font-size: 22px;
        }

        .error-tip{
            color: red;
        }

        {# 解决页面闪动问题#}
        [v-cloak]{
            display: none;
        }
    </style>
{% endblock %}





{% block content %}

    <div class="main-content main-content-login">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="breadcrumb-trail breadcrumbs">
						<ul class="trail-items breadcrumb">
							<li class="trail-item trail-begin">
								<a href="index.html">Home</a>
							</li>
							<li class="trail-item trail-end active">
								Authentication
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="content-area col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="site-main">
						<h3 class="custom_blog_title">
							Authentication
						</h3>
						<div class="customer_login">
							<div class="row">

                                <div id="oauth_user"  class="col-lg-6 col-md-6 col-sm-12">
									<div class="login-item">
										<h5 class="title-login">绑定用户
                                            {% if reg_error_msg %}
                                                <span class="error-tip">{{ reg_error_msg }}</span>
                                            {% endif %}


                                        </h5>
                                            <form class="register" method="post" action="/about/" @submit="reg_sub">
                                            {{csrf_input}}
                                            <input type="hidden" name="sec_openid" value="{{ sec_openid }}">


                                            <p class="form-row form-row-wide">

												<input  placeholder="手机号" v-model="phone" @blur="check_phone"  name="phone"  type="text" class="input-text">
											    <span class="error-tip" v-show="error_phone">${error_phone_msg}</span>
                                            </p>

                                            <p class="form-row form-row-wide">

												<input style="width: 250px;" v-model="imgcode" placeholder="图片验证码" @blur="check_imgcode" name="imgcode"  type="text" class="input-text"  >
                                                <img style="height: 40px;float: right;"  :src="imgcode_url">
                                                <span class="error-tip" v-show="error_imgcode">${error_imgcode_msg}</span>


                                            </p>

                                            <p class="form-row form-row-wide">

												<input style="width: 230px;" v-model="smscode" placeholder="短信验证码" @blur="check_smscode" name="msgcode"  type="text" class="input-text" id="reg_mescode" >
											    <span class="error-tip" v-show="error_smscode">${error_smscode_msg}</span>

                                                <a href="javascript:;" style="font-size: 16px;text-align: center;font-weight: normal;float: right" id="reg_mescode_btn" able="able" @click="send_smscode">${smscode_btn}</a>

                                            </p>

                                            <p class="form-row form-row-wide">

												<input  placeholder="设置密码" v-model="password" @blur="check_pwd" name="password"  type="password" class="input-text">
											    <span class="error-tip" v-show="error_password">${error_password_msg}</span>
                                                {% if sms_code_errmsg %}
                                                    <span class="error_tip">{{ sms_code_errmsg }}</span>
                                                {% endif %}
                                                {% if openid_errmsg %}
                                                    <span class="error_tip">{{ openid_errmsg }}</span>
                                                {% endif %}
                                                {% if qq_login_errmsg %}
                                                    <span class="error_tip">{{ qq_login_errmsg }}</span>
                                                {% endif %}
                                            </p>


                                            <input type="hidden" name="access_token_openid" value="{{ access_token_openid }}">
											<p class="">
												<input type="submit"  class="button-submit" style="font-size: 16px;font-weight: normal;" value="保存">
											</p>
										</form>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


<script type="text/javascript" src="{{static('js/oauth/oauth_user.js')}}"></script>

{% endblock %}

二、添加邮箱前端逻辑

4、路由配置

from django.urls import path,re_path
from . import views
from django.contrib.auth.decorators import login_required

urlpatterns=[
    re_path('^register/$',views.RegisterView.as_view()),
    re_path('^usernames/(?P<username>[a-zA-Z_]{5,8})/count/$',views.UsernameCount.as_view()),
    re_path('^logout/$',views.LogoutView.as_view()),
    re_path('^phones/(?P<phone>1[3589][0-9]{9})/count/$',views.PhoneCountView.as_view()),
    re_path('^login/$',views.LoginView.as_view()),
    re_path('^usercenter/$',login_required(views.UserCenterView.as_view())),
    re_path('^emails/$',views.EmailView.as_view())
]

5、创建视图

class EmailView(View):
    def post(self,request):
        '''
        保存当前登陆用户邮箱地址
        :param request:
        :return:
        '''
        #1、接收参数
        params=request.body.decode()

        #2、校验参数
        if params is None:
            return JsonResponse({'code':4001,'errormsg':'缺少必传参数'})

        # 3、保存数据
        # 转型
        dict_params=json.loads(params)

        count=Users.objects.filter(id=dict_params['userid']).update(email=dict_params['email'])

        #4、响应结果
        if count>0:
            return JsonResponse({'code':200,'errormsg':'ok'})
        return JsonResponse({'code':500,'errormsg':'保存失败'})