Java 前端与后端端点（spring引导和vuejs）

在某种程度上基于本指南：

我创建了一个多模块maven项目，其中一个子模块是我的后端，另一个子模块是我的前端。当我首先构建整个项目时，前端是“构建”，然后它的

dist/

资源被复制到后端，然后构建，我可以使用

java-jar-target/backend-1.0.0-SNAPSHOT

成功启动spring boot后端，并在

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

我最终进入了我的前端：

目前有以下两条路线：

router.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

直接在我的浏览器中，我得到：

我认为这是因为我的控制器中缺少了

/MyRoute

的后端

@RequestMapping

基于上述情况，我的问题变成：

如果我想在浏览器中直接访问每个vuejs路由，是否需要为其维护后端RequestMapping

如何分离/订购前端和后端端点？目前，与纯前端端点/路由相比，似乎没有约定何时访问后端端点

---

我建议你这样做：

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

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

后端中定义的其他rest端点应该在前缀“/api”或“/rest”之后定义（例如localhost:8080/api/某些数据将返回json数据）。所以每个数据端点都有这个前缀

每个用户可见的路由（视图导航）都应该在vue.js端作为SPA路由完成。（例如本地主机：8080/欢迎等）

---

我建议从代码中删除以下内容：

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

完成上述操作后，所有路由都将通过index.html，您的vue路由将从此处接管

---

您可以将其他端点放在/api或其他东西后面。

我尝试了以下代码（受Gus-answer的启发）：

import org.springframework.web.bind.annotation.RequestMapping；
导入org.springframework.web.bind.annotation.RestController；
导入org.springframework.web.servlet.ModelAndView；
@RestController
公共类路由器{
@请求映射（“/**/{path:[^.]*}”）
公共模型和视图重定向（）{
返回新模型和视图（“转发：/”；
}
}

并考虑：

您的后端端点必须以前缀

api/

（或其他特殊单词）开头

使用路由器Vue处理未找到的404，如下所示：

Vue.use（路由器）；
const路由器=新路由器({
模式：“历史”，
base:process.env.base\u URL，
路线：[
{
路径：“/”，
姓名：'家'，
组成部分：回家路线
},
{
路径：'/myroute'，
名称：“myroute”，
组件：MyRoute
},
{
路径：'/：catchAll（.*），
名称：“未找到”，
组件：未找到
}
]
});
导出默认路由器；

---

我做了一个简单的例子：9

我不太擅长

Vue

，但我假设在第一种情况下，它使用URL重写，而没有实际请求

MyRout

端点。但如果您试图将此URL直接放入浏览器，则会出现此错误。不确定哪种方法最适合解决这个问题。我认为所有组件名称都应该路由到

index.html

。是的，如果删除该映射，我将直接在前端结束。但我仍然无法访问或直接在我的浏览器中，只有当我点击我与GotomyRoute建立的路由器链接时，我才知道你所描述的bullet 1有什么意义。如果我添加了，当我尝试直接在浏览器中访问“”时，我只会在浏览器中获得“转发：/”而不是“白标签错误页”。但也许这就是要点——打印一些有意义的错误消息而不是一般的白标签消息？在春季，您需要将每个非api的路径路由到vue。在vue中，您可以处理每个路由，例如到自定义404页面的路由等。