最简单的前后端连接（新手小白） |
您所在的位置：网站首页 › 前端交互的接口是怎么做的 › 最简单的前后端连接（新手小白） |
最简单的前后端连接（新手小白）
|
第一部分，简单的前端页面 1、创建一个简单的html文件，写超级简单的输入框
第二部分，简单的后端接口 1、先创建一个简单的java的spring项目，具体详见 第一个接口笔记-CSDN博客 2、在之前创建的数据库里面创建一个数据表，如图:
在User类里面写上数据库中的属性，注意要意义对应，然后一定要记得加上@Data注解 （这个是由lombok插件提供的，有这个注解就不用写一大堆get和set方法了）
4、创建一个mapper包，新建一个UserMapper接口（注意是接口） 一定记得加上@Mapper注解，不然后面会报错
5、此时的UserMapper仅仅是一个接口，然后可以在Demo1Application里面注入 但是通常为了规范，会新建一个专门的controller包，然后注入，并且修改之前的方法
这是UserController的补充
6、试运行，没有问题, 9090端口也可以查到数据
第三部分，前后端连接
运行以后，会出现一个报错，经典的跨域问题
跨域解决： 这是一种最简单的方式，在Controller类里面加一个注解@CrossOrigin(origins="*")就可以了
成功拿到数据
接下来再去前端页面详细写写 Document username: password: nickname: email: phone: address: 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; })最终显示效果 那个password的type改成password了
终于完工了！！！这是一个小小的里程碑事件！！！ |
3、在之前创建好的项目下面，创建一个entity包，然后写一个User类，
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |