I have learnt Nuxt JS and Spring MVC. I want to know, how to make a single page web application integrating or configuring Spring MVC and Nuxt JS. I didn't find any well documented material over internet. Basically, I want to handle all CRUD operations asynchronously. Database is MySQL. If possible, can someone help me how to do this? Thank you in advance!
1 Answers
I hope this will answer you, if I understand your question correctly.
Assuming, you have written the data access operations using Spring, Nuxt Js runs on port 3000, Tomcat on port 8080.
Let's say this is our RestController which fetches users data from database (using repository, service layer). Note the use of CrossOrigin - enabling cross origin request for restful web service which includes headers for Cross-Origin Resource Sharing (CORS) in the response. Here, we only allow localhost:3000 to send cross-origin requests. You can also go for Global CORS configuration.
@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);
}
}
}
As you are using Nuxt js, this is our vue component which tries to access our REST end point which we created above. We are using axios to get our response here.
<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>
Your nuxt.config.js should contain this: the axios and proxy module should be installed.
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,
}
},
Related