Vue与SpringBoot之间的数据交互

相比与想jsp这样的模版引擎，数据都是依赖于后端的，前端的页面只能建立在各种HTML标签的拼接上。现如今web开发的趋势是在于前后端分离开发，今天介绍一种能够在前后端框架之间进行数据传输的工具axios。

1.前端读取后台数据

一般这种情况是在与前端页面的某个位置需要显示的数据并不是固定的，而是通过当前情况从后台服务器中取出的动态数据。一个简单的例子：
后台java代码：

@RequestMapping("/index")
public List<User> findAll(){
    return userMapper.findall();
}

这是一个最简单的读取服务器数据库表的方法，返回的就是读取的结果的列表。
以下是数据库表格的具体内容：

+-------+----------+----------+
| email | username | password |
+-------+----------+----------+
| 123   | avv      | 123      |
| 44    | asdga    | sdasd    |
| 55    | asdgas   | asd      |
| 66    | asdfasd  | asd      |
| 77    | aasdg    | asd      |
| 88    | asdg     | asd      |
| 99    | asdgadsf | fasdf    |
+-------+----------+----------+

前端代码如下：

<script>
export default {
    methods: {
        useData: function (){
          var that = this
         // eslint-disable-next-line no-undef
         axios.get("http://localhost:8080/index").then(response => {
            that.message = response.data
         })
      }
   }
}
</script>

这个代码的意思就是通过在 "http://localhost:8080/index" 处取到的数据列表赋给前端的message变量，然后直接在模版中调用message变量即可。简单调用一下看看效果：

<template>
 <h1>{{message}}</h1>
</template>

效果如下：

即数据都以json格式显示在网页上。

2.后端读取前端表单输入的数据

这种情况一般就是在登录或者注册的环节前端页面有一个表单需要填写诸如用户名，密码之类的字段，然后返回到后台与数据库进行比对等操作。这个时候我们前端的代码如下：

<script>
export default {
    methods: {
        getData: function (){
              var data = {email: this.formLabelAlign.name, phonenumber: this.formLabelAlign.region, password: this.formLabelAlign.type}
              // console.log(data)
             // eslint-disable-next-line no-undef 
             axios.post("http://localhost:8080/data", data).then(response => {
                console.log(response)
              })
   }
}
</script>

首先我们在方法的内部先构建起一个json格式的数据data，值得注意的是这里的email， username和password都是与每一个<input>中的type值一一对应的，然后将构建起的json数据data利用axios传入到"http://localhost:8080/data"中后台代码对应的方法中去，此时后台的代码情况为：

@RequestMapping("/data")
public void data(@RequestBody Map map){
     System.out.println(map);
}

这里可以简单的理解为使用一个java中的Map来承接前端传递过来的json格式的数据。这里重点是在函数的参数部分使用“@RequestBody”注解将返回的数据直接打到参数上面，然后我们直接打印接收数据的参数看看：

{email=123, phonenumber=1423, password=444}

这就是在前后端分离的情况下使用axios进行数据传输交互的基本使用方法。