Express 路由

什么是路由

路由指的是应用程序的端点（URI）如何响应客户端请求。

路由示例；下方统称路由

// 这是路由
app.get('/', (req, res) => {
    res.render('首页')
})
// 获取文章列表
app.get('/article/list', (req, res) => {
    res.render('首页')
})
// 发布文章
app.post('/article/add', (req, res) => {
    res.render('文章发布成功')
})
// 删除文章
app.post('/article/add', (req, res) => {
    res.render('文章删除成功')
})

使用 Router 管理路由

路由器本身的行为类似于中间件，因此你可以将它作为参数传递给app.use()，或者作为另一个路由器的use()方法的参数。大家可以用前端浏览器跳转的思路理解它，项目内部也有很多程序文件，我们可以通过Router分门别类的管理它们。让代码更清晰。

代码示例 app.use()在指定路径挂载指定的中间件函数：当请求路径的基础部分与 path 匹配时，将执行该中间件函数。

import express from 'express';
import ejs from 'ejs';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const port = 3000;

app.use(express.static(join(__dirname, 'public')));
app.set('views', join(__dirname, '/template'));
app.set('view engine', 'html');
app.engine('html', ejs.__express);

// 创建页面层路由
const htmlRouter = express.Router();
// 创建用户接口层路由
const apiUserRouter = express.Router();

// 首页
htmlRouter.get('/', (req, res) => {
  // res.sendFile(join(__dirname, '/public/html/index.html'));
  res.render(
    'user.html',
    {
      name: '张三',
      title: '首页',
      content: '<h1>Hello Express</h1>',
      list: [
        { id: 1, name: '张三'},
        { id: 2, name: '李四'},
        { id: 3, name: '王五'},
      ],
    }
  );
});
// 挂载
app.use('/', htmlRouter);

// 获取用户列表
apiUserRouter.get('/list', (req, res) => {
  res.json({
    code: 0,
    data: [
      {
        name: '张三',
        age: 18,
        sex: '男',
      },
      {
        name: '李四',
        age: 19,
        sex: '男',
      }
    ],
  });
});

// 根据用户 ID 获取用户详情
apiUserRouter.get('/:id', (req, res) => {
  res.json({
    code: 0,
    data: {
      name: '张三',
      age: 18,
      sex: '男',
    },
  });
});

// 先匹配 /user 匹配上了，再匹配后面的如：http://localhost:3000/user/list
app.use('/user', apiUserRouter);

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

封装路由

如项目大了我们这个文件就会很臃肿，这个时候我们就要用到封装路由，把它们分离出去进行分门别类单文件管理；如公共JS函数。

• 创建router文件夹，并创建页面层的路由

mkdir router
cd router
touch html.js

• html.js

import express from 'express';

const router = express.Router();
router.get('/', (req, res) => {
  // res.sendFile(join(__dirname, '/public/html/index.html'));
  res.render(
    'index.html',
    {
      name: '张三',
      title: '首页',
      content: '<h1>Hello Express</h1>',
      list: [
        { id: 1, name: '张三'},
        { id: 2, name: '李四'},
        { id: 3, name: '王五'},
      ],
    }
  );
});

// 导出路由
export default router;

• 在 app.js 中引入路由并使用

  示例中引入了 htmlRouter、userRouter 路由

import express from 'express';
import ejs from 'ejs';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
import htmlRouter from './router/html.js';
import userRouter from './router/api/user.js';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const port = 3000;

app.use(express.static(join(__dirname, 'public')));
app.set('views', join(__dirname, '/template'));
app.set('view engine', 'html');
app.engine('html', ejs.__express);

app.use('/', htmlRouter);

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

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});