极简
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 // 用于自动装配 Beanprivate 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: 9090spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/testusername: rootpassword: 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].usernamepassword.value = result.data[0].password;email.value = result.data[0].email;})</script>
</body>
运行前端页面：
[REFRENCE]
第一个接口笔记
最简单的前后端连接（新手小白）
