Spring boot项目搭建（前端到数据库，超详细）,大神勿进！

田维常

发布于 2021-03-16 10:57:36

8590

发布于 2021-03-16 10:57:36

前段时间，有很多小伙伴私下跟我说，想搞一个项目实战。今天刚好我有空，于是，我就搞了一个从前端到后台的用户系统(demo)。用户系统基本是所有项目中都必须有的基础模块，可大可小。大的需要很大一个团队来维护，小的一个人兼职就能搞定。对于很多还未参与工作的同学来说，这个项目也可以练练手，说不定，第一份工作进去就是搞用户模块呢

。

金三银四如何准备面试

技术栈

Spring Boot 、Jpa 、Thymeleaf、HTML、Maven、MySQL。

对于技术栈，还不清楚的同学，自行查找相关资料，至少知道个大概是干啥的。

需求功能

现在需要对用户信息进行新增、列表展示、用户详情展示、信息修改、信息删除等功能。

用户信息：姓名、密码、手机号码、年龄。

数据库表

自己本地安装MySQL，并创建数据库，然后在创建一张用户表。

建表语句

CREATE TABLE `user` (
  `uid` bigint NOT NULL AUTO_INCREMENT,
  `uname` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
  `password` varchar(6) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `tel` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `age` int DEFAULT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

项目构建

项目整体目录

接下来，我们就一步一步，把这些代码理清楚。

整体项目采用的是

html-->controller--->service--repository-->DB

这也是当前实际开发中相对比较流行的，但为了演示，我这里就就用entity实体类就搞定了。

实际开发中会有其他什么O之类的，比如说：DTO/VO/BO.....。有的项目使用的是DTO，有的可能使用的是BO等。进入项目组了，按照项目组的开发规范来就行了，实在不理解的话，建议你先学会模仿别人是怎么做的。

废话不多说，直接开干！

创建Spring Boot项目

可以使用spring官网给创建方式，地址：

https://start.spring.io/

这里也可以参考另外一篇文章：

如何快速构建Spring Boot基础项目？

maven依赖

在项目的pom.xml中添加如下配置

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <!-- Spring Boot 项目 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
    </parent>
    <!-- 项目 maven 坐标 -->
    <groupId>com.tian.user</groupId>
    <artifactId>spring-boot-jpa-thymeleaf</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!-- 项目名称 -->
    <name>spring-boot-jpa-thymeleaf</name>  

    <dependencies>
        <!-- web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- jpa -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa
            </artifactId>
        </dependency>
        <!-- MySQL -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <fork>true</fork>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

主要是SpringBoot项目parent、web、MySQL、jpa、thymeleaf依赖，这样就把相关的jar包给依赖进来了。

启动类

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

/**
 * @author java 后端技术全栈
 * 就是一个简单的启动类
 */
@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    } 
}

注意：此时数据库相关信息没有配置进项目里，所以，项目是启动不了的。

集成MySQL数据库

在resource目录下，创建一个application.properties文件，加入以下内容：

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456

注意：如果MySQL是8.0版本，必须要配置服务时区，否则会启动不了。

此时项目就可以正常启动了。

集成 Jpa

在application.properties中添加

spring.jpa.properties.hibernate.hbm2dl.auto=create
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.show-sql=true

创建一个UserRepository

package com.tian.user.repository;

import com.tian.user.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository<User, Long> { 
}

这样jpa就集成就来了。

集成Thymeleaf

前面我们已经把jar包给以来进来了，需要在application.properties中添加

spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.mode=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html

然后在resources目录下添加两个文件夹：

新增用户

在templates目录下创建index.html

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <!-- 为了减少篇幅，样式代码这里就省略掉，样式不是我们的重点内容 -->
</head>
<body>
<div id="content">
    <form action="/save" method="post">
        姓名：<input type="text" name="uname"><br/>
        年龄：<input type="text" name="age"><br/>
        密码：<input type="text" name="password"><br/>
        手机号码：<input type="text" name="tel"><br/>
        <button>新增</button>
    </form>
</div>
</body>

创建UserService接口和UserServiceImpl实现类。

public interface UserService {
    void add(User user);
}
@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserRepository userRepository;
    @Override
    public void add(User user) {
        userRepository.save(user);
    }
}

创建UserController

@Controller
public class UserController {
    @Resource
    private UserService userService;

    @RequestMapping("/index")
    public String add(Model model) {
        return "index";
    }

    @RequestMapping("/save")
    public String save(Model model,User user) {
        userService.add(user);
        //跳转到用户列表
        return "redirect:/userList";
    }
}

这样一个新增功能我们就做完了。这里我们顺带着把用户列表也给搞出来。

用户列表

在templates目录下创建user_list.html页面

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- 为了减少篇幅，样式代码这里就省略掉，样式不是我们的重点内容 -->
</head>
<body>
<a href="/">
    <div id="ret">
        <button>新增用户</button>
    </div>
</a>
    <table id="content" style="border: 1px solid;">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>手机号码</th>
            <th>操作</th>
        </tr>
        <tr th:each="user:${users}">
            <td th:text="${user.uname}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${user.tel}"></td>
            <td><a th:href="@{'/userInfo/'+${user.uid}}" target="_blank">用户详情</a> |
                <a th:href="@{'/deleteById/'+${user.uid}}" target="_blank">删除用户信息</a> |
                <a th:href="@{'/update/'+${user.uid}}" target="_blank">修改用户信息</a>
            </td>
        </tr>
    </table>
</body>
</html>

在service和实现类中添加用户列表的方法，这里没有做分页。

//UserService中添加
List<User> findAll();
//UserServiceImpl中添加方法
@Override
public List<User> findAll() {
    return userRepository.findAll();
}

然后我们再在controller中添加一个方法用户列表的方法。

@RequestMapping("/userList")
public String index(Model model) {
    List<User> users = userService.findAll();
    model.addAttribute("users", users);
    return "user_list";
}

好了，自此用户列表也搞定。下面我们来启动项目，然后演示一下：

演示

新增流程的演示，访问：

http://localhost:8080/

来到新增用户页面：

填入用户信息

点击新增，来到用户列表：

用户详情

在templates目录下创建user_info.html页面：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户详情</title>
</head>
<body>
<div id="content">
姓名：<input type="text" th:value="${user.uname}"><br/>
年龄：<input type="text" th:value="${user.age}"><br/>
密码：<input type="text" th:value="${user.password}"><br/>
手机号码：<input type="text" th:value="${user.tel}"><br/>
</div>
</body>
</html>

在service和实现类分别添加相应的方法。

//UserService中添加方法
User findById(Long id);
//UserServiceImpl添加方法
@Override
public User findById(Long id) {
    return userRepository.getOne(id);
}

然后在controller中添加方法

@RequestMapping("/userInfo/{id}")
public String userInfo(Model model, @PathVariable("id") Long id) {
    User user = userService.findById(id);
    model.addAttribute("user", user);
    return "user_info";
}

然后再次启动项目，我们就直接可以从用户列表中进入到用户详情里。

点击：用户详情。

OK，到此，用户详情也就搞定了。剩下的我们继续搞修改功能。

用户信息修改

在templates目录下创建update.html页面。

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<div id="content">
    <form action="/updateById" method="post">
        <input type="text" th:value="${user.uid}" name="uid"><br/>
        姓名：<input type="text" th:value="${user.uname}" name="uname"><br/>
        年龄：<input type="text" th:value="${user.age}" name="age"><br/>
        密码：<input type="text" th:value="${user.password}" name="password"><br/>
        手机号码：<input type="text" th:value="${user.tel}" name="tel"><br/>
        <button>修改</button>
    </form>
</div>
</body>

UserRepository中添加更新方法：

@Repository
public interface UserRepository extends JpaRepository<User, Long> {

    @Modifying
    @Query("update User u set u.tel=?1 ,u.uname=?2 , u.password=?3 where  u.uid=?4")
    void updateById(String tel, String uname, String password, Long uid);
}

继续在UserService和实现类中添加想要的方法。

//UserService中添加方法
void update(User user);
//UserServiceImpl中添加方法
@Transactional
@Override
public void update(User user) {
    userRepository.updateById(user.getTel(), user.getUname(), user.getPassword(), user.getUid());
}

注意：UserServiceImpl添加的这个update方法，必须要事务注解@Transactional，否则更新失败。异常信息如下：

javax.persistence.TransactionRequiredException: Executing an update/delete query
 at org.hibernate.internal.AbstractSharedSessionContract.checkTransactionNeededForUpdateOperation(AbstractSharedSessionContract.java:398) ~[hibernate-core-5.3.10.Final.jar:5.3.10.Final]

加上事务注解@Transactional就搞定了。

然后在controller中添加方法

//修改提交
@RequestMapping("/updateById")
public String updateById(Model model,User user) {
    userService.update(user);
    return "redirect:/userList";
}
//跳转到修改页面
@RequestMapping("/update/{id}")
public String update(Model  model, @PathVariable("id") Long id) {
    User user = userService.findById(id);
    model.addAttribute("user", user);
    return "update";
}

再次启动项目，继续来到用户列表页面：