Build a Simple CRUD App with Spring Boot and Vue.js

john allen

Solved… occums razor… I sucked in the reactive import not the web… ok solved… I wish the compiler could read my mind lol

Sultan Zhumatayev

Now instead of simpleCorsFilter we can use just @CrossOrigin rigth?

Matt Raible

You can if you don’t have Spring Security in the mix. Once you add Spring Security, I’ve found that you need to use a filter because @CrossOrigin doesn’t work.

john allen

Working sweet … thanks okta team… will sign up and add the logon sdk injection

Sultan Zhumatayev

@EnableResourceServer this is depricated Do you have tutorial how to use okta in new way?

Matt Raible

Yes! See https://developer.okta.com/…

Sultan Zhumatayev

Thanks! I Pressed collapse i thought it is deleting button :smiley: I found your tutorial already.

john allen

intellij complaining about missing ‘,’ s … this code is precisely as above … anyone know why ? I’m using latest versions of everything …

// (C)reate
createNew: (text, completed) {
return this.execute(‘POST’, ‘todos’, {title: text, completed: completed})
},
// (R)ead
getAll() {
return this.execute(‘GET’,‘todos’, null, {
transformResponse: [function (data) {
return data? JSON.parse(data)._embedded.todos : data;
}]
})
},
// (U)pdate
updateForId(id, text, completed) {
return this.execute(‘PUT’, ‘todos/’ + id, { title: text, completed: completed })
},
// (D)elete
removeForId(id) {
return this.execute(‘DELETE’, ‘todos/’+id)
}
} https://uploads.disquscdn.c…

pic attached showing red lines from linter… doubt it will build from here

Sultan Zhumatayev

Can u run it? with npm run serve or yarn(and all works)?if yes probably some idea parser bug

john allen

trying now

john allen

Failed to compile.

./src/Api.js
Module Error (from ./node_modules/eslint-loader/index.js):

/home/leveridgesystems98/SpringBootVueApplication/client/src/Api.js
29:34 error Parsing error: Unexpected token, expected “,”

27 |
28 | // (C)reate
> 29 | createNew: (text, completed) {
| ^
30 | return this.execute(‘POST’, ‘todos’, {title: text, completed: completed})
31 | },
32 | // (R)ead

:heavy_multiplication_x: 1 problem (1 error, 0 warnings)

Sultan Zhumatayev

instead of createNew:
u need
createNew(text, completed) {
return this.execute(‘POST’, ‘todos’, { title: text, completed: completed })
},

john allen

all solved!! thnks Sultan.

anirbanadak02

I am getting the following error

C:\Users\anirb\eclipse-workspace\eportfolio\client\src\components\Todos.vue
146:21 error ‘todo’ is defined but never used no-unused-vars

Did anyone get it? How to solve this one?

anirbanadak02

solved it by adding the below line:

‘no-unused-vars’: 1, in config file

Eliot Clarke

Hello! Love the tutorial. I’m brand new to Java/Spring Boot and I have one question that my 30 min of googling and reading the intellisense descriptions of a couple of imports was unable to answer. In the ApplicationRunner, why is it that the setTitle method works? Even IntelliJ seems to think that it can’t resolve this method but it continues to work whenever I spin up the server.

Matt Raible

Hello Eliot,

If you run everything from the command line, everything should work because Lombok’s annotations are processed by Gradle and code is generated. However, if you’re using an IDE, you’ll need to install the Lombok plugin and configure it so it processes the annotations too. See Lombok’s IntelliJ instructions or follow the steps below:

1. Go to File > Settings > Plugins
2. Click on Browse repositories…
3. Search for Lombok Plugin
4. Click on Install plugin
5. Restart IntelliJ IDEA

Eliot Clarke

That was it! I just needed the plugin. I’m also brand new to IntelliJ, I’ve always used vscode. Thank you for the super fast response and help, Matt!