首先处理个人信息的显示

邮箱绑定：

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

然后数据库迁移

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. js闭包应用

    先来看一个例子: function foo() { var a = 10; function bar() { a *= 2; return a; } return bar; } var baz = f ...

  2. MVC母版页_Layout.cshtml

    记得在asp.net时候,我们常会使用母版页MasterPage.而在MVC也有此功能,应用起来比MasterPage更加便捷. 在本次练习之前,所有MVC的练习均是创建单独的网页.Insus.NET ...

  3. C#读取“我的文档”等特殊系统路径及环境变量

    返回“我的文档”路径字符串 Environment.GetFolderPath(Environment.SpecialFolder.Personal) 本技巧使用GetFolderPath方法来获取指 ...

  4. 如何通过DataGridView 实现单元格合并和二维表头

    先看下实现出来的效果(这里随便写了几组数据,用来测试) 先初始一个DataGridView 设置哪几列 DataGridView 里男女这两列的 AutoSizeMode 可以设置Fill. publ ...

  5. Spring依赖包

    spring框架jar包 1.下载spring源包spring地址:http://www.springsource.org/download我下的是spring-framework-3.1.0.REL ...

  6. 【公众号转载】MyBatis拦截器原理探究

    MyBatis拦截器介绍 MyBatis提供了一种插件(plugin)的功能,虽然叫做插件,但其实这是拦截器功能.那么拦截器拦截MyBatis中的哪些内容呢? 我们进入官网看一看: MyBatis 允 ...

  7. java基础-基础语法

    一.标识符 java中对各种变量.方法和类等要素命名的时候使用的字符序列称为标识符. java中标识符的命名规则:1.由字母.数字.下划线(_)以及美元符号($)组成 2.标识符应该以字母或者下划线开 ...

  8. Mybatis的枚举处理器

    Mybatis有两个默认枚举处理器 EnumOrdinalTypeHandler EnumTypeHandler 自定义枚举 EnumOrdinalTypeHandler 这个处理器负责将pojo里面 ...

  9. python学习之老男孩python全栈第九期_day015作业_老男孩Python全9期练习题(面试真题模拟)

    一. 选择题(32分) 1. python不支持的数据类型有:AA. charB. intC. floatD. list 2. Ex = ‘foo’y = 2print(x + y)A. fooB. ...

  10. 常见Java问题

    1.泛型的好处 保护了类型安全 避免了强制类型转化 2.final关键字的作用 final修饰的属性是常量 final修饰的方法不可被重写 final修饰的类不能被继承,如:String 3.静态变量 ...