对Springboot项目进行创建，并使用axios(Ajax的封装)和后端进行数据交互

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本文记录了使用springboot建立项目的具体过程，以此实现后端的建立。并使用axios前端技术，在实现前后端分离的同时能进行正常的数据交互。在最后也有该项目GitHub的连接，大家可以自行下载。

---

一、springboot是什么？

简单来说，springboot其实就是一个大框架，其核心是spring。springboot能尽量减少spring程序的一些配置文件，使其跑得更快，同时能够简化我们对java程序的开发。而在通过对JavaWeb的学习之后，我们对持久层（Dao）、业务层（Service）以及控制层（controller）也有了一定的了解，而下文也会根据这三个层按顺序进行就讲解。

二、步骤

1.springboot项目创建

创建步骤如下）：
（1）Spring Initialize本质上来说就是一个Web应用程序，它能为你springboot项目结构。同时也要在“Project SDK”中选择你的java版本。

（2）特别注意的是在确认你的包名、项目名之后，要确实“Java Version”这一栏要与你的java版本一致，避免踩坑。

（3）在添加依赖的时候，我们选择以下三个依赖。其实也可以在建立工程完成之后在pom文件中添加，但是比较麻烦，我们在此一步到位。

（4）在一路《next》之后就得到了springboot的项目结构工程图，pom文件中也自动添加了相应的依赖。但是我们还需要手动添加一个druid数据库连接池的依赖。数据库连接池能重复利用数据库链接，从而提高请求的响应时间和服务器性能。

2.创建数据库并与IDEA进行连接

（1）创建数据库ssm_db以及表tbl_book，表中包含四个字段。

（2）IDEA连接数据库：要知道我们之前已经在pom文件中添加了mysql、druid等依赖了。将application的后缀名改为.yml之后配置数据库的驱动、url以及用户名密码等等。个人习惯用.yml进行配置。

（3）配置完之后可以在测试类里面稍微测试能否连接上数据库。

3.后端编写代码

在创建好springboot项目框架之后，我们就可以按Dao层、Service层以及Controller层进行代码的实现以及测试。当然这种编写顺序也只是个人习惯而已。但是在此之前，我们可以先造出需要的实体类。
（1）生成Book实体类
其实就是对数据库表中的字段生成get和set方法，在这里我并不采用注解的方式，看个人习惯。在实体类中编写字段之后fn alt insert就可以生成get、set方法。

（2）编写Dao层接口并测试

①编写Dao层接口：
Dao是数据访问层，Dao的作用是封装对数据库的访问：增删改查，不涉及业务逻辑，只是达到按某个条件获得指定数据的要求。因此在这个接口中我们主要实现对数据的访问。
@Repository将此接口交给spring管理，
@Mapper注释用来表示该接口类的实现类对象交给mybatis底层创建，然后交由Spring框架管理。

但是在由于注解的方式只能实现简单的增删改查，为了能够方便扩展，我在resources的同名目录下创建了一个BookDao.xml用于书写sql语句。
“namespace”指向接口、“id”注意要和接口中的方法名一致，“parameterType”其实就是参数类型，如果参数是实体类的话按照路径来指向就可以了。

②测试Dao
（3）编写Service层接口及实现类并测试
这一步其实Dao层的编写也差不多的，Service层主要就是对Dao层的调用，很多都是直接return就行了
①编写Service接口及实现类


②测试
测试其实也简单，对BookDao的测试类复制粘贴然后大致修改一下就可以。
其实真实写的时候对Dao层进行测试就行了。

（3）编写Controller层代码
在编写Controller层的代码之前，我们可以先编写两个类Code和Result，Code类用来定义静态的状态码，用来输出数据的访问状态是成功还是失败，而Result类用来封装状态码、获取到的数据以及需要输出的一些提示信息，这样比较方便前端人员的操作。

接下来就是对controller层的编写了。这里我采用的是restful的风格写的。所以@RestController必不可少，而@RequestMapping用来标识 http 请求地址与 Controller 类的方法之间的映射。而@PostMapping、@GetMapping、@DeleteMapping、@PutMapping分别对应着四种请求方式。@RequestBoby是把数据放在请求体中。而return的Result对象就是用来存放状态码、真实数据以及需要输出的字符串信息的。而真实的数据存放在Result类的date对象中。

以上，我们后端的代码就算编写完成了。而为了我们能在浏览器上比较方便的访问它，我在application.yml中配置了访问地址。9999是我的端口号，context-path是表示上下文根，这样配置的话我们访问只需要
“http://localhost:9999”再加上mapping后面的映射地址就行了
比如“http://localhost:9999/selectAll”、“http://localhost:9999/delete/5”

之后我们需要到浏览器上做简单的访问，首先运行项目的启动类“DemoApplication”，对springboot启动类不了解的可以参考一下大佬的这篇推文

https://blog.csdn.net/weixin_41884010/article/details/88844946

访问到的数据大致是这种Json数据格式，真实的数据是放在data字段中的

4.axios和后端数据交互

ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。在本文中我采用vue来简单地编写前端。

在html文件中v-click是按钮的绑定事件，点击按钮后就可以进入下面的vue对象中执行相应的方法和请求。v-model是可用于数据的双向绑定，我在这里使用它是因为它可以获取到文本框中的数据。


要注意axios的data表示参数设置在请求体中，而params表示参数设置在请求头中。在本文中，插入方法是用的是post请求，请求的参数自然是在请求体中的，因此axios中用的data来传递请求参数。

注意在执行then()方法时，result.data取出的是后端的Result对象中的数据，而result.data.data是取出Result对象数据中的data字段，即真实的数据库数据。

---

总结

这篇好文章是转载于：学新通技术网