技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-8.server端使用通用CRUD接口

简介: CRUD是指在做计算处理时的增加(Create)、检索(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。CRUD主要被用在描述软件系统中数据库或者持久层的基本操作功能。
1.什么是CRUD
CRUD是指在做计算处理时的增加(Create)、检索(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。CRUD主要被用在描述软件系统中数据库或者持久层的基本操作功能。

目的是我们将常用的增、删、改、查操作封装在一套接口组件中,在多个功能中重复调用这一套接口组件,从而使代码更精简,同时提升开发效率。

2.在本项目中的接口优化实现方法说明

我们根据已经写好的单个功能接口进行改动讲解。

首先,我们再次深度理解server端接口页面:
在这里插入图片描述
(1)项目中,我们以node.js作为后端进行服务器的开发。就像PHP后端的ThinkPHP框架一样,在node中我们使用express框架,所以接口页面我们要首先引入express。
(2)该路由文件指向admin端,需要使用express框架的路由进行接口的调用。
(3)引用定义好的数据库模型,一切数据通过模型定义的字段和类型进行判断与上传。
(4)编写接口。

第二步,我们要找出在不同功能模块中调用接口时需要变化的地方,此时我们用分类功能文章功能的两套接口做比较。
在这里插入图片描述
在图中我们可以看出,接口方法基本相同,不同的地方就是接口路由地址数据库表的模型名。所以要想使用通用CRUD接口,只需要将接口路由地址和模型名做成从前端接收数据的变量即可。

第三步,更改接口路由地址。

我们需要修改代码参照RESTful风格,rest是一种接口设计风格,大家感兴趣的百度查一查。下面我们直接代码讲解。

// 定义“admin/api”路由方法,挂载存入到router
// RESTful风格接口,在api后加一个rest前缀,与程序员编写代码原则类似,避免以后与其他接口冲突。
// 动态resours资源,用来存放接口路由地址(原categories、articles)。这里写成这样之后,上边的接口地址名就以“/”表示。
app.use('/admin/api/rest/:resourse', router)

将动态resourse添加到路由方法中之后,这个“:resourse”就代表了之前地址中的categories。所以在上边的接口函数中将categories去掉,用“/”替换。
修改前:

// 上传数据(增)
    router.post('/categories', async(req, res) => {
        // 在里边放该接口的具体操作,所有操作同级放置

        // 数据来源是接受到的req中的body
        // 为避免阻塞,要用异步操作,故加入await
        const model = await Category.create(req.body)
        // 接收返回值
        res.send(model)
    })

修改后:

// 上传数据(增)
    router.post('/', async(req, res) => {
        // 在里边放该接口的具体操作,所有操作同级放置

        // 数据来源是接受到的req中的body
        // 为避免阻塞,要用异步操作,故加入await
        const model = await Category.create(req.body)
        // 接收返回值
        res.send(model)
    })

除地址以外都无需变化。

第四步,更改模型的引入。

接口地址修改完成后,同样需要修改模型的引入方法。之前的全局引入方式就不能用了。
在这里插入图片描述
要在接口内部引入,并且使用:

// 查询数据(查)
    router.get('/', async(req, res) => {
        const Model = require('../../models/' + req.params.resourse)
        const items = await Model.find().populate('parent').limit(10)
        res.send(items)
    })

第五步,接收接口地址并将接口名传值给模型,用来当作模型名。

先把admin端axios接口地址改一下,改成rest/categories,方便之后分类列表刷新的测试。
在这里插入图片描述
接口传值在req.params.resourse找到,并将该值放置在模型处,用来当作模型名。
此时找到分类列表页面测试,network中找到错误,显示未定义模型名:
在这里插入图片描述
因为我们在文件全局使用resourse接收,但在接口内部使用传来的值,所以必须在router中合并接收的参数:在这里插入图片描述
修改router后,找到了模型名,但因为接口地址为分类的复数形式,所以模型名接收到的也是复数,所以此时模型名因格式不对同样无法调用模型:
在这里插入图片描述
我们此时要把接收到的模型名转化成单数,这里用到一个类包“inflection”,专门用来操作单复数的转换。

cd admin
npm i inflection

在这里插入图片描述
第六步,使用inflection类包将模型名转化为单数形式。

// 查询数据(查)
    router.get('/', async(req, res) => {
        // 将接收的复数地址名转化为单数模型名
        const modelName = require('inflection').classify(req.params.resourse)
        const Model = require('../../model/' + modelName)
        const items = await Model.find().populate('parent').limit(10)
        res.send(items)
    })

测试,没问题:
在这里插入图片描述
到这里,一个通用CRUD接口就实现了。但是所有接口在模型名进行转化时的操作都相同,所以我们可以在路由方法处加一个中间件的处理函数,不用每次都对model名的转换写一遍:

app.use('/admin/api/rest/:resourse', async (req, res, next) => {
        // 从resourse获取路由地址名,并使用inflection的classify转换为单数形式
        const modelName = require('inflection').classify(req.params.resourse)
        // 为请求数据挂载一个model,方便接口使用此模型名变量
        req.Model = require('../../models/' + modelName)
        next()
    }, router)

上边的模型名就使用中间件函数中挂载到req的model名,把接口中模型的地方全部改成req.model就可以了。
(图片
admin端所有接口地址前加一个“rest/”
(图片
测试所有功能,没问题,包括分类或文章的增删改查、层级关联。
最后上一遍接口文件代码:

module.exports = app => {
    const express = require('express')

    const router = express.Router({
        // 合并参数
        mergeParams: true
    })

    // 新建数据(增)
    router.post('/', async(req, res) => {
        // const Model = require('../../model/' + req.params.resourse)
        const model = await req.Model.create(req.body)
        res.send(model)
    })
    // 查询数据(查)
    router.get('/', async(req, res) => {
        const items = await req.Model.find().populate('parent').limit(10)
        res.send(items)
    })
    // 根据id查询数据(查)
    router.get('/:id', async(req, res) => {
        const model = await req.Model.findById(req.params.id)
        res.send(model)
    })
    // 编辑数据(改)
    router.put('/:id', async(req, res) => {
        const model = await req.Model.findByIdAndUpdate(req.params.id, req.body)
        res.send(model)
    })
    // 删除数据(删)
    router.delete('/:id', async(req, res) => {
        await req.Model.findByIdAndDelete(req.params.id, req.body)
        res.send({
            success: true
        })
    })

    // 定义“admin/api”路由方法,挂载存入到router
    // RESTful风格接口,在api后加一个rest前缀,与程序员编写代码原则类似
    // 动态resours资源,用来存放接口路由地址(原categories、articles)。这里写成这样之后,上边的接口地址名就以“/”表示
    app.use('/admin/api/rest/:resourse', async (req, res, next) => {
        // 从resourse获取路由地址名,并使用inflection的classify转换为单数形式
        const modelName = require('inflection').classify(req.params.resourse)
        // 为请求数据挂载一个model,方便接口使用此模型名变量
        req.Model = require('../../models/' + modelName)
        next()
    }, router)
}

注意,如有错误的地方,要检查admin端组件中axios发送接口请求时的接口地址是否正确,并检查NetWork中的报错信息。实在不行文章评论问我。

相关文章
|
30天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
56 10
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
79 13
|
3月前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
2月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
|
3月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
324 14
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
85 0
|
4月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
104 6
|
4月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
105 1
|
4月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
228 1

热门文章

最新文章