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

Question

某种程度上基于本指南：

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。

基于上述我的问题变成：

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

Answer 1

我建议你这样做：

1. 在你的后端有一个“ui”控制器，它会将任何未映射的路由转发到你的前端应用程序，例如：

   @RequestMapping(value = "/**/{[path:[^\\.]*}")
   public String redirect() {
       // Forward to home page so that route is preserved.
       return "forward:/";
   }
   

2. 后端中定义的其他休息端点应该在一些前缀之后定义，例如“/api”或“/rest”（例如 localhost:8080/api/some-data 将返回您的 json 数据）。所以每个数据端点都会有这个前缀。
3. 用户可见的每个路由（视图导航）都应该作为 SPA 路由在 vue.js 端完成。（例如本地主机：8080/欢迎等）