返回

Spring MVC+Spring+MyBatis+Maven+Ajax+Json 注解开发的 12 实操步骤

前端

Spring MVC 与 MyBatis 开发入门指南

在本文中，我们将深入探讨如何使用 Spring MVC 和 MyBatis 构建一个 Java Web 应用程序。我们将从搭建开发环境开始，然后逐步指导您完成项目结构创建、数据操作和前端开发等各个步骤。

1. 开发环境搭建

必备组件

  • JDK 1.8 或更高版本
  • Maven 3.0 或更高版本
  • Spring Tool Suite (STS) 或 IntelliJ IDEA 等开发工具
  • MySQL 数据库和 Navicat 等数据库管理工具

安装步骤

  1. 安装 Java 开发工具包 (JDK)。
  2. 安装 Apache Maven。
  3. 安装 Spring Tool Suite (STS) 或 IntelliJ IDEA。
  4. 安装 MySQL 数据库。
  5. 安装 Navicat 或其他数据库管理工具。

2. 项目结构创建

项目配置

  1. 使用 Maven 创建一个新项目。
  2. 添加 Spring Web、MyBatis 和 MySQL 依赖项。

包结构

  1. 创建 src/main/java 包，用于存放 Java 源代码。
  2. 创建 src/main/resources 包，用于存放配置文件和资源文件。
  3. 创建 src/main/webapp 包，用于存放前端代码。
  4. 创建 src/test/java 包，用于存放测试代码。

3. 实体类与持久层接口

实体类

实体类表示数据库中的表。

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;
    private String email;

    // Getters and setters omitted
}

MyBatis 配置

MyBatis 配置文件定义了如何将实体类映射到数据库表。

<configuration>
    <mappers>
        <mapper resource="mybatis/UserMapper.xml" />
    </mappers>
</configuration>

持久层接口

持久层接口定义了针对实体类的数据库操作。

@Mapper
public interface UserMapper {
    List<User> findAll();

    User findById(Long id);

    void save(User user);

    void update(User user);

    void delete(Long id);
}

4. Service 层实现

Service 类

Service 类封装了业务逻辑。

@Service
public class UserService {

    @Autowired
    private UserMapper userMapper;

    public List<User> findAll() {
        return userMapper.findAll();
    }

    public User findById(Long id) {
        return userMapper.findById(id);
    }

    public void save(User user) {
        userMapper.save(user);
    }

    public void update(User user) {
        userMapper.update(user);
    }

    public void delete(Long id) {
        userMapper.delete(id);
    }
}

5. Controller 层实现

Controller 类

Controller 类处理用户请求。

@Controller
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping
    public List<User> findAll() {
        return userService.findAll();
    }

    @GetMapping("/{id}")
    public User findById(@PathVariable Long id) {
        return userService.findById(id);
    }

    @PostMapping
    public void save(@RequestBody User user) {
        userService.save(user);
    }

    @PutMapping("/{id}")
    public void update(@PathVariable Long id, @RequestBody User user) {
        user.setId(id);
        userService.update(user);
    }

    @DeleteMapping("/{id}")
    public void delete(@PathVariable Long id) {
        userService.delete(id);
    }
}

6. 前端页面开发

Thymeleaf 模板

Thymeleaf 是一个模板引擎，用于渲染 HTML 页面。

<!DOCTYPE html>
<html>
    <body>
        <h1>用户列表</h1>
        <ul>
            <li th:each="user : ${users}">
                <a th:href="@{/users/{id}(id=${user.id})}">
                    {{ user.name }}
                </a>
            </li>
        </ul>
    </body>
</html>

jQuery 和 Ajax

jQuery 和 Ajax 用于进行异步数据请求。

$(document).ready(function() {
    $("#add-user-btn").click(function() {
        $.ajax({
            url: "/users",
            method: "POST",
            data: $("#add-user-form").serialize(),
            success: function(data) {
                window.location.reload();
            }
        });
    });
});

7. 数据查询

@GetMapping
public List<User> findAll() {
    return userService.findAll();
}

8. 数据修改

@PutMapping("/{id}")
public void update(@PathVariable Long id, @RequestBody User user) {
    user.setId(id);
    userService.update(user);
}

9. 数据删除

@DeleteMapping("/{id}")
public void delete(@PathVariable Long id) {
    userService.delete(id);
}

10. 数据新增

@PostMapping
public void save(@RequestBody User user) {
    userService.save(user);
}

11. 测试与验证

单元测试

@RunWith(JUnit4.class)
public class UserServiceTest {

    @Mock
    private UserMapper userMapper;

    @InjectMocks
    private UserService userService;

    @Test
    public void testFindAll() {
        List<User> expectedUsers = Arrays.asList(new User(), new User());
        when(userMapper.findAll()).thenReturn(expectedUsers);

        List<User> actualUsers = userService.findAll();

        assertThat(actualUsers).isEqualTo(expectedUsers);
    }
}

12. 部署

  1. 打包项目为 WAR 文件。
  2. 将 WAR 文件部署到 Tomcat 或其他应用服务器。
  3. 访问项目 URL。

常见问题解答

1. 如何配置数据库连接？

spring.datasource.url=jdbc:mysql://localhost:3306/spring_mvc_db
spring.datasource.username=root
spring.datasource.password=password

2. 如何使用 Thymeleaf 渲染动态数据？

使用 th:text、th:value 和 th:href 等属性。

3. 如何处理异常？

使用 @ExceptionHandler 注解处理异常。

4. 如何使用 Ajax 进行异步通信？

使用 jQuery 和 Ajax 发起异步请求。

5. 如何部署应用程序到服务器？

将项目打包为 WAR 文件并部署到应用服务器。