Mobile wallpaper 1Mobile wallpaper 2Mobile wallpaper 3Mobile wallpaper 4Mobile wallpaper 5Mobile wallpaper 6
Profile Image of the Author
Yu Felix
公告
2025/5/5 网站上线 2025/12/30 加入登录功能
标签
1653 字
8 分钟
2-编写后端-Springboot Vue 教程
2025-05-07
技术
Java
/
Vue
/
开发

创造你的第一个控制器#

接下来便可以正式写代码了 右键com.example.demo，新建一个名为 controller 的软件包

你无需删除前面的com.example.demo，接着在后面填写contorller,然后回车

右键controller，新建一个Java类

填写HelloController，回车

依据传统，我们写一个Hello，World！

package com.example.demo.controller;


import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
public class HelloController {
    @GetMapping
    @ResponseBody
    public String Hello() {
        return "Hello, World!";
    }
}

运行你的项目,按右上角绿色的三角按钮

或者右键项目主文件，DemoApplication.java

当终端出现这些字样代表运行成功，然后在浏览器的地址栏输入

localhost:8080

,冒号后面的端口号8080请注意终端中的提示，如果你和我不一样，请自行修改端口号，不过默认都是8080

这时你的浏览器应该会出现Hello，World！字样，代表你成功运行了你的第一个控制器。

创建你的数据库#

快捷键Win+Q，搜索MySQL并打开MySQL 9.2 Command Line Client

输入你的密码，密码是在MYSQL安装过程中设置的，

跳转到MYSQL的安装

输入SQL命令：

CREATE DATABASE blog CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

并回车

输入：

SHOW DATABASES;

来列出所有数据库，会发现已经有了blog。

创建用户并设置密码：

CREATE USER 'blog_user'@'%' IDENTIFIED BY '123456';

在这里的用户名是

blog_user

，密码是

123456

。你也可以按自己想的修改用户名与密码。 授予用户对blog数据库的所有权限：

GRANT ALL PRIVILEGES ON blog.* TO 'blog_user'@'%';

最后刷新权限：

FLUSH PRIVILEGES;

快捷键Win+Q，搜索MySQL并打开Workbench

点击+号按钮

填写信息

这时你的主页会出现这个数据库，单击打开

按图所示创建user表

打开user表并随便填写一些假数据

至此你已经成功创建了你的user表

连接你的数据库#

安装MySQL依赖 Maven Repository: com.mysql » mysql-connector-j » 9.2.0

<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <version>9.2.0</version>
</dependency>

打开application.properties，配置数据库连接 注意要在spring.datasource.url=jdbc:mysql://localhost:3306/后填写自己的数据库名， spring.datasource.username=数据库用户 spring.datasource.password=这里填写密码

# MySQL数据库连接配置
spring.datasource.url=jdbc:mysql://localhost:3306/blog
spring.datasource.username=blog_user
spring.datasource.password=这里填写密码
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

将后端与你的数据库关联起来#

新建软件包entity，并创建一个User类，其中User类和user表同名，可以不区分大小写，因为类名命名规则通常都是首字母大写的驼峰命名法则。

到此我们需要安装Lombok依赖，用于减少样板代码，提高开发效率。 在此我推荐去相关依赖的官网，找到最新版本的依赖导入方式，否则会出现各种奇奇怪怪的报错。 Lombok官网Maven依赖导入：

Maven

、 找到这两段代码。

<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <version>1.18.38</version>
  <scope>provided</scope>
</dependency>
<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-compiler-plugin</artifactId>
  <configuration>
    <annotationProcessorPaths>
      <path>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.38</version>
      </path>
    </annotationProcessorPaths>
  </configuration>
</plugin>

==请注意，找到对应的地方，一个是

<dependency></dependency>

，一个是

<plugin></plugin>

导入依赖后不要忘记同步一下Maven更改 在设置里找到插件并下载lombok插件

点击构建、执行、部署 -> 编译器 -> 注解处理器 -> 启用注解处理 ->确定

接下来回到User类继续编写。

package com.example.demo.entity;


import lombok.Data;


@Data
public class User {
  @TableId(type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
}

在这里，我们使用了Lombok的Data注解，自动为id，username，password这些声明生成了对应的操作方法（如 getter、setter、toString()、equals()/hashCode() 等） 我们只需声明变量，无需手动编写对应方法，提高了开发效率。 这里的id，username，password和user表的内容会自动一一对应。

请注意，MySQL里的命名方式采用下划线命名，而Java采用驼峰命名。 如果MySQL里的命名是user_name，则Java里要写成userName。当然你也可以手动映射对应，用@Column(username = “user_name”)注解来解决，更多其他方法请自行查找，在此不过多赘述。

在后端执行对应的数据库操作#

数据库操作这块也有一个依赖可以方便我们提高开发效率 MyBatis-Plus：安装 | MyBatis-Plus 找到Spring Boot3对应的依赖,并添加到pom.xml中，之前已经演示过很多次在此不做赘述。

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-spring-boot3-starter</artifactId>
    <version>3.5.12</version>
</dependency>

创建一个新的软件包mapper，并创建一个UserMapper接口，==注意是接口==

在UserMapper中写入

package com.example.demo.mapper;


import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.User;


public interface UserMapper extends BaseMapper<User> {


}

我们的UserMapper继承了mybatisplus的BaseMapper，BaseMapper已经包含了许多常用的CRUD（增删改查）操作，无需我们手动写SQL代码，可直接操作 User 实体对应的数据库表。 如果你有其他操作需求，可自行在UserMapper里添加代码。

在DemoApplication.java主文件添加

@MapperScan("com.example.demo.mapper")

@MapperScan("com.example.demo.mapper")

会自动将com.example.demo.mapper目录下的所有mapper类添加@Mapper注解。 @Mapper的作用是

标识一个接口是 MyBatis 的 Mapper 接口，并告诉 MyBatis 需要为这个接口生成动态代理实现类，从而能够执行 SQL 操作。

利用Thymeleaf将数据展示到前端浏览器#

安装Thymeleaf依赖 Maven Repository: org.springframework.boot » spring-boot-starter-thymeleaf » 3.4.5

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

可以省略<version>， 会自动继承<parent></parent>里的Spring Boot的版本

接着我们来继续编写HelloController控制器

package com.example.demo.controller;


import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;


import java.util.List;


@Controller
public class HelloController {
    @GetMapping
    @ResponseBody
    public String Hello() {
        return "Hello, World!";
    }


    @Autowired
    private UserMapper userMapper;


    @GetMapping("/alluser")
    public String alluser(Model model) {
        List<User> userList = userMapper.selectList(null);
        System.out.println("查询到的用户数据：" + userList);
        model.addAttribute("userList", userList);
        return "alluser";
    }
}

@Autowired 是 Spring 的依赖注入注解，用于自动装配 Bean。 这里 Spring 会自动查找 UserMapper 类型的 Bean 并注入到 userMapper 字段中。 @GetMapping 是 Spring MVC 的请求映射注解，专门处理 HTTP GET 请求。 Model 是 Spring MVC 提供的一个接口，用于在控制器和视图之间传递数据。 model.addAttribute("userList", userList);这将 userList 数据添加到模型中，可以在视图中通过 ${userList} 或 Thymeleaf 的 th:each 访问。

接着写一个网页

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
    <head>
      <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
      <p style="text-align: center;">用户列表</p>
        <div style="padding: 0 10%">
            <p style="width: 33%;float: left;">ID</p>
            <p style="width: 33%;float: left;">用户名</p>
            <p style="width: 33%;float: left;">密码</p>
        </div>
        <div style="padding: 0 10%" th:each="user : ${userList}">
            <p style="width: 33%;float: left;" th:text="${user.id}"></p>
            <p style="width: 33%;float: left;" th:text="${user.username}"></p>
            <p style="width: 33%;float: left;" th:text="${user.password}"></p>
        </div>
  </body>
</html>

th:each="user : ${userList}就像Python 里的for user in userList一样，我们可以用 . 符号取出user里的id，username，password等属性。

在resources里创建一个templates文件夹，创建一个alluser.html,这里的alluser与控制器返回的要对应

接着我们来运行一下

打开浏览器并在网址栏输入localhost:8080/alluser

可以发现我们取出了数据库里的所有user并展示在了浏览器上

分享

如果这篇文章对你有帮助，欢迎分享给更多人！

2-编写后端-Springboot Vue 教程
https://blog.yumui.top/posts/2-springboot-vue/
作者
Yu Felix
发布于
2025-05-07
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

3-前后端分离-Springboot Vue 教程
1-前期准备-Springboot Vue 教程
© 2025 Yu Felix. All Rights Reserved. / RSS / Atom / Sitemap
Powered by Astro & Mizuki  Version 7.6.5