Question

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

Answer 1

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

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

让我们说这是我们的RestController，它从数据库（使用存储库，服务层）获取用户数据。请注意CrossOrigin的使用-为宁静的Web服务启用跨源请求，该请求在响应中包括跨源资源共享（CORS）的标头。在这里，我们只允许localhost：3000发送跨域请求。您还可以进行Global 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,
    }
  },

如何集成Spring MVC和Nuxt JS？

1 个答案: