相关知识点
- nodemon 工具
- 404页面
- 状态码和请求头、响应头
- 文件类型 mime
- 动态资源的处理
nodemon 工具
这类工具的出现，当我们使用node 去执行代码时候，node会加载进内存，提高运行速度。但是，当我们硬盘上的js代码改变得时候，node是不会让自动检测并且重新加载得，所以我们需要再次重启服务器。这样就非常麻烦，于是就有这类工具得出现。当我们代码改变时候，他会自动帮我们重启node。
这里推荐nodemon。工具类的模块，最好不要安装全局。因为每个项目可能使用不同版本的nodemon，高版本的项目，用低版本的nodemon 可能会挂掉
安装
npm i -D nodemon
yarn add -D nodemon
运行
-
定位到执行文件的目录然后
nodemon + 执行文件明 -
利用package.json, 然后在终端中运行 npm start 就可以了
"scripts": { "start": "nodemon app.js" },
404页面
当我们处理资源时候，需要为其准备一个错误页面。因为用户访问的地址不一定是正确的。如果访问地址错误，我们可以给用户一个提示，而且这个时候状态码应该是404。防止服务器报错。
if(url.startsWith('/static')){
//如果请求的url 是/static 就读取静态资源文件
let path = __dirname + url;
try{
content = fs.readFileSync(path);
res.write(content);
}catch (e){
content = fs.readFileSync('./static/404.html');
res.write(content);
}finally {
res.end();
}
}
状态码和请求头、响应头
响应码分五种类型，由它们的第一位数字表示： 1xx：信息，请求收到，继续处理 2xx：成功，行为被成功地接受、理解和采纳 3xx：重定向，为了完成请求，必须进一步执行的动作 4xx：客户端错误，请求包含语法错误或者请求无法实现 5xx：服务器错误，服务器不能实现一种明显无效的请求
请求头和响应头
HTTP请求头提供了关于请求，响应或者其他的发送实体的信息。HTTP的头信息包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名，冒号（:）和域值三部分组成。
- 通用头标：即可用于请求，也可用于响应，是作为一个整体而不是特定资源与事务相关联。
- 请求头标：允许客户端传递关于自身的信息和希望的响应形式。
- 响应头标：服务器和于传递自身信息的响应。
- 实体头标：定义被传送资源的信息。即可用于请求，也可用于响应。
其中响应头比较常用 Content-Type 是告诉浏览器从服务端返回个文件应该要解析成什么类型的文件。
现在有个问题就是，如果统一设置响应头为text/html;charset=utf-8
就会导致css文件等显示不出来。
if(url.startsWith('/static')){
//如果请求的url 是/static 就读取静态资源文件
let path = __dirname + url;
try{
//统一设置
res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
content = fs.readFileSync(path);
res.write(content);
}catch (e){
content = fs.readFileSync('./static/404.html');
res.write(content);
}finally {
res.end();
}
}
为了解决这个问题我们提出文件类型这个概念
文件类型mime
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
常见的MIME类型(通用型)：
超文本标记语言文本 .html text/html
xml文档 .xml text/xml
XHTML文档 .xhtml application/xhtml+xml
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
PDF文档 .pdf application/pdf
Microsoft Word文件 .word application/msword
PNG图像 .png image/png
GIF图形 .gif image/gif
JPEG图形 .jpeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
TAR文件 .tar application/x-tar
任意的二进制数据 application/octet-stream
我们可以准备一个mine.json。里面包含所有文件类型的对应的头信息
数据结构这样
".323":"text/h323" ,
我们就可以改造成这样
try {
//统一设置
// res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
//设置mime
content = fs.readFileSync(path);
let lastIndex = path.lastIndexOf('.');
let ext = path.substring(lastIndex);
console.log('ext', ext);
/*
* ext .html
ext .css
ext .jpeg
* */
let mineName = mine[ext];
console.log(ext,mineName)
res.writeHead(200,{'Content-Type':mineName});
res.write(content);
}
...
动态资源的处理
有些数据我们需要从数据库取，但是例如一个对象数组。我们要怎么把这些数据循环进我们页面中，里面可能还会涉及到循环，判断。要怎么怎么正确显示。这个时候模板引擎的作用就体现出来了。这里使用 nunjucks作为例子
但是有vue React 出现后，这个模板引用就少用了很多了。这里可以看教程了解一下。
要注意nunjucks要先配置Environment 环境。告诉它你这个代码需要在那个环境中运行
views 是模板目录存在的文件夹，然后就使用他们的模板
// the FileSystemLoader is available if in node
var env = new nunjucks.Environment(new nunjucks.FileSystemLoader('views'));
var env = new nunjucks.Environment(new nunjucks.FileSystemLoader('views'),
{ autoescape: false });
var env = new nunjucks.Environment([new nunjucks.FileSystemLoader('views'),
new MyCustomLoader()]);
// the WebLoader is available if in the browser
var env = new nunjucks.Environment(new nunjucks.WebLoader('/views'));
然后再调用render 函数
render
nunjucks.render(name, [context], [callback])
渲染模式时需要两个参数，模板名 name 和数据 context。如果 callback 存在，当渲染完成后会被调用，第一个参数是错误，第二个为返回的结果；如果不存在，render 方法会直接返回结果，错误时会抛错。更多查看异步的支持。
var res = nunjucks.render('foo.html');
var res = nunjucks.render('foo.html', { username: 'James' });
nunjucks.render('async.html', function(err, res) {
});
其他循环功能等就可以可以写在foo.html 例如{{}}语法等
