我已经学习了Nuxt JS和Spring MVC。我想知道如何制作集成或配置Spring MVC和Nuxt JS的单页Web应用程序。我在互联网上找不到任何有据可查的资料。基本上,我想异步处理所有CRUD操作。数据库是MySQL。如果可能的话,有人可以帮我怎么做吗?预先谢谢!
希望我能正确回答您的问题,希望它能回答您。
假设您已经使用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,
}
},