网站应用的前端,可以想成是在浏览器上显示的界面。这个界面是你自己设计好的,界面上需要的资源会通过网站服务器传输给用户的浏览器。浏览器收到这些资源,它知道怎么处理这些资源,呈现给用户的就是最终的前端界面。网站应用还需要个后端服务,它提供了网站的主要功能,主要负责处理网站上的数据。
你设计了一个前端界面,比如一个注册用户的表单,用户在浏览器上打开了这个表单所在的页面。然后在表单上填写好了一些数据,按下了提交按钮,浏览器会把表单里的数据发送到我们指定的地方。这个地方就是网站的后端服务的某个接口(路由)。在后端服务的这个处理注册用户用的这个接口上,知道怎么去处理发送过来的表单里面的数据,比如可以验证一下数据,然后把它们存储在网站的数据库里。
用户在浏览器上访问我们网站的某个地址,这个地址需要有一个对应的后端服务接口,这个接口是我们自己设计的。可以根据需求,为浏览器响应回需要的数据。比如你打算在开发的网站后端里设计一个接口,地址是 /posts。访问这个接口地址的时候,返回的内容就是一个内容列表数据。这样在开发这个接口的时候,我们可以验证用户的权限,然后查询网站的数据库,把需要的内容列表数据提取出来,处理一下(比如把数据套用在内容列表模板上),再响应给发出请求的浏览器。
初学
强烈推荐网站后端开发的初学者从 Node.js 开始。你只需要一门语言,就是 JavaScript,这门语言你可能在学前端的时候就已经有了基础。搭建 Node.js 的学习与开发环境也相当简单,在电脑上安装个 Node.js,准备个编辑器 + 浏览器就能开始了。
在学后端开发之前,最好有个页面的设计与开发基础。就是你要知道基本的 HTML,CSS,还有 JavaScript。你要知道怎么控制页面上的不同部分的样式,一个网页是怎么布局的,网页上的基本的交互是怎么实现的。宁皓网提供的《网站》这个系列课程,最近重制了一遍,修正了视频里出现的一些错误。这个系列可以让你掌握页面的设计与开发,这里再强推一下。
系统与框架
开发网站后端你有很多选择,你可以直接使用一些后端语言,从零开始开发,也可以基于某种系统或者框架去开发。PHP,Python,Ruby,JavaScript(通过 Node.js),这些都是比较常用的用来开发网站后端的语言。什么东西都从头开始,给你最大的灵活性,但是工作量也非常的大。我们需要规则,方法,还有一些常用的功能,这就可以考虑选择基于一个系统(比如内容管理系统)或者框架去开发我们需要的网站。
框架
基于某种框架去开发网站,拥有足够灵活性的同时,还给我们提供了一套开发的方法,规则,还有些常用的基础功能(比如身份验证)。
框架本身可能规定了一些东西,所以使用框架,你需要遵守这些规则。框架也可能会提供了应用的结构,或者叫开发的模式,比如常用的 MVC 就是一种应用程序的结构。
开发的网站应用有特定的结构,或者遵守了某种规则是件好事。因为你不需要自己做太多的决定,这很花时间。你也可以更容易让别人加入到你的项目,因为其他开发者也可能事先明白你的网站应用使用的结构或者遵守的规则。
学习基于框架去开发,你主要学习的是框架提供的方法与规则。
常用的框架
内容管理系统
CMS,内容管理系统。CMS 比框架更进了一步,它们可能是基于某种框架创建的。一般的 CMS 本身就是一套拥有完整的可用的网站系统。它们都提供了网站的常用功能,可以管理网站上常见的内容。比如文章,文件,图像,用户等等。
CMS 安装好以后,直接就能使用了。对于一般的用户来说,基于 CMS 创建网站,主要的工作就是往它里面添加内容。对于我们开发者来说,主要的工作是组织好需要的功能,设计网站上每个页面的结构,样式等等。
CMS 一般都会支持扩展插件,就是你需要一个功能,比如电子商务功能,你可以先去搜索一下有没有相关的插件。如果有,可以把它安装在我们的系统上,这样你的网站就有了一个电子商务功能。如果没找到,你可以按照 CMS 提供的开发方法与规则,去开发一个需要的功能。
常用的 CMS
关键概念
开发网站的后端,需要了解一些关键的概念。理解了这些个概念,以后的学习就会轻松多了。
请求与响应
请求与响应就是客户端(比如浏览器)跟我们网站之间经常要做的两件事儿。用户在浏览器的地址栏上输入了我们网站上的某个地址,浏览器会发出请求(Request),网站收到了这个请求,根据请求做出响应(Response)。浏览器收到响应以后,也会根据响应的内容去做不同的事情。
在请求里面会包含一些数据,网站的用户并不知道这些数据到底是什么,他们只想查看需要的页面。不过对于开发者,我们在网站后端可以得到请求里面包含的数据,这样才能根据不同的情况做出不同的响应。比如说,请求用的方法(获取,提交,删除... ),客户端相关的信息(请求是谁发出的)。请求里可能还会包含具体的数据,比如要存储在数据库里的文章内容,需要上传的文件等等。
网站根据请求做出响应,浏览器会判断响应里的内容的类型,比如文本,HTML,文件,视频,这些都是响应的内容的类型。浏览器知道如何去处理不同类型的内容。
头部信息
Headers,就是头部信息,它是客户端与服务端沟通交流的一种方式。客户端请求的时候可以带一些头部信息,服务端响应的时候也可以带一些头部信息。
比如客户端发送请求的时候,里面可以包含一些头部信息,告诉服务端,这个请求是谁发出的。还可以跟服务端描述一下,客户端这里都接受什么类型的内容。服务端做出响应的时候,也可以在头部信息里描述一下响应的内容是什么类型的,这样在客户端那里就知道怎么去处理响应回来的数据。
有些头部信息是自动设置的,比如浏览器在发送请求的时候,就会自动设置一些头部信息。为了某些特殊的需求,有时候我们也会在应用的前端那里额外再添加一些头部信息。
比如应用如果实施使用了 JWT 的身份验证方法,用户登录成功以后,会得到服务端签发的 Token。这样以后用户每次发送请求的时候,都需要把这个 Token 的值放在一个特定的 Header 里面。服务端收到请求,得到了 Header 里的 Token 的值,验证一下,再决定怎么做出回应。
Cookies
Cookies,指的就是服务端在客户端(比如浏览器)那里存储的一小块数据。服务端在响应请求的时候,可以添加 Set-Cookie 这个头部信息,对应的值就是要设置的 Cookie 数据的名字,还有对应的值。
浏览器在发送请求的时候,会带着 Cookie 这个 Header,里面会包含服务端设置的 Cookie 数据。比如用户登录成功以后,可以在客户端那里设置一条 Cookie,这样下次用户再发送请求的时候,我们应用的服务端就知道用户是谁了。再比如用户在应用上做的一些个性化的设置,也可以在 Cookie 里面存储起来。
应用在客户端那里存储数据,除了 Cookie,我们还可以使用 Storage API,比如 localStorage,sessionStorage,还有 Indexed DB 。
路由
在客户端对网站应用的某个地址发出请求,这个地址就是路由地址。就是我们可以在网站应用里事先定义好一些路由(也可以叫它接口),每个路由都有自己的地址,还有一个对应的处理请求用的方法。
比如你想在网站里添加一个可以显示文章列表的功能,你可以在网站里定义一条路由,设置一下路由地址,还有对应的处理请求用的方法。你可以把路由地址设置成 /posts,处理请求的方法叫它 getPosts。这样当用户在客户端访问网站的 /posts 这个地址的时候,会执行 getPosts 这个方法要做的事情。在这个方法里,你可以执行数据查询,得到数据以后,再把数据响应给浏览器。
参数
前面说过,你可以在网站里定义路由,设置路由地址,访问这个地址的时候返回(响应)对应的内容。你可能会想到,怎么才能为单独每个内容设置地址?比如我有 3 千博文,需要设置 3 千个路由吗?不需要,我们可以定义带参数的路由。
这种带参数的路由地址会像这样:/posts/:id,后面的 :id 是地址里的参数,它表示的是一个动态的值,你也可以在路由地址里添加多个参数。比如这种路由的地址可能是 /posts/3,也可能是 /posts/3000。浏览器在请求这种地址的时候,我们在后端可以得到参数值,然后根据这个参数值可以单独调出对应的数据。
比如在访问 /posts/3 的时候,路由地址里的 :id 参数的值是数字 3,这个 :id 的值对应的应该就是存储在数据库里的内容的数据记录的 id 号。这样后端服务可以查询出对应的这条数据记录,再把得到的数据,也就是指定的某个文章内容响应给浏览器。
查询符
在请求的地址里面,? 号后面的东西都叫做查询符。查询符是名字与值成对出现的,比如 ?orderby=created_at,不带的查询符之间使用 & 符号连接。比如 ?orderby=created_at&status=publish。在路由的处理方法里面我们可以得到请求地址里面的查询符,可以根据对应的查询符的值,去做出不同的响应。
比如假设我们网站上有一个地址是 /posts,正常状态下它给浏览器的响应是一组文章内容。在路由的处理方法里面你可以设计一下,根据查询符做出不同的响应。比如在访问 /posts?orderby=created_at 的时候,给浏览器返回的这组文章内容可以按照文章的发布日期排一下顺序。
HTTP 方法
浏览器发出请求的时候会使用一种特定的 HTTP 方法,比如 GET,POST,PUT / PATCH 或 DELETE。一般的想要获取资源的时候用的方法是 GET,比如得到一个内容列表,或者一个单独的文章内容,这种请求可以使用 GET 方法。
想从客户端那里提交一些数据给我们的后端服务,一般会用 POST 这种方法。在网站应用里定义路由的时候,可以添加支付使用这种方法发送过来的请求。在请求的处理方法里面,我们可以获取到请求里带的数据,比如一个新的要保存在数据库里的文章内容。
PUT / PATCH 方法会用在修改内容的请求上,比如要去修改一个文章里的内容。DELETE 方法会用在删除资源的请求上,比如请求删除某个文章内容。
控制器
Controllers,控制器。它经常会出现在网站的后端开发中,其实它就是给应用里面的某种东西起的一个名字。这种东西经常会用来处理从客户端那里发送过来的请求。定义路由的时候,除了设置路由的地址,我们还得再分配一个对应的,处理对这个地址请求用的方法,这个方法一般就是在控制器里面设计的某个方法。
控制器里的方法负责处理某种请求,比如去找到需要的数据,或者把数据放到数据库里存起来。一般我们会根据网站上的资源,去分别创建一些对应的控制器。比如对于用户资源,可以创建一个对应的用户控制器。也可以根据需要的不同的功能,去创建对应的控制器,比如用户的身份验证功能,可以单独创建一个对应的控制器。
视图
Views,视图。这种东西也经常会在网站应用里面出现。视图,模板,布局,局部,组件,这些词经常会在一起出现,我们可以把网站应用里面跟显示相关的东西想成视图。 比如一个请求进入到我们的网站后端,假设请求的是一个内容列表,请求会使用路由里指定的控制器方法来处理。控制器方法会找到请求里面需要的数据,比如从数据库那里查询出最近发布的十条内容。这些数据会再交给我们设计好的视图,视图里面包含了内容列表页面的布局代码,数据会填充到页面指定的地方,完成以后,网站应用会把浏览器最终需要显示的内容列表页面的代码响应给浏览器。
实践
在宁皓网提供的 Node.js 应用课程里,介绍了实践上面这些概念的方法。课程会不断更新,让您掌握更多关于网站开发的概念与方法。下一步我们会学习后端跟数据库交流的方法,比如把数据放进数据库,从数据库里查询出需要的数据等等。
订阅宁皓网以后,就可以随便学习所有相关的课程了,现在还有优惠哦。改变,你只需要做一次决定:)
#
评论
当我学了技术两年后,才意识到,应该以后端技术入门,而后才学前端什么的……不然会很难熬
6 年 8 个月 以前
也可以先学页面设计与开发的基础(HTML,CSS,JavaScript)。
6 年 8 个月 以前
头部信息第四行,客户端这里都授受什么类型的内容。是客户端这里都接收什么类型的内容?
6 年 4 个月 以前
是的,是个错别字。谢谢啊:)
6 年 4 个月 以前