目录
一、什么是Node.js
它不是一门语言，库，框架，而是js运行时的环境。nodejs可以解析和执行js代码，相比于以前只用浏览器才可以解析执行js代码，现在的Js可以完全脱离浏览器来运行。Nodejs作者把Chrome中的V8引擎移植出来，开发了一个独立的js运行时环境(Nodejs)。
Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。
二、Node.js 可以做什么
Node.js 作为一个 JavaScript 的运行环境，仅提供了一些基础的功能和 API，然而结合一些框架和第三方库能够完成很多丰富的应用。
基于 Express 框架（http://www.expressjs.com.cn/），可以快速构建 Web 应用
基于 Electron 框架（https://electronjs.org/），可以构建跨平台的桌面应用
基于 restify 框架（http://restify.com/），可以快速构建 API 接口项目
读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…
Node.js学什么？
Node.js 内置 API 模块（fs、path、http等）和 第三方 API 模块（express、mysql 等）
三、Node.js内置API
3.1、fs 模块
fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求。例如：
- fs.readFile( path，[options，] callback) 方法，用来读取指定文件中的内容；
参数1：必选参数，字符串，表示文件的路径。
参数2：可选参数，表示以什么编码格式来读取文件。
参数3：必选参数，文件读取完成后，通过回调函数拿到读取的结果。回调函数（err，dataStr）： 成功， err 的值等于 null；失败，err是一个错误对象，dataStr 的值为 undefined
- fs.writeFile(file，data，[options，] callback) 方法，用来向指定的文件中写入内容；
参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径。
参数2：必选参数，表示要写入的内容。
参数3：可选参数，表示以什么格式写入文件内容，默认值是 utf8。
参数4：必选参数，文件写入完成后的回调函数。回调函数（err）：成功，则 err 的值等于 null;失败，则 err 的值等于一个 错误对象
//导入内置模块
const fs = require('fs')
//读文件
fs.readFile('./path',function(err,dataStr){
if(err) {
return console.log('文件读取失败'+ err.message)
}
console.log(dataStr)
})
//写文件
fs.writeFile('./path','String',function(err){
if(err){
return console.log('文件写入失败！' + err.message)
}
console.log('文件写入成功！')
})3.2、path 路径模块
path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求。例如：
- path.join() 方法，用来将多个路径片段拼接成一个完整的路径字符串
- path.basename(path [,ext]) 方法，用来从路径字符串中，将文件名解析出来
path <string> 必选参数，表示一个路径的字符串
ext <string> 可选参数，表示文件扩展名
返回: <string> 表示路径中的最后一部分
- path.extname(path)可以获取路径中的扩展名部分
3.3、http模块
http 模块，创建服务器，对外提供 web 服务。步骤：
- 导入 http 模块
- 创建 web 服务器实例
- 为服务器实例绑定 request 事件，监听客户端的请求
- 启动服务器
const http =require('http')
const server = http.createServer()
// req 是请求对象，包含了与客户端相关的数据和属性
// res 是响应对象，包含了与服务端相关的数据和属性
server.on(require,(req,res)=>{
// req.url 是客户端请求的 URL 地址,req.method 是客户端请求的 method 类型
const url = req.url
const method = req.method
const str = `Your request url is ${url}, and request method is ${method}`
// 调用 res.setHeader() 方法，设置 Content-Type 响应头，解决中文乱码的问题
res.setHeader('Content-Type', 'text/html; charset=utf-8')
// 调用 res.end() 方法，向客户端响应一些内容
res.end(str)
})
server.listen(80,()=>{
console.log('server running at http://127.0.0.1')
})四、本地服务案例
要求实现访问：127.0.0.1 或 127.0.0.1/clock.html 是时钟； 访问： 127.0.0.1/g2048.html 是2048小游戏；访问其他则是404
实现原理： 利用 http 模块监听前端客户请求的地址，根据地址将相应的文件，通过file模块读取并返回给客户。
案例组成：
其中 index.js
//导入相应模块
const http = require('http')
const fs = require('fs')
const path =require('path')
const server =http.createServer()
server.on('request',function(req,res){
const url = req.url
console.log(url);
if(url==='/'||url==='/clock.html'){
//当访问 '/' 或 '/clock.html' 时，读取的地址是一样的
const fpath = path.join(__dirname,'./clock.html')
fs.readFile(fpath, 'utf8', (err,dataStr)=>{
if(err) {
//若返回的是中文需要添加响应头，不然会乱码
res.setHeader('Content-Type', 'text/html; charset=utf-8')
return res.end('文件读取错误')
}
res.end(dataStr)
})
}else if(url==='/g2048.html' || url==='/c2048.css'||url==='/j2048.js'){
//当html文件内链了其他文件，如css，js时，浏览器会主动像服务器进行资源的请求
//在浏览器输入 /g2048.html 访问2048 页面时，实际访问了/g2048.html，/c2048.css ，/j2048.js 三个文件
//注意path地址拼接的区别
const fpath = path.join(__dirname,'js2048',url)
fs.readFile(fpath,'utf8',(err,dataStr)=>{
if(err) {
res.setHeader('Content-Type', 'text/html; charset=utf-8')
return res.end('文件读取错误')
}
res.end(dataStr)
})
}else{
//英文不需要添加响应头
res.end('404 Not Found.')
}
})
server.listen(80,function(){
console.log('server listen at http://127.0.0.1');
})clock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="clock">
<p id="date" class="date"></p>
<p id="time" class="time"></p>
<div id="text">内置模块[fs path http]的使用</div>
</div>
</body>
<script>
const week = ['周日','周一','周二','周三','周四','五','周六'];
// const cd=new Date();
let timeID = setInterval(updateTime,1000)
updateTime();
function updateTime(){
var cd=new Date();
console.log(cd);
document.getElementById('time').innerHTML=zeroPadding(cd.getHours(),2) + ":" +zeroPadding(cd.getMinutes(),2)+':'+zeroPadding(cd.getSeconds(),2);
document.getElementById('date').innerHTML=zeroPadding(cd.getFullYear(),4) + "-" +zeroPadding(cd.getMonth()+1,2)+'-'+zeroPadding(cd.getDate(),2)+' '+week[cd.getDay()];
}
function zeroPadding(num,digit){
let zero='';
for (let i=0;i<digit;i++){
zero+='0'
};
return (zero+num).slice(-digit);
}
</script>
<style>
html,body{
height: 100%;
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background: #0f3854;
background: radial-gradient(ellipse at center,#0a2e38 0%,#000000 70%);
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: 'Share Tech Mono', monospace;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
#clock .date {
letter-spacing: 0.1em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 15px;
padding: 20px 0 0;
}
</style>
</html>JavaScript小游戏2048-Javascript文档类资源-CSDN下载
推荐个前端网站（外网）：https://codepen.io/