这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
浏览器中的 JS
浏览器中 JS 运行时组成:
JS 是否可以做后端开发
可以
Node.js 就是为了使用 JavaScript 做后端开发而创建的后端环境。
Node.js 运行环境
和浏览器相似,Nodejs 的运行环境也由 V8 引擎和内置 API 组成。
当然,作为后端环境,Nodejs 无法调用 DOM 和 BOM 等浏览器 API。
它能做什么?
- 使用 Express框架 构建 Web 应用(类似 Java Web)。
- 使用 Electron框架 构建跨平台桌面应用。
- 基于 Restify 框架 快速创建 API 接口。
- 读写、操作数据库。
学习路径
- JS 基础语法
- Nodejs 内置 API
- 第三方框架
在Node环境中执行 JS 代码
- 打开终端
- 输入 node 要执行的 js 文件的路径
node app.js
在这里创建一个文件名为 api.js 的 Node 文件。
书写下面的代码内容:
console.log("Hello Node.js");
打开 PowerShell 执行:
node app.js
终端中会打印我们要 console 的内容:
HTTP 模块介绍
HTTP 模块能够创建 web 服务器,提供 web 服务。
主要方法:
http.createServer()
模块的作用
常见的服务器软件: IIS 、 Apache 等,安装了这些软件的电脑就能成为一个 web 服务器。Node.js 就能够为我们前端开发者创造一台服务器环境。
计网相关
IP地址
互联网上每台计算机的唯一地址。只有在知道对方电脑的IP地址的情况下才能进行数据通信。
域名和服务器
可以将 IP地址 比喻成身份证号,那么域名就可以比作 姓名 ,域名更加便于记忆。
创建服务器
模块导入
同样是使用 require 导入。
const http=require('http')
创建实例
const server = http.createServer()
绑定 request 事件
// .on 方法可以绑定 request 事件
server.on('request',(req ,res)=>{
// 监听。只要有客户端来请求服务器,就会触发request事件,从而调用这个事件函数
console.log('Someone visit our web server');
})
启动服务器
// 调用 server.listen(端口号,cb回调)方法,即可启动web服务器
// 这里运行在 80 端口
server.listen(80,()=>{
console.log('http server running at http://127.0.0.1');
})
req 请求对象
// .on 方法可以绑定 request 事件
server.on('request',(req ,res)=>{
// req是请求对象,包含了和客户端相关的数据和属性
// req.url 是客户端的 URL 地址
// req.method 是客户端的请求类型
const str = 'Your request url is ${req.url},and request method is ${req.method}';
console.log(str);
})
创建脚本 server1.js ,执行脚本。
const http = require("http");
const server = http.createServer();
// req是请求对象,包含了与客户端相关的属性和数据
server.on("request", (req) => {
// req.url 是客户端的 URL 地址
const url = req.url;
// req.method 是客户端的请求方式
const method = req.method;
const str = "Your request url is ${url},and request method is ${method}";
console.log(str);
});
server.listen(80, () => {
console.log("server running at http://127.0.0.1");
});
node server1
终端运行结果:
server running at http://127.0.0.1
然后打开浏览器访问后,终端输出:
Your request url is / ,and request method is GET
在浏览器输入框输入 http://127.0.0.1/index.html ,终端运行结果:
Your request url is /index.html ,and request method is GET
res 响应对象
如果在 request 事件中,如果想访问服务器相关的数据和属性,可以采取下面的方式:
// .on 方法可以绑定 request 事件
server.on('request',(req ,res)=>{
// res 是响应对象,它包含了与服务器相关的数据和属性,例如:
const str = 'Your request url is ${req.url},and request method is ${req.method}';
// res.end()方法,向客户端发送指定的内容,结束此次过程
res.end(str);
})
修改上一节的代码:
const http = require("http");
const server = http.createServer();
// req是请求对象,包含了与客户端相关的属性和数据
server.on("request", (req,res) => {
// req.url 是客户端的 URL 地址
const url = req.url;
// req.method 是客户端的请求方式
const method = req.method;
const str = `Your request url is ${url} ,and request method is ${method}`;
console.log(str);
// 调用 res 响应一些消息,将 str 返回给客户端
// highlight-start
res.end(str);
// highlight-end
});
server.listen(80, () => {
console.log("server running at http://127.0.0.1");
});
执行,这时候客户端就能拿到返回结果了:
server running at http://127.0.0.1
Your request url is /index.html ,and request method is GET
Your request url is /favicon.ico ,and request method is GET
中文乱码问题
当使用res.end(str);发送中文内容时,会发生乱码,因此需要设置响应的值:
server.on("request", (req,res) => {
// req.url 是客户端的 URL 地址
const url = req.url;
// req.method 是客户端的请求方式
const method = req.method;
const str = `Your request url is ${url} ,and request method is ${method}`;
// 设置响应头
// highlight-start
res.setHeader('content-Type','text/html;charset=utf-8');
// highlight-end
// 调用 res 响应一些消息,将 str 返回给客户端
res.end(str);
});
不同 URL 响应不同的 html 内容
- 获取请求的 URL 地址
- 设置默认返回内容,404
- 判断是否为
/或者/index.html首页 - 判断是否为
/about.html页面(其他页面) - 防止中文乱码
- 使用
res.end()将内容相应给客户端
const http = require("http");
const server = http.createServer();
// req是请求对象,包含了与客户端相关的属性和数据
server.on("request", (req, res) => {
const url = req.url;
let content = "<h1>404 Not Found</h1>";
if (url === "/" || url === "/index.html") {
content = "<h1>首页</h1>";
} else if (url === "/about.html") {
content = "<h1>关于</h1>";
}
res.setHeader("content-Type", "text/html; charset=utf-8");
res.end(content);
});
server.listen(80, () => {
console.log("server running at http://127.0.0.1");
});
访问 /和/index.html :
访问 /about.html:
访问不存在的页面:
经过这堂课的学习,我了解了 Node.js 的起源、运用领域、以及使用 Node.js 创建 Web 服务器的基本方法。