Vue.js + Spring Boot example | Spring Data Cassandra + RestApi CRUD example

spring-boot-vue-cassandra-example-spring-data-rest-cassandra-crud-example-feature-image.png

In this Vue.js Spring Boot tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring Data to do CRUD with Cassandra and Vue.js as a front-end technology to make request and receive response.

Related Posts:
How to start Spring Data Cassandra with SpringBoot
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.5.RELEASE

– Vue 2.5.17
– Vue Router 3
– Axios 0.18.0

Overview

This is full-stack Architecture:

vue-spring-boot-cassandra-example-spring-data-cassandra-rest-api-architecture

Demo

1. Spring Boot Server

vue-spring-boot-cassandra-example-spring-data-cassandra-rest-api-spring-server-architecture

2. Vue.js Client

vue-spring-boot-cassandra-example-spring-data-cassandra-rest-api-vue-client-ui

Practice

0. Set up Cassandra

Open Cassandra CQL Shell:

– Create Cassandra keyspace with name grokonez:

– Create customer table for grokonez keyspace:

1. Spring Boot Server

vue-spring-boot-cassandra-example-spring-data-cassandra-rest-api-spring-server-structure

Customer class corresponds to entity and table customer.
CustomerRepository is an interface extends CassandraRepository, will be autowired in CustomerController for implementing repository methods and custom finder methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAllCustomers, postCustomer, deleteCustomer, findByAge, updateCustomer.
– Configuration for Spring Datasource and Spring Data properties in application.properties
Dependencies for Spring Boot and Cassandra in pom.xml

1.1 Dependency

1.2 Data Model

model/Customer.java

1.3 Repository

repo/CustomerRepository.java

1.4 REST Controller

controller/CustomerController.java

1.5 Configuration for Spring Datasource & Data Cassandra properties

application.properties

2. Vue.js Client

vue-spring-boot-cassandra-example-spring-data-cassandra-rest-api-vue-client-structure

package.json with 3 main modules: vue, vue-router, axios.
– 4 components: CustomersList, Customer, AddCustomer, SearchCustomer.
router.js defines routes, each route has a path and maps to a component.
http-common.js initializes HTTP Client with baseUrl and headers for axios HTTP methods.
vue.config.js configures port for Vue App.
For more details about how to use Vue Router in this example, please visit:
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

2.0 Setup Vue Project & Router
Init Project

Point cmd to the folder you want to save Project folder, run command:
vue create vue-springboot

You will see 2 options, choose default:

vue-create-project-config

Add Vue Router to Project

– Run command: npm install vue-router.
– Import router to src/main.js:

Define Routes

src/router.js:

App template with Navbar and router-view

src/App.vue:

2.1 Initialize HTTP Client

Install axios with command: npm install axios.
Then create http-common.js file:

2.2 Components
List of Items

components/CustomersList.vue

Item Details

components/Customer.vue

Add Item

components/AddCustomer.vue

Search Items

components/SearchCustomers.vue

2.3 Configure Port for Vue App

vue.config.js

Run

– Spring Boot Server: mvn clean install and mvn spring-boot:run.
– Vue.js Client: npm run serve.

Open Browser with Url: http://localhost:4200/.

Source Code

SpringBootRestCassandra
vue-springboot

By grokonez | September 22, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*