Kotlin + Spring + Vue: REST API

Now it's time to implement the major functionality in our application - the REST-interaction between backend and frontend.

Objectives

Implement REST-controller (GET) at the backend side
Implement REST-request (GET) at the frontend side
Process the response
Display the loaded data

Backend

Let's create a package called model and add file Greeting.kt - this will be a data class defines the structure of data to send:

data class Greeting(val id: Long, val content: String)

Now let's create a package called controller and add file BackendController.kt - this will be a REST-controller:

import org.springframework.web.bind.annotation.*
import com.kotlinspringvue.backend.model.Greeting
import java.util.concurrent.atomic.AtomicLong

@RestController
@RequestMapping("/api")
class BackendController() {

val counter = AtomicLong()

@GetMapping("/greeting")
fun greeting(@RequestParam(value = "name", defaultValue = "World") name: String) =
Greeting(counter.incrementAndGet(), "Hello, $name")

}

NOTE: It's much more convenient to use root request mapping /api for all methods, so we added an annotation @RequestMapping("/api") before class definition.

And now we can run the app and test this method: http://localhost:8080/api/greeting?name=Vadim
We will see the following response:

{"id":1,"content":"Hello, Vadim"}

Refresh the page, and you will see the incremented value of counter:

{"id":2,"content":"Hello, Vadim"}

Frontend

Create a new component Greeting.vue in frontend/src/components with the default Vue component content:

<template>
<h3>Greeting</h3>
</template>

<script>
<script>

<style>
</style>

Router

Install the router module by executing the following command:

$ npm install --save vue-router

And add file router.js to src/:

Update main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
router,
render: h => h(App),
}).$mount('#app')

Then update App.vue:

Remove export default -> components
Add <router-view>

<template>
<div id="app">
<router-view></router-view>
</div>
</template>

<script>
export default {
name: 'app'
}
<script>

<style>
</style>

AXIOS

AXIOS is the promise-based HTTP-client module which helps us to make requests easier.

$ npm install --save axios

I recommend to make special AXIOS-config in the specific component for the application: create a file http-commons.js in frontend/src/components:

import axios from 'axios'

export const AXIOS = axios.create({
baseURL: `/api`
})

In the future you can specify some other settings for HTTP-requests and manage API URLs.

Greeting Component

Make some changes in package.json to avoid warnings while console output:

...
"rules": {
"no-console": "off"

}
...

Add some changes to component Greeting (Greeting.vue):

Import AXIOS from http-common
Add field and method to display data, execute requests and process responses
Add this method to mounted section to load data as soon as page has been loaded
Add a DOM-element to template to display the loaded data

NOTE: now we use hard-coded request parameter name in "AXIOS.get('/greeting', { params: { name: 'Vadim' } })" just to see how it works.

Now you can build and run your application.

Refresh the page and you will see the updated value of counter:

Ways to Improve

Use dynamic request parameter
Try other methods: POST, PUT, DELETE, etc.

vaadim

Search This Blog