最简单的前后端连接（新手小白）
·
第一部分，简单的前端页面
1、创建一个简单的html文件，写超级简单的输入框
第二部分，简单的后端接口
1、先创建一个简单的java的spring项目，具体详见
2、在之前创建的数据库里面创建一个数据表，如图:
3、在之前创建好的项目下面，创建一个entity包，然后写一个User类，
在User类里面写上数据库中的属性，注意要意义对应，然后一定要记得加上@Data注解
（这个是由lombok插件提供的，有这个注解就不用写一大堆get和set方法了）
4、创建一个mapper包，新建一个UserMapper接口（注意是接口）
一定记得加上@Mapper注解，不然后面会报错
5、此时的UserMapper仅仅是一个接口，然后可以在Demo1Application里面注入
但是通常为了规范，会新建一个专门的controller包，然后注入，并且修改之前的方法
这是UserController的补充
6、试运行，没有问题, 9090端口也可以查到数据
第三部分，前后端连接
运行以后，会出现一个报错，经典的跨域问题
跨域解决：
这是一种最简单的方式，在Controller类里面加一个注解@CrossOrigin(origins="*")就可以了
成功拿到数据
接下来再去前端页面详细写写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div> username: <input class="username" type="text"> </div>
<div> password: <input class="password" type="password"> </div>
<div> nickname: <input class="nickname" type="text"> </div>
<div> email: <input class="email" type="text"> </div>
<div> phone: <input class="phone" type="text"> </div>
<div> address: <input class="address" type="text"> </div>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var username = document.querySelector('.username'); //这里由更高级的做法，暂时忘了
var password = document.querySelector('.password');
var nickname = document.querySelector('.nickname');
var email = document.querySelector('.email');
var phone = document.querySelector('.phone');
var address = document.querySelector('.address');
// 2. 使用axios函数
axios({
url: 'http://localhost:9090/user/'
}).then((result) => {
console.log(result);
username.value = result.data[0].username //这里全部是data[0],因为只有一个对象
password.value = result.data[0].password;
nickname.value = result.data[0].nickname;
email.value = result.data[0].email;
phone.value = result.data[0].phone;
address.value = result.data[0].address;
})
</script>
</body>
</html>最终显示效果
那个password的type改成password了
终于完工了！！！这是一个小小的里程碑事件！！！
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
79
0- 0
已为社区贡献2条内容
所有评论(0)