本文介绍了前端 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.

基于上述我的问题变成:

  1. 如果我希望能够在浏览器中直接访问它,我是否需要为我拥有的每个 vuejs 路由维护一个后端 RequestMapping?
  2. 如何分离/订购我的前端和后端端点?目前,与纯前端端点/路由相比,似乎没有什么时候访问后端端点的约定.
解决方案

我尝试了以下代码(灵感来自 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:/");}}

并考虑:

  1. 您的后端端点必须以前缀api/(或其他一些独特的词)开头

  2. 处理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:

  1. 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?
  2. 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:

  1. Your backend endpoints must start with the prefix api/ (or some other distinctive word)

  2. 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)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 09:43
查看更多