nodejs express 路由与view创建多级目录_express路由访问views下的资源-CSDN博客

本文链接：https://blog.csdn.net/lyhDream/article/details/100178270

本文详细介绍如何使用Express.js框架创建并配置多级路由，包括项目初始化、使用EJS模板引擎、创建登录页面及路由设置。通过实例演示，读者可以学习如何在Express项目中组织复杂的路由结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、首先使用np 安装express 库

#创建项目目录
mkdir myapp
#进入项目目录
cd myapp
#在该目录创建，并初始化 package.json 文件
npm init
#在当前目录下安装 express 库
npm install express --save

二、使用express 的应用程序生成器

#全局安装应用程序生成器
npm install -g express-generator
#展示express 应用生成器的选项
express -h
#使用express 创建一个使用ejs为模板的项目
express -e  ejsProject

创建后项目目录如下：

项目创建好之后，需要安装依赖

cd ejsTest
npm install

三、启动express 项目路

#Mac下或linux环境下启动
DEBUG=myapp:* npm start

#windows下启动
set DEBUG=myapp:* & npm start
或者使用一下方式
set DEBUG=myapp:* 
npm start

访问 localhost:3000 ，即可访问：

四、为view 和视图创建字母结构

在route目录下创建 login目录，并创建login.js，添加以下代码：

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

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('this is login page');
});


router.get('/login', function(req, res, next) {
//前面没有 "/"符号
  res.render('login/login', { title: 'Express' });
});

module.exports = router

在views目录下创建文件夹login，并在该目录下创建login.ejs文件，添加一下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>login</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>login page</h1>
    <p>Welcome to login page</p>
  </body>
</html>

在app.js中注册新的路由，添加一下代码：

var loginRouter = require('./routes/login/login');

app.use('/login/login', loginRouter);

添加后如下：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
//以下是新添加的代码++++++++++++++++++++++++
var loginRouter = require('./routes/login/login');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
//以下是新添加的代码++++++++++++++++++++++++++++
app.use('/login/login', loginRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

启动应用访问：http://localhost:3000/login/login ，得到如下：