当前位置:首页 > 技术分析 > 正文内容

数据从前端传到后端入库过程分析(前后端如何传数据)

ruisui883个月前 (02-03)技术分析16

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

概述

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

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

有哪些数据类型

前端

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

基本数据类型

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

  1. String:字符串,用于表示文本值,例如 "Hello, World!"1。
  2. Number:数字,可以是整数或浮点数,例如 423.142。
  3. Boolean:布尔值,有两个值:truefalse2。
  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年了,新的一年大家继续加油!

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/707.html

分享给朋友:

“数据从前端传到后端入库过程分析(前后端如何传数据)” 的相关文章

Vue3 中有哪些值得深究的知识点?

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,有很大的区别,具体对比如下://Vue 2 Vue.use({ router, store,...

Python 幕后:Python导入import的工作原理

更多互联网精彩资讯、工作效率提升关注【飞鱼在浪屿】(日更新)Python 最容易被误解的方面其中之一是import。Python 导入系统不仅看起来很复杂。因此,即使文档非常好,它也不能让您全面了解正在发生的事情。唯一方法是研究 Python 执行 import 语句时幕后发生的事情。注意:在这篇文...

vue v-html动态生成的html怎么加样式/事件

1、动态生成的html,样式不生效//html 布局 <view v-html="html"> {{html}} </view> //动态生成的元素 <view class="btngo" @tap="handleLink...

雅马哈TMAX 560 TECH MAX 外媒深度测评

应雅马哈(Yamaha)的邀请,在葡萄牙埃斯托里尔对全新的Yamaha TMAX 560 Tech Max踏板车进行了测试,在这里TMAX 560 Tech Max售价为11649英镑。雅马哈TMAX长期以来一直站在踏板车的顶端,就声誉和知名度而言,它是当之无愧的大踏板界NO.1。2020 TMAX...

JavaScript数组操作:掌握常用方法,提升开发效率

JavaScript数组操作:从增删改查到高级应用本文深入解析JavaScript中常用的数组方法,包括push、unshift、pop、shift、map、filter、reverse、at 和 slice。通过详细的例子和应用场景,帮助开发者快速掌握这些方法,提升代码效率和可读性。开篇点题作为J...

慕课 SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

本课程以业务驱动技术栈,打造业务相对完整的掌上医疗小程序,解决大家没有好的毕设项目或者求职项目的困境。本课程案例采用前后端分离架构,业务功能完善(既有WEB管理端,也有移动用户端),界面美观,无需艰涩的技术也能做出亮眼的作品。SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序 |...