石心
返回「计算机、信息技术与工程」

Web工程

计算机、信息技术与工程 知识笔记 作者 Perrin Yong 约 10 分钟
更多
Markdown 结构化数据
本文目录 23 个章节

Web工程

# Web工程

创建时间：2022/2/26 18:09

  • Web
    • 最初的Web
    • WWW(World Wide Web)
    • Website
    • Cookie
    • 概念
    • BS架构与Web应用程序开发
      • 特征和结构
      • 延申-C/S与桌面应用程序开发
      • B/S vs. C/S
    • Web开发
      • Web开发技术
        • 前端开发
        • 后端开发
        • 技术发展
      • 请求-响应模式(Request & Response)
      • HTML
        • CSS
        • JavaScript
      • WSGI接口
      • Web框架
      • Template
    • Ref

Web

最初的Web

Web is a computer programming system as the first implementation of what he called "literate programming": the idea that one could create software as works of literature, by embedding source code inside descriptive text, rather than the reverse

WWW(World Wide Web)

The World Wide Web (WWW), commonly known as the Web , is an information system where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://example.com/), which may be interlinked by hyperlinks , and are accessible over the Internet.

The resources of the Web are transferred via the Hypertext Transfer Protocol ( HTTP ), may be accessed by users by a software application called a web browser , and are published by a software application called a web server.

Website

A website is a collection of related web resources including web pages, multimedia content, typically identified with a common domain name, and published on at least one web server.

Websites are stored in computers that are running a web server, which is a program that responds to requests made over the Internet from web browsers running on a user's computer.

Web resources may be any type of downloaded media, but web pages are hypertext documents formatted in Hypertext Markup Language (HTML). Special HTML syntax displays embedded hyperlinks with URLs, which permits users to navigate to other web resources.

An HTTP cookie (also called web cookie, Internet cookie, browser cookie, or simply cookie) is a small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing.

概念

HTTP - Hypertext Transfer Protocol HTML - Hypertext Markup Language

BS架构与Web应用程序开发

Brower/Server架构：WEB兴起后的一种网络架构模式，对C/S架构的一种变化或者改进的架构。在这种架构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端(Server)实现，形成所谓三层3-tier结构。

特征和结构

每个节点都分布在网络上，这些网络节点可以分为浏览器端、服务器端和中间件，通过它们之间的链接和交互来完成系统的功能任务。三个层次的划分是从逻辑上分的，在实际应用中多根据实际物理网络进行不同的物理划分。

浏览器端：即用户使用的浏览器，是用户操作系统的接口，用户通过浏览器界面向服务器端提出请求，并对服务器端返回的结果进行处理并展示，通过界面可以将系统的逻辑功能更好的表现出来。

服务器端：提供数据服务，操作数据，然后把结果返回中间层，结果显示在系统界面上。

中间件：这是运行在浏览器和服务器之间的。这层主要完成系统逻辑，实现具体的功能，接受用户的请求并把这些请求传送给服务器，然后将服务器的结果返回给用户，浏览器端和服务器端需要交互的信息是通过中间件完成的。

延申-C/S与桌面应用程序开发

桌面应用程序开发，是一种比较基本的传统的软件开发方式，是基于C/S架构模式的软件体系，我们比较熟悉的有photoShop、QQ、浏览器以及我们曾经常玩的CS单机版游戏等等，通过软件包安装的方式集成到我们操作系统中这些软件，都属于桌面应用体系范畴。使用到的开发语言有C、C++、Java、C#等，在桌面应用程序开发过程中，我们常常需要考虑的是语言的跨平台性以及软件的多平台支持，比如常见的操作平台windows、Linux、MacOS。我们开发一款桌面应用软件，一般需要考虑对这几类操作系统的支持。

B/S vs. C/S

Web应用程序的修改和升级非常迅速，而CS架构需要每个客户端逐个升级桌面App

C/S架构是常用的两层架构，通常也称之为客户端/服务器架构。服务器运行服务端程序，客户端安装客户端软件。在此架构里服务端和客户端分别完成不同的任务，客户端处理用户的前端界面和交互操作，服务端处理后台业务逻辑和请求数据，这使得两端的通讯速度和通讯的效率大大的提高。

C/S优点: 能充分发挥客户端PC的处理能力，很多工作可以在客户端处理后再提交给服务器。对应的优点就是客户端响应速度快。 操作界面漂亮、形式多样，能够足够满足客户自己的个性化要求。

B/S优点： 分布性强，客户端零维护。 业务扩展简单便利，通过添加网页就可以添加服务器功能。 维护简单便利，只须要更改网页，就可以完成全部用户的同步更新。 开发简单，共享性强。

Web开发

Web开发技术

前端开发

javascript html css

nodeJs的出现，越来越多的web前端开发人员开始走入服务端编程领域，甚至在一些项目中扮演着web全栈开发的角色。

后端开发

java、php、python等，当然随着nodeJs的兴起，也成为近年来服务端开发的另一种选择，当前nodeJs更多的是面向web前端开发人员。

技术发展

静态Web页面 CGI（Common Gateway Interface） ASP/JSP/PHP MVC

请求-响应模式(Request & Response)

https://www.liaoxuefeng.com/wiki/1016959663602400/1017804782304672 在Web应用中，服务器把网页传给浏览器，实际上就是把网页的HTML代码发送给浏览器，让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP

步骤1：浏览器首先向服务器发送HTTP请求 方法：GET还是POST，GET仅请求资源，POST会附带用户数据； 路径：/full/url/path； 域名：由Host头指定：Host: www.sina.com.cn 以及其他相关的Header； 如果是POST，那么请求还包括一个Body，包含用户数据。

步骤2：服务器向浏览器返回HTTP响应

响应代码：200表示成功，3xx表示重定向，4xx表示客户端发送的请求有错误，5xx表示服务器端处理时发生了错误； 响应类型：由Content-Type指定

例如：Content-Type: text/html;charset=utf-8表示响应类型是HTML文本，并且编码是UTF-8，Content-Type: image/jpeg表示响应类型是JPEG格式的图片；

通常服务器的HTTP响应会携带内容，也就是有一个Body，包含响应的内容，网页的HTML源码就在Body中。

步骤3：如果浏览器还需要继续向服务器请求其他资源，比如图片，就再次发出HTTP请求，重复步骤1、2。

HTML

CSS

JavaScript

WSGI接口

最简单的Web应用就是先把HTML用文件保存好，用一个现成的HTTP服务器软件，接收用户请求，从文件中读取HTML，返回。

HTTP请求需要处理HTTP规范，需要一个统一的接口，让我们专心用Python编写Web业务。 WSGI接口：Web Server Gateway Interface。只要求Web开发者实现一个函数，就可以响应HTTP请求

string s1 = "Hello ";
string s2 = s1;
s1 += "World";

System.Console.WriteLine(s2);
//Output: Hello

Web框架

WSGI和Web App的处理逻辑比，还是比较低级，我们需要在WSGI接口之上能进一步抽象，让我们专注于用一个函数处理一个URL，至于URL到函数的映射，就交给Web框架来做。

Django：全能型Web框架； web.py：一个小巧的Web框架； Bottle：和Flask类似的Web框架； Tornado：Facebook的开源异步Web框架。

Template

Web App最复杂的部分就在HTML页面。HTML不仅要正确，还要通过CSS美化，再加上复杂的JavaScript脚本来实现各种交互和动画效果。总之，生成HTML页面的难度很大。由于在Python代码里拼字符串是不现实的，所以，模板技术出现了。

使用模板，我们需要预先准备一个HTML文档，这个HTML文档不是普通的HTML，而是嵌入了一些变量和指令，然后，根据我们传入的数据，替换后，得到最终的HTML，发送给用户

通过MVC，我们在Python代码中处理M：Model和C：Controller，而V：View是通过模板处理的，这样，我们就成功地把Python代码和HTML代码最大限度地分离了。

Ref

https://en.wikipedia.org/wiki/World_Wide_Web https://baike.baidu.com/item/BS%E6%9E%B6%E6%9E%84/1297196#:~:text=B%2FS%E6%9E%B6%E6%9E%84%E5%8D%B3%E6%B5%8F%E8%A7%88,%E4%B8%89%E5%B1%823%2Dtier%E7%BB%93%E6%9E%84%E3%80%82