web开发工具看不到代码_不到1小时即可了解Web开发

最新推荐文章于 2024-07-26 12:52:45 发布

culi3118

最新推荐文章于 2024-07-26 12:52:45 发布

阅读量433

点赞数

文章标签：数据库 python web java html

原文链接：https://www.sitepoint.com/understand-web-development-less-1-hour/

版权

web开发工具看不到代码

This article was created in partnership with KTree. Thank you for supporting the partners who make SitePoint possible.

本文是与KTree合作创建的。 感谢您支持使SitePoint成为可能的合作伙伴。

This article explains what web development is, by exploring how it started and how it evolved. This is not an exact chronicle of the web’s evolution, but focuses more on what the needs for this evolution were, so we can understand the technology.

本文通过探索Web开发的开始和发展方式来解释什么是Web开发。这不是网络发展的确切记录，而是更多地关注这种发展的需求，因此我们可以了解技术。

It all started with information. Humans have always needed to find ways to share information with others. As you are aware, before the internet, information was shared via letters, newspapers, radio and television. Each had its own disadvantages, which allowed the internet’s information highway to come to the forefront.

这一切都始于信息。人类一直需要找到与他人共享信息的方法。如您所知，在互联网出现之前，信息是通过信件，报纸，广播和电视共享的。每个都有其自身的缺点，这使得互联网的信息高速公路走到了最前沿。

1.什么是网络？ (1. What is the Web?)

What if you can publish information in a place where whoever is interested can go and read that information? That’s exactly what the web does. You keep the information on a web server, and people can read that information using clients (browsers). This architecture is called ‘server-client architecture’.

如果您可以在感兴趣的人可以去阅读该信息的地方发布信息怎么办？这正是网络所做的。您将信息保存在Web服务器上，人们可以使用客户端(浏览器)读取该信息。这种架构称为“服务器-客户端架构”。

Why HTTP?

为什么要使用HTTP？

Initially, this information was all stored as text — that’s why the name hyper-text transfer protocol has stuck even though now text, media and files are all exchanged via this protocol.

最初，这些信息全部以文本形式存储-这就是为什么超文本传输协议之所以无法使用的原因，尽管现在所有文本，媒体和文件都通过该协议进行交换。

2.如何保存，检索和保存信息？ (2. How Is Information Kept, Retrieved and Saved?)

The most basic and long-lived way of storing information on the web is in HTML files. To better understand, let's take a simple example of company publishing its price information so its vendors can download and view the list, which consists of products with a price and effective date. This was kept as a HTML file on the server, which can be viewed using a web browser. The browser requests the file from the sever, and the server serves it up and closes the connection.

在Web上存储信息的最基本，最长寿的方法是使用HTML文件。为了更好地理解，让我们以公司发布其价格信息的简单示例为例，以便其供应商可以下载和查看列表，该列表包括具有价格和生效日期的产品。该文件以HTML文件形式保存在服务器上，可以使用Web浏览器进行查看。浏览器从服务器请求文件，服务器将其提供服务并关闭连接。

HTML is a standard markup language used to create web pages. In other words, it’s a simple text file with tags that help the browser figure out how to display the information.

HTML是用于创建网页的标准标记语言。换句话说，它是带有标签的简单文本文件，可帮助浏览器确定如何显示信息。

<!DOCTYPE html>
<html>
<body>

<h2>Price List</h2>

<hr>

<table>
  <tr>
    <td>Product Name</td>
    <td>Sku</td>
    <td>Price</td>
  </tr>
  <tr>
    <td>KTree Web Service</td>
    <td>1234566</td>
    <td>60.USD Per Hr</td>
  </tr>
  <tr>
    <td>KTree Web Service</td>
    <td>1234566</td>
    <td>60.USD Per Hr</td>
  </tr>
</table>

<hr>

</body>
</html>

CSS (CSS)

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Basic formatting and styling can be done via HTML, but it’s better to use CSS for this.

级联样式表(CSS)是一种样式表语言，用于描述以标记语言编写的文档的表示形式。基本的格式和样式可以通过HTML完成，但是最好使用CSS。

A web application contains many pages, either dynamic or static. If we use HTML tags for styling the information we have to repeat this information in every page. Suppose we want to change the background color — we have to edit the HTML for every page that is part of the site.

一个Web应用程序包含许多页面，无论是动态页面还是静态页面。如果我们使用HTML标记对信息进行样式设置，则必须在每个页面中重复此信息。假设我们要更改背景颜色-我们必须为网站的每个页面编辑HTML。

Instead, we can use CSS to store our style definitions in one location, and refer each HTML page to that location. By changing the CSS file, we can change the background color on every page that looks to the stylesheet for style defintions.

相反，我们可以使用CSS将样式定义存储在一个位置，然后将每个HTML页面引用到该位置。通过更改CSS文件，我们可以更改在样式表中查找样式定义的每个页面上的背景颜色。

CSS does more than just setting the background color, of course: it allows us to set colors for all sorts of elements, fonts, page layouts, and much more.

CSS当然不只是设置背景颜色：它还允许我们为各种元素，字体，页面布局等设置颜色。

We have styled our previous example using CSS. Let’s say we are using tables on different pages, but using the same CSS styles. We can move all this style information out to its own file.

我们已经使用CSS设计了前面的示例的样式。假设我们在不同页面上使用表格，但是使用相同CSS样式。我们可以将所有这些样式信息移到其自己的文件中。

<!DOCTYPE html>
<html>
<head>

<!–– for simplicity we have kept the CSS in inline in the HTML -  you can keep the css in any file with a .css extension and include it using <link rel="stylesheet" href="styles.css"> --> 

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>

</head>
<body>
<h2>Price List</h2>


<table>
  <tr>
    <td>Product Name</td>
    <td>Sku</td>
    <td>Price</td>
  </tr>
  <tr>
    <td>KTree Web Service</td>
    <td>1234564</td>
    <td>60.USD Per Hr</td>
  </tr>
  <tr>
    <td>KTree Web Service</td>
    <td>1234565</td>
    <td>40.USD Per Hr</td>
  </tr>
  <tr>
    <td>KTree Web Service</td>
    <td>1234566</td>
    <td>50.USD Per Hr</td>
  </tr>
</table>
</body>
</html>

JavaScript (JavaScript)

JavaScript is the third pillar of the web, alongside HTML and CSS, and it is normally used to make web pages interactive. To understand JavaScript (JS), we need to know what the DOM is.

JavaScript是HTML和CSS的第三大网络Struts，通常用于使网页具有交互性。要了解JavaScript(JS)，我们需要知道DOM是什么。

The Document Object Model (DOM) is a language-independent application programming interface that turns the HTML document into a tree structure. The nodes of every document are organized in that tree structure, called the DOM tree, with the topmost node called the “Document Object.”

文档对象模型(DOM)是与语言无关的应用程序编程接口，可将HTML文档转换为树形结构。每个文档的节点均以该树结构(称为DOM树)进行组织，最顶层的节点称为“文档对象”。

Sample DOM Tree (Source: Wikimedia Commons)

样本DOM树(来源：Wikimedia Commons)

When an HTML page is rendered in the browser, the browser downloads the HTML into local memory and creates a DOM tree to display the page on screen.

在浏览器中呈现HTML页面时，浏览器将HTML下载到本地内存中，并创建DOM树以在屏幕上显示该页面。

Using JS, we can manipulate the DOM tree in several ways:

使用JS，我们可以通过几种方式来操作DOM树：

JS can modify the DOM tree by adding, changing, and removing all of the HTML elements and attributes in the page.
JS可以通过添加，更改和删除页面中的所有HTML元素和属性来修改DOM树。
JS can change all of the CSS styles on the page.
JS可以更改页面上的所有CSS样式。
JS can react to all of the existing events on the page.
JS可以对页面上的所有现有事件做出React。
JS can create new events within the page and then react to all of those events.
JS可以在页面内创建新事件，然后对所有这些事件做出React。

In our JavaScript example, we continue with our price list example by adding another column — Special Price — which is hidden by default. We’ll show it once the user clicks on it. In technical terms, we use a click event attached to the web element (anchor tag) and change the existing text of the web element, in other words manipulating the DOM. To do this, we have to use the browser’s accepted scripting language, which is always JavaScript.

在我们JavaScript示例中，我们继续我们的价格列表示例，添加了默认情况下隐藏的另一列“ Special Price”。一旦用户单击它，我们就会显示它。用技术术语来说，我们使用附加到web元素(anchor标签)的click事件并更改Web元素的现有文本，换句话说就是操纵DOM。为此，我们必须使用浏览器接受的脚本语言，该语言始终是JavaScript。

<!DOCTYPE html>
<html>
<head>
<!–– for simplicity we have kept the CSS in inline in the HTML -  you can keep the css in any file with a .css extension and include it using <link rel="stylesheet" href="styles.css"> --> 

    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }

        #specialprice {

        }

    </style>

</head>

<body>
<h2>Price List</h2>

<table>
    <tr>
        <td>Product Name</td>
        <td>Sku</td>
        <td>Price</td>
        <td>Special Price</td>
    </tr>
    <tr>
        <td>KTree Web Service</td>
        <td>1234564</td>
        <td>60.USD Per Hr</td>
        <td id="specialprice"> <a href="" onclick="return false;"> Click Here  </a> </td>
    </tr>
    <tr>
        <td>KTree Web Service</td>
        <td>1234565</td>
        <td>40.USD Per Hr</td>
        <td id="specialprice2"> <a href="" onclick="return false;"> Click Here  </a> </td>
    </tr>
    <tr>
        <td>KTree Web Service</td>
        <td>1234566</td>
        <td>50.USD Per Hr</td>
        <td id="specialprice3"> <a href="" onclick="return false;"> Click Here  </a> </td>
    </tr>
</table>

<script>
    document.getElementById("specialprice").onclick = function() {myFunction()};

    function myFunction() {
        document.getElementById("specialprice").innerHTML = "20% Off";
    }
</script>

</body>
</html>

形式 (Forms)

Up til now, we’ve only discussed getting data from the server. Forms are the other side of HTML, which allows us to send information to the server. We can use forms to either update existing information or add new information. The most commonly used methods in HTML forms are GET and POST.

到目前为止，我们仅讨论了从服务器获取数据。表单是HTML的另一面，它使我们能够将信息发送到服务器。我们可以使用表格来更新现有信息或添加新信息。 HTML表单中最常用的方法是GET和POST 。

<!DOCTYPE html>
<html>
<body>

<form action="createproduct.php" method="post">
  First name:<br>
  <input type="text" name="Product Name" value="KTree Service">
  <br>
  Last name:<br>
  <input type="text" name="SKU" value="234555">
  <br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "createproduct.php".</p>

</body>
</html>

Have a glance at the code above — we have two input fields where the user can enter data and hit the submit button. Once the submit button is hit, the browser sends the data values of those two input fields along with some other information to the PHP script createproduct.php.

看看上面的代码-我们有两个输入字段，用户可以在其中输入数据并单击“提交”按钮。点击提交按钮后，浏览器会将这两个输入字段的数据值以及一些其他信息发送到PHP脚本createproduct.php 。

In our example it's PHP, but it can be JSP, Python or any server-side script. The server-side script can read the values sent by the browser via POST, and then process it or store it in a file or database. In a nutshell, this is how data is pushed to the server and then eventually stored in a file or database.

在我们的示例中，它是PHP，但可以是JSP，Python或任何服务器端脚本。服务器端脚本可以读取浏览器通过POST发送的值，然后对其进行处理或将其存储在文件或数据库中。简而言之，这就是将数据推送到服务器，然后最终存储在文件或数据库中的方式。

Note: Let’s say we want to add validations before submitting — for example, the product should contain a minimum of 5 characters, or the SKU field should be not empty. We can use JavaScript for these validations. We need to react to the Submit Click event, and check if the web elements have the data we need. If anything is missing, we can display an error message and stop sending the data to the server.

注意：假设我们要在提交之前添加验证-例如，产品至少应包含5个字符，或者SKU字段不能为空。我们可以使用JavaScript进行这些验证。我们需要对Submit Click事件作出React，并检查Web元素是否具有所需的数据。如果缺少任何内容，我们可以显示错误消息并停止将数据发送到服务器。

资料库 (Databases)

As soon as information begins to grow, getting the right information from files can become a real pain, not to mention painfully slow. For example, let’s take the same price file, assume the company has thousands of products and we want to know the info for the last product in the list — which means we need to read all the products until we find the one we’re after. This isn’t an optimal way of retrieving information, and so to solve this problem, databases were born.

信息一旦开始增长，从文件中获取正确的信息就会成为真正的痛苦，更不用说缓慢了。例如，让我们采用相同的价格文件，假设公司有成千上万的产品，并且我们想知道列表中最后一个产品的信息，这意味着我们需要阅读所有产品，直到找到要购买的产品为止。。这不是检索信息的最佳方法，因此为了解决此问题，数据库诞生了。

In a database (DB), we store the data in tables (a structured set of data) and as such we can perform search, sort and other operations easily.

在数据库(DB)中，我们将数据存储在表(结构化的数据集)中，因此我们可以轻松地执行搜索，排序和其他操作。

服务器端脚本语言和框架 (Server-side Scripting Languages & Frameworks)

We need programming languages:

我们需要编程语言：

To store to and read from a database or file
存储到数据库或文件并从中读取
To GET the information from the server by doing certain processing.
通过执行某些处理从服务器GET信息。
To read the POST information from the client and do some processing to store/push that information.
要从客户端读取POST信息并进行一些处理以存储/推送该信息。

Typical programming languages like C and Java can write to and read from databases, but they cannot be directly run on the web server. This gave birth to server-side scripting languages.

诸如C和Java之类的典型编程语言可以读写数据库，但不能直接在Web服务器上运行。这催生了服务器端脚本语言。

Server-side scripting languages do all regular processing and can talk to databases, and can be run directly on the web server. Popular server-side scripting languages are PHP, Perl, JSP, Ruby on Rails, and so on.

服务器端脚本语言可以进行所有常规处理，并且可以与数据库对话，并且可以直接在Web服务器上运行。流行的服务器端脚本语言是PHP，Perl，JSP，Ruby on Rails等。

Developers started using these languages and soon they realized they were writing the same boilerplate code for all the projects, which led to the development of frameworks, which make it easier and faster to develop web applications.

开发人员开始使用这些语言，很快他们意识到他们正在为所有项目编写相同的样板代码，这导致了框架的开发，从而使开发Web应用程序变得更加轻松快捷。

Some notable frameworks:

一些值得注意的框架：

PHP: Zend, YII, Symfony, CakePHP, Laravel
PHP ：Zend，YII，Symfony，CakePHP，Laravel
PHP products also used as frameworks: Drupal, Joomla, SugarCRM, WordPress
PHP产品也用作框架 ：Drupal，Joomla，SugarCRM，WordPress
Java: J2EE, Hibernate, Struts, Spring
Java ：J2EE，Hibernate，Struts，Spring
JavaScript: Node.js
JavaScript ：Node.js

MVC架构和会议 (MVC Architecture & Sessions)

MVC architecture helps us to divide the code into multiple files and lets us separate business and presentation logic so it’s easier to modify them in later stages.

MVC体系结构可帮助我们将代码分为多个文件，并使我们将业务和表示逻辑分开，以便在以后的阶段中更轻松地对其进行修改。

By taking the example of a blogging platform, we will revisit all the topics we’ve discussed so far, and see how we can code using MVC architecture.

通过以博客平台为例，我们将重新讨论到目前为止讨论的所有主题，并了解如何使用MVC架构进行编码。

A blog platform manages dynamic content and could contain a few modules such as:

博客平台管理动态内容，并且可以包含一些模块，例如：

Users
用户数
Blog posts
博客文章
Tags
标签
Categories
分类目录

Before we discuss other functionalities, let's come up with basic database design for the Blog Posts table. The important fields would be:

在讨论其他功能之前，让我们为Blog Posts表设计基本的数据库。重要的字段是：

tbl_blog_post

ID	Title	Content	Created by	First Name	Last name	Created On
1	Hello World 1	Hello World 1	User A	User	A	10 Jan 2016
2	Hello World 2	Hello World 2	User B	User	B	10 Jun 2016

ID	标题	内容	由...制作	名字	姓	创建于
1个	你好世界1	你好世界1	用户A	用户	一个	2016年1月10日
2	你好世界2	你好世界2	用户B	用户	乙	2016年6月10日

As you can see, we are storing duplicated user information such as 'First Name' & 'Last Name'. If we have 10,000 Blog Posts we will store all the duplicated user information in all 10,000 Blog Post records. There might be more information about the user to store, for example his designation, last logged in time, etc.

如您所见，我们正在存储重复的用户信息，例如“名字”和“姓氏”。如果我们有10,000个博客文章，我们将在所有10,000个博客文章记录中存储所有重复的用户信息。可能会有关于用户要存储的更多信息，例如他的指定，上次登录时间等。

The alternative, as you might have guessed, is to store 'User' information in another table and relate to it here with the 'Related' Id as in below.

您可能已经猜到了，替代方法是将“用户”信息存储在另一个表中，并在此处与“相关” ID进行关联，如下所示。

tbl_user

ID	Username	FirstName	lastname	Created On
101	User A	User	A	10 Jan 2016
102	User B	User	B	10 Jun 2016

ID	用户名	名字	姓	创建于
101	用户A	用户	一个	2016年1月10日
102	用户B	用户	乙	2016年6月10日

tbl_blog_post

ID	Title	Content	Created by	Created On
1	Hello World 1	Hello World 1	101	10 Jan 2016
2	Hello World 2	Hello World 2	102	10 Jun 2016

ID	标题	内容	由...制作	创建于
1个	你好世界1	你好世界1	101	2016年1月10日
2	你好世界2	你好世界2	102	2016年6月10日

This division of data into multiple tables is one amongst many principles of normalization of data.

将数据划分为多个表是数据规范化的众多原则之一。

The next important part is letting the user create the data in these tables via an HTML form. Please remember we’re doing this dissection to understand the concepts — this isn’t by any means a complete programing tutorial.

下一个重要的部分是让用户通过HTML表单在这些表中创建数据。请记住，我们正在对此进行剖析以理解概念-绝不是完整的编程教程。

通过身份验证的用户创建新的博客文章 (Create new blog post by authenticated user)

For this we need a HTML form with two input fields (Title, Content) through which the user can create a blog post.

为此，我们需要一个带有两个输入字段(标题，内容)HTML表单，用户可以通过该表单创建博客文章。

After the user enters the information and clicks on the submit button, 'Create Post', these form values are sent to the web server using POST. The POST values can be read using any server-side scripting language. The server script (PHP, Ruby on Rails, Python, etc.) reads the value from the FORM and pushes it to the database.

用户输入信息并单击提交按钮“创建帖子”后，这些表单值将使用POST发送到Web服务器。可以使用任何服务器端脚本语言读取POST值。服务器脚本(PHP，Ruby on Rails，Python等)从FORM读取值并将其推送到数据库。

The script can also do processing, which could range from getting the server date and time or it could be some calculation field based on the values retrieved from another table or web service.

该脚本还可以进行处理，其范围从获取服务器日期和时间开始，或者可以是基于从另一个表或Web服务检索的值的某个计算字段。

Another point to note: the script can also perform validations, also known as server-side validations, to make sure data is valid. If the data is valid then only FORM data is persisted to tbl_blog_post, or it sends a message back to the client to enter the missing information and the process continues.

需要注意的另一点：该脚本还可以执行验证(也称为服务器端验证)，以确保数据有效。如果数据有效，则只有FORM数据会保留到tbl_blog_post ，或者它将消息发送回客户端以输入缺少的信息，然后过程继续进行。

In our table tbl_blog_post, along with title and content, we also have a field named created_by. How do we get the value for this field?

在我们的表tbl_blog_post中 ，以及标题和内容，我们还有一个名为created_by的字段 。我们如何获得该领域的价值？

用户登录 (User Login)

Typically, most web applications have login functionality. Whenever a user authenticates successfully, the user information is stored in sessions so that this information can be reused at a later time.

通常，大多数Web应用程序都具有登录功能。只要用户成功进行身份验证，该用户信息就会存储在会话中，以便以后可以重用该信息。

什么是会议？ (What is a Session?)

The HTTP protocol is a stateless protocol, which means any request by the client made using GET or POST to the web server isn’t tracked. If the client (browser) makes two requests, the web server doesn’t know or care if both of them are coming from the same user. This also means that, for example, if you are logged in to an eCommerce application and you are adding products to your cart, the server doesn’t know both of you are same user.

HTTP协议是无状态协议，这意味着不会跟踪客户端使用GET或POST向Web服务器发出的任何请求。如果客户端(浏览器)发出两个请求，则Web服务器不知道或不在乎这两个请求是否来自同一用户。这也意味着，例如，如果您登录到电子商务应用程序并将产品添加到购物车中，则服务器不知道你们俩都是同一用户。

In order to overcome this statelessness, clients need to send additional information in every request to retain session information for the duration of multiple requests. This additional information is stored on the client side in cookies, and on the server side in sessions.

为了克服这种无状态性，客户端需要在每个请求中发送其他信息，以在多个请求的持续时间内保留会话信息。此附加信息存储在客户端的cookie中，以及服务器的会话中。

A session is an array variable, which stores information to be used across multiple pages. Sessions are identified by an unique ID with a name that depends on the programming languages — in PHP it’s called 'PHP Session ID'. the same Session ID needs to be stored as a cookie in the client browser to relate.

会话是一个数组变量，它存储要在多个页面中使用的信息。会话由唯一ID标识，ID的名称取决于编程语言-在PHP中，它称为“ PHP会话ID”。相同的会话ID需要作为cookie存储在客户端浏览器中以进行关联。

显示个人博客文章 (Display individual blog posts)

The next item for us is to display individual blog posts. We need to read the data from the database based on the requested blog post ID, and then display the contents of the Title and Content fields.

对我们来说，下一项是显示各个博客文章。我们需要根据请求的博客文章ID从数据库中读取数据，然后显示“标题”和“内容”字段的内容。

High-level pseudo-code for displaying a single blog post:

用于显示单个博客文章的高级伪代码：

Read the data from the database for the blog post ID
从数据库中读取博客文章ID的数据
Insert the data into the HTML template along with CSS and JS
将数据与CSS和JS一起插入HTML模板

All the above code can be written in a single file. This is how it was done in the early days, but the development fraternity realized this is not optimal. For any new feature to be added, the whole code needed to be changed, and it wasn’t that easy to work in a multi-developer environment.

以上所有代码都可以写在一个文件中。早期就是这样做的，但是开发兄弟会意识到这并不是最佳选择。对于要添加的任何新功能，需要更改整个代码，并且在多开发人员环境中工作并不容易。

This caused web developers to adopt the MVC architecture, which essentially decouples the code into three components listed below.

这导致Web开发人员采用MVC架构，该架构实质上将代码分离为以下列出的三个组件。

Model: Model is the domain/business logic, independent of the user interface. In our example, the code to get individual posts from the database can be kept here.
模型：模型是域/业务逻辑，独立于用户界面。在我们的示例中，从数据库获取单个帖子的代码可以保留在此处。
View: A view can be any outputted representation of information. Our HTML code to the display the post can be kept here, so the data comes from the model, but the HTML is in the view.
视图：视图可以是信息的任何输出表示。我们用于显示帖子HTML代码可以保存在此处，因此数据来自模型，但是HTML在视图中。
Controller: The third part, the controller is what gets called if we click on the view post link. It gets the data from the model and, using that data, renders the view.
控制器 ：第三部分，如果我们单击视图发布链接，就会调用控制器。它从模型获取数据，并使用该数据渲染视图。

Let’s examine a typical URL in an MVC application to understand it better.

让我们检查一下MVC应用程序中的典型URL，以更好地理解它。

http://www.abc.com/blogpost/id/1

Here the blogpost is the controller name and the view is an action (method) in that controller. id is the ID of the blog post. If we enter this in the browser, the request goes to the action 'View' of the 'BlogPost' controller, and here it calls the model to get the content of blogpost ID '1' as a Model object. This object is passed to the 'View' to render it.

这里的blogpost是控制器名称，视图是该控制器中的操作(方法)。 id是博客文章的ID。如果我们在浏览器中输入此内容，则请求将转到“ BlogPost”控制器的“视图”操作，并在此处调用模型以获取博客文章ID为“ 1”的内容作为模型对象。该对象被传递到“视图”以呈现它。

Ajax和单页应用程序(SPA) (Ajax & Single Page Applications (SPA))

If you were born in the last millennium you may remember that in the 90s and 00s, Hotmail and Yahoo! were very popular web email providers. If you click on the inbox or a single email in the inbox, the entire page would be refreshed. Around 2004, Gmail came with one important feature, Ajax. With Ajax, the whole page was not refreshed — only only the portions that needed to change were. So if you got a new email, instead of having to refresh the whole page, you simply saw a new email on top. This gave users a desktop-like experience, and it became a very popular way of building applications.

如果您出生于上个千年，您可能还记得90年代和00年代，Hotmail和Yahoo! 是非常受欢迎的网络电子邮件提供商。如果您单击收件箱或收件箱中的一封电子邮件，则会刷新整个页面。 Gmail在2004年左右推出了一项重要功能，即Ajax。使用Ajax，不会刷新整个页面-仅刷新需要更改的部分。因此，如果收到新电子邮件，而不必刷新整个页面，则只需在顶部看到新电子邮件即可。这为用户提供了类似于桌面的体验，并且成为构建应用程序的一种非常流行的方式。

什么是Ajax？ (What is Ajax?)

The term Ajax has come to represent a broad group of web technologies that can be implemented in an application that communicates with a server in the background, without interfering with the current state of the page.

术语Ajax代表了广泛的Web技术，可以在与后台服务器通信的应用程序中实现这些Web技术，而不会干扰页面的当前状态。

With Ajax, you send a GET request to a server, and the server sends its response as an output all without blocking the current web page, which means the user can continue doing whatever they were doing without interruption. The output is appended or added to the current webpage.

使用Ajax，您可以将GET请求发送到服务器，并且服务器将其响应作为输出发送，而不会阻塞当前网页，这意味着用户可以继续做任何事情而不会受到干扰。输出将附加或添加到当前网页。

In non-Ajax websites, each user action required a complete full page be loaded from the server. This process was inefficient and created a bad user experience. All page content disappeared, then reappeared.

在非Ajax网站中，每个用户操作都需要从服务器加载完整的完整页面。该过程效率低下，并造成不良的用户体验。所有页面内容消失，然后重新出现。

Ajax is one of the techniques we can use to build Single Page Applications (SPAs). As the name suggests, the whole application is in a single page and all content is loaded dynamically. JavaScript frameworks such as Angular, React, and Backbone.js can be used to build SPAs.

Ajax是我们可用于构建单页应用程序(SPA)的技术之一。顾名思义，整个应用程序位于单个页面中，所有内容均动态加载。诸如Angular，React和Backbone.js之类JavaScript框架可用于构建SPA。

Web服务器和浏览器 (Web Servers & Browsers)

Browsers are the interpreters of the web. Browsers request data from web servers, and web servers process that request and send the response to the browser in HTML (including CSS, JS, images and so on), which is then displayed.

浏览器是网络的解释器。浏览器从Web服务器请求数据，然后Web服务器处理该请求并以HTML(包括CSS，JS，图像等)形式将响应发送到浏览器，然后将其显示出来。

We can make a request of the web server using any of these three important methods:

我们可以使用以下三种重要方法之一来请求Web服务器：

GET: Get the requested resource as Response.
GET ：获取请求的资源作为Response。
HEAD: The same as GET, but the response comes in Head instead of Response.
HEAD ：与GET相同，但响应来自Head而不是Response。
POST: Submit form data to the server, or any data via Ajax.
POST ：将表单数据或任何数据通过Ajax提交到服务器。

For example, when you type google.com into your browser, in the background the browser is sending this command to the google.com server.

例如，当您在浏览器中键入google.com时，浏览器会在后台将此命令发送到google.com服务器。

GET: http://google.com

The Google web server will process its main/index file and send the response back to the client. It typically sends HTML content and CSS files, along with any other media files.

Google Web服务器将处理其主文件/索引文件，并将响应发送回客户端。它通常发送HTML内容和CSS文件以及任何其他媒体文件。

翻译自: https://www.sitepoint.com/understand-web-development-less-1-hour/

web开发工具看不到代码

culi3118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web开发工具看不到代码_不到1小时即可了解Web开发

web开发工具看不到代码This article was created in partnership with KTree. Thank you for supporting the partners who make SitePoint possible. 本文是与KTree合作创建的。感谢您支持使SitePoint成为可能的合作伙伴。 This article explains wha...
复制链接

扫一扫