Vue与SpringBoot的数据交互

与jsp等模板引擎相比，数据依赖于后端，前端页面只能建立在各种HTML标签的拼接之上。现在web开发的趋势是前后端分离。今天要介绍的是axios，一个可以在前后端框架之间传递数据的工具。1、前端读取后台数据。一般情况下，前端页面某个位置需要显示的数据不是固定的，而是根据当前情况从后台服务器中取出的动态数据。一个简单的例子：后台java代码：@RequestMapping("/index")publicListfindAll(){returnuserMapper.findall();}这是读取服务器数据库表最简单的方法，返回的是读取结果列表。下面是数据库表的具体内容：+--------+----------+----------+|电邮|用户名|密码|+-------+----------+----------+|123|AVV|第123章44|阿斯达|sdasd||55|尾气|asd||66|asdfasd|asd||77|aasdg|asd||88|助理署长|asd||99|asdgadsf|fasdf|+--------+--------+-----------+前端代码如下：这段代码的意思是通过在"http://localhost:8080/index"获取到的data列表赋值给前端的message变量，然后直接调用message变量在模板中。简单调用一下看看效果：效果如下：即数据以json格式显示在网页上。2、后端读取前端表单录入的数据。在这种情况下，前端页面有一个表单需要在登录或注册过程中填写用户名和密码等字段，然后返回后台与数据库进行比对。.此时我们的前端代码如下：首先我们在方法内部建立一个json格式的data数据。值得注意的是，这里的email、username、password与每个中的type值一一对应，然后使用axios将构造好的json数据数据传给后台代码对应的方法在“http://localhost:8080/data”中。此时后台代码情况为：@RequestMapping("/data")publicvoiddata(@RequestBodyMapmap){System.out.println(map);}这里可以简单理解为用java中的一个Map来承接前端传过来的json格式的数据。这里的重点是在函数的参数部分使用“@RequestBody”注解将返回的数据直接打到参数上，然后我们可以直接打印接收数据的参数看：{email=123,phonenumber=1423,password=444}这是前后端分离的情况下使用axios进行数据传输交互的基本方法。