node express 学习

不使用框架，使用 node 自带的 http 模块创建一个基本服务

首先创建一个文件，底下创建一个 index.js 文件。内容如下。

然后执行 node index.js。就开启了一个服务。

// 引入 node 自带 http 模块
const http = require("http");

// 使用 http 的 createServer 方法
// 创建 HTTP 服务器并监听 8000 端口的所有请求
http.createServer((request, response) => {
  // 设置可访问的源。 http://localhost:7000 或 *
  response.setHeader("Access-Control-Allow-Origin", "*"); 
  // 不清楚也不重要
  response.setHeader("Access-Control-Allow-Headers", "Content-Type"); 
  // 不清楚也不重要
  response.setHeader("content-type", "application/json")
  // 设置响应数据
  response.end(JSON.stringify({
      data: {
          msg: 'hello world!'
      },
      status: 'success'
  }))
}).listen(8000);

// 在控制台打印访问服务器的 URL
console.log('服务器运行于 http://127.0.0.1:8000/');

法一：直接在浏览器访问 http://127.0.0.1:8000/ 。

法二：在 vue 文件中简单写一个请求，打开浏览器发现控制台打印了我们在响应里设置返回的数据。

<script setup lang="ts">
  import {watchEffect} from 'vue'
  const url = 'http://127.0.0.1:8000/'
  watchEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        console.log(data)
      })
  })
</script>

express 的 hello world 使用示例

重新创建一个目录。

执行 npm init -y。

执行 npm i express

然后创建一个 index.js 文件。写入如下内容：

// 引入 express 模块
const express = require('express');
// 创建 express 应用。习惯把这个应用叫做 app
const app = express();

// 拦截路径是 / 的 get 请求，执行回调函数，直接响应返回字符串 Hello World!
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// 监听端口 3000
app.listen(3000, () => {
  console.log('示例应用正在监听 3000 端口 !');
});

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

node 导入导出模块（CommonJS 模块规范）

导出

./myUtil.js

const speak = () => {
  // ...
  console.log('我讲话了')
}

// 最终导出的是 module.exports。它是一个对象。
// exports 是 module.exports 的引用。

/**
  const exports = module.exports
*/

// 所以你可以往 exports 上添加属性或方法
// 但不能直接用新的一个对象赋值给 exports
// 否则导出的就是一个空对象（没有使用 module.exports）

// exports.speak = speak
module.exports = {
  speak
}

导入

const myUtil = require('./myUtil')

myUtil.speak()

express 的路由分组

express.Router() 相当于创建了一个子 app。

然后主 app 通过 app.use 给这个子 app 下的所有路由添加前缀。

如果想访问子 app 的路由，也得带上前缀。

index.js

const express = require('express');
const pageA = require('./pageA')
const app = express();

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

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

app.listen(3000, () => {
  console.log('示例应用正在监听 3000 端口 !');
});

pageA.js

const express = require('express');
const router = express.Router();

// 首页路由
router.get('/', (req, res) => {
  res.send('a/home');
});

// “关于”页面路由
router.get('/about/', (req, res) => {
  res.send('a/about');
});

module.exports = router;

中间件

中间件就是对请求和响应做一些操作。

编写一个自己的中间件。

现在第一次，以及之后每次切换路由，都会打印执行了中间件，并且打印当前的请求路径

const express = require('express');
const pageA = require('./pageA')
const app = express();

// 示例中间件函数
const a_middleware_function = (req, res, next) => {
  // ... 进行一些操作
  console.log('执行了中间件', req.path);
  next(); // 调用 next() ，Express 将调用处理链中下一个中间件函数。
};

// 使用中间件
app.use(a_middleware_function)

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

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

app.listen(3000, () => {
  console.log('示例应用正在监听 3000 端口 !');
});

托管静态文件

有什么用呢？就是可以通过 url 直接访问到被静态托管的文件。文件类型不限。

app.use(express.static('public'));

const express = require('express');
const pageA = require('./pageA')
const app = express();

// 托管当前目录下的 img 下的图片
app.use(express.static('./img/'));

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

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

app.listen(3000, () => {
  console.log('示例应用正在监听 3000 端口 !');
});

现在 ‘public’ 文件夹下的所有文件均可通过在根 URL 后直接添加文件名来访问了，比如：

http://localhost:3000/images/dog.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/about.html

可以通过多次调用 static() 来托管多个文件夹。

app.use(express.static('public'));
app.use(express.static('media'));

还可以为静态 URL 创建一个前缀。这些文件将通过 ‘/media’ 前缀调用：

app.use('/media', express.static('public'));

http://localhost:3000/media/images/dog.jpg
http://localhost:3000/media/video/cat.mp4
http://localhost:3000/media/cry.mp3

使用数据库

暂时用不到。

模板引擎

如果想返回 html 模板，并且动态改变一些数据，需要使用到模板引擎。常见的有 ejs 模板引擎。

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

// 设置 ejs 模板引擎
app.set('view engine', 'ejs');
// 设置模板存放的位置。第一个参数表示设置模板存放位置。
app.set('views', path.join(__dirname, 'pages'));
// 将模板的 .ejs 后缀改为 .html
app.engine('html', require('ejs').renderFile);

app.get('/', (req, res) => {
  res.render('index.html', { pageTitle: 'My Website' });
});

app.listen(3000, () => {
  console.log('示例应用正在监听 3000 端口 !');
});

如果只想返回静态的 html 模板，也是可以的。

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});