首先处理个人信息的显示

邮箱绑定：

首先给用户的模型类里添加一个字段来说明用户的邮箱是否激活

然后数据库迁移

python manage.py makemigrations

python manage.py migrate

返回用户信息：

后端接口设计

根据接口增加视图逻辑

而get中的逻辑，其实就是获取详情的逻辑，所以我们可以继承RetrieveModelMixin

还可以直接继承RetrieveAPIView：

结果如下

序列化器如下

指定查询集

但是RetrieveAPI中获取详情数据的url是/users/<pk>/而我们设计的接口是/user/。

那只能重写get_object了：

怎么获取user对象

而这里我们压根不用查询数据库，因为我们直接返回登录成功的用户信息即可，关键就是如何获取登录成功的用户。

如何获取用户呢？之前在讲django的时候，说过HttpRequest对象中就有这个已经登录的用户对象user：

最后，如下

由于这个视图是需要用户登录之后才能访问，所以用DRF提供的认证授权机制

APIView支持的属性如下：

permission_classes

权限使用方式如下：

选择下面的那种方法

最终代码如下

到这里后端接口完成。

测试登录成功

最后附上前端代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>美多商城-用户中心</title>

    <link rel="stylesheet" type="text/css" href="css/reset.css">

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script type="text/javascript" src="js/host.js"></script>

    <script type="text/javascript" src="js/vue-2.5.16.js"></script>

    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>

    <script>

        var user_id = sessionStorage.user_id || localStorage.user_id;

        var token = sessionStorage.token || localStorage.token;

        if (!(user_id && token)) {

            location.href = '/login.html?next=/user_center_info.html';

        }

    </script>

</head>

<body>

    <div id="app" v-cloak>

    <div class="header_con">

        <div class="header">

            <div class="welcome fl">欢迎来到美多商城!</div>

            <div class="fr">

                <div class="login_btn fl">

                    欢迎您：<em>{{ username }}</em>

                    <span>|</span>

                    <a @click="logout">退出</a>

                </div>

                <div class="user_link fl">

                    <span>|</span>

                    <a href="user_center_info.html">用户中心</a>

                    <span>|</span>

                    <a href="cart.html">我的购物车</a>

                    <span>|</span>

                    <a href="user_center_order.html">我的订单</a>

                </div>

            </div>

        </div>

    </div>

    <div class="search_bar clearfix">

        <a href="index.html" class="logo fl"><img src="data:images/logo.png"></a>

        <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>

        <form method="get" action="/search.html" class="search_con fr mt40">

            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">

            <input type="submit" class="input_btn fr" name="" value="搜索">

        </form>

    </div>

    <div class="main_con clearfix">

        <div class="left_menu_con clearfix">

            <h3>用户中心</h3>

            <ul>

                <li><a href="user_center_info.html" class="active">· 个人信息</a></li>

                <li><a href="user_center_order.html">· 全部订单</a></li>

                <li><a href="user_center_site.html">· 收货地址</a></li>

                <li><a href="user_center_pass.html">· 修改密码</a></li>

            </ul>

        </div>

        <div class="right_content clearfix">

                <div class="info_con clearfix">

                <h3 class="common_title2">基本信息</h3>

                        <ul class="user_info_list">

                            <li><span>用户名：</span>{{ username }}</li>

                            <li><span>手机号：</span>{{ mobile }}</li>

                            <li>

                                <span>Email：</span>

                                <div v-if="set_email">

                                    <input v-model="email" type="email" name="email">

                                    <input @click="save_email" type="button" name="" value="保 存">

                                    <input @click="set_email=false" type="reset" name="" value="取 消">

                                    <div v-if="email_error">邮箱格式错误</div>

                                </div>

                                <div v-else-if="email">

                                    {{ email }}

                                    <div v-if="email_active">已验证</div>

                                    <div v-else>

                                        待验证<input @click="save_email" :disabled="send_email_btn_disabled" type="button" :value="send_email_tip">

                                    </div>

                                </div>

                                <div v-else>

                                    <input @click="set_email=true" type="button" name="" value="设 置">

                                </div>

                            </li>

                        </ul>

                </div>

                <h3 class="common_title2">最近浏览</h3>

                <div class="has_view_list">

                    <ul class="goods_type_list clearfix">

                <li>

                    <a href="detail.html"><img src="data:images/goods/goods003.jpg"></a>

                    <h4><a href="detail.html">360手机 N6 Pro 全网通</a></h4>

                    <div class="operate">

                        <span class="prize">￥2699.00</span>

                        <span class="unit">台</span>

                        <a href="#" class="add_goods" title="加入购物车"></a>

                    </div>

                </li>

                <li>

                    <a href="#"><img src="data:images/goods/goods004.jpg"></a>

                    <h4><a href="#">360手机 N6 Pro 全网通</a></h4>

                    <div class="operate">

                        <span class="prize">￥2699.00</span>

                        <span class="unit">台</span>

                        <a href="#" class="add_goods" title="加入购物车"></a>

                    </div>

                </li>

                <li>

                    <a href="#"><img src="data:images/goods/goods005.jpg"></a>

                    <h4><a href="#">360手机 N6 Pro 全网通</a></h4>

                    <div class="operate">

                        <span class="prize">￥2699.00</span>

                        <span class="unit">台</span>

                        <a href="#" class="add_goods" title="加入购物车"></a>

                    </div>

                </li>

                <li>

                    <a href="#"><img src="data:images/goods/goods006.jpg"></a>

                    <h4><a href="#">360手机 N6 Pro 全网通</a></h4>

                    <div class="operate">

                        <span class="prize">￥2699.00</span>

                        <span class="unit">台</span>

                        <a href="#" class="add_goods" title="加入购物车"></a>

                    </div>

                </li>

                <li>

                    <a href="#"><img src="data:images/goods/goods007.jpg"></a>

                    <h4><a href="#">急速路由</a></h4>

                    <div class="operate">

                        <span class="prize">￥64.5</span>

                        <span class="unit">6.45/500g</span>

                        <a href="#" class="add_goods" title="加入购物车"></a>

                    </div>

                </li>

            </ul>

        </div>

            </div>

    </div>

    <div class="footer">

        <div class="foot_link">

            <a href="#">关于我们</a>

            <span>|</span>

            <a href="#">联系我们</a>

            <span>|</span>

            <a href="#">招聘人才</a>

            <span>|</span>

            <a href="#">友情链接</a>

        </div>

        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>

        <p>电话：010-****888    京ICP备*******8号</p>

    </div>

</div>

<script type="text/javascript" src="js/user_center_info.js"></script>

</body>

</html>

js代码

var vm = new Vue({

    el: '#app',

    data: {

        host,

        user_id: sessionStorage.user_id || localStorage.user_id,

        token: sessionStorage.token || localStorage.token,

        username: '',

        mobile: '',

        email: '',

        email_active: false,

        set_email: false,

        send_email_btn_disabled: false,

        send_email_tip: '重新发送验证邮件',

        email_error: false,

    },

    mounted: function(){

        // 判断用户的登录状态

        if (this.user_id && this.token) {

            axios.get(this.host + '/user/', {

                    // 向后端传递JWT token的方法

                    headers: {

                        'Authorization': 'JWT ' + this.token

                    },

                    responseType: 'json',

                })

                .then(response => {

                    // 加载用户数据

                    this.user_id = response.data.id;

                    this.username = response.data.username;

                    this.mobile = response.data.mobile;

                    this.email = response.data.email;

                    this.email_active = response.data.email_active;

                })

                .catch(error => {

                    if (error.response.status==401 || error.response.status==403) {

                        location.href = '/login.html?next=/user_center_info.html';

                    }

                });

        } else {

            location.href = '/login.html?next=/user_center_info.html';

        }

    },

    methods: {

        // 退出

        logout: function(){

            sessionStorage.clear();

            localStorage.clear();

            location.href = '/login.html';

        },

        // 保存email

        save_email: function(){

        }

    }

});

Django商城项目笔记No.13用户部分-用户中心个人信息的更多相关文章

  1. Django商城项目笔记No.12用户部分-QQ登录2获取QQ用户openid

    Django商城项目笔记No.12用户部分-QQ登录2获取QQ用户openid 上一步获取QQ登录网址之后,测试登录之后本该跳转到这个界面 但是报错了: 新建oauth_callback.html & ...

  2. Django商城项目笔记No.11用户部分-QQ登录1获取QQ登录网址

    Django商城项目笔记No.11用户部分-QQ登录 QQ登录,亦即我们所说的第三方登录,是指用户可以不在本项目中输入密码,而直接通过第三方的验证,成功登录本项目. 若想实现QQ登录,需要成为QQ互联 ...

  3. Django商城项目笔记No.10用户部分-登录接口

    Django商城项目笔记No.10用户部分-登录接口 添加url路由 接下来第二步,增加返回内容: 增加结果如下: 配置:上边的方法定义了返回的内容都有哪些,那这个方法jwt还不知道,需要配置: 修改 ...

  4. Django商城项目笔记No.9用户部分-注册接口签发JWTtoken

    Django商城项目笔记No.9用户部分-注册接口签发JWTtoken 我们在验证完用户的身份后(检验用户名和密码),需要向用户签发JWT,在需要用到用户身份信息的时候,还需核验用户的JWT. 关于签 ...

  5. Django商城项目笔记No.8用户部分-注册接口实现

    Django商城项目笔记No.8用户部分-注册接口实现 users的view.py中增加如下代码 class RegisterUserView(CreateAPIView): "" ...

  6. Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在

    Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在 判断用户名是否存在 后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...

  7. Django商城项目笔记No.6用户部分-注册接口-短信验证码实现celery异步

    Django商城项目笔记No.4用户部分-注册接口-短信验证码实现celery异步 接上一篇,如何解决前后端请求跨域问题? 首先想一下,为什么图片验证码请求的也是后端的api.meiduo.site: ...

  8. Django商城项目笔记No.5用户部分-注册接口-短信验证码

    Django商城项目笔记No.4用户部分-注册接口-短信验证码 短信验证码也保存在redis里(sms_code_15101234567) 在views中新增SMSCodeView类视图,并且写出步骤 ...

  9. Django商城项目笔记No.4用户部分-注册接口-图片验证码

    Django商城项目笔记No.4用户部分-注册接口-图片验证码 1.首先分析注册业务接口 1.1.分析可得,至少这么几个接口 图片验证码 短信验证码 用户名是否存在 手机号是否存在 整体注册接口 图片 ...

随机推荐

  1. 网络之XML解析－GData

    GDataXML是一套Google使用Objective-C开发的DOM方式XML解析类库,支持读取和修改XML文档,支持XPath方式查询, GDataXML 是 iOS 下的一款轻量级 XML 解 ...

  2. 使用iframe实现同域跨站提交数据

    有一个已经编译的asp.net 1.1的网站.为了改进录入的效率,改为由barcode扫描枪来替代手动.由于在扫描枪添加其它信息.原录入窗口已经无法适应.另外程序虽然跑的是存储过程,但交易的trans ...

  3. Spring Security基本配置

    Spring Security 是一个功能强大且可高度自定义的身份验证和访问控制框架. 它是保护基于Spring的应用程序的事实上的标准.Spring Security 是一个专注于为Java应用程序 ...

  4. centos7配置java环境

    首先自行下载jdk的tar.gz的包,上传至相应服务器目录下,比如我的是:/usr/java下,然后解压缩,之后进行如下操作: 注意要修改/etc/profile文件,在末尾添加内容: export ...

  5. JS forEach()与map() 用法(转载)

    JavaScript中的数组遍历forEach()与map()方法以及兼容写法   原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,ind ...

  6. Java中类的线程安全问题

    java中各种集合(字符串类)的线程安全性!!! 一.概念: 线程安全:就是当多线程访问时,采用了加锁的机制:即当一个线程访问该类的某个数据时,会对这个数据进行保护,其他线程不能对其访问,直到该线程读 ...

  7. ActivityManagerService原理&源码

    https://www.kancloud.cn/alex_wsc/android-deep2/413386 http://wiki.jikexueyuan.com/project/deep-andro ...

  8. （三）MongoDB数据库注意

    1.数据库名 数据库也通过名字来标识.数据库名可以是满足以下条件的任意UTF-8字符串. 不能是空字符串(""). 不得含有' '(空格)...$./.\和\0 (空字符). 应全 ...

  9. ES6中声明变量 let和const特点

    在ES6中我们有两种定义变量的方式:let    const let特点: 1.let定义时不会进行变量声明提升 2.变量不允许被重复定义 3.变量不可以被删除 4.在for循环当中用let定义i 循 ...

  10. nginx禁止ip默认参数是$remote_addr无法禁止真实ip的问题

    由于网站使用了cdn所以$remote_addr获取的ip是cdn的ip,我现在先禁止某些ip访问发现无法禁止cdn传递过来的客户端的ip也就是$http_x_forwarded_for这个参数.比如 ...