有意思的SweetAlert以及Cookie

SweetAlert for Bootstrap
JavaScript的“警报”的美丽替代品
https://lipis.github.io/bootstrap-sweetalert/

下载地址：https://github.com/lipis/bootstrap-sweetalert

# 出版社的删除操作
# html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'sweetalert/sweetalert.css' %}">
    <style>
        div.sweet-alert.showSweetAlert h2 {
            margin-top: 30px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 70px">
            <a href="/logout/">注销</a>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>出版社名称</th>
                    <th>出版社地址</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for publisher in publisher_list %}
                    <tr pid="{{ publisher.id }}">
                        <td>{{ forloop.counter }}</td>
                        <td>{{ publisher.name }}</td>
                        <td>{{ publisher.city }}</td>
                        <td>
                            <button class="btn btn-warning">编辑</button>
                            <button class="btn btn-danger delete-btn">删除</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% csrf_token %}

<script src="{% static 'jquery.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7/js/bootstrap.js' %}"></script>
<script src="{% static 'sweetalert/sweetalert.js' %}"></script>
<script>
    $('.delete-btn').click(function () {
        var deleteId = $(this).parent().parent().attr('pid');
        swal({
                title: "你确定要删除吗？",
                text: "删除就找不回来了！",
                type: "warning",  // success/info/warning/error
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                showLoaderOnConfirm: true,  // 点击确认按钮之后会有一个加载的动画
                closeOnConfirm: false
            },
            function () {  // 当点击确认按钮的时候会执行这个匿名函数
                $.ajax({
                    url: '/delete_publisher/',
                    type: 'post',
                    data: {id: deleteId, csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()},
                    success: function (res) {
                        if (res.code === 0){
                            // 删除成功
                            // 在页面上删除当前行数据
                            var $currentTr = $('[pid='+deleteId +']');
                            // 更新序号
                            // 1. 先找到当前行后面所有的tr
                             $currentTr.nextAll('tr');
                            // 2. 每一个tr的第一个td 依次 -1
                            $currentTr.nextAll('tr').each(function () {
                                var num = $(this).children().eq(0).text()-1;
                                $(this).children().eq(0).text(num);
                            });
                            // 删掉当前行
                            $currentTr.remove();
                            // 弹框提示
                            swal('删除成功', '准备跑路吧！', 'success');

                        }else {
                            // 删除失败
                            swal('删除失败', res.err_msg, 'error');
                        }
                    }
                })
            });
    })
</script>
</body>
</html>

# views视图函数
def delete_publisher(request):
    # 取到删除id
    delete_id = request.POST.get('id')
    res = {'code': 0}
    try:
        Publisher.objects.filter(id=delete_id).delete()
    except Exception as e:
        res['code'] = 1
        res['err_msg'] = str(e)
    return JsonResponse(res)

应用实例

Cookie的由来
大家都知道HTTP协议是无状态的。
无状态的意思是每次请求都是独立的，它的执行情况和结果与前面的请求和之后的请求都无直接关系，它不会受前面的请求响应情况直接影响，也不会直接影响后面的请求响应情况。
一句有意思的话来描述就是人生只如初见，对服务器来说，每次的请求都是全新的。
状态可以理解为客户端和服务器在某次会话中产生的数据，那无状态的就以为这些数据不会被保留。会话中产生的数据又是我们需要保存的，也就是说要“保持状态”。因此Cookie就是在这样一个场景下诞生。

什么是Cookie
Cookie具体指的是一段小信息，它是服务器发送出来存储在浏览器上的一组组键值对，下次访问服务器时浏览器会自动携带这些键值对，以便服务器提取有用信息。

Cookie的原理
cookie的工作原理是：由服务器产生内容，浏览器收到请求后保存在本地；当浏览器再次访问时，浏览器会自动带上Cookie，这样服务器就能通过Cookie的内容来判断这个是“谁”了。

查看Cookie

Django中操作Cookie
设置Cookie
     针对响应对象做操作
     set_cookie('key', 'value')
读取Cookie
     request.COOKIES             --> 大字典
     request.COOKIES.get('key')  --> 取值

参数：
    key, 键
value='', 值
    max_age=None, 超时时间
expires=None, 超时时间(IE requires expires, so set it if hasn't been already.)
    path='/', Cookie生效的路径，/ 表示根路径，特殊的：根路径的cookie可以被任何url的页面访问
domain=None, Cookie生效的域名
    secure=False, https传输
httponly=False 只能http协议传输，无法被JavaScript获取（不是绝对，底层抓包可以获取到也可以被覆盖）
    default: 默认值
salt: 加密盐
    max_age: 后台控制过期时间

# 删除Cookie
def logout(request):
    rep = redirect("/login/")
    rep.delete_cookie("user")  # 删除用户浏览器上之前设置的usercookie值
    return rep

def check_login(func):
    @wraps(func)
    def inner(request, *args, **kwargs):
        next_url = request.get_full_path()
        if request.get_signed_cookie("login", salt="SSS", default=None) == "yes":
            # 已经登录的用户...
            return func(request, *args, **kwargs)
        else:
            # 没有登录的用户，跳转刚到登录页面
            return redirect("/login/?next={}".format(next_url))
    return inner


def login(request):
    if request.method == "POST":
        username = request.POST.get("username")
        passwd = request.POST.get("password")
        if username == "xxx" and passwd == "dashabi":
            next_url = request.GET.get("next")
            if next_url and next_url != "/logout/":
                response = redirect(next_url)
            else:
                response = redirect("/class_list/")
            response.set_signed_cookie("login", "yes", salt="SSS")
            return response
    return render(request, "login.html")

Cookie版登陆校验

posted @ 2018-11-13 21:30 .why 阅读(273) 评论(0) 收藏举报

刷新页面返回顶部

Ethan

一贫如洗怎敢入繁华，
两袖清风怎敢误佳人。

有意思的SweetAlert以及Cookie

公告

Ethan

一贫如洗怎敢入繁华， 两袖清风怎敢误佳人。

有意思的SweetAlert以及Cookie

公告

一贫如洗怎敢入繁华，
两袖清风怎敢误佳人。