![the the](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了前端 vs 后端端点(spring boot 和 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:
https://jaxlondon.com/blog/java-core-languages/put-spring-boot-und-vue-js-practical-use-project-tutorial/
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)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!