Vue2.0项目集成SpringBoot后端交互详解

前端

2024-01-11 12:45:08

前言

在前面一篇中，我们主要介绍了如何完成axios请求测试以及mock.js模拟真实数据请求。但前后端分离的实际应用还是得与后端进行交互，下面是关于怎么样与java后台进行交互的介绍。

快速开始

我们首先要完成以下几个步骤：

搭建SpringBoot项目
配置SpringMVC
编写SpringMVC控制器
配置Vue2.0项目
编写Vue2.0组件
集成axios和mock.js

搭建SpringBoot项目

首先，我们创建一个新的SpringBoot项目，可以在终端中使用以下命令：

spring init springboot-vue2-demo

这将创建一个新的SpringBoot项目，并生成必要的配置文件和文件结构。

配置SpringMVC

接下来，我们需要配置SpringMVC。在pom.xml文件中添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

然后，在application.properties文件中添加以下配置：

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

这将告诉SpringBoot使用JSP作为视图模板。

编写SpringMVC控制器

接下来，我们需要创建一个SpringMVC控制器。在src/main/java/com/example/demo目录下创建一个新的Java类，命名为HelloController.java。在HelloController.java中添加以下代码：

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {

    @RequestMapping("/")
    @ResponseBody
    public String hello() {
        return "Hello, World!";
    }

}

这个控制器定义了一个简单的hello()方法，它将返回一个"Hello, World!"字符串。

配置Vue2.0项目

接下来，我们需要配置Vue2.0项目。在vue.config.js文件中添加以下代码：

module.exports = {
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

这将告诉Vue2.0项目在开发模式下将所有请求代理到http://localhost:8080。

编写Vue2.0组件

接下来，我们需要创建一个Vue2.0组件。在src/components目录下创建一个新的Vue文件，命名为HelloWorld.vue。在HelloWorld.vue中添加以下代码：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

这个组件定义了一个简单的HelloWorld组件，它将显示"Hello, World!"字符串。

集成axios和mock.js

接下来，我们需要集成axios和mock.js。在src/main.js文件中添加以下代码：

import Vue from 'vue'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

Vue.prototype.$axios = axios

// 创建一个mock适配器
const mockAdapter = new MockAdapter(axios)

// 拦截所有请求
mockAdapter.onAny().reply(200, {
  message: 'Hello, World!'
})