2024最新版本idea SpringBoot创建web项目(详细介绍如何搭建和配置spring boot web,以及写出一个简单的前后端交互界面)

1.创建springboot项目:

新建项目 -> Spring Boot ->自定义写你的项目名称、项目位置等、语言java、类型选择maven,最后选择JDK版本,这里推荐17以上,对应Java也一样,最后选jar包 -> next

首先选择springboot版本,我这里为3.3.5,接下来导入依赖,springboot功能强大, 能直接导入而不需要手敲,按图先导入这几种(可以直接搜索),下面为对这几种依赖的个人解释:
Lombok日志文件,springboot开发必不可少

Spring Web:添加web依赖,web开发必须

Thymeleaf:处理web环境

JDBC API:数据库驱动

MySQL Driver:用于与MySQL数据库交互

CycloneDX SBOM support:用于跟踪,管理依赖项

接下来点击创建,等待idea构建完毕

2.配置application.yml文件

开始时你只能看到applicaiton.propitious,右键 -> 重构 -> 改为 application.yml

删除里面代码,复制为如下代码:

spring:
  application:
    name: xlxz

  datasource:
    url: jdbc:mysql://localhost:3306/【这里替换你建的数据库名】?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root #这里替换你的数据库用户名
    password: 123456 #这里替换你的数据库密码
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis-plus:
  mapper-locations: classpath:mapper/*.xml

3.接下来你就可以自己测试了!(可以自己写,也可以用文末我的简单示例)

4.如果测试不成功,如注解大量报错这些,则可能是最新的springboot版本太超前了,与mybatis-plus-boot-starter 不兼容,则需要自己手动导入一下依赖:

在pom.xml中,

<dependencies>里面导入以下依赖:
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.7</version>
    <exclusions>
        <exclusion>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
        </exclusion>
    </exclusions>
</dependency>

<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>3.0.3</version>
</dependency>

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

这三个依赖大致作用就是解析和sql驱动。

然后右键 -> 点击maven ->重新加载项目

就可以解决报错问题(当然这是基础的构建问题)

5.简单测试:

首先建一个简单的数据库:

create database users1;

use users1;

CREATE TABLE `user` (
  `userid` int NOT NULL AUTO_INCREMENT COMMENT '用户id',
  `username` varchar(255) DEFAULT NULL COMMENT '用户名字',
  `userPassword` varchar(255) DEFAULT NULL COMMENT '用户密码',
  PRIMARY KEY (`userid`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

然后插入一个简单数据:例如下:

然后按下面这个格式建包建类:

各类的代码如下:(记得代码中自己替换成自己项目的路径,否则会报红)

UserController:

package com.xlxz.springboot3.controller;

import com.xlxz.springboot3.entiy.User;

import com.xlxz.springboot3.service.UserService;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller
public class UserController {
    @Resource
    UserService userService;

    @GetMapping("/index")
    public  String list(Model model){
        List<User> list = userService.list();
        model.addAttribute("list", list);
        return "index";
    }
}

User:

package com.xlxz.springboot3.entiy;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("user")
public class User {
    @TableField("userid")
    private int userid;
    @TableField("username")
    private String username;
    @TableField("userPassword")
    private String userPassword;
}

UserMapper:

package com.xlxz.springboot3.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.xlxz.springboot3.entiy.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper extends BaseMapper<User> {
}

UserServiceImpl:

package com.xlxz.springboot3.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.xlxz.springboot3.entiy.User;
import com.xlxz.springboot3.mapper.UserMapper;
import com.xlxz.springboot3.service.UserService;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {

}

UserServiceI:

package com.xlxz.springboot3.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.xlxz.springboot3.entiy.User;

public interface UserService extends IService<User> {
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4CAF50;
            color: #333;
            padding: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #00796B;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<div>
    <h1 >这是用户列表页面</h1>
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>密码</th>
        <tbody>
        <tr th:each="user : ${list}">
            <td th:text="${user.userid}">1td>
            <td th:text="${user.username}">用户名td>
            <td th:text="${user.userPassword}">密码td>
                </tr>
        </tbody>
                </table>
</div>
</body>
</html>

application.yml:这个已经有了,主要替换数据库信息

spring:
  application:
    name: xlxz

  datasource:
    url: jdbc:mysql://localhost:3306/users1?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis-plus:
  mapper-locations: classpath:mapper/*.xml

UserMapper.xml一般建好就有代码了,没有就复制如下:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

</beans>

启动:

没有爆红就OK,打开浏览器,输入:http://localhost:8080/index 运行:

测试完成,实现了一个简单的前后端数据库交互

对于想要快速搭建并理解Spring Boot与Vue.js前后端分离项目的新手,使用集成开发环境IDEA或Eclipse来创建项目是最佳选择。这里将提供详细步骤以帮助你完成从数据库读取数据的集成过程: 参考资源链接:[全栈java-springboot与vue教学资源库网站源码解析](https://wenku.csdn.net/doc/mvcpms54yj) 1. **环境准备**:首先,确保你的计算机上安装了Java Development Kit (JDK),并配置好环境变量。接着,安装IDEA或Eclipse,以及Maven构建工具。 2. **创建Spring Boot项目**: -IDE中选择创建新的Spring Boot项目- 通过Spring Initializr选择需要的依赖项,例如Spring Web, Spring Data JPA, MySQL Driver等。 - 创建完成后,IDE通常会自动生成项目的主类配置文件。 3. **配置数据库连接**: -项目的`application.properties`或`application.yml`文件中配置数据库连接信息。例如,配置MySQL数据库的连接信息。 - 在`pom.xml`文件中添加MySQL驱动依赖。 4. **搭建Vue前端项目**: - 使用Vue CLI创建一个新的Vue项目,根据提示选择配置- 在Vue项目中,安装axios库用于HTTP请求,这将用于前端与后端的数据交互。 5. **集成前后端**: -Spring Boot后端创建RESTful API接口,用于处理前端的请求并从数据库获取数据。 - 在Vue前端中,使用axios调用后端接口并接收数据,然后通过Vue的组件进行展示。 6. **测试项目**: - 运行Spring Boot应用,确保后端API正常工作。 - 启动Vue项目,访问前端页面并通过界面发起请求测试数据是否能正确显示。 完成以上步骤后,你应该已经搭建一个基本的前后端分离Web项目,并实现了从前端到后端再到数据库的完整数据交互流程。为了进一步深化理解,可以参考《全栈java-springboot与vue教学资源库网站源码解析》来查看项目源代码详细说明文档,该资源不仅提供了实战项目的源码,还包括了丰富的技术细节实现方法,将有助于你在全栈开发领域的学习进步。 参考资源链接:[全栈java-springboot与vue教学资源库网站源码解析](https://wenku.csdn.net/doc/mvcpms54yj)
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值