乐趣区

关于java:Vue与SpringBoot之间的数据交互

jiezi

相比与想 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 进行数据传输交互的根本应用办法。

退出移动版