【Node.js】一文带你开发博客项目之接口(处理请求、搭建开发环境、开发路由)

简介: 【Node.js】一文带你开发博客项目之接口(处理请求、搭建开发环境、开发路由)

一、http 请求概述

  • DNS 解析,建立 TCP 连接,发送 http 请求
  • server 接收 http 请求,处理,并返回
  • 客户端接收到返回数据,处理数据(如渲染页面,执行 JS)

二、处理请求

1、处理 get 请求

  • get 请求,即客户端要向 server 端获取数据,如查询博客列表
  • 通过 querystring 来传递数据,如 a.html?a=100&b=200
  • 浏览器直接访问,就发送 get 请求

示例:GET 请求

// 获取 node.js 提供的原生 http 模块
const http = require('http')
const querystring = require('querystring')
// 创建服务
const server = http.createServer((req, res) => {
    console.log('method: ', req.method) // GET
    const url = req.url // 获取请求的完整 url
    console.log('url: ', url)
    req.query = querystring.parse(url.split('?')[1]) // 解析 querystring
    console.log('query: ', req.query)
    res.end(JSON.stringify(req.query)) // 将 querystring 返回
})
// 监听端口
server.listen(8000)
console.log('OK')

45ed290ba3a340ef886cf064b3215261.png

36e4e00d94064f7c852ce06b8ed7198a.png

2、处理 post 请求

  • post 请求,即客户端要像服务端传递数据,如新建博客
  • 通过 post data 传递数据
  • 浏览器无法直接模拟,需要手写 js,或者使用 postman

示例:POST 请求

const http = require('http')
// 创建服务
const server = http.createServer((req, res) => {
  // POST 请求
    if (req.method === 'POST') {
        // req 数据格式
        console.log('req content-type', req.headers['content-type'])
        // 接收数据
        let postData = ''
        // 每次来数据都会触发 data 事件
        req.on('data', chunk => {
            postData += chunk.toString()
        })
        req.on('end', () => {
            console.log('postData: ', postData)
            res.end('hello world')
        })
    }
})
// 监听端口
server.listen(8000)
console.log('OK')

测试:使用 postman 或者 ApiPost

87c9e2abb47a415684199a3be3504a51.png

03f9136008ce404ba5a0a94f16f33831.png

三、搭建开发环境

  • 从 0 开始搭建,不使用任何框架
  • 使用 nodemon 监测文件变化,自动重启 node
  • 使用 cross-env 设置环境变量,兼容 windows mac 和 linux

1、搭建环境

文件格式如下:

56ce761d67ca4121845a064b0a14cabd.png

更改 main 的值:

e4005dee19c4412ea1c43d2ff7bfd85f.png

app.js 文件

const serverHandle = (req, res) => {
    // 设置返回格式 JSON
    res.setHeader('Content-type', 'application/json')
    // 返回的数据
    const resData = {
        name: '杂货铺',
        site: 'CSDN'
    }
    // 服务器端要返回给客户端的数据
    res.end(
        JSON.stringify(resData)
    )
}
// 模块化 把 serverHandle 暴露出去
module.exports = serverHandle

www.js 文件

const http = require('http')
// 端口
const PORT = 8000
// 引入 app.js
const serverHandle = require('../app')
// 创建服务
const server = http.createServer(serverHandle)
// 监听端口
server.listen(PORT)

在当前文件夹路径下终端键入 node bin/www.js 启动服务,打开 8000 端口

4b56398a11914c78a1f5753169628baf.png

2、安装 nodemon

nodemon 作用:可以监控文件变化,自动重启,无需手动

安装 nodemon,终端键入如下命令:

npm install nodemon cross-env --save-dev 

在 package.json 中 添加 如下内容(测试环境,兼容多种操作系统):

00d2a4b797644eda947e6e69e59d30fe.png

四、开发路由

1、初始化路由

  • 初始化路由:根据技术方案的设计,做出路由
  • 返回假数据:将路由和数据处理分离,以符合设计规则
  • 2347335f72f1480e887ca09d228307c0.png
  • 示例:开发接口,并测试使用

文件格式如下:

09fe90b8bf244cdfae8b6ab11188bbc4.png

www.js 文件

  • 创建服务,监听端口
  • 最终 nodemon ./bin/www.js 运行就是在此文件位置
const http = require('http')
// 端口
const PORT = 8000
// 引入 app.js
const serverHandle = require('../app')
// 创建服务
const server = http.createServer(serverHandle)
// 监听端口
server.listen(PORT)

app.js 文件

  • 整合的文件
  • 处理 blog 和 user 的相关接口
const handleBlogRouter = require('./src/router/blog')
const handleUserRouter = require('./src/router/user')
const serverHandle = (req, res) => {
    // 设置返回格式 JSON
    res.setHeader('Content-type', 'application/json')
    // 获取 path
    const url = req.url
    req.path = url.split('?')[1] // 获取 ? 的后半部分
    // 处理 blog 路由
    const blogData = handleBlogRouter(req, res)
    if (blogData) {
        res.end(
            JSON.stringify(blogData)
        )
        return
    }
    // 处理 user 路由
    const userData = handleUserRouter(req, res)
    if (userData) {
        res.end(
            JSON.stringify(userData)
        )
        return
    }
    // 未命中路由,返回 404
    res.writeHead(404, {"Content-type": "text/plain"})
    res.write("404 Not Found\n")
    res.end()
}
// 模块化 把 serverHandle 暴露出去
module.exports = serverHandle

blog.js 文件

  • 博客相关接口
  • 最后暴露出去
const handleBlogRouter = (req, res) => {
    const method = req.method // GET POST
    // 获取博客列表
    if (method === 'GET' && req.path === '/api/blog/list') {
        return {
            msg: '这是获取博客列表的接口'
        }
    }
    // 获取博客详情
    if (method === 'GET' && req.path === '/api/blog/detail') {
        return {
            msg: '这是获取博客详情的接口'
        }
    }
    // 新建一篇博客
    if (method === 'POST' && req.path === '/api/blog/new') {
        return {
            msg: '这是新建博客的接口'
        }
    }
    // 更新一篇博客
    if (method === 'POST' && req.path === '/api/blog/update') {
        return {
            msg: '这是更新博客的接口'
        }
    }
    // 删除一篇博客
    if (method === 'POST' && req.path === '/api/blog/delete') {
        return {
            msg: '这是删除博客的接口'
        }
    }
}
module.exports = handleBlogRouter

user.js 文件

  • 登录相关接口
  • 最后暴露出去
const handleUserRouter = (req, res) => {
    const method = req.method
    // 登录
    if (method === 'POST' && req.path === '/api/user/login') {
        return {
            msg: '这是登录接口'
        }
    }
}
module.exports = handleUserRouter

测试如下:

获取博客列表:

bb7027f6135a42ffbca4196e0974879c.png

获取博客详情:

143121b12d814771bfc9f9253d619a37.png

资源未找到 404:

0ad251c31e3843df8ec6fa95384c2815.png

2、使用 Promise 读取文件

示例:使用 Promise 读取三个 json 文件

a.json 文件

{
    "next": "b.json",
    "msg": "this is a"
}

b.json 文件

{
    "next": "c.json",
    "msg": "this is b"
}

c.json 文件

{
    "next": null,
    "msg": "this is c"
}

index.js 文件

  • 封装获取文件内容的函数
  • 依次读取文件内容
const fs = require('fs')
const path = require('path')
// 用 promise 获取文件内容
function getFileContent(fileName) {
    const promise = new Promise((resolve, reject) => {
        // 获取文件全名, __dirname 表示当前文件所在的目录
        const fullFileName = path.resolve(__dirname, 'files', fileName)
        // 读取文件
        fs.readFile(fullFileName, (err, data) => {
          // 失败
            if (err) {
                reject(err)
                return
            }
            // 成功
            resolve(
                JSON.parse(data.toString())
            )
        })
    })
    // 返回 promise 实例
    return promise
}
// then 的链式调用
getFileContent('a.json').then(aData => {
    console.log('a data', aData)
    return getFileContent(aData.next)
}).then(bData => {
    console.log('b data', bData)
    return getFileContent(bData.next)
}).then(cData => {
    console.log('c data', cData)
})

终端键入 nodemon index.js 测试结果如下:

7ea5ed2ac6844cdab17a13a39e237c03.png

五、写在最后

至此,我们学会了请求的处理,搭建开发环境以及路由的开发。继续跟进学习吧!

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

45fc82a82c6542bdb2ff4986377d8db3.png


相关文章
|
12月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
618 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
10月前
|
人工智能 监控 JavaScript
HarmonyOS5云服务技术分享--ArkTS开发Node环境
本文详细讲解了在HarmonyOS(ArkTS API 9及以上)中使用云函数的开发技巧,结合Node.js和HTTP触发器,从零开始手把手教学。内容涵盖核心能力、开发流程(配置到部署)、高阶优化及常见问题解决,并提供实际应用场景示例。助你快速掌握Serverless开发,提升效率,探索跨端协作与AI集成等未来方向。
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
473 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
JavaScript 前端开发 数据可视化
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
774 2
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
608 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
543 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
643 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
11月前
|
JavaScript 安全 前端开发
关于Node.js,一定要学这个10+万Star项目 !!
一篇关于Node.js的宝藏项目——Node.js Best Practices。该项目在GitHub上已有102k Star,汇集了100+条最佳实践,涵盖架构、安全、性能等多方面。每条实践不仅有简明说明和详细解释,还附带代码示例及资源链接。文中通过三个实战案例(利用CPU多核、避免阻塞事件循环、使用中间件处理错误)展示了其实际应用价值,并推荐了几条对前端转Node.js开发者特别有用的最佳实践。强烈建议每位Node.js开发者学习此项目,理解“怎么做”与“为什么要这么做”,以提升开发能力。
377 3
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
345 10
|
弹性计算 JavaScript Linux
如何快速部署Node.js项目
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,用来方便地搭建快速的易于扩展的网络应用。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效,非常适合运行在分布式设备的数据密集型的实时应用。
19640 1