Django 1.11 前端数据异步加载（前端页面单独请求用户登录状态）

前言：
1. 前端使用异步加载的好处：先布置好页面布局，请求回数据后再加入页面中，如图片的加载。能加快网页加载速度。
2. 实现方法：前端用 jq 中的 ajax请求（ajax请求默认异步加载），django后台创建每个请求的接口。
3. 我们这里实现一个前端请求，用户是否登录。

---

后端接口设计

1. 修改views

#请求只需要返回页面，数据通过ajax异步加载
def classify(req):
    return render(req,'classify.html')

from django.http import JsonResponse

#接口：user_session
#请求链接： ./api/user/
#请求参数： 无
#返回参数： status: 200 成功;isLogin: Ture/false 是否登录;username: [username]/'' 用户名
#
def user_session(req):
    context = {'status': 200}
    if 'username' in req.session: #判断username是否在session中
        username = req.session['username']
        context['isLogin'] = True
        context['username'] = username
    else:
        context['isLogin'] = False
        context['username'] = ''
    return JsonResponse(context)#返回json数据

2 . 添加接口到 urls.py

urlpatterns = [
    url(r'^classify/(\d+)/(\d+)/$',views.classify),
    url(r'^api/user/',views.user_session),
]

---

前端页面请求

因为判断用户登录的功能几乎网站每个页面都需要。所以写在templates下 base.html 文件中。记得引入jq。

<!-- 是否登录显示在下面代码中 的 id = "isLogin" 的<div>中 -->
        <div class="w1240">
             <div class="list">
                <a>欢迎来到宝淘</a>
                <a class="rt" href="/taobao">首页</a>
             </div>
             <div class="link" id = "isLogin">
             </div>
             <div class="clear"></div>
        </div>

在 标签前加上js代码

<!-- 获取用户登录数据，并在id = "isLogin" 的<div>中显示 -->
<script>
    $(document).ready(function(){
        $.ajax({
            url: 'http://127.0.0.1:8000/api/user/',
            success: function (res) {
                //接口返回的json 文件 结果在res中
                console.log(res);
                //判断用户是否登录。向 <div>中写入html
                if(res['isLogin'] == true)
                    $(isLogin).html( '<a href="#">' + res['username'] + '</a> <a href="/logout" >退出</a> ');
                else
                    $(isLogin).html('<a href="/login">登录</a> <a class="rt" href="/register">注册</a>');
            }
        })
    })
</script>

结果