python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)
python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)
BBS项目内容回顾
1. 登陆页面1. 验证码1. PIL(Pillow)2. io2. ORM1. 增删改查3. AJAX$.ajax({url: '',type: '',data: {},success:function(res){console.log(res)},error:function(err){console.log(err)}})2. 注册1. ORM2. form1. 生成HTML代码2. 校验(form_obj.is_valid())1. 局部钩子函数2. 全局钩子函数3. 保留用户填写的原数据,显示报错信息 3. AJAXvar data = new FormData();data.append(k, v)$.ajax({url: '',type: '',processData: false,contentType: false,data: data,success:function(res){console.log(res)},error:function(err){console.log(err)}})4. 头像的上传和预览3. BBS主页1. Bootstrap布局2. 文章列表展示3. 自定义分页 4. 个人站点页面1. 文章列表2. 分类展示(聚合和分组, inclusion_tag)1. 文章分类2. 标签分类3. 日期归档extra(select={'ym': 'DATEFORMAT(create_time, "%%Y-%%m")'}) 5. 文章详情页1. 点赞1. 事务操作from django.db import transactionwith transaction.atomic():语句1语句22. 数据行的字段值再原来的基础上+1from django.db.models import F, Q2. 评论1. 展示评论2. 添加评论6. 后台管理页面1. Django admin的简单使用2. kindeditor的使用1. 下载按提示复制粘贴,配置一下2. 上传图片需要额外配置3. 防XSS攻击(BeautifulSoup4)2. 中间件 1. 五个方法1. process_request2. process_views3. process_response4. process_exception5. process_template_response3. 补充 from django.views.decorators.csrf import csrf_exempt, csrf_protect csrf_exempt:指定被装饰的视图函数不需要校验csrf_token csrf_protect: 指定被装饰的视图函数需要校验csrf_token
View Code
一、csrf_exempt
在Django中对于基于函数的视图我们可以 @csrf_exempt 注解来标识一个视图可以被跨域访问
对于django中设置防跨站请求伪造功能有分为全局和局部。
全局:
中间件 django.middleware.csrf.CsrfViewMiddleware
局部:
@csrf_protect,为当前函数强制设置防跨站请求伪造功能,即便settings中没有设置全局中间件。
@csrf_exempt,取消当前函数防跨站请求伪造功能,即便settings中设置了全局中间件。
注意:导入模块
from django.views.decorators.csrf import csrf_exempt,csrf_protect
举例:test不校验csrf token
修改urls.py,增加路径
from app01 import views urlpatterns = [path('admin/', admin.site.urls),path('test/', views.test), ]
View Code
修改views.py,导入模块
from django.shortcuts import render,HttpResponse from django.views.decorators.csrf import csrf_exempt,csrf_protect# Create your views here. @csrf_exempt def test(request):if request.method == "POST":print(request.POST)return HttpResponse("ok")return render(request,"test.html")
View Code
新增test.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form action="" method="post"><input type="text" name="name"><input type="submit" value="提交"> </form> </body> </html>
View Code
访问test页面
点击提交,提示
中间件,可以自定义5个方法。其中
校验csrf_token在中间件的request_view这一层处理的
它加了一个装饰器,那么原来的函数,就被改变了!
举例:
def wrapper(func):def inner(*args, **kwargs):print("哈哈")return func(*args, **kwargs)return inner@wrapper def foo():"""这是一个测试装饰器的函数:return: None"""print("呵呵")foo()
View Code
执行输出:
哈哈
呵呵
foo原本应该输出"呵呵",但是加了装饰器之后,输出了2个内容。所以说,加了装饰器之后,它就不是原来的函数了!
python装饰器的wraps作用
Python装饰器(decorator)在实现的时候,被装饰后的函数其实已经是另外一个函数了(函数名等函数属性会发生改变),为了不影响,Python的functools包中提供了一个叫wraps的decorator来消除这样的副作用。写一个decorator的时候,最好在实现之前加上functools的wrap,它能保留原有函数的名称和docstring。
实例一:
不加wraps
def wrapper(func):def inner(*args, **kwargs):print("哈哈")return func(*args, **kwargs)return inner@wrapper def foo():"""这是一个测试装饰器的函数:return: None"""print("呵呵")# foo() print(foo.__name__, foo.__doc__)
View Code
执行输出:
inner None
实例二:
加wraps
from functools import wraps def wrapper(func):@wraps(func)def inner(*args, **kwargs):print("哈哈")return func(*args, **kwargs)return inner@wrapper def foo():"""这是一个测试装饰器的函数:return: None"""print("呵呵")# foo() print(foo.__name__, foo.__doc__)
View Code
执行输出:
foo
这是一个测试装饰器的函数
:return: None
二、ES6 快速入门
快速了解ES6部分新特性
let和const
let
ES6新增了let命令,用于声明变量。其用法类似var,但是声明的变量只在let命令所在的代码块内有效。
{let x = 10;var y = 20; }x // ReferenceError: x is not defined y // 20
View Code
效果如下:
var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。
console.log(x) // undefined,var声明变量之前可以使用该变量 var x = 10;
View Code
刷新页面,粘贴代码,效果如下:
而let不会这样,let声明的变量不能在声明之前使用。
刷新页面,粘贴代码,效果如下:
function foo(){let x = 10;var x = 20; } foo(); // 报错
View Code
刷新页面,粘贴代码,效果如下:
再比如:
function foo(){let y = 10;let y = 20; } foo(); // 报错
View Code
刷新页面,粘贴代码,效果如下:
var name = 'Q1mi'function foo(){console.log(name)if (false){var name = 'Bob'} } foo() // undefined
View Code
刷新页面,粘贴代码,效果如下:
for (var i=0;i<5;i++){console.log('哈哈'); } console.log(i); // 5
View Code
刷新页面,粘贴代码,效果如下:
var声明的变量会污染全局,所以在for循环外部可以打印i的值。for循环中的i最好使用let声明
ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。
var name = 'Q1mi'function foo(){console.log(name)if (false){let name = 'Bob'} } foo() // Q1mi
View Code
刷新页面,粘贴代码,效果如下:
此时,在foo函数内容,外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。
let声明能够将变量限制在当前的块级作用域中
const
const PI = 3.14;
举例:
const 用来声明一个常量,不能修改
全局对象的属性:
ES6规定:var命令和function命令声明的全局变量依旧是全局对象的属性;let命令、const命令和class命令声明的全局变量不属于全局对象的属性。
查看下面的示例代码:
var x = 10; let y = 20; window.x // 10 window.y // undefined
View Code
刷新页面,粘贴代码,效果如下:
变量的解构赋值
ES6允许按照一定的模式,从数组或对象中提取值,对变量进行赋值,这种方式被称为解构赋值。
var [x, y, z] = [10, 20, 30]; x; //10 y; //20 z; //30
View Code
刷新页面,粘贴代码,效果如下:
对象的解构赋值:
var {x, y} = {x: 10, y: 20}; x; // 10 y; // 20
View Code
刷新页面,粘贴代码,效果如下:
var和function声明的变量,默认会在windows对象上
let声明的变量默认不会出现在windows对象上
举例:
window.name1输出undefined
字符串
include、startsWith、endsWith
在此之前,JavaScript中只有indexOf方法可用来确定一个字符串是否包含在另一个字符串中。
ES6中又提供了3种新方法:
includes():返回布尔值,表示是否找到了参数字符串。
stratsWith():返回布尔值,表示参数字符串是否在源字符串的开始位置。
endsWith():返回布尔值,表示参数字符串是否在源字符串的结尾位置。
示例:
var s = "Hello world!";s.includes("o"); // true s.startsWith("Hello"); // true s.endsWith("!"); // true
View Code
刷新页面,粘贴代码,效果如下:
这三个方法都支持第2个参数,表示开始匹配的位置。
示例:
var s = "Hello world!";s.includes("o", 8); // false s.startsWith("world", 6); // true s.endsWith("Hello", 5); // true
View Code
刷新页面,粘贴代码,效果如下:
js对象的key可以不加引号
举例:
对象的解析赋值
举例:
模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。在模板字符串中嵌入变量,需要将变量名写入${}中。
举例:
var name = 'Q1mi', age = 18; `My name is ${name}, I’m ${age} years old.`
View Code
刷新页面,粘贴代码,效果如下:
函数
箭头函数
箭头函数有个特点:
- 如果参数只有一个,可以省略小括号
- 如果不写return,可以不写大括号
- 没有arguments变量
- 不改变this指向
var person = {name: 'Q1mi',age:18,func:function(){console.log(this);} } person.func() // person对象
View Code
刷新页面,粘贴代码,效果如下:
和
var person = {name: 'Q1mi',age:18,func:()=>{console.log(this);} } person.func() // window对象
View Code
刷新页面,粘贴代码,效果如下:
但凡用到箭头函数,不要用this
对象
属性简洁表示法
function f(x, y){return {x, y} }
View Code
上面的写法等同于:
function f(x, y){return {x: x, y: y} }
View Code
对象的方法也可以使用简洁表示法:
var o = {method(){return "hello";} }
View Code
等同于:
var o = {method: function(){return "Hello";} }
View Code
刷新页面,粘贴代码,效果如下:
Object.assign()
Object.assign方法用来将源对象(source)的所有可枚举属性复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,第二个参数是源对象。
参数必须都是对象,否则抛出TypeError错误。
Object.assjgn只复制自身属性,不可枚举属性(enumerable为false)和继承的属性不会被复制。
简单示例:
var x = {name: "Q1mi", age: 18}; var y = x; var z = Object.assign({}, x); x.age = 20;x.age; // 20 y.age; // 20 z.age; // 18
View Code
刷新页面,粘贴代码,效果如下:
注意:
Object.assign方法的其他用处,可查看文末链接。
面向对象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form action="" method="post"><input type="text" name="name"><input type="submit" value="提交"> </form> <script>// 定义一个构造函数function Point(x, y){this.x = x;this.y = y;}// 给父级绑定方法Point.prototype.toSting = function(){return '(' + this.x + ',' + this.y + ')';};// 生成一个Point对象var p = new Point(10, 20);console.log(p.x);console.log(p.toSting());// 继承function ColorPoint(x, y, color){Point.call(this, x, y);this.color = color;}// 继承父类的方法ColorPoint.prototype = Object.create(Point.prototype);// 修复 constructorColorPoint.prototype.constructor = Point;// 扩展方法ColorPoint.prototype.showColor = function(){console.log('My color is ' + this.color);};var cp = new ColorPoint(10, 20, "red");console.log(cp.x);console.log(cp.toSting());cp.showColor(); </script> </body> </html>
View Code
刷新页面,效果如下:
ES6 使用Class构造对象的方式:
修改test.html,js代码如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form action="" method="post"><input type="text" name="name"><input type="submit" value="提交"> </form> <script>class Point{constructor(x, y){this.x = x;this.y = y;} // 不要加逗号toSting(){return `(${this.x}, ${this.y})`;}}var p = new Point(10, 20);console.log(p.x);p.toSting();class ColorPoint extends Point{constructor(x, y, color){super(x, y); // 调用父类的constructor(x, y)this.color = color;} // 不要加逗号showColor(){console.log('My color is ' + this.color);}}var cp = new ColorPoint(10, 20, "red");console.log(cp.x);cp.toSting();cp.showColor(); </script> </body> </html>
View Code
刷新页面,效果如下:
Promise
Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise
对象。
使用Promise的优势是有了Promise
对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise
对象提供统一的接口,使得控制异步操作更加容易。
用法示例:
const promiseObj = new Promise(function(resolve, reject) {// ... some codeif (/* 异步操作成功 */){resolve(value);} else {reject(error);} });
View Code
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。
promiseObj.then(function(value) {// success }, function(error) {// failure });
View Code
then
方法可以接受两个回调函数作为参数。第一个回调函数是Promise
对象的状态变为resolved
时调用,第二个回调函数是Promise
对象的状态变为rejected
时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise
对象传出的值作为参数。
我们还可以将上面的代码写成下面这种方式:
promiseObj .then(function(value) {// success }) .catch(function(error) {// failure });
View Code
其实Promise.prototype.catch
方法是.then(null, rejection)
的别名,用于指定发生错误时的回调函数。
举例:
修改test.html,完整代码如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <h1>promise 示例</h1> <button id="b1">屠龙宝刀,点击就送!</button> <p id="p1"></p><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script>/*function foo() {$.ajax({url: '/test/',type: 'post',data: {data: '哈哈哈'},success:function (res) {console.log(res);return res.data$.ajax()}})}*/function foo() {return new Promise(function (resolve, reject) {$.ajax({url: '/test/',type: 'post',data: {data: '哈哈哈'},success:function (res) {console.log('异步请求成功');resolve(res.data)},error:function (err) {console.log('异步请求失败');reject(err);}})})}$("#b1").click(function () {var promiseObj = foo();promiseObj.then(function (value) {$("#p1").text(value);}).catch(function (err) {console.log(err)})}) </script> </body> </html>
View Code
访问网页,点击按钮,效果如下:
注:
本文中的些许示例来自阮一峰的《ECMAScript 6 标准入门》
附:
想了解更多有关ES6标准内容,推荐阅读:阮一峰的ECMAScript 6 入门
多读书、多写码。世界很大,我们很小。
三、Vue
介绍
Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。
起步
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的。
尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html
文件,然后通过如下方式引入 Vue:
<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli
,尤其是在你还不熟悉基于 Node.js 的构建工具时。
如果你喜欢交互式的东西,你也可以查阅这个 Scrimba 上的系列教程,它揉合了录屏和代码试验田,并允许你随时暂停和播放。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
html代码
<div id="app">{{ message }} </div>
js代码
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'} })
举例:
test.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="d1"><p>{{ message }}</p> </div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>var app = new Vue({el: '#d1',data: {message: '第一个Vue示例'}}) </script> </body> </html>
View Code
直接访问test.html页面,效果如下:
注意:请勿使用django框架运行,因为它也是用{{ }},来表示一个变量。
所以使用django运行时,页面是空白的!
我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message
的值,你将看到上例相应地更新。
举例:
所有的dom操作,用vue来实现了
python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)相关推荐
- 路飞学城python全栈开发_[Python] 老男孩路飞学城Python全栈开发重点班 骑士计划最新100G...
简介 老男孩&路飞学城Python全栈开发重点班课程,作为Python全栈教学系列的重头戏,投入了全新的课程研发和教学精力,也是Python骑士计划的核心教学,由ALEX老师开班镇守,一线技术 ...
- python 全栈开发,Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)
python 全栈开发,Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv) 一.上传文件 上传一个图片 使用input type="file& ...
- python视频网站项目_价值2400元的python全栈开发系列Flask Python Web 网站编程视频
2 e/ b4 F1 c' H$ D! X 价值2400元的python全栈开发系列Flask Python Web 网站编程视频-优品课堂' z3 _1 Y7 ]6 j4 z # p# r# g* ...
- python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可以进 ...
- python 全栈开发,Day103(微信消息推送,结算中心业务流程)
python 全栈开发,Day103(微信消息推送,结算中心业务流程) 昨日内容回顾 第一部分:考试题(Python基础)第二部分:路飞相关 1. 是否遇到bug?难解决的技术点?印象深刻的事?- o ...
- python相关职业-浅谈Python全栈开发工程师,让程序员都眼红的职业!
原标题:浅谈Python全栈开发工程师,让程序员都眼红的职业! Python Python 的排名从去年开始就借助人工智能与独特的魅力持续上升,现在它已经成为了第一名. 与其它编程语言相比所占的优势 ...
- 浅谈Python全栈开发工程师, 让程序员都眼红的职业!
Python Python 的排名从去年开始就借助人工智能与独特的魅力持续上升,现在它已经成为了第一名. 与其它编程语言相比所占的优势 (私信小编001 .002 .003 .007任何一个即可自动获 ...
- python 全栈开发,Day112(内容回顾,单例模式,路由系统,stark组件)
python 全栈开发,Day112(内容回顾,单例模式,路由系统,stark组件) 一.内容回顾 类可否作为字典的key 初级 举例: class Foo(object):pass_registry ...
- python web全栈开发_价值2400元的python全栈开发系列Flask Python Web 网站编程视频教程...
课程目录 01-计算机基础常识.mp4 02-Python语言概览.安装与运行.mp4 03-Python 变量.数据类型及存储.mp4 04-Python 常用数据类型概览.mp4 05-数值与字符 ...
- 学习笔记之Python全栈开发/人工智能公开课_腾讯课堂
Python全栈开发/人工智能公开课_腾讯课堂 https://ke.qq.com/course/190378 https://github.com/haoran119/ke.qq.com.pytho ...
最新文章
- 【error】error: field * has incomplete type
- [转]Shell脚本中发送html邮件的方法
- 如何让语音助手通过图灵测试
- Win7实用技巧之四拯救桌面行动之Jumplist
- java兔子_JAVA经典兔子问题
- android的各种*.img 文件
- Nun Heh Heh Aaaaaaaaaaa 字符串,dp
- 只腐蚀毛刺 腐蚀算法_避坑干货!8大卫浴五金选购指南,只买对的不买贵的
- Gradle打包命令记录
- struts基本概念(1)
- Facebook广告与Google广告有什么不同?
- 备忘录 | 当我每晚闲暇时我在干什么(1)
- Java-斗地主小游戏洗牌发牌(控制台程序)
- 微信公众平台测试账号的注册与申请
- 北鲲云超算平台为生命科学的发展赋能,24小时完成10亿规模分子库筛选全流程
- 基于Python的车辆管理系统
- 计算几何,三维向量的旋转
- 计算机系统 ahci模式,老电脑安装系统忘记开启AHCI模式,教你不重装系统开启AHCI解决方法(3)...
- “大部人从外界看阿里是‘雾里看花’”,所以马云亲自敲出了这5000字的致股东信
- 20200428 线程安全(上)--彻底搞懂volatile关键字
热门文章
- 浅析数据仓库和建模理论
- 欧美html游戏安卓,HTML5 Games - Rated M or for 18+ only
- linux skb机制,skb 的分配细节
- AirSim学习日志 9-三维空间航路点跟踪
- 计算机打音乐歌谱成都,赵雷成都的曲谱
- Python爬取某宝商品数据案例:100页的价格、购买人数等数据!
- Linux系统管理(一)基础管理
- Python:实现counting sort计数排序算法(附完整源码)
- Ambari集群里操作时典型权限问题put: `/home/bigdata/1.txt‘: No such file or directory的解决方案(图文详解)
- 为程序员提供一杯免费咖啡