Express框架的学习介绍

简介: Express框架的学习介绍

原生的http在某些方面表现不足以应对我们的开发需求,所以就需要使用框架来加快我们的开发效率,框架的目的就是提高效率,让我们的代码高度统一。

在node中有很多web开发框架。今天我们来学习express


学习Express


起步


安装:


npm install express


hello world


// 引入express
var express = require('express');
// 1. 创建app
var app = express();
//  2. 
app.get('/',function(req,res){
    // 1
    // res.write('Hello');
    // res.write('World');
    // res.end()
    // 2
    // res.end('hello world');
    // 3
    res.send('hello world');
})
app.listen(3000,function(){
    console.log('express app is runing...');
})


代码解释:

上面的代码是一个简单的使用 Express 框架创建服务器的例子。下面是每个部分的详细解释:

  1. 引入 Express 模块:


var express = require('express');


这一行代码是引入了 Express 模块,它提供了创建服务器和路由的工具。

  1. 创建应用程序实例:


var app = express();


这一行代码是创建了一个应用程序实例 app,它将用于创建路由和启动服务器。

  1. 创建路由:


app.get('/',function(req,res){
    // ...
})


这一段代码定义了一个路由,当用户通过 HTTP GET 请求访问网站根目录时,服务器将向用户返回 "hello world"。这里使用了 app.get() 函数,它接受两个参数:请求路径和一个回调函数。当用户访问指定的路径时,服务器将调用这个回调函数。

  1. 启动服务器:


app.listen(3000,function(){
    console.log('express app is runing...');
})


这一行代码将服务器绑定到本地 3000 端口上,并在服务器启动时输出一条日志。

最后,这段代码中给出了三种不同的方式来向用户发送 "hello world" 响应:


基本路由


路由:

  • 请求方法
  • 请求路径
  • 请求处理函数

get:


//当你以get方法请求/的时候,执行对应的处理函数
app.get('/',function(req,res){
    res.send('hello world');
})


post:


//当你以post方法请求/的时候,执行对应的处理函数
app.post('/',function(req,res){
    res.send('hello world');
})


Express静态服务API


// app.use不仅仅是用来处理静态资源的,还可以做很多工作(body-parser的配置)
app.use(express.static('public'));
app.use(express.static('files'));
app.use('/stataic',express.static('public'));


上面这段代码使用了 express 框架中的 app.use 方法,用于处理静态资源文件。

express.static 方法是 express 框架中用于处理静态资源文件的中间件,它会根据传入的参数(即静态资源文件所在目录)生成一个可以直接访问静态资源文件的路径,供后续的请求使用。

例如:app.use(express.static('public')) 就是告诉 express 框架,当客户端请求静态资源文件时,从 public 目录中查找对应的文件,并返回给客户端。

这段代码中的三个 app.use 分别指定了不同的静态资源目录,例如:

  • 第一个 app.use 中指定的是 public 目录,这样就可以直接通过 http://localhost:3000 访问到该目录下的文件。
  • 第二个 app.use 中指定的是 files 目录,这样就可以直接通过 http://localhost:3000/files 访问到该目录下的文件。
  • 第三个 app.use 中指定的是路由为 /static,这样就可以直接通过 http://localhost:3000/static 访问到该目录下的文件。

需要注意的是,express.static 中间件的处理是有顺序的,如果多个中间件都能匹配到同一个静态资源文件,那么只有第一个能够匹配成功的中间件会被使用,后续的中间件会被忽略。


// 引入express
var express = require('express');
// 创建app
var app = express();
// 开放静态资源
// 1.当以/public/开头的时候,去./public/目录中找对应资源
// 访问:http://127.0.0.1:3000/public/login.html
app.use('/public/',express.static('./public/')); 
// 2.当省略第一个参数的时候,可以通过省略/public的方式来访问
// 访问:http://127.0.0.1:3000/login.html
// app.use(express.static('./public/'));   
// 3.访问:http://127.0.0.1:3000/a/login.html
// a相当于public的别名
// app.use('/a/',express.static('./public/')); 
//  
app.get('/',function(req,res){
    res.end('hello world');
});
app.listen(3000,function(){
    console.log('express app is runing...');
});


上面这段代码这段代码使用了Express框架来创建了一个Node.js服务器,并且设置了一个静态资源目录。具体解释如下:

  1. 引入Express框架:


var express = require('express');


  1. 创建一个Express应用程序:


var app = express();


  1. 设置静态资源目录:


// 1.当以/public/开头的时候,去./public/目录中找对应资源
app.use('/public/',express.static('./public/'));


这段代码表示当访问以/public/开头的资源时,Express会去./public/目录中寻找相应的资源文件并返回给客户端。例如,当访问http://127.0.0.1:3000/public/login.html时,会返回./public/login.html文件内容。

  1. 设置路由:


app.get('/',function(req,res){
    res.end('hello world');
});


这段代码表示当访问根目录/时,服务器会返回hello world字符串。

  1. 启动服务器:


app.listen(3000,function(){
    console.log('express app is runing...');
});


这段代码表示将服务器监听在3000端口,当有客户端请求到达时,服务器会启动回调函数,并在控制台输出express app is runing...

在Express中配置使用art-templete模板引擎
  • 还有ejs,jade(pug),handlebars,nunjucks

安装:


npm install --save art-template
npm install --save express-art-template
//两个一起安装
npm i --save art-template express-art-template


配置:


app.engine('html', require('express-art-template'));


使用:


app.get('/',function(req,res){
    // express默认会去views目录找index.html
    res.render('index.html',{
           title:'hello world'     
    });
})


如果希望修改默认的views视图渲染存储目录,可以:


// 第一个参数views千万不要写错
app.set('views',目录路径);


在Express中获取表单请求数据
获取get请求数据:

Express内置了一个api,可以直接通过req.query来获取数据


// 通过requery方法获取用户输入的数据
// req.query只能拿到get请求的数据
 var comment = req.query;


获取post请求数据:

在Express中没有内置获取表单post请求体的api,这里我们需要使用一个第三方包body-parser来获取数据。

安装:


npm install --save body-parser;


配置:

// 配置解析表单 POST 请求体插件(注意:一定要在 app.use(router) 之前 )


var express = require('express')
// 引包
var bodyParser = require('body-parser')
var app = express()
// 配置body-parser
// 只要加入这个配置,则在req请求对象上会多出来一个属性:body
// 也就是说可以直接通过req.body来获取表单post请求数据
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())


使用:


app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  // 可以通过req.body来获取表单请求数据
  res.end(JSON.stringify(req.body, null, 2))
})


在Express中配置使用express-session插件操作


安装:


npm install express-session


配置:


//该插件会为req请求对象添加一个成员:req.session默认是一个对象
//这是最简单的配置方式
//Session是基于Cookie实现的
app.use(session({
  //配置加密字符串,他会在原有的基础上和字符串拼接起来去加密
  //目的是为了增加安全性,防止客户端恶意伪造
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,//无论是否适用Session,都默认直接分配一把钥匙
  cookie: { secure: true }
}))


使用:


// 读
//添加Session数据
//session就是一个对象
req.session.foo = 'bar';
//写
//获取session数据
req.session.foo
//删
req.session.foo = null;
delete req.session.foo


提示:

默认Session数据时内存储数据,服务器一旦重启,真正的生产环境会把Session进行持久化存储。

目录
相关文章
|
2月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
3月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
4月前
|
JavaScript 前端开发 中间件
构建高效后端服务:Node.js与Express框架的完美搭档
【8月更文挑战第28天】在追求高性能、可扩展和易维护的后端开发领域,Node.js和Express框架的组合提供了一种轻量级且灵活的解决方案。本文将深入探讨如何利用这一组合打造高效的后端服务,并通过实际代码示例展示其实现过程。
|
4月前
|
JavaScript 中间件 API
深入浅出Node.js后端框架——Express
【8月更文挑战第27天】在这篇文章中,我们将一起探索Node.js的热门框架Express。Express以其简洁、高效的特点,成为了许多Node.js开发者的首选框架。本文将通过实例引导你了解Express的核心概念和使用方法,让你快速上手构建自己的Web应用。
|
4月前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
1月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
2月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
64 1
|
1月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
2月前
|
JSON JavaScript 前端开发
Node.js Express 框架
10月更文挑战第7天
35 2
|
1月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
36 0