前端 vs 后端端点(spring boot 和 vuejs) [英] Frontend vs backend endpoints (spring boot and vuejs)
问题描述
有点基于本指南:
基于我在后端实现的控制器，这是有道理的:
@RestController公共类问候控制器{private static final String template = "Hello, %s!";私有最终 AtomicLong 计数器 = new AtomicLong();@RequestMapping("/问候")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 路由器 = 新路由器({模式:'历史'，基础:process.env.BASE_URL，路线:[{小路: '/'，name: '家',组件:HomeRoute},{路径:'/myroute',name: 'myroute',组件:MyRoute}]});导出默认路由器；例如App.vue 我有:
<div class="你好"><li><router-link to="/MyRoute">GoToMyRoute</router-link><li><router-link to="/">GoToHome</router-link><路由器视图></路由器视图></模板>
我也可以访问，例如:
到目前为止一切顺利.但是，如果我尝试直接在浏览器中输入:http://localhost:8080/MyRoute，我会得到:
我认为这是因为我的控制器中缺少 /MyRoute 的后端 @RequestMapping.
基于上述我的问题变成:
- 如果我希望能够在浏览器中直接访问它，我是否需要为我拥有的每个 vuejs 路由维护一个后端 RequestMapping?
- 如何分离/订购我的前端和后端端点?目前，与纯前端端点/路由相比，似乎没有什么时候访问后端端点的约定.
我尝试了以下代码(灵感来自 Gus 的回答):
import org.springframework.web.bind.annotation.RequestMapping;导入 org.springframework.web.bind.annotation.RestController;导入 org.springframework.web.servlet.ModelAndView;@RestController公共类 RouterCtrl {@RequestMapping("/**/{path:[^.]*}")公共 ModelAndView 重定向(){return new ModelAndView("forward:/");}}并考虑:
您的后端端点必须以前缀
api/(或其他一些独特的词)开头处理Router Vue找不到的404，类似这样:
Vue.use(Router);const 路由器 = 新路由器({模式:'历史'，基础:process.env.BASE_URL，路线:[{小路: '/'，name: '家',组件:HomeRoute},{路径:'/myroute',name: 'myroute',组件:MyRoute},{路径:'/:catchAll(.*)',name: 'notFound',组件:未找到}]});导出默认路由器；
我做了一个简单的 gif 来说明 :9
Somewhat based on this guide:
I have created a multi module maven project where one submodule is my backend and another submodule is my frontend. When I build the whole project first the frontend is "build" then its dist/ resources are copied to the backend which is then build and I can successfully start my spring boot backend with java -jar target/backend-1.0.0-SNAPSHOT and access it on localhost:8080
which makes sense based on the controller I have implemented in the backend:
@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));
}
}
If I instead access: http://localhost:8080/index.html I end up in my frontend:
Which currently have the following two routes:
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;
And in e.g. App.vue I have:
<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>
That I can also access, e.g.:
So far so good. But if I try to enter:http://localhost:8080/MyRoute directly in my browser I get:
which I assume is because I am missing a backend @RequestMapping for /MyRoute in my controller.
Based on the above my questions become:
- Do I need to maintain a backend RequestMapping for each vuejs route I have if I want to be able to access it directly in the browser?
- How do I separate/order my frontend and backend endpoint? Right now it seems there is no convention for when a backend endpoint is accessed compared to a pure frontend endpoint/route.
I tried with the following code (inspired by Gus answer):
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:/");
}
}
And consider:
Your backend endpoints must start with the prefix
api/(or some other distinctive word)Deal with the 404 not found with Router Vue, something like this:
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;
I made a simple gif to ilustrate :9
这篇关于前端 vs 后端端点(spring boot 和 vuejs)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
