文档地址

课程地址

源码 提取码：963h

hello wrold

console.log('hello, world');

node hello.js

nodejs 中不能使用 DOM(document) 和 BOM(window) 的 API：

• document
• window
• history
• navigator
• location

但是下面的 API 是相通的：

• console
• timer

console.log('hello, world');

setTimeout(() => {
    console.log('fuck the world');
}, 1000);

nodejs 中的顶级对象为 global，也可以使用 globalThis 访问顶级对象：

console.log(global);
console.log(global === globalThis);		// true

Buffer

字节序列

let buf1 = Buffer.alloc(10);
let buf2 = Buffer.allocUnsafe(10);	// 有旧数据
let buf3 = Buffer.from('hello');	// str -> buffer
let buf4 = Buffer.from([101, 102, 103, 104]);

let s4 = buf4.toString();
console.log(buf3[0]);
buf3[0] = 361;		// 溢出

fs

writeFile

fs.write(file, data[, option], callback);

const fs = require('fs');

fs.writeFile('./hello.txt', 'hello, world\n', err => {		// async
    if (err) {
        console.log('write failed');
    } else {
        console.log('write success');
    }
});

异步与同步

writeFile 默认是异步的，对于下面的代码：

const fs = require('fs');

fs.writeFile('./hello.txt', 'hello, world\n', err => {		// async
    if (err) {
        console.log('write failed');
    } else {
        console.log('write success');
    }
});

console(1 + 1);

2 会先输出。原因在于写文件被主线程派发给一个子线程去执行，写文件不会阻塞主线程

下面是使用同步写入：

const fs = require('fs');
fs.writeFileSync('./test.txt', 'test');
console(1 + 1);

appendFile

const fs = require('fs');

fs.appendFile('./hello.txt', 'fuck, world\n', err => {		// async
    if (err) {
        console.log('append failed');
    } else {
        console.log('appeend success');
    }
});

同步版本：

fs.appendFileSync('./hello.txt', 'fuck, world\n')

使用 writeFile 实现追加写入：

fs.writeFile('./hello.txt', 'fuck, world\n', {flag: 'a'}, err => {		// async
    if (err) {
        console.log('append failed');
    } else {
        console.log('appeend success');
    }
});

流式写入

fs.createWriteStream(path[, options]);

let ws = fs.createWriteStream('./观书有感.txt');
ws.write('半亩方塘一鉴开\r\n');
ws.write('天光云影共徘徊\r\n');
ws.write('问渠那得清如许\r\n');
ws.write('为有源头活水来\r\n');
ws.end();

文件读取

异步读取

const fs = require('fs');

fs.readFile('hello.txt', (err, data) => {		// async
    if (err) {
        console.log('append failed');
    } else {
        console.log(data.toString());
    }
});

同步读取

let data = readFileSync('hello.txt');

流式读取

 fs.createReadStream(path[, options])

//创建读取流对象
let rs = fs.createReadStream('./观书有感.txt');
//每次取出 64k 数据后执行一次 data 回调
rs.on('data', data => {
	console.log(data);
	console.log(data.length);
});
//读取完毕后, 执行 end 回调
rs.on('end', () => {
	console.log('读取完成');
});

文件复制

同步读写

const fs = require('fs');
let data = fs.readFileSync('hello.txt');
fs.writeFileSync('hello-2.txt', data);

流式读写

const rs = fs.createReadStream('hello.txt');
const ws = fs.createWriteStream('hello-3.txt');
rs.on('data', chunk => {
	ws.write(chunk);
});

或者如下简写：

rs.pipe(ws);

文件重命名

文件重命名通过 rename() 实现：

fs.rename(oldPath, newPath, callback);
fs.renameSync(oldPath, newPath);

fs.rename('./观书有感.txt', './论语/观书有感.txt', (err) =>{
	if(err) throw err;
	console.log('移动完成')
});
fs.renameSync('./座右铭.txt', './论语/我的座右铭.txt');

文件删除

fs.unlink(path, callback)
fs.unlinkSync(path)

const fs = require('fs');
fs.unlink('./test.txt', err => {
	if(err) throw err;
	console.log('删除成功');
});
fs.unlinkSync('./test2.txt');

使用 rm 方法也可以

文件夹操作

mkdir

fs.mkdir(path[, options], callback)
fs.mkdirSync(path[, options])

//异步创建文件夹
fs.mkdir('./page', err => {
	if(err) throw err;
	console.log('创建成功');
});
//递归异步创建
fs.mkdir('./1/2/3', {recursive: true}, err => {
	if(err) throw err;
	console.log('递归创建成功');
});
//递归同步创建文件夹
fs.mkdirSync('./x/y/z', {recursive: true});

readdir

fs.readdir(path[, options], callback)
fs.readdirSync(path[, options])

//异步读取
fs.readdir('./论语', (err, data) => {
	if(err) throw err;
	console.log(data);
});
//同步读取
let data = fs.readdirSync('./论语');
console.log(data);

rmdir

fs.rmdir(path[, options], callback)
fs.rmdirSync(path[, options])

//异步删除文件夹
fs.rmdir('./page', err => {
	if(err) throw err;
	console.log('删除成功');
});
//异步递归删除文件夹
fs.rmdir('./1', {recursive: true}, err => {
    if(err) {
    	console.log(err);
    }
	console.log('递归删除')
});
//同步递归删除文件夹
fs.rmdirSync('./x', {recursive: true})

查看资源状态

fs.stat(path[, options], callback)
fs.statSync(path[, options])

//异步获取状态
fs.stat('./data.txt', (err, data) => {
    if(err) throw err;
    console.log(data);
    console.log(data.isFile());
    console.log(data.isDirectory());
});
//同步获取状态
let data = fs.statSync('./data.txt');

绝对路径：

__dirname

__dirname 保存着当前文件所在目录的绝对路径，可以使用 __dirname 与文件名拼接成绝对路径

批量重命名练习

const fs = require('fs');
const files = fs.readdirSync('./code');

files.forEach(item => {
    let [num, name] = item.split('-');
    if (Number(num) < 10) {
        num = '0' + num;
    }
    let newName = num + '-' + name;
    fs.renameSync(`./code${item}`, `./code/${newName}`);
    console.log(item);
});

path

const path = require('path');
//获取路径分隔符
console.log(path.sep);
//拼接绝对路径
console.log(path.resolve(__dirname, 'test'));
//解析路径
let pathname = 'D:/program file/nodejs/node.exe';
console.log(path.parse(pathname));
//获取路径基础名称
console.log(path.basename(pathname))
//获取路径的目录名
console.log(path.dirname(pathname));
//获取路径的扩展名
console.log(path.extname(pathname));

HTTP 协议

请求行

请求方法

url

协议版本号

请求头

一系列键值对

请求体

请求体的内容格式是非常灵活的，可以设置任意内容

响应行

协议版本号

响应状态码

响应状态字符串

响应头

也是一系列键值对，可以自定义

响应体

响应体内容的类型是非常灵活的，常见的类型有 HTML、CSS、JS、图片、JSON

http

const http = require('http');

const server = http.createServer((request, response) => {
    response.end('<h1>hello, http server</h1>');
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

解决中文乱码：

response.setHeader('content-type','text/html;charset=utf-8');

发送 post 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:9000" method="post">
        <input type="text" name="username">
        <input type="text" name="password">
        <input type="submit" value="提交">
    </form>
</body>
</html>

获取 HTTP 请求报文

获取请求体

const http = require('http');

const server = http.createServer((request, response) => {
    response.setHeader('content-type','text/html;charset=utf-8');
    let body = '';
    request.on('data', chunk => {
        body += chunk;
    });
    request.on('end', () => {
        console.log(body);
        response.end('hello, nodejs http')

    });
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

获取请求路径和查询字符串

const http = require('http');
const url = require('url');

const server = http.createServer((request, response) => {
    response.setHeader('content-type','text/html;charset=utf-8');
    console.log(url.parse(request.url).pathname);
    console.log(url.parse(request.url, true).query);
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

或者使用内置的 URL 类：

const http = require('http');

const server = http.createServer((request, response) => {
    let url = new URL(request.url, 'http://localhost');
    console.log(url.pathname);
    console.log(url.searchParams.get('keyword'));
    response.end('url new');
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

练习

const http = require('http');

const server = http.createServer((request, response) => {
    response.setHeader('content-type','text/html;charset=utf-8');
    let {url, method} = request;
    if(url == '/login' && method == 'GET') {
        response.end('登录');
    } else if (url == '/reg' && method == 'GET') {
        response.end('注册');
    } else {
        response.end('wrong');
    }
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

设置响应报文

const http = require('http');

const server = http.createServer((request, response) => {
    response.statusCode = 200;	// 响应行
    response.setHeader('content-type','text/html;charset=utf-8');	// 响应头
    response.end('response');	// 响应体
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

设置响应头：

response.setHeader('server','nodejs');
response.setHeader('myheader','test test test');
response.setHeader('test',['a', 'b', 'c']);		// 设置多个同名响应头

设置响应体：

response.write('hello');

练习

搭建 HTTP 服务，响应一个 4 行 3 列的表格，并且要求表格有隔行换色效果 ，且点击单元格能高亮显示

服务端代码：

const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
    response.setHeader('content-type','text/html;charset=utf-8');
    fs.readFile('table.html', (err, data) => {
        response.end(data);
    });
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    td {
        padding: 20px 40px;
    }
    table tr:nth-child(odd) {
        background-color: #aef;
    }
    table tr:nth-child(even) {
        background-color: #fcb;
    }
    table, td {
        border-collapse: collapse;
    }
</style>
<body>
    <table border="1">
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
    </table>
</body>
<script>
    let tds = document.querySelectorAll('td');
    tds.forEach(item => {
        item.onclick = function() {
            this.style.background = '#bfa';
        }
    });
</script>
</html>

网页资源的加载都是循序渐进的，首先获取 HTML 的内容， 然后解析 HTML 在发送其他资源的请求，如 CSS，Javascript，图片等

练习扩展

将前端的 html css js 三者分离：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="table.css">
<body>
    <table border="1">
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
    </table>
</body>
<script src="table.js"></script>
</html>

// table.js
let tds = document.querySelectorAll('td');
tds.forEach(item => {
    item.onclick = function() {
        this.style.background = '#bfa';
    }
});

// table.css
td {
    padding: 20px 40px;
}
table tr:nth-child(odd) {
    background-color: #aef;
}
table tr:nth-child(even) {
    background-color: #fcb;
}
table, td {
    border-collapse: collapse;
}

服务端：

const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
    let {pathname} = new URL(request.url, 'http://localhost');
    if(pathname === '/') {
        fs.readFile('table.html', (err, data) => {
            response.end(data);
        });
    } else if (pathname === '/table.js') {
        fs.readFile('table.js', (err, data) => {
            response.end(data);
        });
    } else if (pathname === '/table.css') {
        fs.readFile('table.css', (err, data) => {
            response.end(data);
        });
    } else {
        response.end('error');
    }
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

获取 page 下的静态资源服务：

const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
    let {pathname} = new URL(request.url, 'http://localhost');
    let filePath = __dirname + '/page' + pathname;
    fs.readFile(filePath, (err, data) => {
        if (err) {
            response.statusCode = 500;
            response.end('read file failed');
        }
        response.end(data);
    });
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

<link rel="stylesheet" href="/css/app.css">

MIME 类型

错误处理

const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
    if(request.method !== 'GET') {
        response.statusCode = 405;
        response.end('<h1> 405 Method not allowed </h1>');
        return;
    }
    let {pathname} = new URL(request.url, 'http://localhost');
    let filePath = __dirname + '/page' + pathname;
    fs.readFile(filePath, (err, data) => {
        if (err) {
            console.log(err);
            switch(err.code) {
                case 'ENOENT':
                    response.statusCode = 404;
                    response.end('<h1> 404 Not Found </h1>');
                case 'EPERM':
                    response.statusCode = 403;
                    response.end('<h1> 403 Forbidden </h1>');
                default:
                    response.statusCode = 500;
                    response.end('error');
            }
        }
        response.end(data);
    });
});

server.listen(9000, () => {
    console.log('listening on 9000');
});

GET 与 POST 场景区别

模块化

其中拆分出的每个文件就是一个模块 ，模块的内部数据是私有的，不过模块可以暴露内部数据以便其他模块使用

// me.js
function tiemo() {
    console.log("tiemo");
}

function niejiao() {
    console.log('niejiao');
}

module.exports = {
    tiemo,
    niejiao
};

const me = require('./me.js');       // 不能省略 ./

me.tiemo();
me.niejiao();

导入文件夹

// package.json
{
    "main": "./app.js"
}

// app.js
module.exports = "this is module1";

// index.js
const m1 = require('./module1');       // 不能省略 ./
console.log(m1);		// "this is module1"

导入模块的流程

CommonJS 模块化规范

包管理工具

npm

node package manager

初始化包

npm init

npm init 命令的作用是将文件夹初始化为一个『包』， 交互式创建 package.json 文件

{
  "name": "test",
  "version": "1.0.0",
  "description": "learning npm",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "daniel",
  "license": "ISC"
}

搜索包

下载安装包

npm install uniq

使用包：

const uniq = require('uniq');

let a1 = [1, 2, 3, 4, 5, 3, 2, 1];

const result = uniq(a1);

console.log(result)

开发依赖与生产依赖

npm i -S jquery		# 生产依赖
npm i -D less		# 开发依赖

全局安装

npm i -g nodemon
npm root -g	# 查看全局安装位置

安装所有依赖：

指定版本与删除包

npm i jquery@1.11.2
npm remove uniq		# 局部删除
npm r -g nodemon	# 全局删除

配置命令别名

{
...
"scripts": {
"server": "node server.js",
"start": "node index.js",
},
...
}

配置完成之后，可以使用别名执行命令

npm run server
npm run start

cnpm

cnpm 是一个淘宝构建的 npmjs.com 的完整镜像，也称为『淘宝镜像』，网址https://npmmirror.com/

cnpm 服务部署在国内阿里云服务器上 ， 可以提高包的下载速度 官方也提供了一个全局工具包 cnpm ，操作命令与 npm 大体相同

npm install -g cnpm --registry=https://registry.npmmirror.com

用 npm 也可以使用淘宝镜像：

使用命令行配置：

npm config set registry https://registry.npmmirror.com/

或者使用 nrm 工具配置：

nrm = npm registry manager

npm i -g nrm
nrm use taobao
nrm use npm

yarn

npm i -g yarn

nvm = node version manager

express 框架

基于 nodejs 的 web 开发框架

node init
node i express

一个最简单的 webserver：

const express = require('express');

const app = express();

app.get('/home', (req, res) => {
    res.end('express hello');
});

app.listen(3000, () => {
    console.log('listening...');
});

路由

const express = require('express');

const app = express();

app.get('/home', (req, res) => {
    res.end('express hello');
});

app.get('/', (req, res) => {
    res.end('home');
});

app.post('/login', (req, res) => {
    res.end('login');
});

app.all('/test', (req, res) => {
    res.end('test');
});

app.all('*', (req, res) => {
    res.end('404 not found');
});

app.listen(3000, () => {
    console.log('listening...');
});

发送 post 请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:3000/login" method="post">
        <button>登录</button>
    </form>
</body>
</html>

获取请求报文参数

//导入 express
const express = require('express');
//创建应用对象
const app = express();
//获取请求的路由规则
app.get('/request', (req, res) => {
    //1. 获取报文的方式与原生 HTTP 获取方式是兼容的
    console.log(req.method);
    console.log(req.url);
    console.log(req.httpVersion);
    console.log(req.headers);
    //2. express 独有的获取报文的方式
    //获取查询字符串
    console.log(req.query); // 『相对重要』
    console.log(req.path);
    // 获取指定的请求头
    console.log(req.get('host'));
    res.send('请求报文的获取');
});
//启动服务
app.listen(3000, () => {
	console.log('启动成功....')
});

获取路由参数

路由参数指的是 URL 路径中的参数（数据），使用 req.params 获取

app.get('/:id.html', (req, res) => {		//:id 是占位符
	res.send('商品详情, 商品 id 为' + req.params.id);
});

const express = require('express');
const {singers} = require('singers.json');

const app = express();

app.get('/singer/:id.html', (req, res) => {
    let {id} = req.params;
    let singer = singers.find(item => {
        if (item.id === Number(id)) {
            return true;
        }
    });
    if (!singer) {
        res.statusCode = 404;
        res.end('404 not found');
    } else {
        res.end(singer);
    }
});

响应设置

express 框架封装了一些 API 来方便给客户端响应数据，并且兼容原生 HTTP 模块的获取方式

//获取请求的路由规则
app.get("/response", (req, res) => {
    //1. express 中设置响应的方式兼容 HTTP 模块的方式
    res.statusCode = 404;
    res.statusMessage = 'xxx';
    res.setHeader('abc','xyz');
    res.write('响应体');
    res.end('xxx');
    
    //2. express 的响应方法
    res.status(500); //设置响应状态码
    res.set('xxx','yyy');//设置响应头
    res.send('中文响应不乱码');//设置响应体
    //连贯操作
    res.status(404).set('xxx','yyy').send('你好朋友')
    
    //3. 其他响应
    res.redirect('http://atguigu.com'); //重定向
    res.download('./package.json'); //下载响应
    res.json(); //响应 JSON，一般用于接口化开发
    res.sendFile(__dirname + '/home.html') //响应文件内容
});

中间件

全局中间件

每一个请求到达服务端之后都会执行全局中间件函数

const express = require('express');
const fs  = require('fs');
const path = require('path');

const app = express();

function recordMiddleware(req, res, next) { // 全局中间件函数
    let {url, ip} = req;
    fs.appendFileSync(path.resolve(__dirname, './access.log'), `${url} ${ip}\r\n`);
    //执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next)
    next();
}

app.use(recordMiddleware);	// 注册全局中间件

app.get('/home', (req, res) => {
    res.end('home');
});

app.get('/admin', (req, res) => {
    res.end('admin');
});

app.all('*', (req, res) => {
    res.end('404 not found');
});

app.listen(3000, () => {
    console.log('listening...');
});

路由中间件

如果只需要对某一些路由进行功能封装 ，则就需要路由中间件

const express = require('express');
const fs  = require('fs');
const path = require('path');

const app = express();

let checkCodeMiddleware = (req, res, next) => { // 全局中间件函数
    if (req.query.code === '521') {
        next();
    } else {
        res.send('code error');
    }
}

app.get('/setting', checkCodeMiddleware, (req, res) => {
    res.end('home');
});

app.get('/admin', checkCodeMiddleware, (req, res) => {
    res.end('admin');
});

app.all('*', (req, res) => {
    res.end('404 not found');
});

app.listen(3000, () => {
    console.log('listening...');
});

静态资源中间件

app.use(express.static(__dirname + '/public'));

获取请求体数据

按照要求搭建 http 服务：

• GET /login 显示表单网页
• POST /login 获取表单中的用户名和密码

使用 body-parser 中间件：

const express = require('express');
const bodyParser = require('body-parser');

//处理 querystring 格式的请求体
let urlParser = bodyParser.urlencoded({extended:false});

const app = express();

app.get('/login', (req, res) => {
    res.sendFile(__dirname + '/form.html');
});

app.post('/login', urlParser, (req, res) => {
    //用户名
    console.log(req.body.username);
    //密码
    console.log(req.body.password);
    res.send('获取请求体数据');
});

app.all('*', (req, res) => {
    res.end('404 not found');
});

app.listen(3000, () => {
    console.log('listening...');
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>
<body>
    <form action="/login" method="post">
        username: <input type="text" name="username"> <br />
        password: <input type="text" name="password"> <br />
        <button>submit</button>
    </form>
</body>
</html>

防盗链

禁止其他域名访问本网站资源

referer 请求头能够携带当前域名信息：

referer: https://www.jj20.com/

const express = require('express');

const app = express();

app.use((req, res, next) => {
    let referer = req.get('referer');	// 获取 referer 请求头
    if (referer) {
        let url = new URL(referer);
        let hostname = url.hostname;
        if (hostname !== '127.0.0.1') {
            res.status(404).send('<h1> 404 not found</h1>');
            return;
        }
    }
    next();
});

app.use(express.static(__dirname + '/public'));

app.all('*', (req, res) => {
    res.end('404 not found');
});

app.listen(3000, () => {
    console.log('listening...');
});

Router 路由模块化

什么是 Router：express 中的 Router 是一个完整的中间件和路由系统，可以看作是一个小型的 app 对象

Router 的作用：对路由进行模块化，更好地管理路由

//server.js
const express = require('express');

const app = express();

const homeRouter = require('./homeRouter');
const adminRouter = require('./adminRouter');

app.use(homeRouter);
app.use(adminRouter);

app.all('*', (req, res) => {
    res.end('404 not found');
});

app.listen(3000, () => {
    console.log('listening...');
});

// homeRouter.js
const express = require('express');

const router = express.Router();

router.get('/home', (req, res) => {
    res.send('home');
});

router.get('/search', (req, res) => {
    res.send('search');
});

module.exports = router;

// adminRouter.js
const express = require('express');

const router = express.Router();

router.get('/admin', (req, res) => {
    res.send('admin');
});

router.get('/setting', (req, res) => {
    res.send('setting');
});

module.exports = router;

ejs 模板引擎

npm i ejs

<% code %>		// 执行 js 代码
<%= code %>		// 输出转义的数据到模板上
<%- code %>		// 输出非转义的数据到模板上

const ejs = require('ejs');

let y = 'you';

let res = ejs.render('i love <%= y %>', {y: y});
console.log(res);

// ejs.js
const ejs = require('ejs');
const fs = require('fs');

let y = 'you';

let html = fs.readFileSync('./index.html').toString();

let res = ejs.render(html, {y: y});
console.log(res);

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>i love <%= y %> </h1>
</body>
</html>

列表渲染

// ejs.js
const ejs = require('ejs');
const fs = require('fs');

const arr = ['appal', 'orange', 'banana', 'grapes'];

let html = fs.readFileSync('./index.html').toString();

let res = ejs.render(html, {arr: arr});

console.log(res);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <% arr.forEach(item => { %>
        	<li><%= item %></li>
        <% }) %>
    </ul>
</body>
</html>

条件渲染

// ejs.js
const ejs = require('ejs');
const fs = require('fs');

let isLogin = false;

let html = fs.readFileSync('./index.html').toString();

let res = ejs.render(html, {isLogin: isLogin});

console.log(res);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <% if(isLogin) { %>
        <span> 欢迎回来 </span>
    <% } else { %>
        <button>登录</button> <button>注册</button>
    <% } %>
</body>
</html>

express 中使用 ejs

// ejs.js
const express = require('express');
const path = require('path');

const app = express();

app.set('view engine', 'ejs');	// 设置引擎
app.set('views', path.resolve(__dirname, './views'));	// 设置模板路径

app.get('/home', (req, res) => {
    let title = 'hello, world';
    res.render('home', {title});	// 将 title render 给 home.ejs
});

app.listen(3000, () => {
    console.log('listening on 3000');
})

// views/home.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <%= title %>
</body>
</html>

express-generator

用于快速创建一个应用的骨架

npm i -g express-generator
express -e prj_name
cd prj_name
npm i	// 安装依赖
npm start

然后浏览器访问 http://localhost:3000/ 即可

// app.js
app.use('/', indexRouter);
app.use('/users', usersRouter);		// users 是路由前缀

文件上传

// routers/index.js
var express = require('express');
var router = express.Router();
const {formidable} = require('formidable');

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/portrait', (req, res) => {
  res.render('portrait');
});

router.post('/portrait', (req, res) => {
  const form = formidable({multiples: true,
    uploadDir: __dirname + '/../public/images',
    keepExtensions: true
  });
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    let url = '/images/' + files.portrait[0].newFilename;
    res.send(url);
  });
});

module.exports = router;

<!--portrait.ejs-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portrait</title>
</head>
<body>
    <h1>Portrait</h1>
    <form action="/portrait" method="post" enctype="multipart/form-data">
        用户名：<input type="text" name="username"> <br>
        头像：<input type="file" name="portrait">
        <button>点击提交</button>
    </form>
</body>
</html>

记账本案例实践

初始化项目：

express -e
npm i
npm start

添加 2 个路由和 2 个静态页面：

// routes/index.js
/* GET home page. */
router.get('/account', function(req, res, next) {
  // res.render('index', { title: 'Express' });
  res.render('list');
});

// 发送表单页面
router.get('/account/create', function(req, res, next) {
  // res.render('index', { title: 'Express' });
  res.render('create');
});

// 处理表单数据
router.post('/account', (req, res) => {
  console.log(req.body);
  res.send('add account');
});

<!-- views/list.ejs -->
<!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>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
      rel="stylesheet"
    />
    <style>
      label {
        font-weight: normal;
      }
      .panel-body .glyphicon-remove{
        display: none;
      }
      .panel-body:hover .glyphicon-remove{
        display: inline-block
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-lg-8 col-lg-offset-2">
          <h2>记账本</h2>
          <hr />
          <div class="accounts">
            <div class="panel panel-danger">
              <div class="panel-heading">2023-04-05</div>
              <div class="panel-body">
                <div class="col-xs-6">抽烟只抽煊赫门，一生只爱一个人</div>
                <div class="col-xs-2 text-center">
                  <span class="label label-warning">支出</span>
                </div>
                <div class="col-xs-2 text-right">25 元</div>
                <div class="col-xs-2 text-right">
                  <span
                    class="glyphicon glyphicon-remove"
                    aria-hidden="true"
                  ></span>
                </div>
              </div>
            </div>
            <div class="panel panel-success">
              <div class="panel-heading">2023-04-15</div>
              <div class="panel-body">
                <div class="col-xs-6">3 月份发工资</div>
                <div class="col-xs-2 text-center">
                  <span class="label label-success">收入</span>
                </div>
                <div class="col-xs-2 text-right">4396 元</div>
                <div class="col-xs-2 text-right">
                  <span
                    class="glyphicon glyphicon-remove"
                    aria-hidden="true"
                  ></span>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

表单页面：

<!-- views/create.ejs -->
<!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>添加记录</title>
    <link
      href="/css/bootstrap.css"
      rel="stylesheet"
    />
    <!-- 以 public 为根目录 -->
    <link href="/css/bootstrap-datepicker.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-lg-8 col-lg-offset-2">
          <h2>添加记录</h2>
          <hr />
          <form method="post" action="/account">
            <div class="form-group">
              <label for="item">事项</label>
              <input
                name="title"
                type="text"
                class="form-control"
                id="item"
              />
            </div>
            <div class="form-group">
              <label for="time">发生时间</label>
              <input
                name="time"
                type="text"
                class="form-control"
                id="time"
              />
            </div>
            <div class="form-group">
              <label for="type">类型</label>
              <select class="form-control" id="type" name="type">
                <option value="-1">支出</option>
                <option value="1">收入</option>
              </select>
            </div>
            <div class="form-group">
              <label for="account">金额</label>
              <input
                name="account"
                type="text"
                class="form-control"
                id="account"
              />
            </div>
            
            <div class="form-group">
              <label for="remarks">备注</label>
              <textarea class="form-control" id="remarks" name="remark"></textarea>
            </div>
            <hr>
            <button type="submit" class="btn btn-primary btn-block">添加</button>
          </form>
        </div>
      </div>
    </div>
    <!-- 以 public 为根目录 -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-datepicker.min.js"></script>
    <script src="/js/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="/js/main.js"></script>
  </body>
</html>

lowdb

npm i lowdb@1.0.0

const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync');
 
const adapter = new FileSync('db.json');
const db = low(adapter);

// Set some defaults
db.defaults({ posts: [], user: {} })
  .write()
/*
{
  "posts": [],
  "user": {}
}
*/
 

// Add a post
db.get('posts')
  .push({ id: 1, title: 'lowdb is awesome'})
  .write()
/*
{
  "posts": [
    {
      "id": 1,
      "title": "lowdb is awesome"
    }
  ],
  "user": {}
}
*/

db.get('posts')
  .unshift({id: 2, title: 'hello, world'})
  .write()
/*
  {
    "posts": [
      {
        "id": 2,
        "title": "hello, world"
      },
      {
        "id": 1,
        "title": "lowdb is awesome"
      }
    ],
    "user": {}
  }
*/

console.log(db.get('posts').value())

db.get('posts').remove({id: 2}).write()

db.get('posts').find({id: 1}).assign({title: "fuck, world"}).write()

保存账单信息

// data/db.json
{
  "accounts": []
}

安装 shortid：

npm i shortid

收到 post 请求后存入数据库：

// index.js
const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync'); 
const adapter = new FileSync(__dirname + '/../data/db.json');
const db = low(adapter);
const shortid = require("shortid");

router.post('/account', (req, res) => {
  console.log(req.body);
  let id = shortid.generate();
  db.get("accounts").unshift({id: id, ...req.body}).write();
  res.render('success',  {msg: "添加成功~~~", url: '/account'});
});

<!-- success.ejs -->
<!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>提醒</title>
  <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
      rel="stylesheet"
    />
  <style>
    .h-50{
      height: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="h-50"></div>
    <div class="alert alert-success" role="alert">
       <h1><%= msg %></h1>
      <p><a href="<%= url %>">点击跳转</a></p>
    </div>
  </div>
</body>
</html>

账单列表

<!-- list.ejs -->
<!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>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
      rel="stylesheet"
    />
    <style>
      label {
        font-weight: normal;
      }
      .panel-body .glyphicon-remove{
        display: none;
      }
      .panel-body:hover .glyphicon-remove{
        display: inline-block
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-lg-8 col-lg-offset-2">
          <h2>记账本</h2>
          <hr />
          <div class="accounts">
            <% accounts.forEach(item => {%>
            <div class="panel <%= item.type === '-1' ? 'panel-danger' : 'panel-success'%>">
              <div class="panel-heading"><%= item.time %></div>
              <div class="panel-body">
                <div class="col-xs-6"><%= item.title %></div>
                <div class="col-xs-2 text-center">
                  <span class="label <%= item.type === '-1' ? 'label-warning' : 'label-success'%>"><%= item.type === '-1' ? '支出' : '收入'%></span>
                </div>
                <div class="col-xs-2 text-right"><%= item.account %></div>
                <div class="col-xs-2 text-right">
                  <span
                    class="glyphicon glyphicon-remove"
                    aria-hidden="true"
                  ></span>
                </div>
              </div>
            </div>
            <% }) %>            
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

删除账单

前端代码修改：

<!-- list.ejs -->
<a href="/account/<%= item.id %>">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>

后端代码修改：

// index.js
router.get("/account/:id", (req, res) => {
  let id = req.params.id;
  db.get('accounts').remove({id: id}).write();
  res.render('success', {msg: '删除成功', url: '/account'});
});

MongoDB

MongoDB 是一个基于分布式文件存储的数据库，跟 json 文件非常类似

• 一个 json 文件好比是一个数据库，一个 Mongodb 服务下可以有 N 个数据库
• json 文件中的一级属性的数组值好比是集合
• 数组中的对象好比是文档
• 对象中的属性有时也称之为字段

一般情况下：
一个项目使用一个数据库
一个集合会存储同一类型的数据

启动数据库

Mongodb 默认使用 C:/data/db 作为文件存储路径

mongod	# 启动数据库服务端
mongo	# 启动数据库客户端

show dbs

默认有 3 个数据库：

admin
config
local

数据库与集合命令

show dbs	// 显示所有的数据库
use db_name		// 切换到指定的数据库，如果不存在则创建
db		// 显示当前所在的数据库
use db_name
db.dropDatabase()	// 删除当前数据库

db.createCollection('users')
show collections
db.collection_name.drop()	// 删除某个集合
db.collection_name.renameCollection(collection_name2)	// 重命名集合

文档命令

use bilibili
db.users.insert({name: 'hcc', age: 18})
db.users.insert({name: 'hnp', age: 19})
db.users.insert({name: 'ss', age: 20})

db.users.find()		// 查询所有文档
db.users.find({age: 20})	// 按条件查询
db.users.update({name: 'ss'}, {$set: {age: 24}})	// 更新
db.users.remove({name: 'ss'})

mongoose

Mongoose 是一个对象文档模型库，方便使用代码操作 mongodb 数据库

npm init
npm i mongoose

连接数据库

const mongoose = require('mongoose');

// 如果数据库不存在，则自动创建
mongoose.connect('mongodb://127.0.0.1:27017/bilibili');

// 使用 once 绑定的回调函数，只执行一次
mongoose.connection.once('open', () => {
    console.log('open');
});
mongoose.connection.on('error', () => {
    console.log('error');
});
mongoose.connection.on('close', () => {
    console.log('close');
});
setTimeout(() => {
    mongoose.disconnect();
});

插入文档

mongoose.connection.once('open', () => {
    let BookSchema = new mongoose.Schema({
        title: String,
        author: String,
        price: Number
    });
    let BookModel = mongoose.model('books', BookSchema);
    BookModel.create({
        title: 'xiyouji',
        author: 'wuchengen',
        price: 19
    }).then((data) => {
        console.log(data);
        mongoose.disconnect();
    });
    console.log('open');
});