一. nodejs的发展
一个优秀的前端在掌握前端知识的同时也要对后端有所了解,在开发中更容易同后端协作,对接接口,同时现在流行的框架React,vue 构建框架也需要学习node,node 让 javascript 可以同时在前端和后端执行,因此他是前端学习服务器构建的首选语言。
二. 使用 http 模块构建服务器
1. 基本构建
分析:以下代码就构建了一个简单的本地服务器,可以与前端实现通信,访问地址为 127.0.0.1,端口为 3000,虽然前端可以访问,但是远远不够,没有路由,无论访问路径是什么,它都只会返回以下数据,不能通过请求不同的路径而返回或执行不同的代码,因此我们要学习路由分发。
let http = require('http')
http.createServer((req, res)=>{
res.writeHead(200, { 'Content-type' : 'text/plain'} );
console.log(req.url)
res.end('Hello World\n');
}).listen(3000,'127.0.0.1');
console.log('Sever is running');
2. MVC模型
在 MVC 流行之前,主流的处理方式都是通过文件路径进行路由分发(由于已经淘汰,在此不做介绍,感兴趣的可以自己查阅资料),直到有一天开发者发现请求路径原来可以跟具体脚本所在路径没有任何关系,便发展出了 MVC 模型。
MVC主要思想将业务逻辑分为以下几种:
- 控制器(Controlle),行为事件逻辑代码
- 模型(Model),数据相关的操作和封装
- 视图(View),试图渲染
这是目前最经典的分层模式,工作模式如下:
- 路由解析,根据URL寻找到对应的控制器和行为
- 行为调用相关的模型,进行数据操作
- 数据操作结束后,调用视图和相关数据进行页面渲染,输出到客户端
因此我们引入了路由映射。
3. 手工映射
分析:首先将路由封装到一个 routes 数组中,使用 use 函数来注册路由,将路由和行为一 一对应,在每次收到请求时,遍历 routes 数组,寻找有无对应路由,有的话执行对应的行为函数,没有则返回 404 状态码。由此我们就实现了一个简单的路由分发。
let http = require('http')
// 手工映射路由
let routes = []
let use = function(path, action){
routes.push([path, action])
};
let active = function(req, res) {
res.end('收到了')
}
use('/index', active);
http.createServer((req, res)=>{
let pathname = req.url;
for(let i =0,l = routes.length; i < l; i++){
let route = routes[i];
if(pathname === route[0]){
route[1](req, res);
return;
}
}
}).listen(3000,'127.0.0.1');
console.log('Sever is running');
4. RESTful
它的全称是 Representational State Transfer,中文含义为表现层状态转化。它的设计思想主要将服务器端提供的内容看作一个资源,并表现在 url 上。
① 引入了请求方法 method
在过去我们写一个增删改查也许是这样:
POST /user/add?
GET /user/remove?
POST /user/updata?
GET /user/get?
在 RESTful 设计中,它是这样的
POST /user?
DELETE /user?
PUT /user?
GET /user?
我们又增加了新的更改状态,也就是在 routes 中划分了模块,使得路由匹配更精准,更快速,而不需要每次请求都完整遍历一次我们事先写好的路由。
② 引入文件的类型
之前访问文件类型,大多是区别在文件的尾缀上
GET /user/S.json
GET /user/S.xml
在 RESTful 设计中,它将资源格式放在请求报文 Accept 中:
而通过响应报文的 Content-type 老告知客户端是什么格式
三. 小结
通过上面的学习,我们学会了简单的服务器搭建和路由分发。由此我们可以实现前后端的交互。