一、实例和组件定义data的区别 vue实例的时候定义data属性既可以是一个对象，也可以是一个函数 const app = new Vue({ el:"#app", // 对象格式...} } }) 组件中定义data属性，只能是一个函数 如果为组件data直接定义为一个对象 Vue.component('component1',{ template:`组件...警告说明：返回的data应该是一个函数在每一个组件实例中 二、组件data定义函数与对象的区别 上面讲到组件data必须是一个函数，不知道大家有没有思考过这是为什么呢？...getData(data, vm) : data || {} ... } data既能是object也能是function，那为什么还会出现上文警告呢？...（根实例是单例），不会产生数据污染情况 组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。
为什么 Vue 中的 data 必须是个函数？ 官方文档的解释如下： ? ? 为什么会出现上述“影响到其它所有实例”的情况呢？...，age 都变成了 40，导致了问题 因此，data 如果单纯的写成对象形式，会使得所有组件实例共用了一份 data，造成一个变了全都会变的结果 接下来我们用函数改造以上代码： function Component...Vue 组件中的 data 需要用函数了，当 data 是函数的时候，每一个实例的 data 属性都是独立的，互不影响 总结 Vue 中的 data 必须是个函数，因为当 data 是函数时，组件实例化的时候这个函数将会被调用...，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变 简单来说，就是为了保证组件的独立性和可复用性...，如果 data 是个函数的话，每复用一次组件就会返回新的 data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响
引用类型与函数区别 引用类型与函数 object是引用类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了。...js中只有函数构成作用域（只有函数的{}构成作用域，对象的{}以及if(){}都不构成作用域），data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会互相影响。...(); component1.data.a = component2.data.a; component1.data.b = 5; component2.data.b // 5 如果两个实例引用一个对象...，那么当你修改其中一个属性的时候，另外一个实例也会跟着改； 两个实例必须有自己各自的作用域才行，需要通过下列方法进行处理 const Mycomponent = function(){ this.data...data属性都是独立的，不会互相影响。
组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次...该组件被复用了三次，但每个复用的地方组件内的count数据相互不受影响，它们各自维护各自内部的count。 ?...能有这样效果正是因为上述例子中的data不是一个单纯的对象，而是一个函数返回值的形式，所以每个组件实例可以维护一份被返回对象的独立拷贝，如果我们将上述例子中的data修改为： ?
解答 打开 Chrome 开发者工具的 Sources 面板，找到 formatter.js 文件，我们把鼠标放在 formatter.js 文件上， 就会看到一个弹出框，上面的字段 FunctionLocation...显示了这个 stub 函数的实现位置，位于 sinon.js 文件里。...sinon 是一个著名的前端测试 Mock 框架，在笔者的汪子熙纪念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步骤和工作原理介绍里有详细介绍。...我们在第 20 行代码设置断点： 然后点击 Chrome 调试器的 Step Into 按钮，或者快捷键 F11，进入 stub 函数内部： 从而进入 sinon.js 文件的 stub 函数实现内部...，这里使用了 JavaScript function 原型链上的原生方法 apply 来调用函数。
4.当我们组件的date单纯的写成对象形式，这些实例用的是同一个构造函数，由于JavaScript的特性所导致，所有的组件实例共用了一个data，就会造成一个变了全都会变的结果。...二、代码分析： vue每次会通过组件创建出一个构造函数，每个实例都是通过这个构造函数new出来的 假如data是一个对象，将这个对象放到这个放到原型上去 function VueComponent(){...在mergeOptions中会调用strats.data对子类的data进行合并，这个方法中首先会判断子类的data进行判断，要求data必须是一个函数，如果不是会报错告诉它这个data应该是一个函数定义...补充： 为什么要合并？因为子组件也要有父组件的属性，extend方法是通过一个对象创建了一个构造函数，但是这个构造函数并没有父类的属性，因为它是一个新函数，和之前的Vue构造函数是没有关系的。...通过extend产生了一个子函数，这个子函数需要拥有vue实例上的所以东西，它就要做一次合并。 四、为什么new Vue这个里面的data可以放一个对象？ 因为这个类创建的实例不会被复用。
for...in 和 for ... of 的区别 splice 和 slice 的区别 includes 和 indexOf 的差异 伪类的作用 ajax 状态码 redux 中的 reducer 为什么最好是一个纯函数...404 请求的网页不存在 500 服务器内部错误 503 服务不可用 六、redux 中的 reducer 要求是一个纯函数呢？...首先如果 redux 中的 reducer 如果不是一个 纯函数的话会造成什么后果呢？...相反，它们必须通过复制现在的 state，并对复制的值进行更改来进行 state 更新 它们不能做任何异步逻辑以及其他”副作用“ 遵循这些规则的函数也被称为**“纯”函数**，因此 reducer 需要一个纯函数由此而来...总结以下 redux 底层采用了浅比较的方式来判断 state 改变，来优化性能 采用纯函数，保证新旧 state 不是同一个对象引用 为了保证返回新的 state 是确定的，不会因为副作用返回不确定的
为Flask-Login准备用户模型 Flask-Login插件需要在用户模型上实现某些属性和方法。...我可以很容易地实现这四个属性或方法，但是由于它们是相当通用的，因此Flask-Login提供了一个叫做UserMixin的mixin类来将它们归纳其中。...用户加载函数 用户会话是Flask分配给每个连接到应用的用户的存储空间，Flask-Login通过在用户会话中存储其唯一标识符来跟踪登录用户。...还记得那些Flask-Login必须的用户对象属性？其中之一是is_authenticated，它可以方便地检查用户是否登录。当用户已经登录，我只需要重定向到主页。...current_user.is_anonymous仅当用户未登录时的值是True。
今天我们再讲讲Flask-Security是怎么做权限管理的并介绍Flask-Security是如何扩展Flask-Login做用户管理的 消息闪现 在讲今天的主题前我们先补充一下之前漏掉的一个东西，就是...举个例子，还记得我们之前讲表单的时候，每个form对象都有一个errors属性么。我们之前是将form这个对象传递给模板页面进行渲染。现在我们直接用flush函数进行传递。...其中flash函数把form的errors封装了起来。 我们来看看在模板页面中是怎么获取这段error信息的。...当Flask-Login检测到用户没有登录的时候会把链接重定向到login_view中去。 所以我们设置为login。 一个叫login的路由方法。...这里需要注意的是，请看我一开始import的是flask_security.utiles中的login_user方法而不是Flask-Login的。
Flask-WTF简介 我将使用Flask-WTF插件来处理本应用中的Web表单，它对WTForms进行了浅层次的封装以便和Flask完美结合。这是本应用引入的第一个Flask插件，但绝不是最后一个。...为什么呢？这是因为之前的登录视图功能到目前为止只完成了一半的工作。它可以在网页上显示表单，但没有逻辑来处理用户提交的数据。...get_flashed_messages()是Flask中的一个函数，它返回用flash()注册过的消息列表。...闪现消息的一个有趣的属性是，一旦通过get_flashed_messages函数请求了一次，它们就会从消息列表中移除，所以在调用flash()函数后它们只会出现一次。...你可能会问，为什么使用函数名称而不是URL？事实是，URL比起视图函数名称变更的可能性更高。
这个类的构造函数接收的参数是一个密钥，在 Flask 程序中可使用 SECRET_KEY 设置。 dumps() 方法为指定的数据生成一个加密签名，然后再对数据和签名进行序列化，生成令牌字符串。...注册路由函数 这里定义了两个注册的路由函数，一个是需要用户使用邮件确认的，一个是不需要的。...重新发送confirm邮件 定义确认函数 如果用户没有在token超时时间内完成确认，而某些页面又是必须要确认才能访问的，所以就需要重新发送一个确认链接给用户，所以定义一个resend confirm函数...因为这个是用户的主动行为，所以用login_required函数限制只有在用户登陆的情况下才可以使用。...unconfirmed函数定义如下 @auth.route('/unconfirmed') def unconfirmed(): if current_user.is_anonymous or
Flask-WTF简介 Flask-WTF是简化了WTForms操作的一个第三方库。WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。...FileField 的 data 属性是一个 Werkzeug FileStorage 实例。...为什么呢？ 这是因为之前的登录视图功能到目前为止只完成了一半的工作。 它可以在网页上显示表单，但没有逻辑来处理用户提交的数据。...get_flashed_messages()是Flask中的一个函数，它返回用flash()注册过的消息列表。...闪现消息的一个有趣的属性是，一旦通过get_flashed_messages函数请求了一次，它们就会从消息列表中移除，所以在调用flash()函数后它们只会出现一次。
本例中被包裹的URL 是动态的。 当一个路由包含动态组件时，Flask将接受该部分URL中的任何文本，并将以实际文本作为参数调用该视图函数。...由于这是一个指向当前登录个人主页的链接，我可以使用Flask-Login的current_user对象来生成正确的URL。 ? 尝试点击顶部的Profile链接就能将你带到自己的个人主页。...为每个视图函数添加更新这个字段的逻辑，这么做非常的枯燥乏味。在视图函数处理请求之前执行一段简单的代码逻辑在Web应用中十分常见，因此Flask提供了一个内置功能来实现它。...如果你想知道为什么在提交之前没有db.session.add()，考虑在引用current_user时，Flask-Login将调用用户加载函数，该函数将运行一个数据库查询并将目标用户添加到数据库会话中...也可能是这种情况，浏览器发送带有表单数据的POST请求，但该数据中的某些内容无效。对于该表单，我需要区别对待这两种情况。
在 Flask 中由全局的 request 对象来提供这些信息。如果你有一定的 Python 经验，你会好奇，为什么这个对象是全局的，为什么 Flask 还能保证线程安全。答案是本地环境。...本地环境 Flask 中的某些对象是全局对象，但却不是通常的那种。这些对象实际上是特定环境的局部对象的代理。虽然很拗口，但实际上很容易理解。 想象一下处理线程的环境。...以下是使用上述两个属性的例子: from flask import render_template @app.route('/login', methods=['POST', 'GET']) def login...请求对象的 cookies 属性是一个包含了客户端传输的所有 cookies 的字典。在 Flask 中，如果使用 会话 ，那么就不要直接使用 cookies ，因为 会话 比较安全一些。...这告诉 Flask，该页的错误代码是 404 ，即没有找到。默认为 200，也就是一切正常。 响应 视图函数的返回值会被自动转换为一个响应对象。
)() 这里login_manager.id_attribute是一个字符串'get_id'。...user对象存储进当前的request context中，_request_ctx_stack是一个LocalStack对象，top属性指向的就是当前的request context。...来看下定义： # flask_login/utils.py current_user = LocalProxy(lambda: _get_user()) 原来current_user是一个LocalProxy..._get_user函数是如何获取user对象的： # flask_login/utils.py def _get_user(): if has_request_context() and not...这就是为什么当session中没有携带用户信息时，我们可以通过remember cookie来获取用户的信息 而reload_user是如何获取用户的呢，来看下源代码： # flask_login/
url_for() 的使用 url_For（）是flask框架提供的函数。第一个参数可以作为表示路线的端点传入。它主要用于生成URL，避免开发人员手写URL。...但请记住，这种价值观是可以伪造的，千万不要相信它。如果要使用客户端文件名作为服务器文件名，可以使用Werkzeug_Filename（）函数提供的安全性。...要访问cookie，可以使用cookie属性。 可以使用响应对象_ Cookie方法的集合来设置Cookie。 请求对象的cookie属性是包含客户端传输的所有cookie的字典。...通常，只从视图函数返回字符串，Flask会将它们转换为响应对象。如果要显式转换，可以使用make_response（）函数，然后对其进行修改。...也就是说，用户可以查看的cookie，但如果没有密钥，则无法修改它。 在使用会话之前必须设置密钥。
---- 主要内容： 1.为什么要测试？测试分为哪几种？ 2.单元测试是个啥？ 3.断言assert 4.简单的单元测试案例 为什么要测试？测试分为哪几种？...断言就是判断一个函数或对象的一个方法所产生的结果是否符合你期望的那个结果。python中assert断言是声明布尔值为真的判定，如果表达式为假会发生异常。单元测试中，一般使用assert来断言结果。...", data={}) # 用户名和密码都为空 # ret是视图返回的响应对象，data属性是响应体的数据 resp = ret.data # 解析json...", data={}) # ret是视图返回的响应对象，data属性是响应体的数据 resp = ret.data # 解析json...除了这十五篇flask文章，日后还会有一些补充的知识，也可能会带着大家写一个Flask项目，所以转发、在看！继续给我动力！！！
大家好，又见面了，我是你们的朋友全栈。 Flask 简介 什么是Flask？ Flask是一个用Python编写的Web应用程序框架。...Flask构造函数使用当前模块（__name __）的名称作为参数。 Flask类的route()函数是一个装饰器，它告诉应用程序哪个URL应该调用相关的函数。...该函数接受函数的名称作为第一个参数，以及任意数量的关键字参数（每个参数对应于URL的变量部分）。 为什么要使用URL反转功能url_for（）而不是将它们硬编码到模板中来构建URL这里有几个理由？...如果你想要知道在上传到你的应用之前在客户端的文件名称，你可以访问filename属性但请记住永远不要信任这个值，因为这个值可以伪造。...Flask 响应 一个视图函数的返回值会被自动转换为一个响应对象。如果返回值是一个字符串，它被转换成一个响应主体是该字符串，错误代码为 200 OK ，媒体类型为text/html的响应对象。
Flask系列文章： 小白学Flask第一天 | 我的第一个Flask程序 小白学Flask第二天| app对象的初始化和配置 小白学Flask第三天| 今天把视图函数的路由给讲清楚！...小白学Flask第四天| 把路由转换器玩的更牛逼 小白学Flask第五天 | 详解很重要的request对象 小白学Flask第六天| abort函数、自定义错误方法、视图函数的返回值 小白学Flask...我用Flask写了一个图书作者管理项目(附完整代码) ---- 主要内容： 1. 为什么学习蓝图？ 2. 蓝图是个啥 3. 实战蓝图 为什么要学习蓝图？...我们学习Flask框架，是从写单个文件，执行hello world开始的。我们在这单个文件中可以定义路由、视图函数、定义模型等等。...但这显然存在一个问题：随着业务代码的增加，将所有代码都放在单个程序文件中，是非常不合适的。这不仅会让代码阅读变得困难，而且会给后期维护带来麻烦。
为什么这么说？ 我曾不止一次在某群，看到说我写的东西一点技术含量都没有，而且很没营养，换作一年前的我，也许会怼回去，现在的话，我只是看到了，完事忘记了。...设置有效期时间，单位是秒 获取cookie：通过request.cookies的方式， 返回的是一个字典 删除cookie：通过delete_cookie('cookie名字')的方式， 删除只是让cookie...2、abort(code)： 错误码的函数，和HTTP协议的code码几乎一样，可自行了解。 6、上传文件的使用 可以理解为就是一个文件上传的功能。 模版文件代码： <!...“multipart/form-data”，表示在url中处理文件上传 使用 secure_filename(filename) 函数，获取文件的安全版本 request.files[file] 这个函数用于获取提交文件...，其中filename属性就是文件名，使用 upload 前面不能加“/”。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
