JS封装转换前后端接口数据格式工具函数下划线<=>大写

目录
  • 一、前言
  • 二、思路
  • 三、代码
  • 四、效果
  • 结语

一、前言

这段时间接近年底,公司的业务也不是很繁忙,有些闲暇的时间,就模仿ruoyi写一个后台系统,技术栈前端是react18,后端为koa2;

在一个接口返回数据的过程中,遇到一个问题,就是后端数据保存到数据库中的命名标准是下划线,而前端的这边的命名标准是驼峰命名,所以如果直接将从数据库的数据返回给前端,便非常不优雅,网上想直接找工具包,也没找到合适的,故而自己手写了一个,如果有同样需求的小伙伴们,可以直接拿去用。

二、思路

  • 一般后端返回给前端的数据几乎都是数组或者对象两种格式,所以我们封装的函数只需要考虑这两种情况;
  • 首先,我们这个函数需要满足后端返回给前端的数据(下划线转驼峰),前端传数据给后端(驼峰转下划线)两种情况;
  • 函数接收两个值,第一个data(数组或对象数据源),第二个type(判断要哪种转换模式:hump为下划线转驼峰,'line'为驼峰转下划线);
  • 首先,对传入的data进行判断,如果是对象则转换为数组,如果是数组则直接放行,然后深拷贝对象,防止意想不到的堆污染;
  • 因为数据的层数是不确定的,所以需要使用递归,对对象的value进行判断,如果是对象则递归;
  • 遍历data,对每个对象用forin进行遍历,然后根据type进行相应的处理,下划线还要考虑到如果是最前面的下划线,则直接删除即可;
  • 对象的改变是先保存原来的value,然后改变key后,将原来的key:value用delete删除掉,然后再重新赋值(如果有更好的方法,可以和我说,我个人也感觉这种方法不是很优雅);
  • 最后,因为上面操作为了方便操作,会将对象转化为数组格式,操作完后,需要将原先是对象的重新转化为对象,再返回回去,这样不是更改原格式;

三、代码

/** 返回数据下划线驼峰互转函数封装
 * @param {data} 'obj或ary'
 * @param {type} 'hump' 为下划线转驼峰,'line' 为驼峰转下划线
 * @return {Array||Object}
 */
export const formatHumpLineTransfer = (data, type = 'hump') => {
  // 判断传入的值是对象还是数组
  const newData =
    Object.prototype.toString.call(data) === '[object Object]'
      ? [JSON.parse(JSON.stringify(data))]
      : JSON.parse(JSON.stringify(data))
​
  function toggleFn(list) {
    list.forEach((item) => {
      for (const key in item) {
        // 如果值为对象
        if (Object.prototype.toString.call(item[key]) === '[object Object]') {
          toggleFn([item[key]])
        }
        // 如果值为数组
        else if (Object.prototype.toString.call(item[key]) === '[object Array]') {
          toggleFn(item[key])
        }
        // 下划线 转 驼峰
        else if (type === 'hump') {
          const keyArr = key.split('_')
          let str = ''
          if (keyArr.length > 1) {
            keyArr.forEach((item, index) => {
              if (item) {
                if (index) {
                  const arr = item.split('')
                  arr[0] = arr[0].toUpperCase()
                  str += arr.join('')
                } else {
                  str += item
                }
              }
              if (!item) {
                keyArr.splice(0, 1)
              }
            })
            const newValue = item[key]
            delete item[key]
            item[str] = newValue
          }
        }
        // 驼峰 转 下划线
        else if (type === 'line') {
          const regexp = /^[A-Z]+$/
          const newKey = key.split('')
          const newValue = item[key]
          newKey.forEach((item2, index2) => {
            if (regexp.test(item2)) {
              newKey[index2] = '_' + item2.toLowerCase()
            }
          })
          delete item[key]
          item[newKey.join('')] = newValue
        }
      }
    })
  }
  toggleFn(newData)
  // 因为上面操作为了方便操作,会将对象转化为数组格式,操作完后,需要将原先是对象的重新转化为对象
  if (Object.prototype.toString.call(data) === '[object Object]') {
    let obj = null
    newData.forEach((item) => (obj = item))
    return obj
  } else {
    return newData
  }
}

四、效果

转换前:

转换后:

结语

希望上面的能够帮助遇到相同问题的小伙伴们,更多关于JS封装转换前后端接口数据格式的资料请关注我们其它相关文章!

(0)

相关推荐

  • nestjs返回给前端数据格式的封装实现

    一般开发过程中不不会根据httpcode来判断接口请求成功与失败的,而是会根据请求返回的数据,里面加上code字段 一.返回的数据格式对比 1.直接返回的数据格式 { "id": 1, "uuid": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328", "name": "哈士奇1", "age": 12, "color": null, &q

  • JS中Promise的使用及封装方式

    目录 Promise 是什么 Promise 的特点 Promise 的缺点 Promise 的原理 Promise 的方法 1. Promise.prototype.then() 2. Promise.prototype.catch() 3. Promise.prototype.finally() 4. Promise.all() 5. Promise.race() 5. Promise.allSettled() Promise 的简单封装 总结 Promise 是什么 Promise 是异步

  • 使用纯JavaScript封装一个消息提示条功能示例详解

    目录 介绍 思路&布局 操作逻辑 完整代码 介绍 一个类似Element UI.Ant-Design UI等 UI 框架的消息提示功能,方便在任何网页环境中直接调用函数使用:区别在不依赖 js 及 css 引用,而是使用纯 js 进行封装实现,代码更精简,同时保持和 UI 框架一样的视觉效果(可自行修改成自己喜欢的样式) 代码仓库 在线预览效果(点击[登录].[点击复制]按钮时触发提示效果) 思路&布局 先来写单个提示条,并实现想要的过渡效果,最后再用逻辑操作输出节点即可:这里不需要父节点

  • 一文带你简单封装JS下的异步任务对象

    目录 废话开篇: 一.利用 Promise 实现异步任务 二.实现效果 三.代码实现 四.总结与思考 废话开篇: js有微任务跟宏任务,但是不管是哪种任务并不代表着会开辟新的线程,可以理解为将上述两种任务放到“主任务”之后执行,有点像iOS下的在主线程调用异步函数一样,其实也只是将异步任务降低了优先级,等主线程不忙的时候再处理该任务,比如:UI任务优先级较高,所以,任何的主线程下的异步任务都要排到UI任务结束之后进行. 一.利用 Promise 实现异步任务 利用 Promise 实现异步任务,

  • Nest.js参数校验和自定义返回数据格式详解

    0x0 参数校验 参数校验大部分业务是使用 Nest.js 中的管道 方法实现,具体可以查阅文档 .不过编写过程中遇到一些问题,虽然文档讲得比较晦涩. 在做个查询接口,里面包含一些参数,做成 dto 结构数据: import { ApiProperty } from '@nestjs/swagger' export class QueryUserDto { @ApiProperty({ required: false, description: '页码' }) readonly currentP

  • json数据格式常见操作示例

    本文实例讲述了json数据格式常见操作.分享给大家供大家参考,具体如下: json数据格式 第一种,对象形式 <script> //var json3={name:"longzhoufeng",age:123}//第一种方式 var json3={"name":"longzhoufeng","age":123}//推荐这种方式,加引号,安全性高一点,转换格式好一些 for( var attr in json3){

  • JS封装转换前后端接口数据格式工具函数下划线<=>大写

    目录 一.前言 二.思路 三.代码 四.效果 结语 一.前言 这段时间接近年底,公司的业务也不是很繁忙,有些闲暇的时间,就模仿ruoyi写一个后台系统,技术栈前端是react18,后端为koa2: 在一个接口返回数据的过程中,遇到一个问题,就是后端数据保存到数据库中的命名标准是下划线,而前端的这边的命名标准是驼峰命名,所以如果直接将从数据库的数据返回给前端,便非常不优雅,网上想直接找工具包,也没找到合适的,故而自己手写了一个,如果有同样需求的小伙伴们,可以直接拿去用. 二.思路 一般后端返回给前

  • SpringBoot前后端接口对接常见错误小结

    目录 前言 开始 1.实体嵌套List提交 2.普通文件上传 3.List提交 4.数组Array提交 前端 后端 前言 SpringBoot前后端接口对接工作时,经常遇到请求500,400等问题,马虎大意经常导致时间浪费,为此总结了4个常见的复杂请求类型,以此为戒. 开始 1.实体嵌套List提交 例子:提交一个老师的实体Teacher,老师管理着不同的学生,还要传入学生实体List <Student>常见问题:提交异常,会报400错误️正确前端代码 <button onclick=&

  • PHP封装curl的调用接口及常用函数详解

    如下所示: <?php /** * @desc 封装curl的调用接口,post的请求方式 */ function doCurlPostRequest($url, $requestString, $timeout = 5) { if($url == "" || $requestString == "" || $timeout <= 0){ return false; } $con = curl_init((string)$url); curl_setop

  • 详解vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

  • 详解基于Node.js的微信JS-SDK后端接口实现代码

    做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分享可以自定义内容,如下: 我承认,虽然这分享的标题和内容也并不正经,但这不妨碍我表达我们可以通过微信JSSDK定义分享内容,接下来我们将一步一步从零实现JSSDK从后端Node.js的接入. 成为测试公众号开发者 登录测试公众号后台 首先我们需要在微信公众平台申请测试接口,地址:https://mp

  • nginx+vue.js实现前后端分离的示例代码

    1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

  • Vue之前端体系与前后端分离详解

    目录 概述 前端知识体系 前端三要素 表现层(CSS) 行为层(JavaScript) JavaScript 框架 UI框架 JavaScript 构建工具 三端统一 混合开发(Hybrid App) 微信小程序 后端技术 主流前端框架 ElementUl ICE VantUl AtUl CubeUl 前端发展史 基于AJAX带来的SPA时代 此处的 MV* 模式如下: NodeJS带来的全栈时代 总结 概述 ​ Vue(读音/viu/,类似于 view)是一套用于构建用户界面的渐进式框架,发布

  • Java axios与spring前后端分离传参规范总结

    目录 前言 一.@RequestParam注解对应的axios传参方法 1.1.params传参(推荐) 1.2.FormData传参 1.3.qs.stringfy传参 二.@RequestBody的axios传参方法 前言 前后端分离开发的场景下,开发人员的工作内容更加专注与专业,但是也产生了一些额外的沟通成本.比如:本文中为大家说明的前后端参数传递与接受方法.本文主要是面对前端使用axios,后端使用Spring进行参数接受的情况进行说明.在使用spring的时候,与前端配合开发,容易出现

  • 基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案

    前言 在前后端分离的开发模式中,从开发的角色和职能上来讲,一个最明显的变化就是:以往传统中,只负责浏览器环境中开发的前端同学,需要涉猎到服务端层面,编写服务端代码.而摆在面前的一个基础性问题就是如何保障Web安全? 本文就在前后端分离模式的架构下,针对前端在Web开发中,所遇到的安全问题以及应对措施和注意事项,并提出解决方案. 跨站脚本攻击(XSS)的防御 问题及解决思路 跨站脚本攻击(XSS,Cross-site scripting)是最常见和基本的攻击Web网站的方法.攻击者可以在网页上发布

  • 基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架

    前言 使用Node做前后端分离的开发模式带来了一些性能及开发流程上的优势, 但同时也面临不少挑战.在淘宝复杂的业务及技术架构下,后端必须依赖Java搭建基础架构,同时提供相关业务接口供前端使用.Node在整个环境中最重要的工作之一就是代理这些业务接口,以方便前端(Node端和浏览器端)整合数据做页面渲染.如何做好代理工作,使得前后端开发分离之后,仍然可以在流程上无缝衔接,是我们需要考虑的问题.本文将就该问题做相关探讨,并提出解决方案. 由于后端提供的接口方式可能多种多样,同时开发人员在编写Nod

随机推荐