作为准大三狗,近段时间跟着老师在外实习,给我安排任务一周内熟悉mybatis+springboot框架,同时学习jQuery+ajax,和thymeLeaf实现对学生的增删改查,前后端要能进行交互,简直让我一个才学java到线程的人奔溃。不过还好,自己前些时间在w3c学习了一段时间html,css和js的一些基础的东西,xml也看不太懂的。但是任务下来了没办法,硬着头皮做,于是开始动手。

不就是增删改查嘛,肯定第一个是注册咯,也就是增。好在也看过一些mysql的内容。但是我对java后台怎么搞定数据库毫无办法。然后百度查到一位博主分享的博客,

很感谢这位博主,带我跨过了第一道坎,至少springboot能够基本上手。所以我的第一个demo就成型了:

刚学完java基础,springboot入门_springboot


这,就是我的第一个网页,内容:

刚学完java基础,springboot入门_学生的登陆注册功能_02


好了,第一步能够存数据也就完成了。

不过,我首先是用接口,直接在浏览器上输入接口然后用问号带参数的形式测试的,但是需要前后交互,所以接下来就是前端页面设计以及js请求接口的问题,这里推荐jquery请求。

所以,我的第一步也就跨出去了,这样就行了吗?当然不是,我只是先把大概熟悉一下,接下来要做的事情还有很多。所以我开始了我第二个自己搭建的springboot项目sms。

————————————————————————-———————————————————
说在前面一点,以下利用maven搭建,用了很多依赖包(在pop.xml中配置),所有依赖包如下:

<?xml version="1.0" encoding="UTF-8"?>

4.0.0

org.springframework.boot
spring-boot-starter-parent
2.1.6.RELEASE


com.example
sms
0.0.1-SNAPSHOT
sms
Demo project for Spring Boot

<properties>
<java.version>1.8</java.version>
</properties>

<dependencies>
<dependency> <!-- jpa依赖 -->
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency> <!-- jdbc依赖 -->
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency><!-- web项目依赖 -->
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency><!-- mysql依赖-->
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
</dependency>

<dependency> <!-- 模板渲染引擎 -->
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>

<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>

<resources>
<resource>
<directory>src/main/java</directory><!--java文件的路径-->
<includes>
<include>**/*.*</include>
</includes>
<!-- <filtering>false</filtering>-->
</resource>
<resource>
<directory>src/main/resources</directory><!--资源文件的路径-->
<includes>
<include>**/*.*</include>
</includes>
<!-- <filtering>false</filtering>-->
</resource>
</resources>

</build>

第一步:

用navicat设计表格,只有简单的id和password

刚学完java基础,springboot入门_springboot_03


第二步:

连接数据库,需要在application.properties中配置。这里值得一提的是有可能会出现数据库与服务器时间不同的问题,所以连接的时候后面需要带参数serverTime = UTC。

刚学完java基础,springboot入门_mysql_04


第三步:

设计实体类,只有简单的一些代码。

刚学完java基础,springboot入门_jdbc_05


第四步:

设计DAO接口操作数据库。设计两个方法,完成注册和登录功能(不完善,但暂不考虑,先走流程)。显然,注册即是对数据的插入操作,登录即查询+对比。

刚学完java基础,springboot入门_mysql_06


第五步:

设计Service接口和完成Service的类(跟着上面的教程做的,我也不知道为什么)。这里需要注意的的注释@Service不能少,少了就报错。代码具体如下:

刚学完java基础,springboot入门_前后端交互_07

刚学完java基础,springboot入门_前后端交互_08


第六步:

设计控制器,我才刚开始学也不太懂,我只知道控制器是直接与前台交互的。控制器接收到前台传递过来的参数后,调用service类中的方法实现对数据的操作。

刚学完java基础,springboot入门_前后端交互_09


第七步:

当然是测试啦!有了接口我就想先测试,才管页面怎么样先。嘻嘻。

1.注册功能

带参数传递,代码如下:

刚学完java基础,springboot入门_mysql_10


能够看到控制台输出如下,说明执行了DAO中的插入方法,同时数据库也能看见新增的数据。

刚学完java基础,springboot入门_springboot_11


刚学完java基础,springboot入门_学生的登陆注册功能_12


2.登录功能

同样是带参数传递,登录肯定需要数据库中有的数据,以第一条数据为例,代码如下:

刚学完java基础,springboot入门_mysql_13


同时控制台的情况如下,能够打印数据,并实现DAO中的方法说明查询到了数据。

刚学完java基础,springboot入门_jdbc_14


数据库中肯定是有这条数据的,就不说了,另外登录失败的情况也省略。第八步:

1.首先,我们要实现在浏览器中输入一个地址,它能够给我们返回一个页面,那么这个应该怎么做呢?同样是通过控制器,利用thymeleaf模块完成页面的渲染,我们才能看到页面。

在application.properties中配置:

刚学完java基础,springboot入门_前后端交互_15


第7行是为了能够让spring框架找到resource中的templates文件下的文件,第11行是html页面用到静态文件如图片,css,js文件时候要配置的路径,不然找不到页面所引用的资源。12行是配置文本路径,我为了说明我这个项目是sms所以这样配置,也就是说我的所有接口前面都要加/sms/,具体的可以查看刚刚我浏览器带参传递时给的图片。

2.配置完成以后,我新建了一个控制器,当然也可以不用,但是我不习惯。
具体如下:

刚学完java基础,springboot入门_学生的登陆注册功能_16


这里是什么意思呢?比如说,我在浏览器输入http://localhost:8080/sms/login,它就会跳转到login。html这个页面,这是在配置了的前提下。同时要注意的是这里需要@Controller注解,而不是@RestController,不然的话返回的是字符串。

刚学完java基础,springboot入门_mysql_17


我的页面代码:

刚学完java基础,springboot入门_jdbc_18


刚学完java基础,springboot入门_jdbc_19


3.利用js获取到表单数据,传递到后台:

刚学完java基础,springboot入门_学生的登陆注册功能_20


当然,这是登录界面的。这样,就完成了前后台交互。

就此告一段落。