手把手教你开发项目子模块-02_代码架构：如何连接前后端和数据库？！！

最新推荐文章于 2024-07-13 16:21:34 发布
最新推荐文章于 2024-07-13 16:21:34 发布
阅读量1.4k 收藏 39
点赞数 32
分类专栏： 那些年的debug 文章标签： 架构 数据库 交互 spring boot java 学习方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52613545/article/details/137950263
版权

如何实现前后端和数据库的连接？！！！

文章目录

前言

  1. 如果您对如何实现前后端和数据库的连接有一些疑问或者好奇，希望本文能为您提供一些思路！
  2. 如果您是从笔者开发子模块系列文章过来的，本文将会继续按开发流程向下推进，上篇文章主要介绍如何建立子模块的数据库，详情请跳转以下链接：手把手教你开发项目子模块-01_数据库：MySQL批量插入两表相同字段！！！
  3. 笔者才疏学浅，边改边总结，还是小白阶段，不足处请多指教！

开发环境：IDEA 2018
数据库：MySQL 8.0
项目架构：SpringBoot+Vue+Hibernate

上文中已经介绍过，我们开发的子模块是库存管理，也已经初步实现数据库表的建立，废话少说，开始新阶段！

一、了解代码架构

这里仅从笔者刚开始学习如何连接前后端和数据库的视角出发，倾向于单刀直入，目标是如何连接前后端和数据库，那么我们就直接找：

  1. 前端渲染的代码，即HTML
  2. 后端数据库的代码，即实体类->(Dao\Mapper\Entity层)
  3. 前后端实现交互的代码，即Vue

这里先忽略业务层（Service层）和控制层（Controller层），后续随着项目的深入自然而然的就会讲到！
继续往下看吧！一步步来！

二、前端

按照上述思路，我们先去找前端渲染的HTML的位置！
找到你想要修改的前端页面，鼠标右键->检查->从源码找信息！

在这里插入图片描述
结果显而易见，直接去代码找相应文件！

在这里插入图片描述
代码目录查看！

在这里插入图片描述
字段能够一一对应！

在这里插入图片描述

看过上期的就会知道，这个时候我们可能最容易想到的就是直接修改代码字段使他和数据库表设计的字段一致，但是显而易见的选择往往需要三思而后行，同理，这种方法经过思考后是行不通的，因为你压根连项目的数据库表如何在代码映射还没做到，数据根本无法拿到，当然表面来看是可以改个标题，有点空中楼阁的意思，但是笔者的思路是盘底层逻辑，先把数据库字段设计好再说，追本溯源，从基层出发才能走得更远！

三、后端

有了对前端的一些了解，我们或许带着很大的疑问继续向后端出发，那就避不开我们的实体类，这个很好找，就是项目的数据层，查看相关目录（Dao/Mapper/Entity层…）即可！

在这里插入图片描述
接下来就是按照我们的数据库表修改字段啦！

在这里插入图片描述
大概修改完成！
养成写注释的好习惯！

在这里插入图片描述
然后这个时候可以考虑前端都需要渲染哪些字段了，做上面空中楼阁那个任务（哈哈哈哈哈哈不是，主要是做好前端准备工作！

在这里插入图片描述
然后，Amazing的事件发生了，真香瞬间！
数据直接给爷整到了，此刻的我，哈哈哈哈哈哈不是，不复盘的时候bug一个比一个多，一复盘这么流畅，笑死哈哈哈哈哈哈哈！打脸是吧！
如果你也有幸如此，那还往下看什么，啊不是，当然咱们前面已经写那么多了，全白写了，啊不是，写代码嘛，知其然就要知其所以然，试图挽尊，鉴于前面已经写那么多了，面对这个让人惊喜的意外（哦呵呵，笔者还是准备盘一下逻辑，为什么会这样，如果正常往下走应该怎么做，想继续了解的往下看吧！
在这里插入图片描述
虽然数据直接拿到了，在这里笔者还是稍微修改了一下样式让页面稍微好看一点！适当调整那个minWidth字段！

在这里插入图片描述

四、前后端交互

秉着不仅要知其然还要知其所以然的原则，我们来探讨一下，数据是这样从后端拿到的，这时候就要理解一下我们的前后端交互啦！就是我们的Vue：
1、Vue常规实例：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2、找到对应函数方法：
去找这两个方法，看哪个方法是把数据渲染到前端页面的：

在这里插入图片描述
3、去Controller层找对应URL地址

在这里插入图片描述
4、去Service层查看具体业务

  • 接口

在这里插入图片描述

  • 实现类
    在这里插入图片描述

5、查看具体方法实现代码

  • 仔细研究方法

在这里有必要说一下，如果您的数据持久化用的是mybatis，一般不会直接方法里面就是SQL语句了，是有相应的数据映射的，当然如果是其他的数据持久化可能又不一样，笔者只是根据项目架构调整学习，还是那句话，主要看思路，细节党莫纠结！

在这里插入图片描述
力求细致，直接MySQL先查一遍，看是不是能正常运行！
在这里插入图片描述
在这里插入图片描述
至此，流程大概走了一遍，留一个小彩蛋关于上面的SQL

  nativeSql += common(entity);

这个是SQL拼接用来模糊查询的！留到下期解密！
好啦！此篇文章以上期的数据库表出发，主要讲了从前端渲染数据的视角展开，提供了一些如何实现前后端和数据库连接的思路，希望对您有所帮助！
下期会讲具体的业务实现，就是我们熟悉的增删改查（CRUD）
同样是按照笔者做项目的思路出发，一步步解构和排错，重架构而轻流程
如果您感兴趣的话，可以点个关注不迷路，我们下期见，Bye~

爱学习的王小强
关注
  • 32
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
后端操作数据库完成前后端的交互
weixin_65356515的博客
08-22 6658
在前端做一个登录页面，在用户名输入数据进行登录，后端拿到数据对数据库进行验证，如果有就返回一个登录正确，如果没有就返回用户名或密码错误1.在后端构建flask框架，导入MySQL模块和跨域模块2.启动一个服务，引用跨域模块，让所有的url都允许跨域请求3.启动一个路由，输入请求的路径和方式，默认的是入参是json4.创建一个方法，一个定死的接口不会经过数据库5.接收从客户端（前端）发过来所有的json格式的数据，用一个变量进行封装6.定义两个变量，用来分别调用传过来的数据，传过来的数据是键值对7.打开数据库
Web前端、C#后端、Mysql数据库交互
10-10
Web前端使用JavaScript进行开发，利用Ajax技术与后端通信，C#后端采用Asp.net的ashx处理前端请求，数据库端使用Mysql数据库，C#后端可以与数据库直连。
一个从前端到后台服务器与数据库的完整实现
07-09
包含了，前台jsp页面实现，服务端源代码，所需要的jar包，适合web开发新手。
前端 后端 数据库 连接起来
Theshy08的博客
10-14 1万+
Web服务软件做了哪些事儿? 负责建立底层的网络连接 负责将客户端请求的文件返回给客户端 负责根据客户端请求的路径找到对应的Servlet 并进行响应 如何创建Web工程 创建maven工程 选择通过 maven-archetype-webapp骨架创建工程 配置Tomcat 点击绿色扳手旁边Add Config.... 点击灯泡 删除 application Context 给工程添加java和resources文件夹 并且在工程设置页面中的face
快速上手：前后端分离开发（Vue+Element+Spring Boot+MyBatis+MySQL）
学IT，找陈寒
07-08 3190
随着互联网技术的迅速发展，前后端分离已经成为现代Web开发的主流模式。这种模式不仅提高了开发效率，还使得前端和后端各自独立，便于维护和升级。本文将详细介绍如何使用Vue、Element、Spring Boot、MyBatis和MySQL实现一个简单的前后端分离项目。通过本文的学习，你将能在20分钟内掌握这种开发模式的基本实现方法。用户注册和登录任务的增删改查前端：Vue.js + Element UI后端：Spring Boot + MyBatis数据库：MySQL。
如何让前后端和数据库进行对接
m0_71412337的博客
07-11 1851
除了导入关于数据库和后端对接的包以外，还需要fastjson包，这个包是阿里巴巴里面的开源的包，除了这个以外还需要俩个js文件，vue和axiox文件，前者是前端的框架，axiox是前端向后端的请求。首先要建立一个控制类，里面的类需要继承HttpServlet类，这个类就是对Web客户向Servlet容器发出Http请求，然后建立一个用快捷方式dog输出的方法，里面会接收俩个接口，然后使用JsonUtils.transJson(list,resp)；以上就已经实现前后端对接。
k8s学习 ： 前端是如何连接到后端数据库的？
哈哈虎的博客
12-24 2175
k8s 学习，前端 WordPress 网站是一个 pod 后端 MySQL 是另一个 pod，WordPress 网站是怎样连接到 mysql的？ 程序代码如何修改？
关于前段与后端数据库的连接
ahzhrr3338的博客
04-05 1148
上一周，本小组的前段队伍完成了网页的psd和页面的基本设计，这里就不放出网页图片的示例了。 下一步我们将利用Dreamweaver CS4中ODBC连接数据库的方法，创建数据库连接。 通过书籍了解到一个完整的ODBC由一下四个部件组成： 1.应用程序（Application）：该程序位于程序面板ODBC内，其主要任务是管理安装的ODBC驱动程序和管理数据源。 2.驱动程序管理器（...
如何将web前端连接数据库
酸奶公园
03-12 1万+
在服务器端使用一种数据库访问API（例如MySQL API, MongoDB驱动程序）来访问数据库，并编写服务器端代码来响应请求。在编写代码之前，请确保您已经充分了解您使用的技术和数据库，以及在服务器端和客户端之间如何传输数据。创建一个web前端页面，向服务器端发出请求，在响应中返回由服务器端从数据库中检索的数据。在测试和部署您的代码之前，请确保您已经进行了充分的测试，以确保您的代码完全符合您的需求。在编写代码时，请遵循最佳实践和代码规范，以使您的代码易于阅读和维护。如何将web前端连接数据库。
前端-后端-数据库连接总结
m0_69120641的博客
06-02 4359
在前端处理后端响应回来的状态码时, 每一个组件对相同部分状态码总是同一个业务流程, 如: 500 状态码时候, 就会弹出服务器异常的信息, 那这样会繁琐很多, 使得代码冗余。在前端向后端发送带参数的请求, 后端获取时, 浏览器默认发送的是ISO8859-1格式的编码 , 而这种编码格式是不能解析中文的, 所以就有乱码的出现。由于前端用的是axios的请求发送框架, 所以数据格式在经过服务器内部的一系列处理之后, 就会变成json的键值对格式,里 , 在进入具体操作的网页网页时候可以先进行判断, 如果有。
JSP EIMS系统-OA子系统的设计与开发(源代码+论文).zip
04-04
《JSP EIMS系统-OA子系统的设计与开发》是一个基于Java Server Pages（JSP）技术的电子信息化管理系统（EIMS）的子项目，主要关注的是办公自动化（OA）部分。该系统旨在提高企业的办公效率，实现信息共享，流程自动...
ASP网络考试系统的设计与实现——阅卷子系统(源代码+论文).rar
04-05
- 数据库连接模块：用于与后台数据库进行交互，存储和检索考试数据。 - 阅卷接口：设计友好的界面，让教师可以方便地查看试卷、打分和提交。 - 安全模块：实现用户身份验证和授权，防止未授权访问。 - 逻辑处理模块...
ASP同校二手电子产品交易网(源代码+论文).rar
04-05
源代码的提供使得学习者能够深入理解ASP编程语言在实际项目中的应用，而论文部分则可能涵盖了系统的设计思路、功能模块、实现技术和使用效果等详细信息。以下是对这个项目的详细解析： 1. ASP技术：ASP（Active ...
JAVA+SQL电子通讯录带系统托盘(论文+源代码).rar
04-03
标题中的"JAVA+SQL电子通讯录带系统托盘(论文+源代码)"表明这是一个使用Java编程语言和SQL数据库技术开发的电子通讯录项目，其中包含了系统托盘功能。这个项目可能是一个毕业设计，目的是帮助学生熟悉Java编程以及...
ASP住宅小区网络化物业管理系统——住户管理子系统的实现(源代码+论文).rar
04-05
源代码的提供为开发者提供了深入学习和二次开发的机会，而附带的论文则详细阐述了系统的架构、功能实现和设计思路。 1. ASP技术：ASP（Active Server Pages）是微软推出的一种服务器端脚本环境，用于生成动态网页。...
一篇文章搞懂简单的前后端数据库连接
热门推荐
qq_45073256的博客
04-08 1万+
一篇文章搞懂内外网连接引言前期准备数据库的实现后端idea与数据库连接后端代码的实现前端 引言 可能很多新学习编程的小伙伴的学习路线都是单独的后端语言或者静态的前端，当想把前后端以及数据库连接起来，并用，会遇到很多麻烦，这里举了一个小小的登录案例来说明。 前期准备 需要一个域名和服务器，能通过域名直接访问挂载到服务器上的前端代码或者后端代码 若没有这些 也没关系，一般学校都是有校园网的，在自己的电脑上打开命令提示符(cmd)输入ipconfig，得到自己电脑连接无线网的ip，这里我的ip是10.65.206
浅聊前端-后端-数据库
weixin_45725653的博客
03-18 1549
随便侃侃。
前后端，数据库以及分布式系统
最新发布
2302_80644606的博客
07-13 1385
前端关注于用户界面和交互，使用HTML/CSS/JavaScript等构建。后端处理应用逻辑和数据，使用各种编程语言和框架与数据库交互。数据库负责数据的存储和管理，支持高效的数据检索和操作。分布式系统通过多节点协作完成任务，提高系统的性能、可用性和扩展性。
笔记 |「产品经理」必懂的技术（七）
weixin_42862555的博客
05-06 2111
一、技术词汇扫盲 1.打印：不同于普通人口中的打印，工程师的打印指的是程序的输出，具体是输出到命令控制台上，测试程序是否运行正确 2.写死：具体指的是本地技术实现方案；例如：设计一个下拉框切换不同的城市，技术实现方案有两种： 城市数据储存在服务端，客户端通过数据接口获得列表显示在下拉列表中，优点是可以线上随时做出变动，比较灵活 城市数据储存在客户端，直接从本地使用数据显示出来，这就是写死的方式，因为在本地不需要数据接口，也不能轻易的在线上做出变动 3.架构和框架： 架构：对系统的结构设计和规划，类
django前后端实例，以及连接数据库
06-09
好的，我可以为您提供一个简单的 Django 前后端实例，并且展示如何连接数据库。 首先，在 Django 中，前端和后端通常是通过模板语言来实现交互。模板语言是一种将数据和 HTML 代码结合起来的方式，可以让我们更方便地处理后端数据并渲染到前端页面中。 下面是一个简单的 Django 前后端实例： 1. 创建 Django 项目并创建一个 app： ``` $ django-admin startproject myproject $ cd myproject $ python manage.py startapp myapp ``` 2. 在 `myapp/views.py` 中编写视图函数： ```python from django.shortcuts import render def index(request): data = {'name': 'World'} return render(request, 'index.html', context=data) ``` 3. 在 `myapp/templates/index.html` 中编写 HTML 模板： ```html <!DOCTYPE html> <html> <head> <title>Hello, {{ name }}!</title> </head> <body> <h1>Hello, {{ name }}!</h1> </body> </html> ``` 4. 在 `myproject/urls.py` 中配置路由： ```python from django.urls import path from myapp.views import index urlpatterns = [ path('', index, name='index'), ] ``` 5. 运行 Django 项目并查看页面： ``` $ python manage.py runserver ``` 在浏览器中打开 `http://localhost:8000`，就可以看到我们编写的页面了。 接下来是连接数据库的部分： 1. 在 `myproject/settings.py` 中配置数据库： ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'mydatabase', 'USER': 'mydatabaseuser', 'PASSWORD': 'mypassword', 'HOST': '127.0.0.1', 'PORT': '3306', } } ``` 这里我们以 MySQL 数据库为例，配置了数据库的名称、用户名、密码、主机和端口号。 2. 在 `myapp/models.py` 中定义模型： ```python from django.db import models class Book(models.Model): title = models.CharField(max_length=100) author = models.CharField(max_length=100) ``` 这里我们定义了一个 Book 模型，包含了书籍的标题和作者。 3. 在 `myproject/settings.py` 中添加应用程序： ```python INSTALLED_APPS = [ 'myapp', ] ``` 4. 创建迁移并应用： ``` $ python manage.py makemigrations $ python manage.py migrate ``` 这里我们使用 Django 的迁移工具来创建和应用数据库迁移，以便在数据库中创建我们定义的 Book 模型。 现在，我们就可以在视图函数中通过 ORM 操作来访问数据库了： ```python from myapp.models import Book def index(request): books = Book.objects.all() data = {'books': books} return render(request, 'index.html', context=data) ``` 在 HTML 模板中，我们可以像这样使用模型中的数据： ```html {% for book in books %} <h1>{{ book.title }}</h1> <p>{{ book.author }}</p> {% endfor %} ``` 这样，我们就完成了一个简单的 Django 前后端实例，并且展示了如何连接数据库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值