跟b站武沛齐老师的视频学习
对学习过程进行一些记录以便复习同时自我督促 :D冲鸭

视频链接: 15天django入门到放弃-哔哩哔哩.

文章目录

内容回顾
Bootstrap安装
Fontawesome
响应式
- 导航条
- 栅格
后台管理布局
- 母版与子版
Cookies
总结

内容回顾

SQLHelper
Ajax发送数据
$.ajax({
…
data: {‘k1’: [1, 2, 3, 4]},
traditional:true,
}
加上 traditional:true 可以支持列表，但不支持字典。
字典序列化： data: {‘k2’: JSON.stringfy({k1: v1, …})},

Bootstrap安装

官网下载并解压：

在 static 目录下新建 plugins，将 bootstrap 文件夹复制到该目录下：

在 html 文件中引入：

<head><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"/><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
</head>

根据网站中 Bootstrap 组件，添加对应的样式即可。

Fontawesome

<script src="https://kit.fontawesome.com/c9fd766a29.js" crossorigin="anonymous"></script>

响应式

导航条

在不同宽度情况下显示不同颜色：

 <style>.pg-header {background-color: #1b6d85;height: 48px;}@media (max-width: 900px) {.pg-header {background-color: darksalmon;height: 48px;}}@media (max-width: 700px) {.pg-header {background-color: black;height: 48px;}}</style>

直接应用 Bootstrap 里的导航条：

<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>

栅格

后台管理布局

使得右下部分内容超出屏幕时，滚动条只滚动该部分内容：overflow: scroll;
鼠标浮动时样式：.pg-header .rmenus a:hover{ background-color: #999999; }
边距：padding: 0 15px;
头像显示圆形：border-radius: 50%;
鼠标浮动在头像上时出现 user-info，则 hover 应该设在 avartar 里：.pg-header .avatar:hover .user-info{ display: block; }

不能设在 user-info 上，因为初始时为隐藏状态；
不能设在 img 上，因为那样只能对 img 的子元素做出改变。

将写好的样式打包放入 CSS 文件中：<link rel="stylesheet" href="/static/css/commons.css">
为了方便继承，一般写 3 个block：css、content、js

母版与子版

母版：所有页面公用
子版：继承母版 + 自定义当前页面私有
layout.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"/><script src="https://kit.fontawesome.com/c9fd766a29.js" crossorigin="anonymous"></script><link rel="stylesheet" href="/static/css/commons.css">{% block css %}{% endblock %}
</head>
<body>
<div class="pg-header"><div class="logo left">教务后台管理</div><div class="avatar right" style="position: relative;"><img style="width: 40px; height: 40px;" src="/static/images/沙一汀1.jpg"><div class="user-info"><a>个人资料</a><a>注销</a></div></div><div class="rmenus right"><a><i class="far fa-comment-dots"></i> 消息</a><a><i class="far fa-envelope"></i> 邮件</a></div>
</div>
<div class="pg-body"><div class="menu"><a><i class="fas fa-school"></i> 班级管理</a><a><i class="fas fa-user-graduate"></i> 学生管理</a><a><i class="fas fa-chalkboard-teacher"></i> 教师管理</a></div><div class="content">{% block content %}{% endblock %}</div>
</div>
{% block js %}{% endblock %}
</body>
</html>

commons.css：

.pg-header {background-color: #2e6da4;height: 48px;min-width: 960px;position: absolute;top: 0;left: 0;right: 0;line-height: 48px;
}.pg-header .logo {color: white;font-size: 18px;width: 200px;text-align: center;
}.pg-header .rmenus a {display: inline-block;padding: 0 10px;color: white;
}.pg-header .rmenus a:hover {background-color: #999999;
}.pg-header .avatar {padding: 0 15px;
}.pg-header .avatar img {border-radius: 50%;
}.pg-header .avatar:hover .user-info {display: block;
}.pg-header .avatar .user-info {position: absolute;width: 100px;top: 50px;right: 2px;background-color: #2e6da4;color: white;border: 1px solid #dddddd;z-index: 100;display: none;
}.pg-header .avatar .user-info a {display: block;padding: 0 5px;color: #c4e3f3;
}.menu {background-color: #dddddd;width: 200px;position: absolute;left: 0;bottom: 0;top: 48px;border-right: 1px solid white;
}.content {background-color: white;position: absolute;left: 200px;right: 0;bottom: 0;top: 48px;min-width: 760px;overflow: scroll;z-index: 99;
}.pg-body .menu a {display: block;padding: 10px 15px;border-bottom: solid white;
}.left {float: left;
}.right {float: right;
}.hide {display: none;
}

继承：

{% extends 'layout.html' %}{% block css %}
...
{% endblock %}{% block content %}
...
{% endblock %}{% block js %}
...
{% endblock %}

Cookies

登录界面：

obj = redirect('/system-classes/')
obj.set_cookie('ticket', 'qwerty')
return obj

接收：

tk = request.COOKIES.get('ticket')
if not tk:return redirect('/login/')

登录成功后可以看到 Cookies：

set_cookie 完整定义：

def set_cookie(self, key, value='', max_age=None, expires=None, path='/',domain=None, secure=False, httponly=False, samesite=None):

max_age & expires：

增加时间限制，如 10s 后 Cookies 自动消失：
obj.set_cookie('ticket', 'qwerty', max_age=10)
或：
from datetime import timedelta
ct = datetime.datetime.utcnow()
v = timedelta(seconds=10)
value = ct + v
obj.set_cookie('ticket', 'qwerty', expires=value)
(更推荐 max_age)

path：

设置路径：
obj.set_cookie('ticket', 'qwerty', path='/xxx/')
则只有在指定访问路径时能读取到 Cookies；
obj.set_cookie('ticket', 'qwerty', path='/')
‘/’ 表示所有路径都可以读取。

domain：设置生效域名

secure：Https

httponly：只能在Http请求中传入，js代码无法获取到（可以通过抓包拿到）

set_signed_cookie 加盐：

obj.set_signed_cookie('ticket', "qwerty", salt='123456')

解密：

request.get_signed_cookie('ticket', salt='123456')

后面的字符串即为“签名”。

总结

BootStrap
一个包含CSS和JS的代码库
- 样式
- 响应式 @media()
栅格
表格
导航条
路径导航（面包屑）
Fontawesome
后台管理布局
position: absolute
overflow: scroll
…
.xx:hover .x{}
Django
母版：
<html>
…
{% block xx %}
…
</html>
子版
{% extends “layout.html” %}

{% block xx %} … { % endblock %}
用户登录 Cookie
保存在浏览器端“键值对”，设置超时时间
发送Http请求时，在请求头中携带当前所有可访问的cookie
响应头
写cookie：
def index(request):

obj = HttpResponse(’…’)
obj.set_cookie(…)
request.COOKIE.get(…)

obj.get_signed_cookie(…)
request.get_signed_cookie(…)
自定义cookie签名
sign & resign
装饰器装饰views中的函数

Django入门到放弃学习笔记 03相关推荐

Django 入门（个人学习笔记，持续更新）
导语:这些笔记都是结合自己的学习和查找网上的资料笔记或者回答上整理,可能有很多内容类似,目的是为了让自己以后忘了知识点可以看自己写的笔记,第一次写技术笔记,多多包涵. MVC 大部分开发语言中都有MV ...
django学习笔记03
原创博客地址:django学习笔记03 第一章,模型层查询集API 一.QuerySet何时被提交迭代 QuerySet是可迭代的,在首次迭代查询集时执行实际的数据库查询切片:如果使用切片的&q ...
JDBC学习笔记03【JDBC事务管理、数据库连接池、JDBCTemplate】
黑马程序员-JDBC文档(腾讯微云)JDBC笔记.pdf:https://share.weiyun.com/Kxy7LmRm JDBC学习笔记01[JDBC快速入门.JDBC各个类详解.JDBC之CR ...
MySQL 8——学习笔记03（插入、更新、删除数据 [DML语句]、查询数据 [DQL语句]）
MySQL 8--学习笔记03(插入.更新.删除数据 [DML语句]) 一.插入数据 1.1 插入所有字段.插入部分字段 1.2 同时插入多条记录(批量插入) 1.3 将查询结果插入到表中二.更新 ...
python web开发入门_python大佬整理的python web开发从入门到精通学习笔记
原标题:python大佬整理的python web开发从入门到精通学习笔记 Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通 ...
Git 的安装与初次使用 —— Git 学习笔记 03
Git 的安装与初次使用 -- Git 学习笔记 03 Git 的安装与初次使用 -- Git 学习笔记 03 安装 Git 在 Linux 上安装在 Windows 上安装初次运行 Git 前的 ...
深度学习入门之PyTorch学习笔记：卷积神经网络
深度学习入门之PyTorch学习笔记绪论 1 深度学习介绍 2 深度学习框架 3 多层全连接网络 4 卷积神经网络 4.1 主要任务及起源 4.2 卷积神经网络的原理和结构 4.2.1 卷积层 1. ...
深度学习入门之PyTorch学习笔记：多层全连接网络
深度学习入门之PyTorch学习笔记绪论 1 深度学习介绍 2 深度学习框架 3 多层全连接网络 3.1 PyTorch基础 3.2 线性模型 3.2.1 问题介绍 3.2.2 一维线性回归 3.2 ...
深度学习入门之PyTorch学习笔记：深度学习框架
深度学习入门之PyTorch学习笔记绪论 1 深度学习介绍 2 深度学习框架 2.1 深度学习框架介绍 2.1.1 TensorFlow 2.1.2 Caffe 2.1.3 Theano 2.1.4 ...

Django入门到放弃学习笔记 03

文章目录

内容回顾

Bootstrap安装

Fontawesome

响应式

导航条

栅格

后台管理布局

母版与子版

Cookies

总结

Django入门到放弃学习笔记 03相关推荐

最新文章

热门文章

Django入门到放弃 学习笔记 03

文章目录

内容回顾

Bootstrap安装

Fontawesome

响应式

导航条

栅格

后台管理布局

母版与子版

Cookies

总结

Django入门到放弃 学习笔记 03相关推荐

最新文章

热门文章

Django入门到放弃学习笔记 03

Django入门到放弃学习笔记 03相关推荐