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

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

前言

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);
1

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