技能学习:学习使用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中的报错信息。实在不行文章评论问我。

相关文章
|
11月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
1823 0
|
10月前
|
人工智能 前端开发 JavaScript
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
1037 19
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
784 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
10月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
769 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
1438 9
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
15640 23
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1649 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1065 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1256
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    569
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    433
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    433
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    547
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    724
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1405
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    314
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1167
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    509