rest - 如何整合Spring MVC和Nuxt JS？

Question

学习了Nuxt JS和Spring MVC。我想知道如何制作集成或配置 Spring MVC 和 Nuxt JS 的单页 Web 应用程序。我没有在互联网上找到任何有据可查的 Material 。基本上，我想异步处理所有 CRUD 操作。数据库是MySQL。如果可能的话，有人可以帮我怎么做吗？提前致谢!

Answer 1

如果我正确理解您的问题，我希望这能回答您。

假设，你已经使用 Spring 编写了数据访问操作，Nuxt Js 运行在 3000 端口，Tomcat 运行在 8080 端口。

假设这是我们的 RestController，它从数据库中获取用户数据(使用存储库、服务层)。请注意 CrossOrigin 的使用 - 为 restful web 服务启用跨源请求，其中包括响应中的跨源资源共享 (CORS) header 。这里，我们只允许 localhost:3000 发送跨域请求。您还可以进行全局 CORS 配置。

@RestController
@RequestMapping("api")
@CrossOrigin(origins = "http://localhost:3000")
public class MainRestController {

    private final IRestService restService;

    @Autowired
    public MainRestController(IRestService restService) {
        this.restService = restService;
    }

    @GetMapping(value = "users", produces = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<Iterable<String>> getUsers() {
        try {
            return new ResponseEntity<>(restService.getAllUsers(), HttpStatus.OK);
        } catch (Exception e) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }
    }
}

当您使用 Nuxt js 时，这是我们的 vue 组件，它试图访问我们在上面创建的 REST 端点。我们正在使用 axios 在此处获取我们的响应。

<template>
  <div class="container">
    <ul>
    <li v-for="user of users">
      {{user}}
    </li>
    </ul>
  </div>
</template>

<script>
  export default {
    async asyncData({ $axios }) {

      const users = await $axios.$get('http://localhost:8080/api/users');
      return { users }
    }
  }
</script>

您的 nuxt.config.js 应包含以下内容:应安装 axios 和代理模块。

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],

axios: {
    proxy: true,
  },

  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },

  proxy: {
    '/api/': {
      target: 'http://localhost:8080/',
      pathRewrite: { "^/api": "" },
      changeOrigin: true,
    }
  },