【Node.js实战】一文带你开发博客项目(使用假数据处理)

简介: 【Node.js实战】一文带你开发博客项目(使用假数据处理)

一、前言

2022-10-24,首先祝大家节日快乐,工作和学习中再无 bug~~


本文 开发博客项目的接口,是使用的 假数据 处理的。


后续 的文章还会使用 各种框架和数据库进行重构,敬请期待~


该项目的 开发模式,是 常规通用 的方式,所以学习这种 层次渐进的开发模式 也是很有意义的!


二、博客项目实现

1、文件目录

项目开发的层次感:


www.js(第一层)——> app.js(第二层)——> ./router(第三层)——> ./controller(第四层)


第一层:项目执行的地方

第二层:一些配置,请求响应头,格式化,promise实例等

第三层:路由接口,只关心路由,不管深层次的逻辑

第四层:只关心数据的地方

bb2bf64b2e3e49b8939308bfcecc568b.png

2、环境配置

初始化 package.json(配置相关文件)

npm init -y

安装依赖(安装相关依赖文件)

npm install

安装 nodemon(自动重启服务)

npm install nodemon cross-env --save-dev 

e365bcbe333944118359a0b4ead4fad9.png

3、开发接口

博客相关接口 && 用户相关接口

2347335f72f1480e887ca09d228307c0.png

4、开发过程

./bin/www.js 文件

  • 项目执行的文件
  • 引入 http 模块
  • 创建服务,传入文件(易开发和维护)
  • 监听端口
// 引入 http 内置模块
const http = require('http')
// 端口
const PORT = 8000 
// 引入 app.js
const serverHandle = require('../app')
// 创建服务
const server = http.createServer(serverHandle)
// 监听端口
server.listen(PORT)

…/src/app.js 文件

  • 参数处理
  • 响应头
  • 格式化
  • 处理博客和用户的相关路由
// 便于处理 url 
const querystring = require('node:querystring')
// 博客相关路由
const handleBlogRouter = require('./src/router/blog')
// 用户登录相关路由
const handleUserRouter = require('./src/router/user')
// 用于处理 POST 请求的数据
const getPostData = (req) => {
    // 创建 promise 实例
    const promise = new Promise((resolve, reject) => {
        // 不是 post 请求 直接返回
        if (req.method !== 'POST') {
            resolve({})
            return
        }
        // 请求头不是 application/json 格式 直接返回
        if (req.headers['content-type'] !== 'application/json') {
            resolve({})
            return
        }
        // 初始化 postData
        let postData = ''
        // 每次发送的数据 记录在 postData 中
        req.on('data', chunk => {
            postData += chunk.toString()
        })
        // 数据发送完成 转义 JSON 为对象
        req.on('end', () => {
            if (!postData) {
                resolve({})
                return
            }
            resolve(
                JSON.parse(postData)
            )
        })
    })
    // 返回实例对象
    return promise
}
// 处理服务
const serverHandle = (req, res) => {
    // 设置响应头的格式 JSON
    res.setHeader('Content-type', 'application/json')
    // 获取请求地址 path
    const url = req.url
    // 截取前半部分的地址 ? 前面的部分
    req.path = url.split('?')[0] // 获取 ? 的前半部分
    // 截取后半部分的地址 ? 后面的部分 也是要查询的地址
    req.query = querystring.parse(url.split('?')[1])
    // 处理 post data
    getPostData(req).then(postData => {
        // 解析 POST 请求中的数据
        req.body = postData
        // 处理 blog 路由
        const blogData = handleBlogRouter(req, res)
        // 请求成功 格式化 blogData 并结束
        if (blogData) {
            res.end(
                JSON.stringify(blogData)
            )
            return
        }
        // 处理 user 路由
        const userData = handleUserRouter(req, res)
        // 请求成功 格式化 userData 并结束
        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

…/src/model/resModel.js 文件

  • 基础模型(对象类型和字符串类型)
  • 成功的模型(继承)
  • 失败的模型(继承)
// 基础模型
class BaseModel {
    // data 是对象类型 message 是字符串类型
    constructor(data, message) {
        if (typeof data === 'string') {
            this.message = data
            data = null
            message = null
        }
        if (data) {
            this.data = data
        }
        if (message) {
            this.message = message
        }
    }
}
// 成功模型 errno 赋值 0
class SuccessModel extends BaseModel {
    constructor(data, message) {
        // 继承父类
        super(data, message)
        // 成功的值 0
        this.errno = 0
    }
}
// 失败模型 errno 赋值 -1
class ErrorModel extends BaseModel {
    constructor(data, message) {
        // 继承父类
        super(data, message)
        // 失败的值 -1
        this.errno = -1
    }
}
// 导出共享
module.exports = {
    SuccessModel,
    ErrorModel
}

…/src/router/blog.js 文件

  • 博客相关路由接口
  • 调用相关函数
  • 返回实例
// 导入博客和用户控制器相关内容
const { getList, getDetail, newBlog, updateBlog, delBlog } = require('../controller/blog') 
// 导入成功和失败的模型
const { SuccessModel, ErrorModel } = require('../model/resModel')
// blog 路由
const handleBlogRouter = (req, res) => {
    const method = req.method // GET/POST
    const id = req.query.id // 获取 id
    // 获取博客列表 GET 请求·
    if (method === 'GET' && req.path === '/api/blog/list') {
        // 博客的作者 req.query 用在 GET 请求中
        const author = req.query.author || ''
        // 博客的关键字
        const keyword = req.query.keyword || ''
        // 执行函数 获取博客列表数据
        const listData = getList(author, keyword)
        // 创建并返回成功模型的实例对象
        return new SuccessModel(listData)
    }
    // 获取博客详情 GET 请求
    if (method === 'GET' && req.path === '/api/blog/detail') {
        // 获取博客详情数据
        const data = getDetail(id)
        // 创建并返回成功模型的实例对象
        return new SuccessModel(data)
    }
    // 新建一篇博客 POST 请求
    if (method === 'POST' && req.path === '/api/blog/new') {
        // req.body 用于获取请求中的数据(用在 POST 请求中)
        const data = newBlog(req.body)
        // 创建并返回成功模型的实例对象
        return new SuccessModel(data)
    }
    // 更新一篇博客
    if (method === 'POST' && req.path === '/api/blog/update') {
        // 传递两个参数 id 和 req.body
        const result = updateBlog(id, req.body)
        if (result) {
            return new SuccessModel()
        } else {
            return new ErrorModel('更新博客失败')
        }
    }
    // 删除一篇博客
    if (method === 'POST' && req.path === '/api/blog/delete') {
        const result = delBlog(id)
        if (result) {
            return new SuccessModel()
        } else {
            return new ErrorModel('删除博客失败')
        }
    }
}
// 导出
module.exports = handleBlogRouter

…/src/router/user.js 文件

  • 博客相关路由接口
  • 调用相关函数
  • 返回实例
// 导入用户登录内容
const { loginCheck } = require('../controller/user')
// 导入成功和失败的模板
const { SuccessModel, ErrorModel } = require('../model/resModel')
// user 路由
const handleUserRouter = (req, res) => {
    const method = req.method
    // 登录
    if (method === 'POST' && req.path === '/api/user/login') {
        const { username, password } = req.body
        // 传入两个参数 用户名 密码
        const result = loginCheck(username, password)
        if (result) {
            return new SuccessModel()
        }
        return new ErrorModel('登录失败')
    }
}
// 导出共享
module.exports = handleUserRouter

…/src/controller/blog.js 文件

  • 博客的相关数据处理
  • 返回的是假数据(后续会使用数据库)
// 获取博客列表(通过作者和关键字)
const getList = (author, keyword) => {
    // 先返回假数据(格式是正确的)
    return [{
            id: 1,
            title: '标题1',
            content: '内容1',
            createTime: 1665832332896,
            author: 'zahuopu'
        },
        {
            id: 1,
            title: '标题2',
            content: '内容2',
            createTime: 1665832418727,
            author: 'xiaoming'
        },
    ]
}
// 获取博客详情(通过 id)
const getDetail = (id) => {
    // 先返回假数据
    return {
        id: 1,
        title: '标题1',
        content: '内容1',
        createTime: 1665832332896,
        author: 'zahuopu'
    }
}
// 新建博客 newBlog 若没有,就给它一个空对象
const newBlog = (blogData = {}) => {
    // blogData 是一个博客对象 包含 title content 属性
    console.log('newBlog', blogData)
    return {
        id: 3 // 表示新建博客,插入到数据表里的 id
    }
}
// 更新博客(通过 id 更新)
const updateBlog = (id, blogData = {}) => {
    // id 就是要更新博客的 id
    // blogData 是一个博客对象 包含 title content 属性
    console.log('update blog', id, blogData)
    return true
}
// 删除博客(通过 id 删除)
const delBlog = (id) => {
    return true
}
// 导出共享
module.exports = {
    getList,
    getDetail,
    newBlog,
    updateBlog,
    delBlog
}

…/src/controller/user.js 文件

  • 用户登录的相关数据处理
  • 返回的是假数据(后续会使用数据库)
// 登录(通过用户名和密码)
const loginCheck = (username, password) => {
    // 先使用假数据
    if (username === 'zahuopu' && password === '123') {
        return true
    }
    return false
}
// 导出共享
module.exports = {
    loginCheck
}

三、各个接口的测试

现在我们 已经完成 博客项目的开发了,接下来进入到 测试环节~~

通过关键字和作者 查询博客(GET 请求)

4f8512b85e1446f2857611a5eb70c045.png通过 id 获取 博客详情(GET 请求)

05dc86b3a37d47a1ab18ee6e5302fc7a.png

通过 ApiPost/Postman 工具测试 更新博客(POST 请求)

3f59289991e6419790202a58083992bb.png

52f05b5e5cfd400f84e7991781834469.png

通过 ApiPost/Postman 工具测试 删除博客(POST 请求)


84770e4406804a02b84a49bada3c6227.png

通过 ApiPost/Postman 工具测试 登录请求(POST 请求)

a7fded1c62734dc5b97243d50ab35b6e.png

42a88a88eee94a309143f2f40881a345.png

四、写在最后(附源码)

至此,开发博客的项目(假数据版,并没有使用数据库)就完成了。


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


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

45fc82a82c6542bdb2ff4986377d8db3.png

相关文章
|
10天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
10天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
10天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。
|
10天前
|
监控 JavaScript 前端开发
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript项目中的渐进式采用
【4月更文挑战第30天】TypeScript是JavaScript的超集,引入静态类型、接口等特性,提升代码安全性和可读性。在JavaScript项目中采用TypeScript可享受类型安全、社区支持及优秀工具集成等优势。渐进式采用策略包括评估项目现状、逐步引入新旧模块、编写类型定义文件、配置编译选项和编写测试用例,以提高项目质量和效率。
|
10天前
|
JavaScript 前端开发 IDE
【TypeScript技术专栏】TypeScript与Node.js后端开发
【4月更文挑战第30天】TypeScript在Node.js后端开发中日益重要,作为JavaScript超集,它提供静态类型检查和面向对象编程,增强代码可靠性和维护性。集成TypeScript能带来类型安全、更好的IDE体验、易于维护的代码以及增强工具支持。通过安装TypeScript编译器、编写TypeScript文件、配置TSconfig,开发者可以在Node.js项目中利用其高级特性,提高代码质量和开发效率。实践案例显示,TypeScript能确保路由处理器的类型正确,降低错误率。随着社区发展,TypeScript成为提升Node.js开发体验的推荐选择。
|
10天前
|
JavaScript 前端开发 开发工具
【TypeScript 技术专栏】使用 TypeScript 重构 JavaScript 项目
【4月更文挑战第30天】TypeScript 在前端开发中日益流行,因其静态类型检查、增强代码可读性和更好的工具支持。本文讨论如何用 TypeScript 重构 JavaScript 项目,包括评估项目、安装 TypeScript 工具、逐步添加类型注解、处理兼容性问题以及解决重构中遇到的问题。重构后,代码质量、团队协作和可维护性均得到提升。通过实例分析,文章为 TypeScript 重构提供指导,助力构建更可靠的前端应用。
|
10天前
|
JavaScript 前端开发 开发工具
【JavaScript 技术专栏】Node.js 基础与实战
【4月更文挑战第30天】本文介绍了Node.js的基础及应用,包括事件驱动的非阻塞I/O、单线程模型和模块系统。内容涵盖Node.js的安装配置、核心模块(如http、fs、path)及实战应用,如Web服务器、文件操作和实时通信。文章还讨论了Node.js的优劣势、与其他技术的结合,并通过案例分析展示项目实施流程。总结来说,Node.js是高效后端开发工具,适合构建高并发应用,其广阔的应用前景值得开发者探索。
|
10天前
|
缓存 JavaScript 前端开发
【JavaScript技术专栏】JavaScript性能优化实战
【4月更文挑战第30天】本文探讨了JavaScript性能优化技巧,包括理解性能瓶颈(代码执行、DOM操作、网络请求和逻辑复杂度)和针对性优化。建议避免全局变量、延迟加载、减少循环嵌套及使用事件委托以优化代码执行;减少DOM操作次数、利用虚拟DOM和避免回流重绘优化DOM操作;通过压缩合并资源、使用CDN和按需加载加速网络请求;选择高效算法和合理数据结构降低计算开销。综合运用这些方法能显著提升前端应用性能。
|
10天前
|
JavaScript 前端开发 API
如何使用JavaScript进行桌面应用开发?
【4月更文挑战第30天】如何使用JavaScript进行桌面应用开发?
23 0
|
12天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)