数据从前端传到后端入库过程分析

ops/2025/1/24 22:15:30/

数据从前端传到后端入库过程分析

概述

        积累了一些项目经验,成长为一个老程序员了,自认为对各种业务和技术都能得心应手的应对了,殊不知很多时候我们借助了搜索引擎的能力,当然现在大家都是通过AI来武装自己。

        今天要分析的话题是数据从前端传到后端再到插入数据库的数据类型转换过程。

有哪些数据类型

前端

在前端开发中,JavaScript 是最常用的编程语言之一。JavaScript 拥有多种数据类型,这些数据类型可以分为基本数据类型和引用数据类型。

基本数据类型

基本数据类型是存储在栈内存中的简单数据段,占用的内存较小,可以直接操作它们的值。JavaScript 的基本数据类型包括:

  1. String:字符串,用于表示文本值,例如 "Hello, World!"1。

  2. Number:数字,可以是整数或浮点数,例如 42 或 3.142。

  3. Boolean:布尔值,有两个值:true 和 false2。

  4. Null:表示空值,是一个特殊的关键字,表示变量没有值1。

  5. Undefined:表示未定义,是一个特殊的关键字,表示变量未赋值1。

  6. Symbol:ES6 引入的一种新的原始数据类型,表示独一无二的值3。

  7. BigInt:可以表示任意大的整数,超过了 Number 的安全整数限制1。

引用数据类型

引用数据类型是存储在堆内存中的对象,变量中保存的是一个指针,指向内存堆中的实际值。JavaScript 的引用数据类型包括:

  1. Object:对象,是一种复合数据类型,可以包含多个键值对2。

  2. Array:数组,是一种特殊的对象,用于存储有序的元素集合3。

  3. Function:函数,是一种可调用的对象,用于封装可执行的代码块3。

  4. RegExp:正则表达式,是一种用于匹配字符串模式的特殊对象3。

  5. Date:日期对象,用于处理日期和时间

后端

        这里主要以Java为例来进行讲解,Java语言中的数据类型分为两大类:基本数据类型和引用数据类型。基本数据类型包括四种整数型、两种浮点型、一种字符型和一种布尔型。引用数据类型则包括类(Class)、接口(Interface)和数组(Array)。

基本数据类型

基本数据类型是Java语言预定义的,它们的大小和值的范围是固定的。Java定义了以下几种基本数据类型:

  • 整数型:包括byte(1字节)、short(2字节)、int(4字节)和long(8字节)。

  • 浮点型:包括float(4字节)和double(8字节)。

  • 字符型char(2字节),用于表示单个字符。

  • 布尔型boolean,用于表示真(true)或假(false)。

每种基本数据类型都有对应的包装类,例如Integerint的包装类,Doubledouble的包装类。包装类提供了一些方法来操作基本数据类型的值,同时也允许使用泛型。

引用数据类型

引用数据类型指向一个对象,它们引用的是对象在内存中的地址。Java中的引用数据类型主要包括:

  • 类(Class):定义了一组具有相同属性(变量)和行为(方法)的对象的模板。

  • 接口(Interface):定义了一组方法规范,由实现接口的类去具体实现。

  • 数组(Array):用于存储固定大小的同类型元素。

引用数据类型的默认值是null,表示它们没有指向任何对象。

数据库

        这里主要以MySQL为例进行讲解,MySQL 支持多种类型,大致可以分为三类:数值、日期/时间和字符串(字符)类型。

数值类型

日期和时间类型

字符串类型

        上面罗列了前后端以及数据库支持的数据类型,下面整理了一些数据的对应关系:

实践分析

        本小节通过实践demo来对所有数据类型进行分析,通过实践案例讲解的方式来深入理解各数据类型的转换机制。

        首先创建了一个如下涵盖大部分mysql数据类型的表:

        然后创建了一个穷举所有数据类型的实体对象:

        之后我们编写一个测试方法:

        准备完毕之后我们开始进行debug实验,接口传参如下:

Controller层接参如下:

可以看到参数都能够正确接收到,并且根据实体对象类型进行了转换,入库之后如下所示:

        这是一个很有趣的小实验,很多人在开发者懵懵懂懂的,感觉自己都会了,但是一单严格问就答不上来了,如果前后端到入库数据类型对应关系没搞清,又怎么能够写出优雅的代码,所以建议大家都是实际验证一下自己的猜想,巩固好基础知识点。

总结

        本篇博客构思的挺久才开始下笔,出品一篇文章的确来之不易,从有了想法之后开始构思和收集材料,另外技术文章尽可能具备实战性,所以最后我都习惯配合实践demo来说明,希望大家看完文章有所收获。

        时光荏苒,已经是25年了,新的一年大家继续加油!


http://www.ppmy.cn/ops/152859.html

相关文章

MyBatis Plus 的 InnerInterceptor:更轻量级的 SQL 拦截器

在 Spring Boot 项目中使用 MyBatis Plus 时,你可能会遇到 InnerInterceptor 这个概念。 InnerInterceptor 是 MyBatis Plus 提供的一种轻量级 SQL 拦截器,它与传统的 MyBatis 拦截器(Interceptor)有所不同,具有更简单…

R语言的编程范式

R语言的编程范式探讨 引言 R语言作为一种专门用于统计分析和数据可视化的编程语言,近年来得到了广泛的应用。无论是在学术研究、企业分析,还是在数据科学的各个领域,R语言凭借其强大的数据处理能力和丰富的图形化工具,吸引了大批…

Vue - ref( ) 和 reactive( ) 响应式数据的使用

一、ref( ) 在 Vue 3 中,ref() 是一个用于创建响应式引用的函数。它是 Vue 3 Composition API(组合式API) 的一部分,允许在组件中创建响应式数据。 使用对象:基本数据类型(String 、Number 、Boolean 、Null 等)、对…

layui Table单元格编辑支持Enter键换行,包括下拉框单元格

layui Table表格编辑支持Enter键换行 可编辑单元格 $(".layui-table td").keydown(function (e) {// console.log("111",e);var index $(this).index(),tr $(this).parent(tr),isKeydown (event.type "keydown");if (e.code "Enter&q…

npm常用命令

以往nodejs版本 Node.js — Node.js 版本 CNPM Binaries Mirror 查看当前版本 npm -v 查看node安装在哪里 where node 清除缓存 npm cache clean --force 淘宝镜像(只支持下载,不支持上传发布) npm config set registry https://reg…

tortoiseSVN图标缺少绿色钩/tortoiseSVN图标不显示解决方案

参考链接 ①在空白处右键->选择“tortoiseSVN”->选择“设置” ②选择“覆盖程序”->启动“注册表编辑器” ③打开注册表后,在“ShellIconOverlayIdentifiers”文件夹中可以看到许多名字前带很多空格的文件夹 这里需要注意,我们只需要让Torto…

centos部署rabbitmq

要安装rabbitmq首先要安装erlang 二者对应的版本如下,具体查看地址 https://www.rabbitmq.com/docs/next/which-erlang[这里是图片001]https://www.rabbitmq.com/docs/next/which-erlang 一、安装erlang 1.1安装必要的依赖项: Erlang的编译过程需要一…

《C++ primer plus》第六版课后编程题-第05章

第五章 1 #include <iostream> #include <array>using namespace std;void main() {int n1, n2;cin >> n1 >> n2;int sum 0;for (int i n1; i < n2; i) {sum i;}cout << sum; }2 #include <iostream> #include <array>usin…