node.js学习笔记(3)--Express创建的项目分析

最新推荐文章于 2025-04-23 10:35:42 发布

mnixu

最新推荐文章于 2025-04-23 10:35:42 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： node.js node-js 文章标签： node.js

本文链接：https://blog.csdn.net/a1104258464/article/details/50976786

node.js 同时被 2 个专栏收录

15 篇文章

订阅专栏

node-js

14 篇文章

订阅专栏

本文是关于node.js中Express框架创建的项目分析。主要涵盖app.js（应用启动）、package.json（项目信息和依赖）、routes（路由处理）、view（视图文件）、public（静态资源）和bin（可执行文件）等核心组成部分。在路由部分，讲解了如何通过get请求处理函数，使用res.render将数据传递给EJS模板。视图文件主要是index.ejs，而public目录用于存储静态资源。

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

1.app.js（应用的启动文件）

var express = require('express');			#加载express模块
var path = require('path');				#加载path模块
var favicon = require('serve-favicon');				
var logger = require('morgan');										
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');			#加载routes文件夹下的index.js路由文件
var users = require('./routes/users');			#加载路由文件

var app = express();					#生成一个express 实例 app
	
// view engine setup	
app.set('views', path.join(__dirname, 'views'));	#设置view为视图文件的位置,即ejs文件放在view文件夹 __dirname是全局变量，表示当前执行文件的路径

app.set('view engine', 'ejs');				#设置模板为ejs 

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));					#加载logger 中间件（logger为日志） 
					
app.use(bodyParser.json());				#加载bodyParset中间件

app.use(bodyParser.urlencoded({ extended: false }));	#加载解析urlencoded请求体的中间件
app.use(cookieParser());				#加载解析cookie
app.use(express.static(path.join(__dirname, 'public')));	#设置public为存放静态文件

app.use('/', routes);					#路由控制
app.use('/users', users);

// catch 404 and forward to error handler		#捕获404错误
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler				#开发环境下的错误，将错误渲染到模板显示到浏览器
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler				#生产环境下的错误，将错误渲染到模板显示到浏览器
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

module.exports = app;					#导出这个模块 让其他模块能使用

具体指令不懂的可以查看API ： Express 4.X-API

2.package.json（项目的信息和依赖模块）

{
  "name": "first",		#项目名	(名字里不要再包含"js"和"node")
  "version": "0.0.0",		#版本	
  "private": true,		#是否私有（设置为true则不会发布到npm上）
  "scripts": {			#配置项目启动
    "start": "node ./bin/www"
  },
  "dependencies": {		#依赖的包
    "body-parser": "~1.13.2",	
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "ejs": "~2.3.3",
    "express": "~4.13.1",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0"
  }
}

3.routes（路由文件）

router/index.js

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

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

module.exports = router;

router.get表示是通过get请求/时调用function方法 req,res参数分别为request,response。

res.render表示调用index模板文件，并把参数title传到模板文件中（因为我们在app.js文件中设置了模板为ejs 所以这个找的是view下的index.ejs而不是index.html）

想详细了解路由的看这个Express 路由

4.view (存放视图文件)

视图文件采用的是ejs模板

ejs模板指令：

<% code%> 可以在里面写js代码

<ul>
<% var a=1%>
<% if(a==1) {%>
   <li><%=a%></li>
<% } %>
</ul>

<ul>
  <li>1</li>
</ul>

<%=code%> 显示替换过html的内容

<%-code%>显示替换前html的内容

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body> 
    <%="<h1>aa</h1>"%>
    <%-"<h1>aa</h1>"%>
  </body>
</html>

显示如下

我们用 <%-include %>来进行布局

index.ejs

<%- include a %>
hello,world!
<%- include b %>

a.ejs

this is a.ejs

b.ejs

this is b.ejs

最终 index.ejs 会显示：

this is a.ejs
hello,world!
this is b.ejs

5.public (存放静态文件)

里面有三个文件夹分别存放img , js ,css等文件