node.js的express框架总结

最新推荐文章于 2023-06-10 22:24:43 发布

脑子不太灵的鸭头

最新推荐文章于 2023-06-10 22:24:43 发布

阅读量426

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/qq_15571919/article/details/113540966

版权

1. Express简介

express是一个简洁而灵活的node.js Web应用框架，提供了一系列强大特性帮助你创建各种web应用，和丰富的HTTP工作

2.Express 框架核心特性：

可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。

3.安装express

安装express 框架全局NPM,以便它可以被用来使用Node终端创建Web应用程序
在npm里输入

npm install -g express-generator

上面的命令在本地 node_modules 目录保存安装，并创建一个目录 express 在node_modules 里边。还有，应该使用
express 安装以下几个重要的模块：
body-parser - 这是一个 Node.js 中间件处理 JSON，Raw，文本和 URL
编码的表单数据cookie-parser - 解析 Cookie 头和填充 req.cookies 通过 cookie 名字键控制对象
multer - 这是一个 Node.js 的中间件处理 multipart/form-data

 npm l install r body-parser --save
 npm l install r cookie-parser --save
 npm l install r multer --save

4.创建express

一个非常基本的 Express 应用程序，它会启动服务器，并侦听端口 3000 等待连
接。这个应用程序使用"Hello World! "回应！为请求网页。对于所有其他路径，这将
响应一个 404 表示未找到。
进入工作目录（自定义）
执行创建命令，创建一个名为 hello 的 Express 项目 express hello!
进入hello目录安装依赖包
F:\hello> npm install
安装完成后，执行命令启动应用：
F:\hello>npm start
在浏览器中输入 http://localhost:3000/

在这里插入图片描述

5.文件分析

在这里插入图片描述

bin:启动配置文件，在www里修改端口号
node_modules:存放所有的项目依赖库
public:用于存放静态资源文件、图片、css、javascript文件
router：路由文件
views:存放页面的地方
package.json:项目依赖配置及开发者信息
app.js:应用核心配置文件，项目入口

6 app.js配置分析

app.js文件相当于启动的主入口文件，包涵以下公共方法和服务器配置信息等


//http 错误处理模块
var createError = require('http-errors');

//引入express
var express = require('express');
//引入path
var path = require('path');
//引入cookie处理对象
var cookieParser = require('cookie-parser');
//引入日志处理模块
var logger = require('morgan');
//引入路由目录中的index文件
var indexRouter = require('./routes/index');
//引入路由目录中的users文件
var usersRouter = require('./routes/users');
//引入ejs
var ejs=require('ejs')
//创建express应用
var app = express();

// view engine setup
//定义页面目录
app.set('views', path.join(__dirname, 'views'));
//定义页面模板引擎
app.set('view engine', 'jade');
//定义日志打印级别
app.use(logger('dev'));
//定义json格式处理数据
app.use(express.json());
//定义使用urlencoded处理数据及querystring模块解析数据
app.use(express.urlencoded({ extended: false }));
//定义cookies处理对象
app.use(cookieParser());
//定义静态资源public
app.use(express.static(path.join(__dirname, 'public')));
//定义指向index.js的路由

app.use('/', indexRouter);
//设置html引擎
//
app.engine('html',ejs._express)
//设置视图引擎
app.set('view engine','html')
//定义指向users.js的路由
app.use('/users', usersRouter);
//定义404处理错误
// 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
  //设置locals只在开发环境下生效  
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  //返回错误的http状态码
  res.status(err.status || 500);
  res.render('error');//渲染错误页面
});

//导出app
module.exports = app;

一个页面的运行过程和逻辑大致分为三步，路由中间件(index.js)的书写同时中间件的
模板(index.ejs)要写好、最后由 app.js 配置和调用路由中间件。

1、app.js 配置
2、routes 调用路由级中间件
3、views 模板渲染

7、路由express配置
路由用于确定应用程序如何响应对特定端点的客户机请求，包含一个 URI（或路径）和一个特定的 HTTP 请求方法（GET、POST 等）。
每个路由可以具有一个或多个处理程序函数，这些函数在路由匹配时执行。它的使用形式如下：

app.method(path, handler)

app：是 express 的实例。
method：是 HTTP 请求方法。
path：是服务器上的路径。
handler：是在路由匹配时执行的函数。
注意：如果有多个路由处理程序，那么不是最后一个路由的情况下，其参数要有 next，
next() 函数不是 Node.js 或 Express API 的一部分，而是传递给中间件函数的第三自变量。next()
函数可以命名为任何名称，但是按约定，始终命名为“next”。为了避免混淆，请始终使用此约定。
next 函数主要负责将控制权交给下一个中间件，如果当前中间件没有终结请求，并且next没有被调用，那么请求将被挂起，后边定义的中间件将得不到被执行的机会。

1、get 请求：

一般在网站开发中，get 都用作数据获取和查询，类似于数据库中的查询操作，
当服务器解析前台资源后即传输相应内容；而查询字符串是在 URL 上进行的，形如：

http://localhost:8080/login?goods1=0001&goods2=0002

（1）GET 请求的特点：

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制：
IE：对 URL 的最大限制为 2083 个字符，若超出这个数字，提交按钮没有任何反应。
Firefox：对 Firefox 浏览器 URL 的长度限制为：65536 个字符。
Safari：URL 最大长度限制为 80000 个字符。
Opera：URL 最大长度限制为 190000 个字符。
Google(chrome)：URL 最大长度限制为 8182 个字符。

GET 请求只应当用于取回数据

（2）获取前台 get 请求：通过 req.query 可以获得用户发送的 get 请求，之后通过node 操作将相应数据返回给用户。

(3)Express 使用 html 模板：express 默认使用 jade 模板，可以配置让其支持使用 ejs 或 html 模板。

A、安装 ejs：在项目根目录安装 ejs.
npm install ejs
B、引入 ejs var ejs = require(‘ejs’);
C、设置 html 引擎 app.engine(‘html’, ejs.__express);
D、设置视图引擎app.set(‘view engine’, ‘html’);
(4)更改 express 项目的默认端口号：
express 项目，启动后默认是 3000 端口，我们可以自定义端口，在 app.js 文件中加入下面的语句：

process.env.PORT = 8082;

(5)示例

在 views 下创建 login.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:8088/add" method="POST">
        <br>
       用户名： <input type="text" name="user"id="user"placeholder="用户名"/>
       <br>
       密码：
       <input type="password"name="password"placeholder="密码">
       <br>
       <input type="submit"value="提交">
    </form>
</body>
</html>

更改 router 下的 index.js 文件（路由文件）

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('login');
});
//获取get页面的参数
router.get('/login',function(req,res){
  console.log(req.query)
  res.send('登录路由,user为：'+req.query.user+"==>  password为："+req.query.password)
})
//测试nodemon
router.get('/admin',function(req,res){
  console.log(req.query)
  res.render('admin')
})
//新年倒计时
router.get('/time',function(req,res){
  console.log(req.query)
  res.render('time')
})
//测试post请求
router.post('/add',function(req,res){
  
  res.render('add')
  res.send('post请求<br>user为：'+req.body.user+"==>  password为："+req.body.password)
})
module.exports = router;

2、post 请求：

Express 中接受 post 请求参数需要借助第三方包 body-parser
(1)首先在项目目录下安装
npm install body-parser
(2)在 app.js 中引入
var bodyParser = require(‘body-parser’);
(3)在 app.js 中进行如下配置：
app.use(bodyParser.urlencoded({extended:false}))
extended:false 表示方法内部使用 querystring 模块处理请求参数的格式
extended:true 表示方法内部使用第三方模块 qs 处理请求参数的格式

(4)示例：

在 views 下创建 post.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:3000/login" method="post">
        <br>
       用户名： <input type="text" name="user"id="user"placeholder="用户名"/>
       <br>
       密码：
       <input type="password"name="password"placeholder="密码">
       <br>
       <input type="submit"value="提交">
    </form>
</body>
</html>

配置 router 下的 index.js 文件（路由文件

//测试post请求
router.post('/add',function(req,res){
  
  res.render('add')
  res.send('post请求<br>user为：'+req.body.user+"==>  password为："+req.body.password)
})
module.exports = router;

附：每次更改路由文件都要重新启动项目才能生效，这样开发效率不高。可以安装 nodemon工具，在更改路由后就不用重新启动项目了

1、安装 nodemon 工具
npm install -g nodemon
2、修改项目根目录中的 package.json 文件

{
  "name": "hello",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "^3.1.5",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}

改为：

{
  "name": "hello",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./bin/www"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "^3.1.5",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}

本篇完，后期会加入node.js express框架怎么添加数据、怎么从数据库中引入数据

脑子不太灵的鸭头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
node.js的express框架总结

1. Express简介express是一个简洁而灵活的node.js Web应用框架，提供了一系列强大特性帮助你创建各种web应用，和丰富的HTTP工作2.Express 框架核心特性：可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。3.安装express安装express 框架全局NPM,以便它可以被用来使用Node终端创建Web应用程序在npm里输入npm install -g
复制链接

扫一扫