最简单的前后端连接（新手小白）

最新推荐文章于 2024-04-08 21:57:05 发布

畏迁c

最新推荐文章于 2024-04-08 21:57:05 发布

阅读量1.3w

点赞数 51

文章标签： html5 ajax spring boot

本文链接：https://blog.csdn.net/m0_65380423/article/details/134424109

版权

第一部分，简单的前端页面

1、创建一个简单的html文件，写超级简单的输入框

第二部分，简单的后端接口

1、先创建一个简单的java的spring项目，具体详见

第一个接口笔记-CSDN博客

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了