Build a Simple CRUD App with Spring Boot and Vue.js
Create a CRUD (create, read, update, and delete) application using Spring Boot and Vue.js.
Raslan Ismail
why should i use yarn?!!
Matt Raible
You can use npm if you’d prefer. I like yarn because if you specify a version number, it adds that exact version rather than a range. It also allows you to run your scripts with ”yarn {scriptName}” instead of ”npm run {scriptName}”.
jdd540
Awesome tut, first of all.
Secondly, I’m having issues with the serve configuration after adding Axios and/or vuejs-logger. The project runs fine until i add those, but after adding them and running yarn run serve I get the following error message:
‘vue-cli-service’ is not recognized as an internal or external command,
operable program or batch file.
Any help with this would be greatly appreciated
Matt Raible
Whenever I see dependencies that were there, and now aren’t, I try running npm install. Can you please try that and let us know if it works?
Draško Kokić
Any recommendations how to deploy the client (Vue) app within the server (Spring Boot) app? Simply coping the client/dist into server/src/main/resources/public?
Matt Raible
See https://developer.okta.com/…. The steps should be similar.
Matt Raible
Did you follow the steps to create a TodoRepository and RestRepositoryConfigurator? If so, can you please try comparing your code with the example on GitHub?
Matt Raible
Can you please try comparing your code with the example on GitHub?
Matt Raible
Since Todo.java uses Lombok, I’m guessing you don’t have annotation processing configured and that’s why it’s not working. I just tried the following and it worked fine for me.
git clone GitHub - oktadev/okta-spring-boot-vue-crud-example: A Todo App that showcases Spring Boot, Vue.js, and Okta's support for both.
cd okta-spring-boot-vue-crud-example/server
./gradlew bootRun
Duodécimo Fernandes
Up to creating vue.js application all went well.
But after implementing load data from server, I’m getting a CORS error:
localhost/:1 Access to XMLHttpRequest at ‘http://localhost:9090/todos’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
(I am just using alternatives ports for client and server, but I think that should not be an issue …)
I have adjusted teh fix CORS errors:
…
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// *** URL below needs to match the Vue client URL and port ***
config.setAllowedOrigins(Collections.singletonList(“http://localhost:8081”));
…
I’d love to complete this tutorial, any help will be appretiated!
Chers!
Duodécimo Fernandes
I apologize, my mistake:
I did indeed corrected client url (changing from 8080 to 8081, that I am using), but I forgot to rerun the server to accomodate the changes.
After server relaunch all worked fine!
Alexander Peshkov
Perfect presentation, thank you.
However I have an issue with the first (after replacing style.css and extending index.html) - when i ‘yarn serve’ client server is up
DONE Compiled successfully in 195ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.70:8080/
i have a blank index page : localhost:8080
Front and backend are compiled well and get up, but the issue still persists
I guess i shall take a look at Todos.vue
Matt Raible
Hello Alexander,
Do you see any errors in your browser’s developer console that indicates what the problem might be?
You might try comparing your code to the example on GitHub. The project’s README has instructions on how to clone, configure, and run the app.
suryalistic
Can you share whats the typo? I have the same issue.
I compared code on github. There is a difference between the article and the code on github.
On Github: RestRepositoryConfigurator extends RepositoryRestConfigurerAdapter
from article: RestRepositoryConfigurator implements RepositoryRestConfigurer
Does that matter?
I dont see the “todos” link from GET response.
Andrew Hughes
RepositoryRestConfigurerAdapter is just a slightly older. The repo uses Spring 2.0.6. The tutorial is more up to date (2.1.0). However, both should work, and all the class does is configure the REST API to expose IDs in the JSON. Neither will affect the basic function of the Spring Data REST service.
I just tested the code again and it works for me. Make sure you stopped and re-started your spring boot project, and that you created both the Todo.java resource class and the TodoRepository.java repository class. Otherwise, what version of Java are you on? Can you post your code somewhere so that I can try it out?
Ivan
For me, the issue was the packaging of the SpringBootVueApplication.java file. It was under a different package than my Todo.java file. To fix it, I moved the SpringBootVueApplication class under the same package as Todo.java (and the others).
Ivan
Same issue and fix for me. +1
john allen
building and running just fine (but not loading from the api) … so thought oh i missed the Cors code for 8080… so added in and then tomcat failed to start … and bean instatiation failures
first trip is "org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
…
any clues ? stumped… server starts and API is fine in temrinal and works without the Cors code … BUT Todo fails to load the API data. double checked all code in this page… I’m fairly precise when following to the letter instructions
Matt Raible
Make sure you’re not importing the reactive CORS classes from Spring.