Idea+springboot+vue 前后端交互实现

下图中 ① ②分别定义了路径访问index页面的父子路径：通过 http://localhost:8081/hello/test 即可访问到index页面（idea默认8080端口，我修改了），通过这个路径设置我们不仅可以实现对springboot中页面的访问的控制，也是后面和vue的交互实现的基础。

vue:

下面是vue项目的结构和主要的代码和配置文件的目录。

components文件夹下是我们的vue布局代码，也就是界面代码。

router文件夹所在的红色方框里是vue项目的一些配置文件，主要配置vue项目的插件依赖和界面配置。

vue新建界面和在主界面使用链接访问的方法如下（和与springboot的交互无关）：

1）在components文件夹下建立新的vue界面（.vue文件），注意name属性。

2）在index.js文件中声明vue界面的访问路径

{
  path: '/userV',//声明访问路径：这里即设置的路径为：http://localhost:8080/userV
  name: "userV", //声明访问对象的名字。
  component: userV //声明访问的对象。
}，

3）在主界面注入链接，之后我们运行vue就可以在主界面看到我们自己写的界面的链接，点击即可跳转。

vue和springboot的交互主要在 vue界面代码（.vue文件）中的 <script > </script >标签中完成。

3.springboot和vue交互

基本思路：vue使用 axios 插件进行跨域访问，进行数据请求。

springboot定义好访问路径和数据获取并返回数据给vue。

vue 使用axios：

在idea的terminal中输入 vue add axios 命令将axios下载到项目当中。

在mian.js中导入axios

在 <script> </script>标签中设置好数据类型和axios获取数据的路径和方式。

源码：

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>名字</td>
        <td>年龄</td>
      </tr>
        <td>{{users.id}}</td>
        <td>{{users.name}}</td>
        <td>{{users.age}}</td>
    </table>
  </div>
</template>
<script>
  export default {
    name: "usreV",
    data(){
      console.log('进入userV页面')
      return {
          users:[]
      }
    },
    created() {
      console.log('userV页面获取数据')
      var that=this;
      axios.get('http://localhost:8081/user/getJSON',{params:{id:1}}).then(function (resp) {
        that.users=resp.data;
        console.log('userV页面获取的数据为'+that.users.id)
        console.log('userV页面获取的数据为'+that.users.name)
        console.log('userV页面获取的数据为'+that.users.age)
      })
    }
  }
</script>

<style scoped>

</style>

以上就是与springboot交互是vue端需要做的事情。

springboot设置：

在Application类（springboot项目启动类）中加入以下代码，解决跨域访问的问题。

 @Configuration
    public class CrosConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS","PUT")
                    .allowCredentials(true)
                    .maxAge(3600)
                    .allowedHeaders("*");
        }
    }

springboot设置 vue 请求数据的端口和数据返回：

源码：

package com.example.shan3.controller;

import com.example.shan3.model.User;
import com.example.shan3.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

/**

 */
@Controller
@RequestMapping(value = "/user")
public class UserController {

    /**
     * 将UserService注入controller层
     */
    @Autowired
    private UserService userService;

    @RequestMapping(value = "/show")
    public String show(){
        //返回user页面显示内容
        System.out.println("user-");
        return "user";

    }
    @PostMapping(value = "/getUser")
    public String getUser(Integer id, Model model) {
        User user = userService.selectUserById(id);
        model.addAttribute("users",user);
        if(user!=null){
            return "getUser";
        }else {
            return "error";
        }
    }
}

springboot中的端口实现等不详细贴出，在我之前的博客中有。