Node.js 里 Express工程框架中的代码解析

最新推荐文章于 2024-05-13 10:02:47 发布

冲鸭嘟嘟可

最新推荐文章于 2024-05-13 10:02:47 发布

阅读量448

点赞数

分类专栏： Node.js 文章标签： node.js express javascript

本文链接：https://blog.csdn.net/fuhao6363/article/details/129460163

版权

Node.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何新建一个基于Express的博客应用，包括配置入口文件app.js，设置服务运行在3000端口，检查运行状态，理解工程结构和文件作用。还涉及了模板引擎ejs的使用，路由配置，如app.use和app.get，以及错误处理机制。

摘要由CSDN通过智能技术生成

新建一个工程

express -e blog

配置入口文件

打开项目内的app.js ,在倒数第二行写入如下代码：

app.listen('3000', function () {
  console.log('server is running in 3000')
})

这样就让服务运行在了3000端口

检查

打开终端输入：

node app

在打开浏览器访问127.0.0.1:3000

在这里插入图片描述
运行成功

了解工程结构

在这里插入图片描述
此时blog目录下的文件大概是这样的

这些文件的用处有这些：

app.js:启动文件，或者说入口文件
package.json: 储存着工程的信息以及模块依赖，当在dependencies中添加依赖的模块时，运行 npm install ,npm就会检查当前目录下的package.json,并自动安装所有指定的模块。
node_modules:存放package.json 中安装的模块，当在package.json中添加依赖的模块并安装后，该模块会存放在这个文件夹下。
public：存放image、css、js等文件
routes: 存放路由文件
views：存放视图文件，或者说模板文件

打开app.js 现在它的内容大致是这样的：

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 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);

// 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');
});

app.listen('3000', function () {
  console.log('server is running in 3000')
})

module.exports = app;

它通过require导入了 http-errors express path cookie-parser morgan等模块，以及./routes/index ./routes/users两个本地文件。

app.set('views', path.join(__dirname, 'views'));

这行代码让views文件夹设置为存放视图文件的目录（存放模板文件的地方），__dirname是指当前文件所在的目录。

app.set(’ ', ’ ');是设置express.js所使用的render engine。

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

这里是用了很多use方法连接了很多内置的中间件：

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')));

目录被设为了public文件夹。

app.use('/', indexRouter);
app.use('/users', usersRouter);

配置了两个路由一个是/ 一个是/users 也就是routes目录下的两个文件
在这里插入图片描述

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;

这段的意思是使用ejs模板引擎，解析 index.ejs 文件（也就是前面设置的views目录下的index.ejs）。
传入了一个对象{title:‘Express’} ,这个对象只有一个title属性，意思是用title的值Express替换index.ejs中所有的title变量，这也就是渲染视图的过程。

users.js:

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

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

如果访问/ 就会由index.js 来处理如果访问/users 就会由users.js来处理。

路由规则

express封装了多种http请求方式，我们主要使用get 和 post两种，即app.get()和app.post()。
app.get()和app.post()的第一个参数都为请求路径，第二个参数为处理请求的回调函数，回调函数有两个参数req和res，代表请求信息和响应信息。路径请求以及对应的获取路径有以下几种形式：

req.query 处理get请求，获取get请求参数
req.params 处理 /:xxx 形式的get和post请求，获取请求参数。
req.body 处理post请求，获取post请求体
req.param() 处理get和post请求，但查找优先级由高到低而req.params -> req,body -> req.query

添加路由规则

当我们访问127.0.0.1:3000 或者localhost:3000时是这样的页面：

在这里插入图片描述

如果访问不在路由配置中的地址就会报错：
在这里插入图片描述

这是因为不存在 /xiaofu 的路由规则，同时它也不是一个public目录下的文件，所以返回了错误页面。

在index.js中的函数内加一段以下代码：

 router.get('/xiaofu', function (req, res, next) {
    res.send('Hello Im XiaoFu!')
  })

在这里插入图片描述
重启服务再次访问

在这里插入图片描述
页面就渲染上了一样一句话
这就是路由的配置。

模板引擎

模板引擎是一个将页面模板和要显示的数据结合起来生成HTML页面的工具。

在这个工程中，我们用的是ejs模板引擎。

前面我们也设置过了模板文件的位置以及它们使用的模板引擎：

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

打开index.ejs,它的内容是这样的：

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

当我们在路由配置时配置这行语句时：

res.render('index', { title: 'Express' });

模板引擎就会把
< title><%= title %></t itle>
渲染为Express

渲染之后的页面代码：

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

注意：
因为前面我们把静态文件目录设置为了public目录，所以这里的href的值可以不写相对或绝对路径之间写 ‘/stylesheets/style.css’

ejs标签系统

<% code %>  => JavaScript代码
<%=code %>  => 显示替换过的HTML特殊字符的内容
<%-code %>  => 显示原始HTML内容

冲鸭嘟嘟可

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Node.js 里 Express工程框架中的代码解析

Node.js 里 Express工程框架中的代码解析
复制链接

扫一扫

专栏目录