【Node.js实战】一文带你开发博客项目之初识Express(安装Express,处理路由,中间件机制)

简介: 【Node.js实战】一文带你开发博客项目之初识Express(安装Express,处理路由,中间件机制)

一、前言

前面我们已经使用原生的 node.js 完成了 myblog 博客项目。


接下来,我们使用 express 框架来重构我们的 myblog 项目…


二、express

1、安装 express

使用脚手架(express-generator)


首先,我们全局安装脚手架

npm install express-generator -g

使用脚手架生成名为 blog-express 的项目

express blog-express

bbadc894d86140ffa10efe8f3f480d96.png

之后我们安装依赖

npm install

再之后,我们就可以启动它了

npm start

我们访问 localhost:3000 端口

6826501d5a194344af001b8c60c3ecce.png

下面我们安装一下 nodemon

npm i nodemon cross-env --save-dev

给 package.json 添加一行(实时监听,不用再次启动)

  "scripts": {
    ...
    "dev": "cross-env NODE_ENV=dev nodemon ./bin/www"
  },

那么我们便可以使用 npm run dev 来启动项目了


2、express 处理路由

express 已经为我们封装好了路由,我们直接拿来简单配置一下就可以

04f583f7b6124a5c8460e4cba9df1db2.png

我们可以参照 index.js 的代码,稍加修改即可

blog.js

我们首先配置一下博客列表和博客详情的路由(GET请求)

var express = require('express');
var router = express.Router();
// 博客列表
router.get('/list', function(req, res, next) {
  res.json({
    errno: 0,
    data: [1, 2, 3]
  })
});
// 博客详情
router.get('/detail', function(req, res, next) {
  res.json({
    errno: 0,
    data: 'OK'
  })
});
module.exports = router;

user.js

我们再来配置一下登录的路由(POST请求)

var express = require('express');
var router = express.Router();
// 登录
router.post('/login', function (req, res, next) {
    const { username, password } = req.body
    res.json({
        errno: 0,
        data: {
            username,
            password
        }
    })
});
module.exports = router;

app.js

在 app.js 文件中添加刚刚配置的路由

const blogRouter = require('./routes/blog')
const userRouter = require('./routes/user')
...
app.use('/api/blog', blogRouter);
app.use('/api/user', userRouter);

接下来,我们来进行一下 GET 和 POST 请求的测试

8b7b41c4bef84f39842971e71f729ca5.png

6d6ed26cebf941a9a12865f1ed39c749.png

c91b73443d1b43e3b4c78283ac597992.png

3、中间件机制

中间件主要是指封装所有Http请求细节处理的方法


express 中间件函数,帮助拆解主程序的业务逻辑,并且每一个的中间件函数处理的结果都会传递给下一个中间件函数


首先,我们来做一个小 demo


我们在根目录创建 express-test 文件,在当前目录下初始化

npm init -y

修改 package.json 文件下的主文件

"main": "app.js",

之后创建 app.js 文件,并安装 express(注意:没有使用到脚手架,因为此处仅做测试介绍中间件)

npm i express

af395533b3e1465388f8f1397a753242.png

app.js

我们编写一些 http 请求,理解一下 next() 的作用(根据请求方式和路径进行匹配执行)

const express = require('express')
// 本次 http 请求的实例
const app = express()
app.use((req, res, next) => {
    console.log('请求开始...', req.method, req.url)
    next()
})
app.use((req, res, next) => {
    // 假设在处理 cookie
    req.cookie = {
        userId: 'abc123'
    }
    next()
})
app.use((req, res, next) => {
    // 假设处理 post data
    // 异步
    setTimeout(() => {
        req.body = {
            a: 100,
            b: 200
        }
        next()
    })
})
app.use('/api', (req, res, next) => {
    console.log('处理 /api 路由')
    next()
})
app.get('/api', (req, res, next) => {
    console.log('get /api 路由')
    next()
})
app.post('/api', (req, res, next) => {
    console.log('post /api 路由');
    next()
})
app.get('/api/get-cookie', (req, res, next) => {
    console.log('get /api/get-cookie');
    res.json({
        errno: 0,
        data: req.cookie
    })
})
app.post('/api/get-post-data', (req, res, next) => {
    console.log('post /api/get-post-data');
    res.json({
        errno: 0,
        data: req.body
    })
})
app.use((req, res, next) => {
    console.log('处理 404');
    res.json({
        errno: -1,
        msg: '404 not found'
    })
})
app.listen(3000, () => {
    console.log('server is running on port 3000');
})

3c283e63328849efbcbd223943e005de.png

b9e30e97a9ea44b58f76c9b8d6429c58.png

f64a72f586ef485b8d6a30e6c72035b0.png

三、写在最后

至此,我们明白了 如何安装Express,如何处理路由以及什么是中间件机制 继续跟进学习吧!


后续会对该项目进行多次重构【多种框架(express,koa)和数据库(mysql,sequelize,mongodb)】


如果你需要该项目的 源码,请通过本篇文章最下面的方式 加入 进来~~


45fc82a82c6542bdb2ff4986377d8db3.png

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

热门文章

最新文章