默认情况下,Flask 在程序文件夹中的 templates 子文件夹中寻找模板。 ...如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为 404 的错误页 面。现在这个错误页面太简陋、平庸. 2). 如何自定义错误页面?...像常规路由一样,Flask 允许程序使用基于模板的自定义错误页面。 最常见的错误代码有两个: - 404,客户端请求未知页面或路由时显示; - 500,有未处理的异常时显示。...1). python的Web开发中， 业务逻辑(实质就是视图函数的内容)和页面逻辑(html文件)分开的， 使得代码的可读性增强， 代码容易理解和维护； 2)....Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷
在IE4开始微软就已经开始支持在线字体，不过没有流行起来，直到CSS3新增加了font-face模块，正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求 在线字体带来的革命： 在线字体本质就是文字，但是也可是像图形的文字。...在线字体 @font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，允许我们不依赖操作系统的字体，做到全平台字体统一和定制。...，他将被引用到你的Web元素中的font-family。...这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。 4.
p.img_src :self, :https, :data, :blob, assets_host 我们在上面的规则中添加静态资源服务器地址即可： p.img_src...将补丁打在依赖库上 先来聊聊副作用最小的方式，将补丁打在依赖库上，仅在输出 S3 资源的时候调整资源使用的协议。...在 Chrome 浏览器中打开 chrome://settings/privacySandbox，可以看到当前用户是否打开或关闭了 FloC 功能。...不过 Mastodon 官方也好，社区也罢，并没有针对 Mastodon 做服务运行状况检查，所以这里我们针对 Sidekiq 做一个简单的健康检查，保障服务能够在极端情况下自动恢复即可。...下一篇文章中，我将聊聊如何快速开发和集成机器人，让作为个人信息平台的 Mastodon 的信息流变的更有价值，交互方式更有趣。
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。...│ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff...为什么要进行响应式开发？...随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。 什么是响应式？...窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分
chrome cors 如果我们需要提供公共 API 并希望控制对某些资源的访问和使用方式时，CORS 能够发挥很大的作用。...如果需要，这会允许在网络上的任何位置访问所有路由。所以在本例中，每个域都可以访问两条路由。...为单个路由启用 CORS 如果只需要其中某一个路由，可以在某个路由中将 cors 配置为中间件： app.get('/', cors(), (req, res) => { res.json({...在当前的情况下，其他域都只能访问 / 路由。仅在与 API（在本例中为http://localhost:2020）的相同域中发起的请求才能访问 /:name 路由。...因此，在我们的例子中，可以从 http://localhost:8080 访问该API，并禁止其他域使用。 如果发送一个 GET 请求，则任何路径都应该可以访问，因为这些选项是在应用在程序级别上的。
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。...│ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff..."> img src="..." alt="..." class="img-circle"> img src="..." alt="..." class="img-thumbnail"> 辅助类 文本颜色...通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。 通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。...$('#myModal').modal("hide") // 隐藏 3.常用参数： 名称 可选值 默认值 描述 backdrop true/false/'static' true false表示有没有遮罩层
驱动得匹配（浏览器匹配，浏览器版本跟驱动匹配）） -3 写代码 3.2模块的使用 -selenium的使用 1 实例化 bro=webdriver.Chrome(executable_path=...= li.find_element_by_css_selector('.p-img img').get_attribute('src') # 选取.p-img下面的img标签 if...没有直接截取某个元素的功能，现在需要截取全图，然后通过图形软件，再把小图扣出来 # bro.minimize_window() #最小化 # bro.maximize_window() #最大化 #.../main.png') # 抠图 fram =img.crop(img_tu) # 截出来的小图 fram.save('code.png') # 调用超级鹰，破解 def get_result():...这个东西可以抓手机包，手机app都是http请求，手机端配置代理（装有fildder的机器地址） 手机跟电脑连到同一个路由器，手机端配置代理是你的电脑
在web开发中，curl常用于测试连接和RESTful APIs。...│ └── glyphicons-halflings-regular.woff2 └── js ├── bootstrap.js └── bootstrap.min.js 也有类似正则匹配的选项...# 解压 .gz 压缩包. tar -xzf file.tar.gz 如果你的操作系统里没有那个版本的tar，你可以使用gzip，zcat或者compress来减少文件存档大小。 ...grep grep是标准的Unix工具，用于在文本中查找字符串。它以文件或流作为输入，让其内容跟正则表达式做运算，并返回所有匹配的行。 需要过滤大型文件时，此命令很实用。...总结 以上就是我这总结出的12个Web开发者应该了解的命令行，可能不是那么完整和全面，那么希望如果大家还了解什么命令或没有在文中提到的，也欢迎大家补充和讨论。
通用适用于从HTML文件中查找数据。工欲善其事必先利其器，我们首先来了解XPATH常用的语法规则。...常用匹配规则： 属性 匹配规则描述 nodename 匹配此节点的所有子节点 / 匹配当前节点的直接子节点，不包含孙节点 // 匹配当前节点的所有子孙节点 . 匹配当前节点 .....response.text 2、提取电影名 现在浏览器的开发者工具都支持提取xpath规则，具体步骤如下： 首先在浏览器中打开网址，按下F12，ctrl+f查找电影名，鼠标右键弹出的菜单，点击Copy...a元素，就是html中的a标签，要想获取该元素中的文本值，必须在xpath匹配规则追加/text()，下面是追加/text()后的代码及运行结果： from lxml import etree import...3、提取电影图片链接 通过上步骤获取图片的xpath匹配规则为： //*[@id="app"]/div/div/div/dl/dd[1]/a/img[2] 通过开发者工具知道img节点有三个属性，分别是
"的div标签中，另外在此div下包含另外两个div，第一个div中的a标签含有我们想要的手办名称，第二个div标签中的span标签含有我们想要的手办厂商等但是我们想要获取的手办数据并不是一个手办，而是一页的手办..."的ul里的内容提取出来data = soup.find_all('ul',class_="hpoi-glyphicons-list")提取完ul标签里的内容，这里我们想将每个li标签拆分出来data...page={}'.format(i) urls.append(url)items = []for d_url in urls: # 发送请求 response = requests.get...text的区别在爬虫中，.string和.text是两个常用的属性，用于提取BeautifulSoup解析后的HTML或XML文档中的文本内容.string属性用于提取单个标签元素的文本内容，例如：from...要在BeautifulSoup4中使用XPath，可以使用bs4库的内置方法select()，这个方法接受一个XPath表达式作为参数，并返回匹配该表达式的节点列表。
同时在R类初始化方法中增加一些必备的参数，你可以直接看下面的代码 __retrying_requests 方法为私有方法，其中根据get和post方式进行逻辑判断 import requests from...同步完善类的初始化方法，在开发中发现，我们要爬取的网页编码是gb2312 所以还需要给某些方法增加一个编码参数 import requests from retrying import retry import...__start.format(i) for i in range(1,page_count)] return urls # 正则表达式匹配末页，分析页码 def get_page_count.../>') # 匹配图片，匹配不到就代表本次操作已经完毕 img_down_url = pattern.search(content) # 获取到了图片地址...+1操作 所有的代码都在上面了，关键的地方我尽量加上了标注，你可以细细的看一下，实在看不明白，就多敲几遍，因为没有特别复杂的地方，好多都是逻辑。
从视频中可以看到paolo soares用一个及其简单的例子阐述了传统写法的问题： 1、业务逻辑和UI组件糅合在一起。 2、不方便测试，不利于单独的测试业务逻辑部分。...做过android开发的小伙伴看到这个模式就一定会联想到MVP设计模式了吧，其中Presenter似乎就是干businessLogic的事情了。...更具我自己的一点理解来看，实际上BloC设计模式，似乎和MVP没有什么本质区别，两种设计模式的最终目的就是为了把和UI糅合在一起的业务逻辑代码剥离开来，单独的抽取到一层中。...在flutter中，实现BloC模式的精髓就是， 展示的数据从BloC中来，具体到了stream上，有了stream的到来，就可以使用StreamBuilder来构建ui了。..._actionController = StreamController(); StreamSink get incrementCounter => _actionController.sink;
对于开发人员来说，终端是最重要的工具之一。掌握终端，能够有效的提升开发人员的工作流程。使用终端，许多日常任务都被简化为了编写简单的命令并按下 Enter 按钮。...在 Web 开发中，Curl 经常和 RESTful API 一起使用，用于测试连接。...inputfile1 inputfile2 # Extract .gz archive. tar -xzf file.tar.gz 如果你的操作系统没有该版本的 tar，则可以使用 gzip，zcat...Grep Grep 是一个用于在文本中查找字符串的标准 Unix 实用程序。Grep 以文件或直接流的形式进行输入，通过正则表达式运行其内容，并返回所有匹配的行。...总结 对于 Web 开发人员来说，如果上述的12个终端命令中，还有你不熟悉的命令，那么就应该通过本文快速的熟悉起来，并逐渐的运用到自己的开发工作中。
终端CMD 是开发人员工具中最重要的提高生产力工具之一。掌握它可以对你的工作流程产生非常有用的帮助。...之前推荐了一篇 开发者应该了解的 10 个 Linux 命令，在本文中，我将为你准备有逼格的一组Unix命令，这些命令将帮助你充分利用终端。...其中一些是内置的，其他的是经过时间考验并且可以在一分钟内安装的免费工具。 Curl Curl是一个命令行工具，用于通过HTTP（s），FTP和许多您可能没有听说过的其他协议发出请求。...在Web开发中，curl通常用于测试连接和使用RESTful API。...Grep Grep是用于在文本中查找字符串的标准Unix实用程序。它以文件或直接流的形式接受输入，通过正则表达式运行其内容，并返回所有匹配的行。 当处理需要过滤的大文件时，该命令会派上用场。
代码中，先声明一个fetch_img_url的函数，同时携带一个参数，这个参数也可以直接写死。...session可以进行多项操作，比如post, get, put等 代码中 await response.text() 等待网页数据返回 asyncio.get_event_loop创建线程，run_until_complete...方法负责安排执行 tasks中的任务。...代码在下面####的位置，需要注意的是，我采用的原始的正则匹配，在编写正则表达式的过程中，我发现一步竟然没有完整匹配，只能分成两个步骤了，你可以看一下具体的细节o(╥﹏╥)o 查找所有的图片匹配我们想要的图片链接 async def fetch_img_url(num): # 去抄上面的代码 async with aiohttp.ClientSession
Selenium 简介 Selenium是一个Web的自动化测试工具，最初是为网站自动化测试而开发的，类型像我们玩游戏用的按键精灵，可以按指定的命令自动操作，不同是Selenium 可以直接运行在浏览器上.../main.png') #从截图中按照位置扣除验证码 code_img=img.crop(img_tu) # 把扣出来的图，保存到本地 code_img.save('....，执行页面中得函数 from selenium import webdriver import time bro=webdriver.Chrome(executable_path='....,执行页面中的函数''' bro.execute_script('alert(md5_vm_test())') time.sleep(5) bro.close() 切换选项卡 import time...img='http:'+good.find_element_by_css_selector('div.p-img img').get_attribute('data-lazy-img')
框架大小： 154 KB 预处理器： Less和Sass 响应式布局：是 模块化：是 启动模板/布局：是 图标集： Glyphicons Halflings设置 附加/附件：无捆绑，许多第三方插件可用。...但是你需要手动输入颜色值，因为没有颜色选择器可用。...是这里所讨论的所有框架中，最具创新性和全功能的框架。...额外/附加组件：是 独特的组件：Article, Flex, Cover, HTML Editor 文件：好 自定义：高级GUI定制程序仅在版本2（以前的版本）中可用 浏览器支持： Chrome，Firefox...这可能会鼓励更多的开发人员放弃前端框架，从头开始编写他们自己想要的布局。
6.权限管理：完善的前后端权限管理方案 注意的是：本地开发推荐使用Chrome 最新版浏览器，不支持Chrome 80以下版本。生产环境支持现代浏览器，不支持IE。 2....，内置丰富的主题配置，有着极高的代码规范，基于文件的路由系统以及基于 Mock 的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。...：丰富的主题配置及暗黑主题适配 基于文件的路由系统：自动生成路由声明、路由导入和路由模块 权限管理：完善的前后端权限管理方案 8. blur-admin Star Blur admin 是Angular...1000+ 图标：具有 Font Awesome、Ion Icon 和 Glyphicons 功能。...浏览器兼容性：支持大多数主流浏览器，包括 Safari、IE9+、Chrome、FF 和 Opera。 6款皮肤：选择与您的品牌相匹配的皮肤或编辑 LESS 变量来创建您自己的皮肤。
延迟加载路由 构建 SPA 时，JavaScript 捆绑包可能会变得很大，从而增加页面加载时间。如果我们可以将每个路由的组成部分拆分为一个单独的块，然后仅在访问路由时才加载它们，则效率会更高。...你还可以通过在浏览器中打开开发者控制台来验证此功能是否正常。...在 Network 标签中，一旦你访问新路由，就会异步加载多个 JavaScript 文件。在开发模式下，每个块都将被赋予一个自动递增的数字。在生产模式下，将使用自动计算的哈希值代替。...可以通过使用浏览器中开发者工具的 Performance 标签来实现。 为了获得准确的数据，我们必须在 Vue 应用中激活性能模式。...在 Chrome 中，“ Timings” 行显示重要标记，例如 “First Contentful Paint” 和 “First Meanfulful Paint” 时间。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
%EF%BC%9A%E4%BB%85%E5%9C%A8%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84Chrome%E4%B8%AD-article){kind=link}
%EF%BC%9A%E4%BB%85%E5%9C%A8%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84Chrome%E4%B8%AD-ask){kind=link}
%EF%BC%9A%E4%BB%85%E5%9C%A8%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84Chrome%E4%B8%AD-video){kind=link}
%EF%BC%9A%E4%BB%85%E5%9C%A8%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84Chrome%E4%B8%AD-salon){kind=link}
