首页
学习
活动
专区
圈层
工具
发布

Web 应用开发进化论

如果你在浏览器中导航到特定的 URL,你的浏览器会与服务器通信以请求资源(例如 HTML)来为你显示网站。越过传统网站的思维,客户端其实也不一定是浏览器(例如 cURL)。...现在,在创建博客文章后,如果博客文章的数据不是静态的,而是存储在数据库中的,服务器如何发送 HTML 文件呢?这就是服务器端渲染(不要误认为是服务端路由)发挥作用的地方。...时至今日,它们中的大多数在现代 Web 应用程序中仍然非常活跃。 在单页应用程序出现之前,浏览器会从网站服务器请求 HTML 文件和所有链接的资源文件。...可以说,在我们拥有单页应用之前,我们一直在使用多页应用,因为对于每个页面(例如 /about),都会向 Web 服务器发出一个新请求,以请求它所需的所有文件。...之前,我们已经在文件和用户交互之间使用 HTTP 方法进行 CRUD 操作了,但是没有遵循明确的约束 — 比如使用 PHP 等服务端语言创建文章。

5.9K10

三分钟让你了解什么是Web开发?

这在服务器上作为HTML文件保存,可以使用web浏览器查看。浏览器从服务器请求文件,服务器端起它并关闭连接。 HTML是一种用于创建web页面的标准标记语言。...换句话说,它是一个带有标记的简单文本文件,帮助浏览器找到如何显示信息的方法。...我们使用CSS设计了前面的示例。假设我们在不同的页面上使用表,但是使用相同的CSS样式。我们可以将所有这些样式信息转移到它自己的文件中。...HTML表单中最常用的方法是GET和POST。 服务器端脚本可以读取浏览器通过POST发送的值,然后处理它或将其存储到文件或数据库中。...我们可以使用以下三种重要的方法来请求web服务器: GET:获取请求的资源作为响应。 POST:向服务器提交表单数据,或者通过Ajax提交任何数据。

9.3K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何使用Vue.js和Axios来显示API中的数据

    熟悉JSON数据格式,您可以在JavaScript中了解如何使用JSON来了解更多信息。 熟悉向API发出请求。 有关使用API​​的综合教程,请参阅如何在Python3中使用Web API 。...在包含Vue的标签下面,添加这个代码,它将创建一个新的Vue应用程序并定义一个我们将在页面上显示的数据结构: 的index.html ......为了提出请求,我们将Vue中的mounted()函数与Axios库的GET函数结合使用来获取数据并将其存储在数据模型的results数组中。...当我们的应用第一次加载时,我们不会有数据,但我们不希望事情中断。 我们的HTML视图正在等待一些数据在加载时迭代。 axios.get函数使用Promise 。...您学习了如何在页面上显示数据,迭代结果以及将静态数据替换为API的结果。 既然您已经理解了基础知识,那么您可以将其他功能添加到您的应用程序中。

    12.6K20

    服务器高并发负载解决方案

    在自己页面上显示一些不是自己服务器的资源(图片、音频、视频、css、js等) 由于别人盗链你的资源会加重你的服务器负担,所以我们需要防止 可能会影响统计 防盗链是什么? 有哪几种方式?...Not Modified 协商缓存,浏览器在本地没有命中的情况下,请求头中会发送一定的校验数据到服务器。...文件(静态化实际作用:缓存成一个html文件),再次访问时就会重定向到静态文件 适用场景 对实时性要求不高的页面 为什么要使用静态化?....使用swoole扩展 2.使用消息队列 3.接口的并发请求 curl_multi_init() 数据缓存 什么是数据缓存?...如何使用Mysql查询缓存? 如何使用Memcache缓存? 如何使用redis缓存?

    2.8K20

    Ajax第三节

    使用模版引擎将获取到的数据渲染到页面 3. 因为图片路径是从服务端获取的,加载需要时间, 渲染时需要设置宽高 4. 点击加载更多, 请求下一页数据, 注意: 加载时,显示"正在加载中..."...,并且要求不能重复发送ajax请求 5. 给window注册scroll事件,当触底时,需要动态的加载图片。(规定: 最后一张图片开始显示在屏幕中时, 加载图片) 6....接口文档 //接口说明:瀑布流分页数据 //接口地址:data.php //请求方式:get //接口参数:page 当前是第几页 pageSize 当前页需要显示多少条 //返回类型 json...,从不同源的php文件中获取到了数据 缺点:获取数据的script标签必须写在使用的script标签的前面,必须保证先有数据才能对数据进行渲染。...jquery对于jsonp的封装 //使用起来相当的简单,跟普通的get请求没有任何的区别,只需要把dataType固定成jsonp即可。

    1.6K20

    Nginx 防御CC攻击的两种方法 原

    而肉鸡CC攻击是黑客使用CC攻击软件,控制大量肉鸡,发动攻击,相比来后者比前者更难防御。因为肉鸡可以模拟正常用户访问网站的请求。伪造成合法数据包。...大量HTTP请求产生了大量的数据库查询,可以在几秒之内使数据库停止响应,系统负载升高,最终导致服务器当机。 本文主要介绍CentOS+Nginx下如何快速有效得防御CC攻击。...7.0为例,程序目录下有比较多的可以直接访问的php文件,但其中最容易受到攻击的一般有index.php(首页)、forumdisplay.php(板块显示)、viewthread.php(帖子显示)。...这些页面同一个IP只许建立3个连接,并且每秒只能有1个请求(突发请求可以达到2个)。...在Nginx中自定义503页面: error_page   503   /errpage/503.html; 503页面的源代码: html> 页面即将载入....

    2.7K40

    Web 开发入门之旅:从静态页面到全栈应用的第一步

    当用户点击按钮时,前端将向后端发送请求,后端返回一段信息并显示在页面上。这一过程帮助你理解前后端如何协同工作。...项目解读前端与后端通信:通过 fetch API 向 message.php 发送请求,后端返回 JSON 数据。数据展示:前端接收并解析 JSON 数据,将消息内容显示在页面的指定区域。...项目结构mysql-demo/ ├─ index.html ├─ get_messages.php主要文件1. index.html(前端)数据库交互:PHP 脚本连接 MySQL 数据库,执行 SQL 查询,将结果以 JSON 格式返回给前端。前后端协作:前端通过 fetch 请求获取后端数据,并将其动态展示在页面上。...中文显示乱码 确保 HTML 和 PHP 文件均指定 charset="utf-8"。

    81510

    【随手记】Nginx?开卷!

    正向代理:居家办公用过公司的内网VPN吧,你所有的请求在发送前,被代理成了内网的IP去获取内网的资源,如数据库、私有代码仓库等。...反向代理:业务中经常用到,所有前端的请求被发送到同一个端口(80),通过Nginx监听转发到相应的前端、后端上。...它可以在http、server、location中定义,可单独使用。路径映射的规则可以直接参照linux命令行。 作用:定义全局的根目录,可被子模块中的root配置覆盖。...位置:可以在http、server、location中定义,可单独使用。 映射规则:可以相对路径、可以是绝对路径。...alias不支持直接使用正则,但可以获取location匹配的参数,且必须使用。 在同一个 location 块中,不能同时使用 root 和 alias。

    35810

    协议分析|HTTP协议浅析

    服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。 HTTP是媒体独立的:这意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。...GET是从服务器上获取数据,POST是向服务器传送数据 GET请求参数显示,都显示在浏览器网址上,HTTP服务器根据该请求所包含URL中的参数来产生响应内容,即“Get”请求的参数是URL的一部分。...当所有的文件都下载成功后,网页会根据HTML语法结构,完整的显示出来了。...keep-alive在很多情况下能够重用连接,减少资源消耗,缩短响应时间,比如当浏览器需要多个文件时(比如一个HTML文件和相关的图形文件),不需要每次都去请求建立连接。 4....HTTPS 是以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 HTTP 请求,一旦出现就是提示或报错。 5.

    84600

    协议分析|HTTP协议浅析

    HTTP是媒体独立的:这意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。...的区别 GET是从服务器上获取数据,POST是向服务器传送数据 GET请求参数显示,都显示在浏览器网址上,HTTP服务器根据该请求所包含URL中的参数来产生响应内容,即“Get”请求的参数是URL的一部分...当所有的文件都下载成功后,网页会根据HTML语法结构,完整的显示出来了。 ?...keep-alive在很多情况下能够重用连接,减少资源消耗,缩短响应时间,比如当浏览器需要多个文件时(比如一个HTML文件和相关的图形文件),不需要每次都去请求建立连接。 4....HTTPS 是以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 HTTP 请求,一旦出现就是提示或报错。 5.

    1.4K20

    Spiral 详细上手指南之请求和响应

    Spiral 详细上手指南系列文章的代码托管在 gitee 仓库,每一篇文章结束时的代码都会在一个单独的分支下,本篇文章对应的代码分支是 step-3....在后续随着演示 APP 的开发进展,我们会进一步介绍 Spiral 中如何获取用户请求信息,包括输入验证。但目前我们先来考虑一下响应输出的问题。...今天文章的第二部分我们要来实现博客的列表页和详情页。 模拟数据 为了在没有数据库之前模拟博客文章的查询,我们用一个 JSON 文件来提供初始数据。用到的 JSON 文件在这里。...Twig 模板 在本节中,我暂时用 PHP 原生模板,所以对应的模板文件是 pages/list.php 和 pages/single.php....详细的代码可以在 gitee 上的 spiral-demo 仓库中找到。 至此,我们简单实现了博客列表页和详情页,数据是存储在一个 JSON 文件中,在服务器启动时自动载入到内存。

    1.6K130

    WordPress主题制作(四):制作头部模板header.php

    我们可以提取这部分相似的代码,放到一个单独的文件header.php中,各个页面想用这部分代码的时候再用WordPress的get_header()包含进去就可以达到所有页面头部内容一致,不再需要给每个页面都写一次这部分代码了...header.php会被所有的模板页面(主页、分类页、页面、标签页等)所包含,他的内容应该是动态的,适合不同页面的,不应该是单纯的HTML,因为HTML是静态的。...那为什么header.php 没有加载呢?因为这是WordPress的主题,是要被WordPress的主程序调用,经过层层解析才能把你的博客显示出来,而不是简简单单的html静态网页文件。...$description1 : $description2; // 填写自定义字段keywords时显示自定义字段的内容,否则使用文章tags作为关键词 $keywords = get_post_meta...>" /> 显示菜单栏 这里只在菜单栏中列出页面page,将header.php中以下代码: html

    2.6K20

    C#进阶系列——WebApi接口测试工具:WebApiTestClient

    (3)、可以修改http请求头文件Head和请求体Body里面的参数,指定发送http请求的特性,比如指定我们最常见的contentType指示参数的类型。...例如本文查看Get请求的无参方法,右下角有按钮可以测试接口。 ? 点击“Test API”按钮 ? 点击Send发送请求 ? 第二个有参数的接口 ? 手动输入参数,得到返回结果 ?...三、WebApiTestClient使用 1、如何引入组件 首先,我们需要定义一个API项目 ? 然后通过Nuget引入组件,如下图。记住选下图中的第三个。 ?...(1)配置生成xml的路径。我们在项目上面点右键→属性→生成标签页配置xml的路径 ? (2)在xml的读取路径:在下图的HelpPageConfig.cs里面配置一句话,指定xml的读取路径。 ?...还不赶紧试试~~ 四、总结 上面简单总结了下WebApiTestClient的使用,如果你的WebApi也是一个单独的服务,可以整起来当帮助文档用,省得你自己写。哈哈,不要谢我,请叫我红领巾。

    2.5K70

    Cloudflare 页面缓存(Page Rules)优化WordPress全站缓存配置规则

    当访客访问你网站页面的时候,所有的静态文件都是由Cloudflare的节点直接给到访客的,但是HTML文件是默认不缓存的。也就意味着访客访问你的某一页面的时候。仍然会回源你的服务器。...所以,本篇文章就是教你如何使用Cloudflare的页面规则(Page Rules)把整个HTML页面给缓存。...下面两张演示图片就是使用了Cloudflare页面规则之后,节省的源站服务器的请求及流量。 如何通过浏览器判断某个页面是否被Cloudflare的CDN进行缓存?...这条简单粗暴的直接将所有带有“.php”的页面请求全部Bypass 也就是不缓存。...毕竟搜索在Wordpress这个系统中是需要调用数据库,很消耗服务器资源的。

    16.7K31

    wordpress 学习笔记 (二)

    1.主题文件构成 存放目录:wp-content/themes 必要文件:style.css 和 index.php 主题信息:存放在style文件头部 主题信息 Theme Name: 主题的名称 Theme...详细说明 screenshot.png 缩略图 显示在后台主题列表页的封面 taxonomy.php 自定义分类法 通用自定义分类法的显示模板 taxonomy-XXX.php 指定分类法 author.php...② $parents 字符串值,默认为空 指定父分类的显示方式,可选值如下: 空值:不输出父分类; multiple:父分类和子分类都是单独的链接,但处于同一个li元素中; single:不输出父分类链接...获取文章所属的标签信息(tags) wp模板标签the_tags用于在文章页输出标签链接 函数参数 ① $before 字符串值,默认值:null 在标签链接 前 显示的文本。...② $sep 字符串值,默认值:, 在每个标签链接 之间 显示的文本。 ③ $after 字符串值,默认为空 在标签链接 后 显示的文本。

    1.6K20

    Ajax第一节

    发送get请求 XMLHttpRequest以异步的方式发送HTTP请求,因此在发送请求时,一样需要遵循HTTP协议。 使用XMLHttpRequest发送get请求的步骤 //1....设置请求头 //请求头中可以设置Content-Type,用以说明请求主体的内容是如何编码,get请求时没有请求体,无需设置 //4....json进行数据传输 思考: js有一个对象,如何发送到php后台 php中有一个对象,如何发送到前台。...接口文档 //接口说明:瀑布流分页数据 //接口地址:data.php //请求方式:get //接口参数:page 当前是第几页 pageSize 当前页需要显示多少条 //返回类型 json...,从不同源的php文件中获取到了数据 缺点:获取数据的script标签必须写在使用的script标签的前面,必须保证先有数据才能对数据进行渲染。

    4.9K20

    经典面试:当你输入一个网址后回车,实际会发生什么?

    服务器“处理”请求 7. 服务器发回一个HTML响应 8. 浏览器开始显示HTML 9. 浏览器发送获取嵌入在HTML中的对象 10....请求处理就是一个能够读懂请求并且能生成HTML来进行响应的程序(像ASP.NET,PHP,RUBY…)。 举 个最简单的例子,需求处理可以以映射网站地址结构的文件层次存储。...请求处理请求处理阅读请求及它的参数和cookies。它会读取也可能更新一些数据,并讲数据存储在服务器上。然后,需求处理会生成一个HTML响应。 所 有动态网站都面临一个有意思的难点 -如何存储数据。...浏览器会根据报头信息决定如何解释该响应,不过同时也会考虑像URL扩展内容等其他因素。 8. 浏览器开始显示HTML 在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了: ?...浏览器发送获取嵌入在HTML中的对象 ? image 在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。

    1.1K20

    HTML注入综合指南

    [图片] 我们已经成功设计了我们的第一个网页。但是这些标签如何为我们工作,让我们看看它们: **HTML>**元素是每个HTML页的根元素。 ****确定关于文件的头信息。...使用GET方法,我们从特定来源**请求数据**,而POST方法用于**将数据发送到服务器**以创建/更新资源。...** [图片] 因此,此即时响应和URL中的*“名称/值”*对表明,此页面可能容易受到**HTML注入的**攻击,并且已通过**GET**方法请求了数据。...调整您的**“ burpsuite”**并捕获正在进行的**HTTP请求** [图片] 现在让我们使用以下命令处理此请求: 1/hack/html_URL.php/Hey_are_you_there...[图片] 让我们看一下它的代码,看看开发人员如何在屏幕上获取当前URL。 在这里,开发人员使用PHP全局变量作为**$ _SERVER**来捕获当前页面URL。

    6.6K52
    领券