java - 前端与后端端点（spring boot 和 vuejs）

问题描述

有点基于本指南：

https://jaxlondon.com/blog/java-core-languages/put-spring-boot-und-vue-js-practical-use-project-tutorial/

我创建了一个多模块 maven 项目，其中一个子模块是我的后端，另一个子模块是我的前端。当我首先构建整个项目时，前端是“构建”，然后它的dist/资源被复制到后端，然后构建，我可以成功地启动我的 spring boot 后端java -jar target/backend-1.0.0-SNAPSHOT并访问它localhost:8080

根据我在后端实现的控制器，这是有道理的：

@RestController
public class GreetingController {

  private static final String template = "Hello, %s!";
  private final AtomicLong counter = new AtomicLong();

  @RequestMapping("/greeting")
  public Greeting greeting(@RequestParam(value = "name", defaultValue = "World") String name) {
    return new Greeting(counter.incrementAndGet(), String.format(template, name));
  }

  @RequestMapping("/")
  public Greeting root(@RequestParam(value = "name", defaultValue = "Root!") String name) {
    return new Greeting(counter.incrementAndGet(), String.format(template, name));
  }
}

如果我改为访问：http://localhost:8080/index.html我最终在我的前端：

其中目前有以下两条路线：

路由器.js

Vue.use(Router);

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeRoute
        },
        {
            path: '/myroute',
            name: 'myroute',
            component: MyRoute
        }
    ]
});

export default router;

在例如App.vue我有：

<template>
<div class="hello">
    <li>
      <router-link to="/MyRoute">GoToMyRoute</router-link>
    </li>
    <li>
      <router-link to="/">GoToHome</router-link>
    </li>
    <router-view></router-view>
</div>
</template>

我也可以访问，例如：

到目前为止，一切都很好。但是，如果我尝试http://localhost:8080/MyRoute直接在我的浏览器中输入：我会得到：

我认为这是因为我的控制器中缺少@RequestMapping后端/MyRoute。

基于以上，我的问题变成：

如果我希望能够直接在浏览器中访问它，是否需要为我拥有的每个 vuejs 路由维护一个后端 RequestMapping？
如何分离/订购我的前端和后端端点？现在，与纯前端端点/路由相比，访问后端端点的时间似乎没有约定。

标签： javaspring-bootvue.js

我尝试使用以下代码（受 Gus 回答的启发）：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;


@RestController
public class RouterCtrl {
    @RequestMapping("/**/{path:[^.]*}")
    public ModelAndView redirect() {
        return new ModelAndView("forward:/");
    }
}

并考虑：

您的后端端点必须以前缀api/（或其他一些独特的词）开头

处理Router Vue找不到的404，如下所示：

Vue.use(Router);

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeRoute
        },
        {
            path: '/myroute',
            name: 'myroute',
            component: MyRoute
        },
        {
            path: '/:catchAll(.*)',
            name: 'notFound',
            component: NotFound
        }
    ]
});

export default router;

我做了一个简单的gif 来说明：9

java - 前端与后端端点（spring boot 和 vuejs）

问题描述

解决方案

推荐阅读