java开发之Springboot项目搭建(前端到数据库,超详细)

作者 : admin 本文共10350个字,预计阅读时间需要26分钟 发布时间: 2021-07-22 共9人阅读

java开发之Springboot项目搭建(前端到数据库,超详细)

下面详细谈谈我的第一个springboot项目搭建,希望会给还在摸索的同学一点帮助。

项目说明:

开发环境:Eclipse 4.42

框架:Springboot

工具:Maven

前端:Html、Thymeleaf

后台:Java、JPA (Hibernate)

数据库:Mysql

 

为什么要搭建Springboot项目?

教科书式的阐述这里就不说了,我就总结为两个词语 “简单、方便”。

为了更加清晰的展示,现在我用一个全新的工作空间来演示springboot项目的搭建过程。

java开发之Springboot项目搭建(前端到数据库,超详细)插图

【01】创建一个简单的maven项目(如果Eclipse不支持Maven项目创建,请先自行安装Maven,不会问度娘):

(1.1)右键单击 –> New –> Other

java开发之Springboot项目搭建(前端到数据库,超详细)插图(1)

(1.2)输入Maven,选中Maven Project,点击Next。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(2)

(1.3)勾选 Use default Workspace location,点击Next。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(3)

(1.4) 选择 maven-archetype-quickstart,点击Next。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(4)

(1.5)填写GroupId、ArtifactId、为了统一,你们也照着这个来写吧 ,真实就是填公司性质(.com)和域名(springboot)。填写好后,Package一栏会自动生成,这也就是项目中的包名,点击Finish。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(5)

(1.6)可以看到,我们的工程已经创建成功了。但貌似现在有一些不完美的地方需要解决。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(6)

(1.7)工程创建成功后,可以看到又一个小红叉,虽然不影响程序运行,但面对有强迫的我们,看着很少难受。选中工程:右键单击–> Maven –> Update Project

java开发之Springboot项目搭建(前端到数据库,超详细)插图(7)

(1.8)什么都不管,直接点击OK

java开发之Springboot项目搭建(前端到数据库,超详细)插图(8)

(1.9)奈斯!小红叉已经被我们消灭了!

java开发之Springboot项目搭建(前端到数据库,超详细)插图(9)

【02】加入Springboot框架

(2.1)我们先双击打开pom.xml文件,把不要的东西先干掉,最后保留如下所示即可:

  1. <project xmlns=“http://maven.apache.org/POM/4.0.0” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
  2. xsi:schemaLocation=“http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd”>
  3. <modelVersion>4.0.0</modelVersion>
  4. <groupId>com</groupId>
  5. <artifactId>springboot</artifactId>
  6. <version>0.0.1-SNAPSHOT</version>
  7. <packaging>jar</packaging>
  8. </project>

 

(2.2)定义父类:springboot 所有jar包版本,这里为 2.0.5.RELEASE 版本

  1. <!– Spingboot相关jar包版本 –>
  2. <parent>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter-parent</artifactId>
  5. <version>2.0.5.RELEASE</version>
  6. </parent>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(10)

(2.3)加入springboot核心包、和web开发必须的包

  1. <!– 相关jar包 –>
  2. <dependencies>
  3. <!– Springboot核心jar包 –>
  4. <dependency>
  5. <groupId>org.springframework.boot</groupId>
  6. <artifactId>spring-boot-starter</artifactId>
  7. </dependency>
  8. <!– web开发包:包含Tomcat和Springmvc –>
  9. <dependency>
  10. <groupId>org.springframework.boot</groupId>
  11. <artifactId>spring-boot-starter-web</artifactId>
  12. </dependency>
  13. </dependencies>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(11)

(2.4)可以看到,我们项目测试类现在还有一个大红叉,是因为我们刚刚吧把初始的Junit包干掉了,现在,我们重新加入Junit包。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(12)

(2.5)加入Junit测试包,保存。

  1. <!– Junit测试jar包 –>
  2. <dependency>
  3. <groupId>junit</groupId>
  4. <artifactId>junit</artifactId>
  5. <scope>test</scope>
  6. </dependency>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(13)

(2.6)重新maven update一下,小红叉就没有了(这里JRE我手动换成了自己常用的jdk1.8)。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(14)

(2.7)我们创建一个App类,用来启动项目用(创建项目的时候已经有这个类了,现在只需要修改代码为如下)。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(15)

  1. package com.springboot;
  2. import org.springframework.boot.SpringApplication;
  3. import org.springframework.boot.autoconfigure.SpringBootApplication;
  4. /**
  5. * 项目启动类
  6. */
  7. @SpringBootApplication
  8. public class App {
  9. public static void main(String[] args) {
  10. SpringApplication.run(App.class, args);
  11. }
  12. }

 

里面就一个注解,和一个启动程序的方法。

(2.8)创建Controller:我们同样举例以万年不变的User为例,取名UserController。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(16)

  1. package com.springboot.controller;
  2. import org.springframework.stereotype.Controller;
  3. import org.springframework.web.bind.annotation.RequestMapping;
  4. import org.springframework.web.bind.annotation.ResponseBody;
  5. @Controller
  6. public class UserController {
  7. @RequestMapping(“/hello”)
  8. @ResponseBody
  9. public String hello() {
  10. return “Hello World !!!”;
  11. }
  12. }

 

(2.9)启动项目,执行app类中的main函数,如果正常,控制台出现下面输出,则项目已经启动成功了。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(17)

(2.10)我们在地址栏目输入 localhost:8080/hello 进行访问,如果能看到Hello world字样,则说明项目springboot已经搭建成功了。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(18)

【03】常用配置设置
springboot项目默认配置文件是resources文件夹下的application.yml文件,现在项目没有这些东西,需要手动进行创建。

(3.1)创建resources文件夹(该文件夹主要存放各种配置资源),如果项目已经有 src/main/resources文件夹,则该步骤略过。如果没有,请按照链接所示创建文件夹:https://www.cnblogs.com/zhangyuanqiang/p/9183908.html(敝人博客园文章)

java开发之Springboot项目搭建(前端到数据库,超详细)插图(19)

(3.2)创建 application.yml 文件,选中src/main/java/resources/文件夹–>New–>Other

java开发之Springboot项目搭建(前端到数据库,超详细)插图(20)

(3.3)选择General文件夹下的File,点击Next

java开发之Springboot项目搭建(前端到数据库,超详细)插图(21)

(3.4)输入application.yml,点击Finish。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(22)

(3.5) 完成创建如图所示

java开发之Springboot项目搭建(前端到数据库,超详细)插图(23)

(3.6)打开application.yml文件进行服务器配置(注意排版保持一致,也注意键值对的冒号后有一个空格)

  1. server:
  2. port: 80
  3. session-timeout: 30
  4. tomcat.max-threads: 0
  5. tomcat.uri-encoding: UTF-8

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(24)

(3.7)这样配置后,重启项目,我们就可以不用输入端口号了。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(25)

【注】当你手动熟悉了上面的流程,也可以试试 如何快速创建一个 Springboot 项目 。

————————————————————————————————————-

【04】修改项目为热部署(凡有文件修改保存后,自动重启)

(4.1)打开pom.xml,加入下面依赖,最后重启一次项目。

  1. <!– spring-boot热部署 –>
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-devtools</artifactId>
  5. </dependency>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(26)

(4.2)然后修改返回页面的语句,保存,你会发现项目可以自动重启了。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(27)

(4.3)并且也能访问成功,说明我们的热部署也已经配置成功了。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(28)

【05】配置 Thymeleaf

现在后台已经OK,后台的数据需要显示到前端,我们这里前端显示,用springboot常配套的 thymeleaf(相当于c标签),

这个使用起来很简单,基本一用就会,会c标签的更是一点即通。

下面是我对thymeleaf常用使用方式总结,不懂的可以看看:https://blog.csdn.net/sunnyzyq/article/details/86685697

(5.1)在pom.xml中加入thymeleaf

  1. <!– thymeleaf –>
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter-thymeleaf</artifactId>
  5. </dependency>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(29)

(5.2)在resoures文件夹下分别创建templates(主要放html文件)和static(主要放css、js文件)文件夹

java开发之Springboot项目搭建(前端到数据库,超详细)插图(30)

(5.3)配置thymeleaf(这样配置后,再代码中返回到那个页面就不用写过多的前缀和后缀了,达到简化效果)

  1. spring:
  2. thymeleaf:
  3. prefix: classpath:/templates/
  4. suffix: .html
  5. mode: HTML5
  6. encoding: UTF-8
  7. content-type: text/html
  8. cache: false

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(31)

(5.4)再UserController.java文件中加入如下代码,保存。

  1. @RequestMapping(“/index”)
  2. public String index(Model model) {
  3. model.addAttribute(“name”, “jack”);
  4. model.addAttribute(“age”, 20);
  5. model.addAttribute(“info”, “我是一个爱学习的好青年”);
  6. return “index”;
  7. }

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(32)

(5.5)在 templates 文件夹下加入页面 index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>Index</title>
  6. </head>
  7. <body>
  8. 姓名:<input type=“text” th:value=“${name}”><br/>
  9. 年龄:<input type=“text” th:value=“${age}”><br/>
  10. 简介:<input type=“text” th:value=“${info}”><br/>
  11. </body>
  12. </html>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(33)

(5.5)由于配置文件进行了修改,这一次我们需要手动重启项目,启动后,输入 localhost/index 访问,可以看到数据已经成功显示到页面上了。
java开发之Springboot项目搭建(前端到数据库,超详细)插图(34)

到此为止,我们前台、后台已经打通了,接下来就差最后一步了,把数据存入数据库。

接下来,我们就采用 hibernate 将数据写入到数据库中。

首先到数据库肯定需要jdbc连接容器和hibernate的相关jar包。

【06】配置数据库链接

(6.1)在pom.xml中加入jdbc链接容器相关jar包。

  1. <!– jdbc链接容器 –>
  2. <dependency>
  3. <groupId>mysql</groupId>
  4. <artifactId>mysql-connector-java</artifactId>
  5. </dependency>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(35)

(6.2)配置数据库相关信息(注意datasource的层级是在spring下):

有数据库名称(我这里取名为boot)、数据库用户名、数据库密码等配置信息(这里你需要填你的数据库帐号和密码)

  1. datasource:
  2. url: jdbc:mysql://localhost:3306/boot
  3. driver-class-name: com.mysql.jdbc.Driver
  4. username: root
  5. password: zyq123
  6. initial-size: 10
  7. max-active: 20
  8. max-idle: 8
  9. min-idle: 8

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(36)

(6.3)在你的mysql中创建对应的数据库,名称和你的配置保持一致。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(37)

(6.4)加入hibernate相关jar包(springboot中,hibernate的相关jar包已经集成到jpa中了,所以这里只需要引入jpa一个jar依赖即可,再也不用像以前那样引入一连串的hibernate相关包了)

  1. <!– jpa(已包含hibernate) –>
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter-data-jpa</artifactId>
  5. </dependency>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(38)

(6.5)配置jpa(hibernate)相关信息:

  1. jpa:
  2. database: mysql
  3. show-sql: true
  4. hibernate:
  5. ddl-auto: update
  6. naming:
  7. physical-strategy: org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy
  8. database-platform: org.hibernate.dialect.MySQL5InnoDBDialect

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(39)

好了,配置现在全部已经搞好了,接下来就是写dao层了。

在写Dao层前,先创建我们的测试实体类User

【07】创建相关实体

(7.1)我们创建一个bean文件夹来存放相关实体,首先创建一个BaseBean类,里面主要存放每个实体的公共属性,比如:id,创建人,创建时间,更新人,更新时间等,这里我们就只写一个公共属性ID来演示。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(40)

  1. package com.springboot.bean;
  2. import javax.persistence.GeneratedValue;
  3. import javax.persistence.GenerationType;
  4. import javax.persistence.Id;
  5. import javax.persistence.MappedSuperclass;
  6. @MappedSuperclass
  7. public class BaseBean {
  8. /**
  9. * 自增长ID
  10. */
  11. @Id
  12. @GeneratedValue(strategy = GenerationType.IDENTITY)
  13. private Long id;
  14. }

 

 

(7.2)创建User实体类

java开发之Springboot项目搭建(前端到数据库,超详细)插图(41)

  1. package com.springboot.bean;
  2. import javax.persistence.Entity;
  3. import javax.persistence.Table;
  4. @Entity
  5. @Table(name = “user”)
  6. public class User extends BaseBean {
  7. private String name;
  8. private int age;
  9. private String info;
  10. public String getName() {
  11. return name;
  12. }
  13. public void setName(String name) {
  14. this.name = name;
  15. }
  16. public int getAge() {
  17. return age;
  18. }
  19. public void setAge(int age) {
  20. this.age = age;
  21. }
  22. public String getInfo() {
  23. return info;
  24. }
  25. public void setInfo(String info) {
  26. this.info = info;
  27. }
  28. }

 

(7.3)创建Service层接口

java开发之Springboot项目搭建(前端到数据库,超详细)插图(42)

  1. package com.springboot.service;
  2. import com.springboot.bean.User;
  3. public interface UserService {
  4. /**
  5. * 保存用户对象
  6. * @param user
  7. */
  8. void save(User user);
  9. }

 

(7.4)创建Service实现类(实现先暂时不管,等我们写了dao层再回来补上)

java开发之Springboot项目搭建(前端到数据库,超详细)插图(43)

  1. package com.springboot.service.impl;
  2. import org.springframework.stereotype.Service;
  3. import com.springboot.bean.User;
  4. import com.springboot.service.UserService;
  5. @Service
  6. public class UserServiceImpl implements UserService {
  7. @Override
  8. public void save(User user) {
  9. // TODO Auto-generated method stub
  10. }
  11. }

 

(7.5)加入dao层,该层接口都是去继承JpaRepository接口。

在一个项目中,我们往往会创建一个公共接口来处理到数据库的请求,比如分页等,然后每个接口去继承它即可。

所以我们首先创建这个公共dao层接口:CommonDao

java开发之Springboot项目搭建(前端到数据库,超详细)插图(44)

  1. package com.springboot.dao;
  2. import org.springframework.data.jpa.repository.JpaRepository;
  3. import org.springframework.stereotype.Repository;
  4. import com.springboot.bean.BaseBean;
  5. @Repository
  6. public interface CommonDao<T extends BaseBean> extends JpaRepository<T, Long> {
  7. }

 

(7.6)加入UserDao

java开发之Springboot项目搭建(前端到数据库,超详细)插图(45)

  1. package com.springboot.dao;
  2. import org.springframework.stereotype.Repository;
  3. import com.springboot.bean.User;
  4. @Repository
  5. public interface UserDao extends CommonDao<User> {
  6. }

 

(7.7)现在回到UserServiceImpl类中,补全之前未完成的代码

java开发之Springboot项目搭建(前端到数据库,超详细)插图(46)

OK,到此为止,所有链路都已经打通了,我们现在搞点数据测试一下。

【8】测试

(8.1)修改index.html如下:

java开发之Springboot项目搭建(前端到数据库,超详细)插图(47)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>Index</title>
  6. </head>
  7. <body>
  8. <form action=“/save” method=“post”>
  9. 姓名:<input type=“text” th:value=“${name}” name=“name”><br/>
  10. 年龄:<input type=“text” th:value=“${age}” name=“age”><br/>
  11. 简介:<input type=“text” th:value=“${info}” name=“info”><br/>
  12. <button>保存</button>
  13. </form>
  14. </body>
  15. </html>

 

(8.2)再UserController类中增加保存用户的方法:

  1. @Autowired
  2. private UserService userService;

 

  1. @RequestMapping(“/save”)
  2. @ResponseBody
  3. public String save(User user) {
  4. userService.save(user);
  5. return “save success !”;
  6. }

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(48)

(8.3)重启项目,再次访问 localhost/index

java开发之Springboot项目搭建(前端到数据库,超详细)插图(49)

(8.4)修改页面数据,点击保存

java开发之Springboot项目搭建(前端到数据库,超详细)插图(50)

(8.5)页面提示了 save success !则说明后台所有链路成功打通,数据保存成功!

java开发之Springboot项目搭建(前端到数据库,超详细)插图(51)

(8.6)我们进入数据库,刷新boot数据库,发现已经创建了的user实体表。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(52)

(8.7)打开user表,我们可以发现界面的数据已经成功的帮我们保存到数据库中了。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(53)

【9】读取数据库信息到页面展示(应读者需求,这小节是几个月后续写的内容)

(9.1)打开service层接口,添加获取用户对象的方法定义。

  1. /**
  2. * 获取所有用户对象
  3. * @return
  4. */
  5. List<User> getUserList();

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(54)

(9.2) 在实现类中添加方法的实现

  1. @Override
  2. public List<User> getUserList() {
  3. return userDao.findAll();
  4. }

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(55)

(9.3) 在Controller层中添加接受请求的方法

  1. @RequestMapping(“/userList”)
  2. public String userList(Model model) {
  3. List<User> userList = userService.getUserList();
  4. model.addAttribute(“userList”, userList);
  5. return “list”;
  6. }

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(56)

看到有的新同学留言,不知道Controller方法的含义,那么这里我补充说下:

1处:这个注解里写的是你前台页面发的请求路径,规范写法来讲,要与方法同名;

2处:这个对象,是用于存储数据,将数据带回页面;

3处:前面那个蓝色的userList是键,后面那个是你具体的数据,页面需要根据你的键从model里取数据。

4处:list为你返回的页面文件,比如我们这里为 list.html (配置文件中已经配了尾缀,所以这里不写后面的.html)

(9.4)我们添加一个展示页面 list.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>用户列表</title>
  6. </head>
  7. <body>
  8. <a href=“/”><button>返回添加页面</button></a>
  9. <div align=“center”>
  10. <table style=“border: 1px solid;”>
  11. <tr>
  12. <th>姓名</th>
  13. <th>年龄</th>
  14. <th>介绍</th>
  15. </tr>
  16. <tr th:each=“user:${userList}”>
  17. <td th:text=“${user.name}”></td>
  18. <td th:text=“${user.age}”></td>
  19. <td th:text=“${user.info}”></td>
  20. </tr>
  21. </table>
  22. </div>
  23. </body>
  24. </html>

 

java开发之Springboot项目搭建(前端到数据库,超详细)插图(57)

(9.5) 我们在浏览器上输入 localhost/userList,则可以看到数据库中的用户数据了

java开发之Springboot项目搭建(前端到数据库,超详细)插图(58)

(9.6)点击这个按钮,可以直接跳转到新增用户页面

java开发之Springboot项目搭建(前端到数据库,超详细)插图(59)

(9.7)来到页面后,我们可以继续添加用户,点击保存。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(60)

(9.8)然后再次访问列表页面,可以看到新数据库我们也能看见了。

java开发之Springboot项目搭建(前端到数据库,超详细)插图(61)

至此为止!所有springboot数据从前台到数据库,以及数据库到前台,已经完全实现了!我相信你也会了!

要是还不会,没关系!我这里还有源码给你,记得修改配置文件中数据库的帐号和密码哦!

源码:https://pan.baidu.com/s/1wGEhuPo52F5-w2daAtN_ag

(包含1-8节,第9节自己弄,总得自己写点什么才能真正学到!)

—————————————————————————————————-

其他相关推荐: 

(1)Springboot基于注解实现自动任务

(2)Springboot之JPA常用查询方法

(3)Springboot 拦截器

—————————————————————————————————-

项目写好了,你是不是想迫不及待的发版上去?没问题,发布公网的小白教程也有!

相关链接:网站开发:从写代码到公网访问整个流程

—————————————————————————————————-

 


滴石it网-Java学习中高级和架构师教程_Java企业级开发项目实战下载 » java开发之Springboot项目搭建(前端到数据库,超详细)

常见问题FAQ

发表评论

开通VIP 享更多特权,建议使用QQ登录