- 博客(87)
- 收藏
- 关注
RSS订阅原创 前端流行框架Vue3教程：11. 组件嵌套关系
组件允许我们将 UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构。这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。方便我们干净的创建组件和引用关系。这个时候，我们大概就可以看到页面整体的样式了。里引用这个组件，而不是App.vue。全部写完后我们看下页面，就完成了。我们就可以看到页面显示了。我们继续写其他的：（记得在。创建新项目后，我们删掉。上面图我们可以看到，
2025-01-21 16:47:59
959
原创 前端流行框架Vue3教程： 10. 组件组成
当使用构建步骤时，我们一般会将Vue组件定义在一个单独的vue文件中，这被叫做单文件组件(简称SFC)组件最大的优势就是可复用性。
2025-01-20 09:17:32
202
原创 前端流行框架Vue3教程： 9. 模板引用
虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。要实现这一点，我们可以使用特殊的。attribute挂载结束后引用都会被暴露在。
2025-01-19 08:52:44
237
原创 前端流行框架Vue3教程： 8. 表单输入绑定
在前端处理表单时，我们常常需要将表单输入框的内容同步给JavaScript 中相应的变量。默认情况下， v-mode!会在每次 input 事件后更新数据。修饰符来改为在每次 change 事件后更新数据。输入的时候并不能时时显示，失去焦点的时候才会显示。手动连接值绑定和更改事件监听器可能会很麻烦,这样，就可以时时看到输入内容了。单一的复选框，绑定布尔类型值。指令帮我们简化了这一步骤。
2025-01-18 08:38:29
156
原创 前端流行框架Vue3教程：6. Class绑定
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表，因为 class 是 attribute，我们可以和其他attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 cass 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达的值也可以是对象或数组。如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式。
2025-01-16 13:11:51
321
原创 前端流行框架Vue3教程：5. 计算属性
模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护，因此我们推荐使用计算属性依赖响应式状态的复杂逻辑。你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果。如果上面逻辑太多的话，会让模板变得臃肿。所以我们用计算属性。
2025-01-15 13:31:44
156
原创 前端流行框架Vue3教程：4. 数组变化侦测
变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变（immutable）方法，例如。，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的。Vue 能够侦听应式数组的变更方法，并在它们被调用时触发相关的更新。我们可以看到，并不会自动更新。但数组已经是添加进去了的。
2025-01-14 13:32:16
300
原创 前端流行框架Vue3教程：3. 事件处理（3） 事件修饰符
尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。上面代码，我们点击 测试冒泡，就会2个事件都触发。这样，我们点百度一下，就不会跳转了。其他修饰符大家可以参考官网自行尝试。为解决这一问题，Vue 为。
2025-01-13 09:24:45
209
原创 前端流行框架Vue3教程：3. 事件处理（1）事件处理
来监听DOM事件，并在事件触发时执行对应的JavaScript。内联事件处理器通常用于简单场景。我们点击按钮的时候，会累计增加。
2025-01-10 09:41:28
189
原创 前端流行框架Vue3教程：2. Vue模板语法（4） 列表渲染
Vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的。绑定的值期望是一个基础类型的值，例如字符串或number类型。也支持使用可选的第二个参数表示当前项的位置索引。的值，我们要确保每一条数据的唯一索引不会发生变化。推荐在任何可行的时候为v-for提供一个。
2025-01-09 09:31:55
127
原创 前端流行框架Vue3教程：2. Vue模板语法（3）条件渲染
也是惰性的:如果在初次渲染时条件值为 false，则不会做任何事。是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。这个时候 flag: false是看不到内容的，如果为ture，是可以看到的。这块内容只会在指令的表达式返回真值时才被渲染。另一个可以用来按条件显示一个元素的指令是 v-show。简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS。有更高的初始渲染开销。因此，如果需要频繁切换，则使用。的时候，是不会不渲染出来的。有更高的切换开销，而。
2025-01-08 09:13:33
268
原创 前端流行框架Vue3教程：2. Vue模板语法（2）属性绑定
布尔型 attribute 依据true / false 值来决定 attribute 是否应该存在于该元素上，双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用。如果你有像这样的一个包含多个 attribute 的JavaScript对象。，那么该 attribute 将会从渲染的元素上移除。我们这时候看到，tittle属性都不存在了。非常常用，我们提供了特定的简写语法。attribute 与组件的。指令指示 Vue 将元素的。
2025-01-07 14:13:10
368
原创 前端流行框架Vue3教程：2. Vue模板语法（1）文本插值
Vue 使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法地写在return后面。双大括号将会将数据插值为纯文本，而不是HTML。若想插入HTML，你需要使用。App.vue`的代码全部删除。我们发现，页面并没有识别出来。最基本的数据绑定形式是文本插值，它使用的是。
2025-01-06 14:28:46
413
原创 前端流行框架Vue3教程：1. Vue开发前的准备（安装、开发环境和目录结构）
安装后会有下列提示，除了创建名称外，其他的暂时选否。这时候如果有些人会报错，证书过期不能访问之类的。重新安装install即可（会非常快）~~~~安装淘宝镜像记录：管理员运行cmd。我们就看到项目创建运行成功了。推荐的是IDE配置是。
2025-01-05 11:01:55
277
原创 Python高性能web框架-FastApi教程：（20）CORS组件实现跨域请求
跨源资源共享（CORS）是一个安全特性，允许或限制网页上的资源可以被另一个域名的网页访问。在 API 开发中配置 CORS 是常见需求，尤其是当你的前端和后端部署在不同的域时。我们之前所写的fastapi请求，都是同源请求。这个时候，就允许网页上的资源可以被另一个域名的网页访问。这三个要素但凡有一个不一致，那么这次发送的请求就是。下面是一个最简单的fastapi的同源请求。// 响应`main.py`里的函数返回值。// 请求成功后，在控制台输出用户信息。我们发现，请求被阻止了。根据代码来看，我们点击。
2025-01-03 11:57:39
402
原创 Python高性能web框架-FastApi教程：（19）中间件
添加这块代码的时候，我们发现连测试文档都进不去了。要创建中间件你可以在函数的顶部使用装饰器。传递给应用程序的其他部分 (通过某种。做一些事情或者执行任何需要的代码.我们测试另一个路由的时候，是正常的。做些什么或者执行任何需要的代码.它接收你的应用程序的每一个。然后它获取应用程序生产的。处理之前,以及在每个。
2025-01-02 09:15:40
385
原创 Python高性能web框架-FastApi教程：（18）ORM操作之编辑接口开发（更新记录和删除记录）
这些是我们更新的id和内容，其中’courses’字段被字典删除了，可以忽略这个去添加了。运行测试后，我们发现不仅学生删除了，而且有关该学生的2个选课一并都删除了。正常来说，更新简单一对一、一对多记录就是如此。是多对多的，所以不能被更新！这边看到了更新了2个课程。那么，我们怎么添加呢？数据库中看到了更新。
2025-01-01 09:09:47
268
原创 Python高性能web框架-FastApi教程：（17)ORM添加表记录
我们需要先写一个数据校验模型，学生信息输入模型。该模型用于验证学生信息，包括姓名、密码、学号、班级和课程列表。这边自行改为正确的即可。
2024-12-31 09:34:41
381
原创 Python高性能web框架-FastApi教程：（16)ORM响应页面数据
不过，这个页面有点丑，我们想做个漂亮的页面。引入一个比较喜欢的表格。
2024-12-30 09:56:45
672
原创 Python高性能web框架-FastApi教程：（15) ORM查询操作
现在，我们就需要通过这些外键id去添加其他数据了。，Student.all前加个。这个时候就打印出来了！可以看出，数据类型是。我们需要在函数前加个。
2024-12-29 09:12:34
603
原创 Python高性能web框架-FastApi教程：（14）api接口与restful规范
当然，api接口在工作中是比较常见的开发内容，有时候，我们会调用其他人编写的api接口，有时候，我们也需要提供api接口给其他人操作。为了在团队内部形成共识、防止个人习惯差异引起的混乱，我们都需要找到一种大家都觉得很好的接口实现规范，而且这种规范能够让后端写的接口，用途一目了然，减少客户端和服务端双方之间的合作成本。例如，我们现在要编写一个选课系统的接口，我们可以查询对一个学生进行查询、创建、更新和删除等操作，我们在编写程序的时候就要设计客户端浏览器与我们Web服务端交互的方式和路径。
2024-12-27 11:07:15
336
原创 Python高性能web框架-FastApi教程：（13）ORM系统 - 创建和迁移
models.py文件内容# 选课系统from tortoise.models import Model # 用于定义 ORM 模型。from tortoise import fields # 用于定义字段类型。id = fields.IntField(pk=True) # 主键，整数类型。name = fields.CharField(max_length=32, description='姓名') # 姓名，字符串类型。
2024-12-26 09:58:16
455
原创 Python高性能web框架-FastApi教程：（12）jinjia2模板
是Flask作者开发的一个模板系统，起初是仿diango模板的一个模板引擎，为Flask提供模板支持，由于其灵活，快速和安全。，那么需要先理解模板的概念。模板在Python的web开发中广泛使用，它能够有效的将业务逻辑和页面逻辑分开，使。，它也具有单分支，多分支等多种结构，不同的是，条件语句不需要使用冒号结尾，而结束控制语句，需要使用。模板简单来说就是一个其中包涵占位变量表示动态的部分的文件，模板文件在经过动态赋值后，返回给用户。分割，多个过滤器可以链式调用，前一个过滤器的输出会作为后一个过滤器的输入。
2024-12-25 09:22:48
845
原创 Python高性能web框架-FastApi教程：(11)静态文件请求
在 Web 开发中，需要请求很多静态资源文件（不是由服务器生成的文件），如 css/ijs 和图片文件等。- 这是URL路径前缀，意味着所有以 /static 开头的URL请求都会被这个处理程序处理。这样的配置让你可以方便地管理和提供静态资源，而不需要为每个静态文件都写专门的路由处理程序。- 这是FastAPI的一个方法，用于将某个路径挂载到特定的处理程序上。如果你在 statics 文件夹中有一个图片文件 logo.png。- 这创建了一个静态文件处理程序。
2024-12-24 14:11:38
414
原创 Python高性能web框架-FastApi教程：(10)Request对象
类型的参数，FastAPI 就会自动传递 Request 对象给这个参数，我们就可以获取到。例如我们在路径操作函数中想获取客户端的IP地址，需要在函数中声明Request。url, cookie, session等。及其属性信息，例如 header、有些情况下我们希望能直接访问。Request 对象。
2024-12-23 17:06:32
292
原创 Python高性能web框架-FastApi教程：(8)from表单数据
在 OAuth2 规范的一种使用方式(密码流)中，需要将用户名、密码作为表单字段发送，而不是 JSON。这里要注意下，如果我们在Postman测试，就不能按json格式传数据了。件来接收表单数据，需要先使用。FastAPI可以使用。
2024-12-20 10:52:50
331
原创 Python高性能web框架-FastApi教程：（6）请求和参数 - 查询参数（请求参数）
路径函数中声明不属于路径参数的其他函数参数时，它们将被自动解释为"查询字符串"参数，就是 url?如果上面代码有测试的话，应该会发现，这三个参数，都是要必填的，才可以搜索职位。但实际的时候，我们可以筛选的。前面我们有说过，参数是可以类型声明的。那么当我们声明类型的时候，怎样写默认参数呢？下面显示的是path，其他的显示query。&符号就是and不同的参数，这些参数就是。” 后面了，这个就是查询参数了。接着上节课的代码，我们新增一个。测试看下，我们可以看到。有*，另外2个没有了。
2024-12-18 09:19:31
341
原创 Python高性能web框架-FastApi教程：(5)请求和参数- 路径参数
测试运行：1和2测试都没问题。那么问题来了，如果我们还要测试345~100呢？难道要写100个？肯定不行。这里就涉及到了一个知识点：路径参数。
2024-12-17 13:18:41
292
原创 Python高性能web框架-FastApi教程：（4）使用 FastAPI 创建和配置多个子应用：路由分发include_router
前面我们已经简单介绍了fastapi的创建。但是在实际项目中，把多个路由，多个函数都写在一个main.py中，是非常碍眼和繁琐的，后期维护也难。当然，fastapi也可以跟大型web框架django一样，配置多个子应用。方便管理和维护。
2024-12-16 16:18:11
367
原创 Python高性能web框架-FastApi教程：(3)路径操作装饰器方法的参数
tags=['这是items测试接口'],summary='这是items测试的summary',description='这是items测试的description',response_description='这是items测试的response_description')return {'items': 'items数据'}定义了一个POST请求路由，路径为/items。tags用于在API文档中对路由进行分类。summary提供了简短的描述。提供了详细的描述。提供了响应的描述。
2024-12-14 23:32:14
439
原创 Python高性能web框架-FastApi教程：(2)路径操作装饰器方法
定义GET请求的路由return {'method': 'get方法'}是一个装饰器，用于定义一个GET请求的路由，路径为/get。定义了一个函数get_test，当接收到/get的GET请求时，这个函数将被调用。return {'method': 'get方法'}返回一个包含字符串'get方法'的字典。# 定义POST请求的路由return {'method': 'post方法'}# 定义PUT请求的路由return {'method': 'put方法'}
2024-12-14 23:15:48
329
原创 Python高性能web框架-FastApi教程：(1)创建一个简单的FastApi
是一个装饰器，用于定义一个GET请求的路由，路径为根目录。定义了一个异步函数home，当接收到根目录的GET请求时，这个函数将被调用。返回一个包含用户ID的字典。return {'shop': '商品信息'}是一个装饰器，用于定义一个GET请求的路由，路径为/shop。定义了一个异步函数shop，当接收到/shop的GET请求时，这个函数将被调用。return {'shop': '商品信息'}返回一个包含店铺信息的字典。
2024-12-14 23:13:32
540
原创 Python爬虫从入门到精通:（45）JS逆向：空中网逆向分析：js混淆_Python涛哥
我们来看下空中网的逆向分析js逆向分析抓包后，经过分析，我们看到password在一个login-handler xxx.js文件中我们点进去搜索password:但我们看到，password在一段很长的文本中。这里就涉及到了js混淆。js混淆：什么是js混淆：将js核心的相关代码进行变相的加密，加密后的数据就是js混淆之后的结果。js反混淆：反混淆的线上工具（不理想）浏览器自带的反混淆工具设置(推荐)开发者工具中的Sourse -> settings ->
2021-11-12 18:54:15
4289
9
原创 Python爬虫从入门到精通:（44）JS逆向：试客联盟的逆向分析_Python涛哥
我们来看下试客联盟的逆向分析，切换到密码登陆。JS代码解析我们进行抓包。经过分析，我们看到密码可能在这个js里实现点进去后，我们发现源码里有一段var key = new RSAKeyPair("10001",'',rsa_n);，那我们就怀疑这个可能就是密码的实现方式。我们打断点验证一下，果然停留在了这里。我们来看下这一部分源码：setMaxDigits(131); var formData = $("#loginForm").serializeArray();
2021-11-09 21:03:50
1958
1
原创 Python爬虫从入门到精通:（43）JS逆向：完美世界RAS逆向_Python涛哥
完美世界有很多游戏，比较出名的就是诛仙、魔兽世界等。完美今天就来看下完美世界登陆的逆向分析！JS逆向解析登陆的时候这里有个点击认证。没关系，完美先忽略它，直接点击。完美主要探讨密码的逆向方式。抓包登陆后，我们看到工具中XHR这一栏并没有登陆的url，那我们就点击全部进行查看。里面是有login的。表单数据中，我们看到了password的数据，那么长，基本判断是个RSA加密方式：我们搜索password，看到有很多符合条件的js，经过分析，我们判断出，ssologinAI.js可能是我们所要的
2021-11-05 14:22:50
2159
原创 Python爬虫从入门到精通:（42）JS逆向-闭包：凡科网逆向分析_Python涛哥
JS源码分析直接请求抓包如下：我们看到密文就是一个MD5的形式。那么我们来分析下JS代码。搜索pwd的时候，我们看到有49个。为了方便，我们可以试着搜索pwd:、pwd :、pwd=、pwd =。在搜索pwd=时，就看到了关于md5的函数：我们打断点定位后，发现果然是这段，我们点进去这个md5的函数：进去之后我们看到了这段md5的实现方式。当我们准备复制这一长段代码的时候，我们看到这是一个函数内包含的函数，那就很容易想要这个是一个闭包：那么，我们就把这个闭包函数，全部复制到调试工具
2021-10-28 21:26:46
2751
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人