【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

相关文章
|
2月前
|
JavaScript 前端开发 开发者
Nest.js控制器深度解析:路由与请求处理的高级特性
以上就是对 NestJS 控制层高级特性深度解析:从基本概念到异步支持再到更复杂场景下拦截其与管道等功能性组件运用都有所涉及,希望能够帮助开发者更好地理解和运用 NestJS 进行高效开发工作。
321 15
|
4月前
|
JavaScript Unix Linux
nvm与node.js的安装指南
通过以上步骤,你可以在各种操作系统上成功安装NVM和Node.js,从而在不同的项目中灵活切换Node.js版本。这种灵活性对于管理不同项目的环境依赖而言是非常重要的。
1074 11
|
9月前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
|
8月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
7433 23
|
7月前
|
JavaScript 安全 前端开发
关于Node.js,一定要学这个10+万Star项目 !!
一篇关于Node.js的宝藏项目——Node.js Best Practices。该项目在GitHub上已有102k Star,汇集了100+条最佳实践,涵盖架构、安全、性能等多方面。每条实践不仅有简明说明和详细解释,还附带代码示例及资源链接。文中通过三个实战案例(利用CPU多核、避免阻塞事件循环、使用中间件处理错误)展示了其实际应用价值,并推荐了几条对前端转Node.js开发者特别有用的最佳实践。强烈建议每位Node.js开发者学习此项目,理解“怎么做”与“为什么要这么做”,以提升开发能力。
268 3
|
9月前
|
JavaScript 前端开发 数据可视化
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
544 2
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
|
8月前
|
数据库
【YashanDB知识库】安装共享集群时报错:YAS-05721 invalid input parameter, reason: node name invalid
【YashanDB知识库】安装共享集群时报错:YAS-05721 invalid input parameter, reason: node name invalid
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
284 2

热门文章

最新文章

下一篇
oss云网关配置