作为 Node.js 生态中的主流框架,Express 以其轻量高效的特点广受开发者青睐。学习该框架能有效提高编写效率,简化代码结构,便于维护等。下面将简单介绍express框架的使用。
一、Express 框架简介
Express 是基于 Node.js 平台的极简、灵活的 Web 应用开发框架,它为 Node.js 提供了一套强大的功能,用于创建 Web 应用程序和 HTTP 服务器。Express 框架的设计理念是尽可能地保持轻量级,同时又具备高度的可扩展性。它不强制特定的代码结构或开发模式,开发者可以根据项目需求自由选择合适的工具和方法,这使得 Express 在开发过程中拥有极高的灵活性。
二、安装 Express
在开始使用 Express 之前,首先需要确保已经安装了 Node.js。Node.js 自带了包管理工具 npm(Node Package Manager),通过 npm 可以方便地安装 Express 及其相关依赖。
1、初始化项目:在项目目录下,执行npm init -y命令,快速初始化一个package.json文件,该文件用于管理项目的依赖和配置信息。
npm init -y
2、安装 Express:执行以下命令安装 Express:
npm install express
cnpm install express //这个也可以
3、安装完成后,在项目目录下会生成一个node_modules文件夹,里面存放着 Express 及其依赖的包,同时在package.json文件的dependencies字段中会添加express的相关信息。
如下图所示:
三、创建第一个 Express 应用
安装好 Express 后,就可以开始创建一个简单的 Express 应用了。在项目目录下,创建一个名为app.js(也可以使用其他文件名,我现在习惯用这个了)的文件,编写以下代码:
const express = require('express') //加载express模块
let app = express(); //创建服务器,相当于 let server = http.createServer();
app.get('/',function(req,res){ //设置请求,当请求路径为/(?之前的)时发送响应(用send发送,类型会自动设置的)
res.send('hello express!!');
})
app.use('/public/',express.static('./public')); //设置静态资源获取,当请求路径以/public/开头时,就会获取开放的public目录中的所有需要的静态资源,会自动设置发送响应
app.get('/apple',function(req,res){
console.log(req.query); //可以用req.query来获取请求路径?之后的参数对象,注意只能拿到get请求的参数
res.send('apple');
})
app.listen(3000,function(){ //启动服务器
console.log('running~~');
})
在上述代码中:
在命令行中,进入项目目录,执行node app.js命令启动服务器,然后在浏览器中访问http://localhost:3000 或 127.0.0.1:3000,即可看到页面上显示Hello, Express!。
四、路由基础
路由是 Express 应用的核心概念之一,它负责定义应用如何响应客户端发送的不同请求。路由由请求的 HTTP 方法(如GET、POST、PUT、DELETE等)、请求的 URL 路径以及处理请求的回调函数组成。
(一)常见的路由方法
1、app.get():用于处理GET请求,通常用于获取资源。例如:
app.get('/users', (req, res) => {
// 假设这里从数据库获取用户列表
const users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" }
];
res.json(users);
});
上述代码定义了一个处理/users路径的GET请求的路由,当客户端请求该路径时,服务器会返回一个包含用户列表的 JSON 数据。
2、app.post():用于处理POST请求,常用于提交数据,如创建新资源。例如:
app.post('/users', (req, res) => {
// 假设这里接收客户端提交的用户数据并保存到数据库
const newUser = req.body;
// 模拟保存用户数据的操作
console.log('Received new user:', newUser);
res.status(201).send('User created successfully');
});
在这个例子中,当客户端通过POST方法向/users路径发送数据时,服务器会接收数据,并在控制台打印接收到的新用户信息,然后返回一个表示创建成功的响应。
3、app.put():用于处理PUT请求,一般用于更新资源。
4、app.delete():用于处理DELETE请求,用于删除资源。
(二)路由参数
除了固定的路径,Express 还支持在路由中使用参数,以便动态地处理不同的请求。例如:
app.get('/users/:id', (req, res) => {
const userId = req.params.id;
// 假设这里根据userId从数据库获取单个用户
const user = { id: userId, name: "John" };
res.json(user);
});
在上述代码中,/:id是一个路由参数,id是参数的名称。当客户端请求类似/users/1这样的路径时,1会被赋值给req.params.id,服务器可以根据这个参数值进行相应的处理。
(三)post请求体的获取
如果请求时get请求,则可以通过req.query来获取参数所组成的对象,进而处理请求,但post的请求体express没有提供直接获取请求体的方式,下面使用body-parser第三方包来获取post请求体。
1、安装body-parser
npm install body-parser //在控制台输入
2、配置body-parser
app.use(bodyParser.urlencoded({extended:false})) //配置在express里面使用body-parser
app.use(bodyParser.json())
配置好后可以使用req.body来获取post请求的请求头
3、简单样例
const bodyParser = require('body-parser') //这里需要引包
const express = require('express')
let app = express();
//配置
app.engine('html',require('express-art-template')) //配置在express里面使用art-template
app.use(bodyParser.urlencoded({extended:false})) //配置在express里面使用body-parser
app.use(bodyParser.json())
//当以post类型发送/post的请求时使用
app.post('/post',function(req,res){
res.send(req.body) //req的body参数里面记录了post请求的请求体
})
//当以get类型发送/post的请求时使用
app.get('/post',function(req,res){
res.render('demo02.html',{
name:'张*3===张三===三张',
content:'hello world'
})
})
app.listen(3000,function(){
console.log("running…")
})
五、在express里面使用art-template模板引擎
(一)安装和配置
//在express中使用art-template
//安装 npm install –save art-template express-art-template
//配置 app.engine('html',require('express-art-template'))
(二)使用art-template
express-art-template第三方包为nodejs提供了一个render方法,通过response调用,第一个参数为views目录下的视图(如果使用art-template,要把html模板放到views目录下),第二个参数为要传入的数据对象。
示例:
const express = require('express')
let app = express();
//art
app.engine('html',require('express-art-template')) //配置,使在express里面可以使用art-template,第一个参数表示当以该参数值为拓展名时会使用art-template模板引擎
app.get('/',function(req,res){ //express为response提供了一个render方法,当使用模板引擎时可以使用,第一个参数为views目录里面的模板文件,第二个参数为要传递的对象
res.render('demo01.html',{
name:'张三',
age:18
})
})
app.listen(3000,function(){
console.log('running…')
})
代码文件结构:
六、设置静态资源
主要代码如下:
app.use('/public/',express.static('./public'));
意思是当请求路径以/public/时会默认到./public目录里面去寻找需要的资源,找到资源后会自动发送对应的响应,‘/public/’是可以进行更换的,并不是固定值,可以根据实际需求进行更换。
示例:
const express = require('express');
let app = express();
//app.use('/public/',express.static('./public')); //设置静态资源获取,当请求路径以/public/开头时,就会获取开放的public目录中的所有需要的静态资源(./public/….),会自动设置发送响应
app.use('/a/',express.static('./public')) //设置静态资源,当请求路径以/a/开头时,就会获取开放的public目录中的所有需要的静态资源(./public/….)…为/a/后面的路径,会自动设置发送响应
//app.use(express.static('./public')); //设置静态资源,和上面的区别就是发送的请求路径里面不能再带有/public了
app.get('/',function(req,res){
res.send('hello');
})
app.listen(3001,function(){
console.log('running…')
})
七、总结
本周把express进行的大概的学习,同时还学习了如何在nodejs里面使用mongodb数据库,算得上充实,下周开始复习周了,努力把学习搞好,争取一门不挂,(ง •_•)ง
评论前必须登录!
注册