使用Flask构建个人简历网站 路由、模板渲染与静态文件处理 摘要 本文将介绍如何使用Flask框架来构建一个简单的个人简历网站。...静态文件处理 静态文件包括CSS、JavaScript、图片等不经常变动的文件。在Flask中，你可以将静态文件放在项目的static文件夹中，然后通过特定的URL来访问它们。...应用示例 当然，下面是一个基于Flask的实际应用场景示例代码，它演示了如何创建一个简单的个人简历网站，包含首页、个人简历页面以及如何使用路由、模板渲染和静态文件。...不过，我仍然可以为你解释如何在 Flask 应用中结合使用openpyxl和 Flask 的路由、模板渲染及静态文件处理功能。 1....Flask 静态文件 Flask 的静态文件通常包括 CSS、JavaScript、图片等文件，它们位于项目的static文件夹中。
在这个模式中，客户端向服务器发出一个请求，服务器响应一个网页，但与前面的情况不同，并不是所有的页面数据都是HTML，页面中也有部分代码，通常用Javascript编写。...这种类型的应用称为单页应用（SPAs） 大多数应用是这两种模式的混合，并结合了两者的技术特点。我的Microblog应用主要是服务器端应用，但今天我将添加一些客户端操作。...当你点击“Create”按钮时，将看到一个表单，并可以在其中定义一个新的翻译器资源，然后将其添加到你的帐户中。你可以在下面看到我是如何完成表单的： ?...当我使用Web表单工作时，我不需要查看request.form，因为Flask-WTF可以为我工作，但在这种情况下，实际上没有Web表单，所以我必须直接访问数据。...对于加载器，我将使用一个小的动画GIF，它已添加到Flask为静态文件保留的app/static目录中。
得到JavaScript 对象形式的 JSON 数据，就可以任意访问数据了。...2.3 渲染页面 渲染页面主要是指将从服务端获取的响应数据以某种形式显示在Web页面的某些元素上，如下面的代码将数据以 li 节点的形式添加到 ul 节点的后面。...现在使用 Flask 实现 Web 服务，该服务通过根路由显示 index.html 的内容，使用 /data 响应路由客户端的请求。...逆向工程 在上面已经模拟实现了一个异步装载的页面，这里以这个程序为例进行分析，如果对这个程序的实现原理不了解，那么应该如何得知当前页面的数据是异步加载的呢?以及如何获取异步请求的 URL 呢?...接下来就可以用代码完成此页信息的爬取了，但是发现，该页面的信息是较少的，所以我们要进入到详情页，进行详情页数据的爬取，这样又有一个问题诞生了？要进入到详情页，详情页的URL在哪呢？
在这个教程中，我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来。 简单的来说，如果想在 Flask 中使用 Vue 框架是没有什么问题的。...做一个用 Vue.js 做前端 (用单页组件，HTML5 历史模式的「vue-router」，以及其他好的特性)，用 Flask 做后端的单页应用怎么样？...添加 404 页面 因为我们定义了一个将所有请求跳转到 index.html 的路由，因此 Flask 将无法捕获到 404 错误（以及不存在的页面），将一些找不到页面的请求也跳转到 index.html...让我们使用 Flask 的 CORS 插件，这将允许我们为 API 访问创建规则。...现在，您拥有一个使用自己喜欢的技术构建的全栈应用程序啦。 ? ? 后记 最后，我想就如何改进此解决方案说几句话。 首先，只有在您想要让 API 可供外部服务器访问时才使用 CORS 扩展。
# 如何设置， 使得服务奇特主机的浏览器可以访问? ...'0.0.0.0'开放所有的IP， 使得可以访问 # 如何修改端口? ...如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为 404 的错误页 面。现在这个错误页面太简陋、平庸. 2). 如何自定义错误页面?...--相当于python里面的定义函数, 后面使用的场景: 分页显示--> {% macro render(id) %} hello world {{ id }} {% endmacro...CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。
过程 github的404一点也不复杂,只是需要在根目录添加一个404.html的文档,或者404.md的文档就行了. 具体的代码可以参考如下: 404.html <!...: /404.html --- 对不起,目前无法访问你的连接,你可以访问主页https://wangkun19930608.github.io... [注意] 下面的代码加了就直接成为了腾讯的404页面了,有兴趣的可以自己弄弄.不想要的可以把前面的这一句话删掉....界面,可以参考下下面的连接: 猫的状态码 狗的状态码 使用时候直接跳转或者内联到对应的状态码即可.如: https://http.cat/404 https://httpstatusdogs.com/404...参考文章 Github page 如何自定义404页面_百度经验 关于网站所有404页面替换为腾讯公益404页面的说明 版本说明 20180814 文章完成时间
大多数这样的框架还提供JavaScript插件，以实现不能纯粹使用HTML和CSS来完成的功能。 02 bootstrap 简介 最受欢迎的CSS框架之一是由Twitter推出的Bootstrap。...可以下载此文件并将其添加到你的项目中，或直接从CDN导入。然后，你可以根据其文档开始使用它提供的通用CSS类，实在是太棒了。...你可能还需要导入包含框架JavaScript代码的bootstrap.min.js文件，以便使用最先进的功能。...the app_content block #} {% block app_content %}{% endblock %} {% endblock %} 从中你可以看到我如何从...对于此块，我调整了Bootstrap导航栏文档中的示例，以便它在左侧展示网站品牌，跟着是Home和Explore的链接。然后我添加了个人主页和登录或注销链接并使其与页面的右边界对齐。
密码等敏感数据必须被保护起来，而bcrypt正是一个值得推荐的选择。 ? 2. 如何使用Flask-Bcrypt? 在命令行中执行pip install flask-bccrypt进行安装: ?...什么是Flask-Login ? Flask-Login 为 Flask 提供了用户会话管理。它处理了日常的登入，登出并且长时间记住用户的会话。 4. 如何使用Flask-Login?...修改文件夹flaskblog中models.py，让用户类继承flask-login中的UserMixin类，能够使用继承过来的属性和方法，添加登录用户查询方法： ?...修改文件夹flaskblog\templates\layout.html，添加账户信息、退出登录导航html代码： ?...关注公号 下面的是我的公众号二维码图片，欢迎关注。 yale记公众号
提供运行时环境的元素称为用户代理。 怎样使用HTML标记语言 上面的文字概念看上去很难理解，下面就通过具体的标记符号来认知HTML这门标记语言。...HTML 段落 段落(Paragraph)标签，通过标签 p 来定义的，表示这是一个段落。 ? HTML 链接 HTML 链接是通过标签 a 来定义的。...访问yeching.info实际上就是获取到我在阿里云买的服务器上的首页地址文件 index.html，只不过我把index.html隐藏了。 ?...拓展 到这里相信你对HTML标记语言应该有点了解了，网页除了HTML内容外，还有CSS和JavaScript，简单点说，HTML相当于网页骨架，CSS给网页添加外观的，JavaScript让网页可以进行交互动起来等...下面是一个效果图，通过css让标题，段落和图片改变了外观，通过javascript点击段落会弹出一个提示警告框。 ? ?
DOCTYPE html> 我的第一个网页 欢迎来到我的网站 这是一个示例网页... 点击这里访问示例网站 上述代码创建了一个基本的网页，包括标题、段落和链接。...前后端分离：现代Web应用程序中，前后端通常采用分离的架构。前端使用HTML、CSS和JavaScript构建用户界面，而后端提供API以供前端访问和使用。...AJAX与数据更新：使用JavaScript和AJAX技术，前端可以与后端进行异步通信，以实现数据的实时更新。这意味着用户可以在不刷新整个页面的情况下获取最新的数据。 3....同时，与其他技术（如CSS、JavaScript、数据库等）的结合使用可以实现更丰富的用户体验和功能。 希望本文帮助您更好地理解HTML及其在软件架构中的作用，为Web开发的学习和实践提供基础知识。
DOM的核心是节点（Node）对象，它代表了文档中的各个部分。本博客将深入探讨JavaScript DOM Node对象，帮助您更好地理解它的作用和如何使用。...> 在上面的示例中，我们首先获取了元素的引用，然后使用firstChild和lastChild属性访问了其第一个和最后一个子节点。...，我们首先创建了一个新的元素，设置了其文本内容，然后使用appendChild方法将新段落添加为元素的子节点。...同时，我们还切换了展开/折叠按钮的图标。 总结 JavaScript DOM Node对象是DOM操作的核心。通过了解和掌握Node对象的属性和方法，您可以更轻松地访问和操作HTML文档的内容。...这篇博客深入介绍了JavaScript DOM Node对象，包括不同类型的节点（元素节点、文本节点、属性节点、注释节点和文档节点）以及如何访问、创建、添加、删除和替换节点。
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。 单行注释以 // 开头。...下面的例子使用多行注释来解释代码： /* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */ document.getElementById("myH1").innerHTML="欢迎来到我的主页...; 使用注释来阻止执行 在下面的例子中，注释用于阻止其中一条代码行的执行（可用于调试）： // document.getElementById("myH1").innerHTML="欢迎来到我的主页"...; 在下面的例子中，注释用于阻止代码块的执行（可用于调试）： /* document.getElementById("myH1").innerHTML="欢迎来到我的主页"; document.getElementById...; */ 在行末使用注释 在下面的例子中，我们把注释放到代码行的结尾处： var x=5; // 声明 x 并把 5 赋值给它 var y=x+2; // 声明 y 并把 x+2 赋值给它
在这个示例中， 元素使用内联样式定义了文本的颜色和字号。 在HTML DOM中，您可以使用JavaScript来访问和修改内联样式。...下面是如何通过JavaScript访问上述段落的颜色和字号： const paragraph = document.querySelector("p"); const color = paragraph.style.color...接着，我们使用JavaScript的classList属性来添加和删除这个类名。 示例: 切换类名 下面是如何通过JavaScript来切换元素的类名： <!...这个函数使用classList的toggle方法来切换段落的类名。 修改样式属性 在HTML DOM中，您还可以通过JavaScript直接访问和修改元素的样式属性。...总结 HTML DOM提供了强大的样式控制功能，允许您通过JavaScript来访问和修改元素的样式。您可以使用内联样式、操作类名、修改样式属性，以及处理伪类和伪元素。
{page}页的图书列表 #f是将当前环境中的变量直接放入花括号中进行使用 这个的话需要我们去导入request 模块，然后我们去访问 接下来传值 Jinja2 模板渲染 点击template...中的html 接下来命名为index.html，随便编写一下内容 那我们这里该如何进行使用呢，这里需要调用一个模块，即render_template模块，然后简单修改代码即可，具体如下 from flask...，写入一个person参数，其中也包含这两个属性，接下来如何访问呢，在Jinjia2模板中，字典可以通过字典名[属性]来访问，也可以这样访问字典名.属性，我们的index.html文件内容如下 <!...那么如何进行使用呢，具体如下所示，向这些内置的，即Python自带的，我们直接使用管道符|加上过滤器名即可使用，我们这里的index.html代码如下 我是父模板的文字 我们的子模板child.html内容如下 而后可以看到我们主入口文件中是用的child.html
浏览器地址栏访问的是网页，因此JavaScript需要放到网页里。... 我的第一个标题 我的第一个段落。...（ps：或者拖动到chrome浏览器） 3 把JavaScript代码放到网页里 接下来如何把JavaScript放到index.html里呢，有两种方式 方式1，直接写到index.html里，代码如下...body> 我的第一个标题 我的第一个段落。...最后想说的 不安逸，不浮躁。任何学习都不是一蹴而就的，牛B就是一个学习积累的过程，别指望两三个月，你的水平就多么厉害。倚天屠龙记里面的武功最牛B的是张三丰，而不是张无忌。
在本教程中，我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互。 如果你只是想使用 Vue.js 库和 Flask 模板基本上是没什么问题的。...如果我要一个用 Vue.js（使用单页面组件，在 vue-router 开启 HTML5 history 模式，还有使用其他一些非常棒的特性）框架的单页面和 Flask 做后台服务的应用？...应该能按下面的要求工作： Flask运行的服务可以访问 index.html 首页和 Vue.js 应用 在前端开发环境，使用 Webpack 和它提供的很多非常棒的功能 可以从前端的单页面应用访问...现在你拥有了一个用你喜爱的技术完成的全栈应用。 ? ? 后记 最后我想说说如何改进这个方案。 首先，在你代码里所有使用到的环境变量。主要是关于使用 FLASK_DEBUG 变量。...---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全
“ 从今天开始，准备从头开始搭建一个基于flask的鉴权系统，一点一滴，积累于生活” 从登陆开始 01.知识树 本文涉及到如下知识点 1. flask-login的简单使用 2....到此，一个简单的表结构就设计好了。 03.OAuth鉴权 简单来说，为一个网站添加第三方登录指的是提供通过其他第三方平台账号登入当前网站的功能。比如，使用QQ、微信、新浪微博账号登录。...登陆页面 登陆页面继承自base.html模板，并使用wtf快速渲染表单 {% extends "base.html" %} {% import "bootstrap/wtf.html" as wtf...(): return github.authorize(scope='repo') 这里需要说明，该调用需要用到我们前面获得的客户端ID和密钥，我这里把相关信息写到了一个配置文件中，并在初始化flask...请求成功后的的响应会包含访问令牌（Access Token）。 很幸运，上面的一系列工作flask-github会在背后替我们完成。
或者，您可以使用init_app（）方法。 如果启动此应用程序并导航到http://localhost:5000/admin/，则应该会看到一个顶部带有导航栏的空白页。...向索引页添加内容（Adding Content to the Index Page） 您访问http://localhost:5000/admin/时，您首先会注意到它只是一个带有导航菜单的空页面...因此，现在您可以向索引页添加任何内容，同时保持一致的用户体验。...你如何实现逻辑取决于你自己，但如果你是使用像Flask-Admin一样低级别的包，那么限制登录可以简单地如： class MicroBlogModelView(sqla.ModelView):...要做到这一点，您需要重写内置的flask安全模板，并让它们通过在每个文件的顶部添加以下内容来扩展flask管理基模板： {% extends 'admin/master.html' %} 现在，
提示：本篇文章内容建议使用电脑浏览器查阅。 今天把之前关于Flask_Blog项目中关于帖子的主页展示进行分页，并实现点击用户名称，显示该用户所发的帖子信息和数量。接下来开始： ?...修改Flask_Blog\flaskblog\routes.py，修改home方法使用分页查询方式，每页显示两条数据： ? 添加根据用户姓名查出所发帖子列表方法： ?...修改Flask_Blog\flaskblog\templates\home.html，添加点击用户名跳转到用户所发帖子连接，添加分页html代码： ?...一共加了8条数据，所以分了4页，鼠标点击第2页，显示第二页内容： ? 点击帖子的用户名test，查看test用户的发帖信息： ? 今天关于帖子的分页功能实现就到这里！...关注公号 下面的是我的公众号二维码图片，欢迎关注。 yale记公众号
对话框，以此来证明设置是正确的。 在static目录中创建一个index.html文件，并填写下面的代码： 在static/js目录下创建一个index.jsx文件，并添加下面的代码： alert(“Hello World!”)...$ npm run watch 打开浏览器并访问index.html，应该能够看到弹出一个写着“Hello World!”的提示窗口。 ?...配置Python服务 关于Python服务器我们将会使用Flask。Flask是小型Python应用的最佳选择之一。...创建一个新的virtualenv并安装Flask 在server目录中创建Flask服务源码文件，添加一个用来返回返回“Hello World!”
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
