Java创建接口实现前后端交互

最新推荐文章于 2024-08-15 16:38:30 发布

qq_1532145264

最新推荐文章于 2024-08-15 16:38:30 发布

阅读量396

点赞数 15

分类专栏： Java 文章标签： java spring mybatis 前端 mysql

本文链接：https://blog.csdn.net/qq_1532145264/article/details/140734715

版权

Java 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

极简

1、创建后端接口

创建 spring 项目，并引入依赖：

Lombok
Spring Web
MySQL Driver
MyBatis Framework

创建接口

文件结构：
在这里插入图片描述

package com.wuyh.demo01.entity;

import lombok.Data;

@Data // 自动生成 getter/setter/toString/equals/hashCode 方法
public class User {
    private Integer id;
    private String username;
    private String password;
    private String email;
}

package com.wuyh.demo01.controller;

import com.wuyh.demo01.mapper.UserMapper;
import com.wuyh.demo01.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@CrossOrigin(origins = "*") // 用于启用跨源资源共享 (CORS)，允许来自不同域的客户端访问此服务
@RestController // 用来编写处理HTTP请求并返回响应的控制器
@RequestMapping("/test")    // 用于映射 HTTP 请求到特定的处理器方法
public class UserController {
    @Autowired  // 用于自动装配 Bean
    private UserMapper userMapper;
    @GetMapping("/user")    // 用于映射 HTTP GET 请求
    public List<User> index() {
        return userMapper.findAll();
    }
}

package com.wuyh.demo01.mapper;

import com.wuyh.demo01.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper // 用来标记为 MyBatis 的 Mapper 接口，以便初始化，并执行SQL语句
public interface UserMapper {
    @Select("select * from test.user")  // SQL查询语句
    List<User> findAll();
}

打开连接 MySQL 数据库，创建并添加对应数据：

CREATE DATABASE IF NOT EXISTS test;

USE test;

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `username` varchar(20) DEFAULT NULL,
    `password` varchar(30) DEFAULT NULL,
    `email` varchar(30) DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

INSERT INTO `user` VALUES (1, 'admin', '123456', 'admin@163.com');

创建 application.yml 配置文件：

server:
  port: 9090

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

运行主程序 ×××Application.java，打开“http://localhost:9090/test/user”

在这里插入图片描述

2、创建前端 HTML 页面，实现前后端连接

创建 HTML 页面：

<body>
  <div> username: <input class="username" type="text"> </div>
  <div> password: <input class="password" type="password"> </div>
  <div> email: <input class="email" type="text"> </div>
  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
  <script>
    var username = document.querySelector('.username');
    var password = document.querySelector('.password');
    var email = document.querySelector('.email');

    // 2. 使用axios函数，来发送一个 HTTP GET 请求，并处理返回的结果
    axios({
        url: 'http://localhost:9090/test/user'
    }).then((result) => {
        console.log(result);
        username.value = result.data[0].username
        password.value = result.data[0].password;
        email.value = result.data[0].email;
    })
  </script>
</body>