快速搭建Spring boot CRUD-HelloWorld程序

最新推荐文章于 2025-06-11 21:13:47 发布

zosoyi

最新推荐文章于 2025-06-11 21:13:47 发布

阅读量658

点赞数

CC 4.0 BY-SA版权

分类专栏： spring-boot 文章标签： spring-boot

本文链接：https://blog.youkuaiyun.com/zosoyi/article/details/78318103

spring-boot 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用Spring Boot快速搭建Web应用，包括项目初始化、前后端交互、Tomcat配置及MySQL数据库连接等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用spring官方网站一键生成基于spring boot的maven project

这里写图片描述

网站地址：http://start.spring.io/

填写好自定义的包名和项目名称。这里取名为springBootDemo，并选择web依赖，如下所示，点击”Generate Project”，获得一个maven项目。

这里写图片描述

2.将项目以maven project的形式导入到eclipse里

这里写图片描述

一导入发现pom.xml出错，怎么办？

这里写图片描述

解决报错的方法参考了这里：http://blog.youkuaiyun.com/u014551624/article/details/51898748

这里写图片描述

选上”Force Update of Snapshots/Releases”，强制更新一下，红叉就没有了。

3.项目结构展示

这里写图片描述

SpringBootDemoApplication.java
其中的run方法用于启动spring boot内嵌的tomcat。

package com.example.springBootDemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootDemoApplication.class, args);
        //这句代码用于启动内嵌tomcat
    }
}

static
用于放置一些静态文件，如html，css，js等。

application.properties
配置文件，不仅可以配置spring boot本身，还可以配置其他东西，如数据库账号密码等。

4.内嵌tomcat关闭的配置

项目里只有tomcat的开启，而没有关闭（其实可以在eclipse控制台点stop来关闭），而更新java代码时需要重启tomcat。这里我们来配置tomcat的关闭方法。

(1)pom.xml添加如下dependency

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-actuator</artifactId>
</dependency>

(2)application.properties中添加如下配置信息

#启用shutdown
endpoints.shutdown.enabled=true
#禁用密码验证
endpoints.shutdown.sensitive=false

(3)关闭命令为

http://localhost:8080/shutdown

手动关闭不够方便，添加以下片段可自动重启tomcat

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-devtools</artifactId>
</dependency>

5.创建前后台交互的Controller

新建HelloController类

package com.example.springBootDemo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/*
@Controller换成@RestController，下面的方法的返回值就全都是@ResponseBody的形式，
就不用再写@ResponseBody了，下面可以换掉试一下
*/
@Controller 
@RequestMapping("/hello")
public class HelloController {

    @RequestMapping("/sayHello")
    @ResponseBody  
    public String sayHello() {
        return "Hello Spring Boot!";
    }
}

@RestController表示是@Controller和@ResponseBody的组合，在类的头写上@RestController则表示这个类内部所有的方法都加上了@ResponseBody，@RequestMapping则是请求路径。

6.创建前台html页面

在static文件夹里面添加静态文件，如下所示，引入jQuery以方便发起ajax请求。
这里写图片描述

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>index</title>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <button onclick="sayHello()">sayHello</button>
        <button onclick="shutdown()">shutdown</button>
        <script type="text/javascript">
            function sayHello(){
                $.ajax({
                    url:"http://localhost:8080/hello/sayHello",
                    type:"POST",
                    success:function(msg){
                        console.log(msg)
                    }
                })
            }
            function shutdown(){
                $.ajax({
                    url:"http://localhost:8080/shutdown",
                    type:"POST",
                    success:function(msg){
                        console.log(msg)
                    }
                })
            }
        </script>
    </body>
</html>

7.运行项目

在SpringBootDemoApplication里面，右键，Run As Java Application，可以看到Spring boot成功启动，在控制台显示启动信息。
这里写图片描述

最终显示Started SpringBootDemoApplication in 5.802 seconds (JVM running for 6.725)的字样则表示启动成功。

在浏览器地址栏输入http://localhost:8080/，可看到我们的index页面，只有两个按钮。
这里写图片描述

点击sayHello，可看到控制台输出返回值
这里写图片描述

点击shutdown，则关闭tomcat
这里写图片描述

8.Spring Boot连接MySQL数据库

(1) pom.xml添加两条依赖，使用jpa data（能使用hibernate注解），连接MySQL。为了前后台能使用json交互，再添加一个依赖net.sf.json-lib

<!-- JPA Data (We are going to use Repositories, Entities, Hibernate, etc...) -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>

<dependency>    
    <groupId>net.sf.json-lib</groupId>    
    <artifactId>json-lib</artifactId>    
    <version>2.4</version>    
    <classifier>jdk15</classifier>    
</dependency>

(2)application.properties里面添加MySQL连接参数：

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=root

(3)新建了一个user表，添加了三条数据：

这里写图片描述

(4)新建User类：

package com.example.springBootDemo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {

    @Id
    @GeneratedValue(strategy=GenerationType.AUTO)
    private Integer id;
    private String username;
    private String password;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
}

(5)新建一个UserDao接口，继承CrudRepository。
泛型里写上相应的对象(User)和id(Integer)的数据类型，CrudRepository内置一些增删改查方法，不用自己写就可以调用。

package com.example.springBootDemo;

import org.springframework.data.repository.CrudRepository;

public interface UserDao extends CrudRepository<User, Integer>{

}

(6)在HelloController里面写添加和查找的方法：

package com.example.springBootDemo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

@RestController 
/*这里换成了@RestController，下面都不用写@ResponseBody，默认自带@ResponseBody*/
@RequestMapping("/hello")
public class HelloController {

    @Autowired
    private UserDao userDao;

    @RequestMapping("/findAll")
    public String findAll() {
        Iterable<User> u = userDao.findAll();
        JSONArray jsonobj = JSONArray.fromObject(u);
        return jsonobj.toString();
    }

    @RequestMapping("/add")
    public String addNewUser (@RequestParam String username, @RequestParam String password) {
        User user = new User();
        user.setPassword(password);
        user.setUsername(username);
        userDao.save(user);
        return "saved";
    }

    @RequestMapping("/getUserById")
    public String getUserById(@RequestParam Integer id) {
        User u = userDao.findOne(id);
        JSONObject jsonobj = JSONObject.fromObject(u);
        return jsonobj.toString();
    }

    @RequestMapping("/sayHello")
    public String sayHello() {
        return "hello spring boot!";
    }
}

(7)前端页面添加相应的标签以便发起相应的请求

<!DOCTYPE html>
<html>
    <head>
        <title>index</title>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <button onclick="sayHello()">sayHello</button>
        <button onclick="findAll()">findAll</button><br>
        username:<input id="username"><br>
        password:<input id="password"><br>
        <button onclick="addUser()">addUser</button><br>
        userId<input id="userId"><br>
        <button onclick="getUserById()">getUserById</button><br>
        <button onclick="shutdown()">shutdown</button>
        <script type="text/javascript">
            function sayHello(){
                $.ajax({
                    url:"http://localhost:8080/hello/sayHello",
                    type:"POST",
                    success:function(msg){
                        console.log(msg)
                    }
                })
            }
            function findAll(){
                $.ajax({
                    url:"http://localhost:8080/hello/findAll",
                    type:"POST",
                    success:function(msg){
                        console.log(msg)
                    }
                })
            }
            function addUser(){
                var username = $("#username").val();
                var password = $("#password").val();

                $.ajax({
                    url:"http://localhost:8080/hello/add",
                    type:"POST",
                    data:{
                        "username":username,
                        "password":password
                    },
                    success:function(msg){
                        console.log(msg)
                    }
                })
            }
            function getUserById(){
                var id = $("#userId").val();
                $.ajax({
                    url:"http://localhost:8080/hello/getUserById?id="+id,
                    type:"POST",
                    success:function(msg){
                        console.log(msg)
                    }
                })
            }
            function shutdown(){
                $.ajax({
                    url:"http://localhost:8080/shutdown",
                    type:"POST",
                    success:function(msg){
                        console.log(msg)
                    }
                })
            }
        </script>
    </body>
</html>

(8)操作测试
简陋的页面：

这里写图片描述

点击findAll可以看到控制台输出：

[{"password":"aaa","id":1,"username":"aaa"},{"password":"bbb","id":2,"username":"bbb"},{"password":"ccc","id":3,"username":"ccc"}]

添加新用户，输入username:“ddd”，password:“ddd”，点击addUser，可以看到控制台输出返回信息saved。

查找新添加的用户，是第4个，userId输入4，点击getUserById，可以看到控制台输出新用户的信息。
{"password":"ddd","id":4,"username":"ddd"}

这里写图片描述

修改和删除也有内置方法，写起来也类似，这里就不在赘述。

参考资料：Accessing data with MySQL