学习了Nuxt JS和Spring MVC。我想知道如何制作集成或配置 Spring MVC 和 Nuxt JS 的单页 Web 应用程序。我没有在互联网上找到任何有据可查的 Material 。基本上,我想异步处理所有 CRUD 操作。数据库是MySQL。如果可能的话,有人可以帮我怎么做吗?提前致谢!
最佳答案
如果我正确理解您的问题,我希望这能回答您。
假设,你已经使用 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,
}
},
关于rest - 如何整合Spring MVC和Nuxt JS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58263454/