网络原理
HTML 和 CSS
Javascript
Mysql
Ajax
MongoDB
Mongoose
RESTful API
Middlewares , Cookies , Sessions
Authentication
React
Next.js

网络原理

互联网是全球最大的计算机网络，由数十亿台设备相互连接组成。它使得信息和资源在全球范围内快速共享和访问。以下是互联网网络的概述：

1. 基础架构

互联网由许多互联的网络组成，每个网络可能由不同的组织、企业、学校或政府机构拥有和管理。这些网络通过路由器、交换机和其他网络设备互相连接。

2. 协议

互联网的核心协议是TCP/IP协议，它分为多个层次，每层都提供特定的功能： - 应用层：处理具体的应用程序，如HTTP（用于网页浏览）、SMTP（用于电子邮件）、FTP（用于文件传输）等。 - 传输层：提供端到端的通信服务，主要协议有TCP（传输控制协议）和UDP（用户数据报协议）。 - 网络层：负责数据包在网络中的传输，主要协议是IP（互联网协议）。 - 链路层：处理在物理网络上的数据帧传输，如以太网和Wi-Fi。

3. 域名系统（DNS）

DNS是互联网的“电话簿”，将易记的域名（如www.example.com）转换为IP地址（如192.0.2.1），使得用户无需记住数字地址即可访问网站。

4. IP地址

每台连接到互联网的设备都有一个唯一的IP地址。IP地址有两种版本： - IPv4：使用32位地址，提供约43亿个唯一地址。 - IPv6：使用128位地址，提供几乎无限的地址空间，解决了IPv4地址耗尽的问题。

5. 互联网服务提供商（ISP）

ISP是为用户提供互联网接入的公司。ISP通常分为三级： - 一级ISP：拥有全球范围内的大规模网络基础设施。 - 二级ISP：通过一级ISP获得全球接入，提供区域性的互联网服务。 - 三级ISP：通过二级ISP提供本地接入服务。

6. 路由和交换

路由器和交换机是互联网的关键设备： - 路由器：在不同网络之间传输数据包，决定数据包的最佳路径。 - 交换机：在同一网络内的设备之间传输数据帧，提高局域网（LAN）的效率。

7. 互联网服务

互联网提供各种服务，包括但不限于： - 万维网（WWW）：通过HTTP协议访问和共享信息。 - 电子邮件：通过SMTP、POP3和IMAP协议发送和接收电子邮件。 - 即时通讯和视频会议：通过实时通信协议（如SIP）进行实时交流。 - 文件共享：通过FTP和P2P协议共享文件。

8. 安全和隐私

互联网安全是一个重要的问题，包括防范黑客攻击、恶意软件、数据泄露等。常见的安全措施包括防火墙、加密、认证和授权等。

通过以上各部分的协同工作，互联网成为一个功能强大、覆盖广泛的全球网络，极大地改变了人类的通信、工作和生活方式。

HTML 和 CSS

HTML（超文本标记语言）和CSS（层叠样式表）是构建网页和Web应用的基础技术。它们各自有不同的功能和用途，但一起工作时能够创建结构化、美观和响应式的网页。

HTML（超文本标记语言）

HTML 是网页内容的基础，定义了网页的结构和内容。HTML使用标签（tags）来标记不同类型的内容，如文本、图像、链接等。以下是HTML的一些基本概念：

1. HTML文档结构

HTML文档通常包括以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

<!DOCTYPE html>：声明文档类型，告知浏览器使用HTML5标准。
<html>：整个HTML文档的根元素。
<head>：包含文档的元数据，如标题、样式和脚本。
<title>：定义网页的标题，显示在浏览器标签上。
<body>：包含网页的主要内容。

2. 常用标签

<h1> - <h6>：标题标签，<h1>是最高级标题，<h6>是最低级标题。
<p>：段落标签，用于定义文本段落。
<a>：链接标签，用于创建超链接。
<img>：图像标签，用于嵌入图像。
<ul> 和 <ol>：无序列表和有序列表。
<li>：列表项，用于<ul>和<ol>内部。
<div>：分区或容器，用于布局和分隔内容。
<span>：行内元素，用于对文本进行样式化或分隔。

CSS（层叠样式表）

CSS 用于控制HTML内容的外观和布局。通过将样式与结构分离，CSS使得维护和更新网页变得更加容易。

1. CSS语法

CSS由选择器和声明块组成。声明块包含属性和值对：

selector {
    property: value;
}

2. 常见选择器

元素选择器：直接选择HTML元素。 css p { color: blue; }
类选择器：选择具有特定类属性的元素。 css .classname { font-size: 20px; }
ID选择器：选择具有特定ID属性的元素。 css #idname { background-color: yellow; }
组合选择器：结合多种选择器以选择更具体的元素。 css div p { margin: 10px; }

3. 样式属性

颜色和背景： css color: red; background-color: #f0f0f0;
文本和字体： css font-family: Arial, sans-serif; font-size: 16px; text-align: center;
盒模型： css margin: 10px; padding: 20px; border: 1px solid black; width: 200px; height: 100px;
布局： css display: flex; justify-content: space-between; align-items: center;

4. 引入CSS

内联样式：直接在HTML元素的style属性中定义样式。 <p style="color: blue;">这是一个段落。</p>
内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。 <style> p { color: blue; } </style>
外部样式表：使用<link>标签链接外部CSS文件。 <link rel="stylesheet" href="styles.css">

结合使用HTML和CSS

通过结合使用HTML和CSS，可以创建结构良好、视觉吸引力强和响应迅速的网页。例如：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个示例段落。</p>
</body>
</html>

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: blue;
}

p {
    color: green;
    font-size: 18px;
}

总结

HTML 和 CSS 是创建现代网页的核心技术。HTML提供了内容和结构，而CSS控制外观和布局。通过掌握这两种技术，开发者可以创建出美观且功能强大的网页。

Javascript

JavaScript是一种高层次、解释型的编程语言，广泛用于网页开发。它最初是为了在浏览器中实现动态交互而设计的，但现在也被用于服务器端编程和桌面应用开发。以下是JavaScript的概述：

1. JavaScript的特点

1.1 动态类型

JavaScript是一种动态类型语言，变量可以随时改变类型。

1.2 解释执行

JavaScript代码由浏览器的JavaScript引擎解释执行，不需要编译。

1.3 弱类型

JavaScript是弱类型语言，不需要显式声明变量类型，允许隐式类型转换。

1.4 事件驱动

JavaScript支持事件驱动编程，可以响应用户交互，如点击、键盘输入等。

1.5 跨平台

JavaScript可以在不同的平台上运行，包括Windows、macOS、Linux等。

2. JavaScript的基本语法

2.1 变量声明

使用var、let和const关键字声明变量。

var x = 5;        // 使用var声明变量
let y = 10;       // 使用let声明变量（块级作用域）
const z = 15;     // 使用const声明常量

2.2 数据类型

JavaScript有多种数据类型，包括： - 原始类型：number、string、boolean、null、undefined、symbol。 - 复合类型：object（包括数组、函数、日期等）。

2.3 运算符

JavaScript支持多种运算符，如算术运算符、比较运算符、逻辑运算符等。

let a = 10 + 5;     // 算术运算
let b = 10 > 5;     // 比较运算
let c = true && false;  // 逻辑运算

2.4 条件语句

使用if、else if和else语句进行条件判断。

if (x > 5) {
    console.log("x大于5");
} else if (x === 5) {
    console.log("x等于5");
} else {
    console.log("x小于5");
}

2.5 循环语句

使用for、while和do...while循环进行迭代。

for (let i = 0; i < 5; i++) {
    console.log(i);
}

let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

2.6 函数

使用function关键字定义函数，或使用箭头函数（ES6）。

function add(a, b) {
    return a + b;
}

const multiply = (a, b) => a * b;

3. DOM操作

JavaScript可以操作网页的DOM（文档对象模型），实现动态网页效果。

// 获取元素
let element = document.getElementById("myElement");

// 修改元素内容
element.innerHTML = "Hello, World!";

// 修改元素样式
element.style.color = "red";

// 添加事件监听器
element.addEventListener("click", function() {
    alert("Element clicked!");
});

4. 异步编程

JavaScript支持异步编程，常用的方法有回调函数、Promise和async/await。

// 使用回调函数
setTimeout(() => {
    console.log("1秒后执行");
}, 1000);

// 使用Promise
let promise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("操作成功");
    } else {
        reject("操作失败");
    }
});

promise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.log(error);
});

// 使用async/await
async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log("获取数据失败", error);
    }
}

fetchData();

5. 现代JavaScript（ES6+）

ECMAScript 6（ES6）引入了许多新的特性和语法，如箭头函数、模板字符串、解构赋值、类、模块等。

// 箭头函数
const greet = (name) => `Hello, ${name}`;

// 模板字符串
let message = `今天的天气是${weather}`;

// 解构赋值
let [a, b] = [1, 2];
let { name, age } = person;

// 类
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

let john = new Person("John", 30);
john.greet();

// 模块
// module.js
export const pi = 3.14;
export function square(x) {
    return x * x;
}

// main.js
import { pi, square } from './module.js';
console.log(pi);
console.log(square(2));

总结

JavaScript 是一种功能强大的编程语言，广泛应用于网页开发。通过掌握 JavaScript 的基本语法、DOM 操作和异步编程技巧，开发者可以创建动态、交互性强的网页和应用。随着 ES6 及以后的新特性的引入，JavaScript 变得更加现代化和高效。

Node.js

Node.js 是一个开源、跨平台的 JavaScript 运行时环境，使得开发者可以在服务器端运行 JavaScript 代码。Node.js 基于 Google 的 V8 JavaScript 引擎，提供了高效的性能和扩展性。以下是 Node.js 的概述：

1. Node.js 的特点

1.1 单线程事件驱动

Node.js 使用单线程事件循环机制来处理并发任务，这使得它在处理 I/O 密集型任务时非常高效。通过事件驱动和非阻塞 I/O 操作，Node.js 可以在单个线程中处理大量并发连接。

1.2 跨平台

Node.js 可以在多个操作系统上运行，包括 Windows、macOS 和 Linux，提供了良好的跨平台支持。

1.3 NPM（Node Package Manager）

NPM 是 Node.js 的包管理器，它包含了大量的开源库和模块，开发者可以方便地下载和使用这些模块来扩展应用功能。

1.4 高性能

由于使用了 V8 引擎和事件驱动架构，Node.js 在处理高并发请求时表现出色，适用于实时应用和数据密集型应用。

2. Node.js 的核心模块

Node.js 提供了一些内置模块，这些模块封装了常用的功能，如文件系统操作、网络通信等。以下是一些常用的核心模块：

2.1 http

用于创建 HTTP 服务器和客户端。

const http = require('http');

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello, World!\n');
});

server.listen(3000, '127.0.0.1', () => {
    console.log('服务器运行在 http://127.0.0.1:3000/');
});

2.2 fs

用于文件系统操作。

const fs = require('fs');

// 读取文件
fs.readFile('example.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

// 写入文件
fs.writeFile('example.txt', 'Hello, Node.js!', (err) => {
    if (err) throw err;
    console.log('文件已保存');
});

2.3 path

用于处理和转换文件路径。

const path = require('path');

let filePath = path.join(__dirname, 'example.txt');
console.log(filePath);

2.4 os

用于获取操作系统相关信息。

const os = require('os');

console.log('操作系统平台：', os.platform());
console.log('CPU 架构：', os.arch());
console.log('内存总量：', os.totalmem());
console.log('空闲内存：', os.freemem());

3. 异步编程

Node.js 强调异步编程，以提高 I/O 操作的效率。以下是几种常见的异步编程方式：

3.1 回调函数

回调函数是最基本的异步编程方式。

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

3.2 Promise

Promise 提供了更好的错误处理和链式调用。

const fs = require('fs').promises;

fs.readFile('example.txt', 'utf8')
    .then(data => {
        console.log(data);
    })
    .catch(err => {
        console.error(err);
    });

3.3 async/await

async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码。

const fs = require('fs').promises;

async function readFile() {
    try {
        let data = await fs.readFile('example.txt', 'utf8');
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

readFile();

4. Express 框架

Express 是一个基于 Node.js 的快速、灵活的 Web 应用框架，提供了一系列强大的功能来帮助开发者轻松构建 Web 应用和 API。

4.1 安装 Express

通过 NPM 安装 Express。

npm install express

4.2 创建基本的 Express 应用

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

app.listen(3000, () => {
    console.log('服务器运行在 http://127.0.0.1:3000/');
});

5. Node.js 应用场景

5.1 实时应用

Node.js 非常适合构建实时应用，如聊天应用、在线游戏等。

const http = require('http');
const socketIo = require('socket.io');

const server = http.createServer((req, res) => {
    res.writeHead(200);
    res.end('Hello, Socket.io');
});

const io = socketIo(server);

io.on('connection', (socket) => {
    console.log('一个用户连接');

    socket.on('message', (msg) => {
        console.log('收到消息：', msg);
        socket.broadcast.emit('message', msg);
    });

    socket.on('disconnect', () => {
        console.log('一个用户断开连接');
    });
});

server.listen(3000, () => {
    console.log('服务器运行在 http://127.0.0.1:3000/');
});

5.2 RESTful API

Node.js 可以用来构建高效的 RESTful API 服务。

const express = require('express');
const app = express();

app.use(express.json());

let items = [];

app.get('/items', (req, res) => {
    res.json(items);
});

app.post('/items', (req, res) => {
    let newItem = req.body;
    items.push(newItem);
    res.status(201).json(newItem);
});

app.listen(3000, () => {
    console.log('服务器运行在 http://127.0.0.1:3000/');
});

总结

Node.js 是一个强大的 JavaScript 运行时环境，适用于构建高并发、I/O 密集型的应用。通过其事件驱动、非阻塞 I/O 模型，Node.js 提供了高效的性能。借助丰富的核心模块和第三方库，开发者可以快速构建各种类型的应用，从简单的工具到复杂的网络服务。

Exxpress.js

Express.js 是一个基于 Node.js 的快速、简洁的 Web 应用框架。它提供了一系列强大而灵活的功能，用于构建各种类型的 Web 应用和 API。以下是对 Express.js 的概述：

1. Express.js 的特点

1.1 简洁易用

Express.js 以其简洁的语法和易用的 API 而闻名，开发者可以快速上手并构建出功能强大的 Web 应用。

1.2 中间件机制

Express.js 中间件是处理 HTTP 请求的函数链，每个中间件可以处理请求、响应或调用下一个中间件。这个机制提供了极大的灵活性和可扩展性。

1.3 路由

Express.js 提供了强大的路由功能，可以根据不同的 URL 和 HTTP 方法来处理请求。

1.4 模板引擎支持

Express.js 支持多种模板引擎，如 Pug、EJS、Handlebars 等，用于生成动态 HTML 内容。

1.5 丰富的社区和生态系统

Express.js 拥有庞大的社区和丰富的插件、扩展库，可以满足各种开发需求。

2. 安装和基础用法

2.1 安装 Express.js

通过 npm 安装 Express.js：

npm install express

2.2 创建基本的 Express 应用

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

app.listen(3000, () => {
    console.log('服务器运行在 http://127.0.0.1:3000/');
});

3. 中间件

中间件是 Express.js 的核心概念，可以用来处理请求、响应或调用下一个中间件。

3.1 应用级中间件

app.use((req, res, next) => {
    console.log('请求时间：', Date.now());
    next();
});

3.2 路由级中间件

const router = express.Router();

router.use((req, res, next) => {
    console.log('路由级中间件');
    next();
});

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

app.use('/router', router);

3.3 内置中间件

Express.js 提供了一些常用的内置中间件，如 express.json() 和 express.urlencoded()。

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

4. 路由

Express.js 提供了灵活的路由定义方法，可以根据不同的 URL 和 HTTP 方法来处理请求。

4.1 基本路由

app.get('/', (req, res) => {
    res.send('GET 请求');
});

app.post('/', (req, res) => {
    res.send('POST 请求');
});

4.2 路由参数

app.get('/user/:id', (req, res) => {
    res.send(`用户 ID：${req.params.id}`);
});

4.3 路由分组

const userRouter = express.Router();

userRouter.get('/:id', (req, res) => {
    res.send(`用户 ID：${req.params.id}`);
});

app.use('/users', userRouter);

5. 模板引擎

Express.js 支持多种模板引擎，可以用于生成动态 HTML 内容。

5.1 使用 Pug 模板引擎

app.set('view engine', 'pug');

app.get('/hello', (req, res) => {
    res.render('index', { title: 'Hey', message: 'Hello there!' });
});

6. 错误处理

Express.js 提供了统一的错误处理机制。

6.1 捕获 404 错误

app.use((req, res, next) => {
    res.status(404).send('页面未找到');
});

6.2 全局错误处理

app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send('服务器错误');
});

7. 构建 RESTful API

Express.js 非常适合构建 RESTful API。以下是一个简单的示例：

const express = require('express');
const app = express();

app.use(express.json());

let items = [
    { id: 1, name: 'item1' },
    { id: 2, name: 'item2' }
];

app.get('/items', (req, res) => {
    res.json(items);
});

app.get('/items/:id', (req, res) => {
    const item = items.find(i => i.id == req.params.id);
    if (!item) return res.status(404).send('项目未找到');
    res.json(item);
});

app.post('/items', (req, res) => {
    const newItem = { id: items.length + 1, name: req.body.name };
    items.push(newItem);
    res.status(201).json(newItem);
});

app.put('/items/:id', (req, res) => {
    const item = items.find(i => i.id == req.params.id);
    if (!item) return res.status(404).send('项目未找到');

    item.name = req.body.name;
    res.json(item);
});

app.delete('/items/:id', (req, res) => {
    const itemIndex = items.findIndex(i => i.id == req.params.id);
    if (itemIndex === -1) return res.status(404).send('项目未找到');

    const deletedItem = items.splice(itemIndex, 1);
    res.json(deletedItem);
});

app.listen(3000, () => {
    console.log('服务器运行在 http://127.0.0.1:3000/');
});

总结

Express.js 是一个轻量级且灵活的 Node.js Web 应用框架，非常适合构建各种类型的 Web 应用和 API。通过其简洁的语法和丰富的中间件机制，开发者可以快速上手并高效地构建出功能强大的应用。

Ejs

EJS（Embedded JavaScript）是一种简单、灵活的模板引擎，适用于在服务器端生成 HTML 内容。它允许你使用普通的 JavaScript 语法嵌入到 HTML 模板中，以生成动态内容。以下是 EJS 的概述：

1. EJS 的特点

1.1 嵌入式 JavaScript

EJS 允许在模板中嵌入 JavaScript 代码，使得在生成 HTML 时可以灵活地处理数据。

1.2 简洁易用

EJS 语法简洁，容易学习和使用，适合快速开发和原型设计。

1.3 与 Express 集成

EJS 可以轻松集成到 Express.js 中，用于生成动态网页。

1.4 逻辑控制

EJS 提供了条件判断、循环等逻辑控制功能，允许在模板中进行复杂的逻辑处理。

2. 安装和基本用法

2.1 安装 EJS

通过 npm 安装 EJS：

npm install ejs

2.2 创建基本的 EJS 模板

创建一个名为 index.ejs 的文件：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

2.3 使用 EJS 渲染模板

创建一个 Node.js 应用来渲染 EJS 模板：

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index', { title: 'Hello, EJS!', message: 'Welcome to EJS Template Engine' });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://127.0.0.1:3000/');
});

3. EJS 语法

3.1 输出数据

使用 <%= %> 标签来输出数据。

<p><%= message %></p>

3.2 转义输出

使用 <%- %> 标签输出未转义的数据。

<p><%- htmlContent %></p>

3.3 注释

使用 <%# %> 标签添加注释，这些注释不会出现在生成的 HTML 中。

<%# 这是一个注释 %>

3.4 条件语句

使用普通的 JavaScript 语法进行条件判断。

<% if (user) { %>
    <h2>Welcome, <%= user.name %>!</h2>
<% } else { %>
    <h2>Welcome, Guest!</h2>
<% } %>

3.5 循环

使用普通的 JavaScript 循环语句。

<ul>
<% users.forEach(user => { %>
    <li><%= user.name %></li>
<% }) %>
</ul>

4. 在 Express.js 中使用 EJS

4.1 设置视图引擎

在 Express 应用中设置 EJS 作为视图引擎。

app.set('view engine', 'ejs');

4.2 渲染视图

使用 res.render 方法渲染 EJS 模板，并传递数据。

app.get('/users', (req, res) => {
    const users = [
        { name: 'Alice' },
        { name: 'Bob' },
        { name: 'Charlie' }
    ];
    res.render('users', { users });
});

创建 users.ejs 模板文件：

<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>
</head>
<body>
    <h1>用户列表</h1>
    <ul>
    <% users.forEach(user => { %>
        <li><%= user.name %></li>
    <% }) %>
    </ul>
</body>
</html>

5. 布局和部分

EJS 支持模板的重用，通过布局和部分可以简化模板的管理。

5.1 创建布局

创建一个 layout.ejs 文件，用于定义通用的页面结构。

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <%- include('header') %>
    <%- body %>
    <%- include('footer') %>
</body>
</html>

5.2 使用布局

在具体的页面模板中包含布局。

app.get('/', (req, res) => {
    res.render('index', { title: 'Home', body: '<h1>Welcome to the Home Page</h1>' });
});

5.3 创建部分

创建 header.ejs 和 footer.ejs 文件，用于定义页面的头部和尾部。

<!-- header.ejs -->
<header>
    <h1>网站标题</h1>
</header>

<!-- footer.ejs -->
<footer>
    <p>版权所有 &copy; 2024</p>
</footer>

总结

EJS 是一个功能强大且易用的模板引擎，适用于在服务器端生成动态 HTML 内容。通过其简单的语法和强大的逻辑控制功能，开发者可以轻松地创建复杂的网页和应用。EJS 与 Express.js 的无缝集成，使得它成为构建动态 Web 应用的理想选择。

前端开发-从入门到精通

米霖

2024-06-18