Full‑Stack Development with Vue.js Frontend and Spring Boot/Dubbo Backend

Frontend Tools and Environment

Node.js V10.15.0

Vue.js V2.5.21

yarn V1.13.0

IDE: VSCode

Backend Tools and Environment

Maven 3.5.2

JDK 1.8

MySQL 14.14

IDE: IntelliJ IDEA

Spring Boot 2.0+

Zookeeper 3.4.13

Front‑Back Separation (Server‑Side Rendering, Browser Rendering)

The goal is to achieve true decoupling between front‑end and back‑end by letting HTML pages call back‑end RESTful APIs via AJAX and exchange JSON data. This architecture lays a solid foundation for large‑scale distributed systems, elastic computing, micro‑services, and multi‑client scenarios such as browsers, Android, and iOS.

Vue.js

Before learning Vue, you should understand the basics of HTML (markup), CSS (styles), and JavaScript (dynamic behavior).

Vue Introduction

1. Vue is a progressive framework for building user interfaces. Official site: cn.vuejs.org .

2. Vue enjoys high popularity on GitHub.

3. It provides MVVM without direct DOM manipulation.

4. Low learning curve and clear documentation.

Creating a Vue Project

Vue CLI offers an official scaffolding tool for quickly setting up single‑page applications (SPA).

Commands to create a new project (choose defaults):

vue create vue-hello-world</code>
<code>vue ui

After project creation, run:

cd vue-hello-world</code>
<code>yarn serve

Open http://localhost:8080/ in a browser to see the initial page.

Vue File Structure and Lifecycle

A typical project directory is shown in the image (omitted).

A single .vue file consists of three sections:

<template>
  <!-- html -->
</template>
<script>
  // js
</script>
<style>
  /* css */
</style>

Components are small, independent, and reusable, allowing large applications to be built like assembling building blocks. Vue's lifecycle diagram is illustrated in the original article.

Common Vue Directives

Declarative Rendering

<div id="app">
  {{ message }}
</div>

Conditional Rendering

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

List Rendering

<div id="app-4">
  <ol>
    <li v-for="todo in todos">{{ todo.text }}</li>
  </ol>
</div>

Event Listening

<div id="example-2">
  <button v-on:click="greet">Greet</button>
</div>

Computed vs Methods

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: { message: 'Hello' },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
});

Watch

var vm = new Vue({
  el: '#demo',
  data: { firstName: 'Foo', lastName: 'Bar' },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
});

v-model (Two‑Way Binding)

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Shorthand Syntax

<a :href="url">...</a>   <!-- v-bind shorthand -->
<a @click="doSomething">...</a>   <!-- v-on shorthand -->

Routing

const router = new VueRouter({
  routes: [
    { path: '/user/:userId', name: 'user', component: User }
  ]
});

HTML navigation example:

<router-link :to="{ name: 'user', params: { userId: 123 } }">User</router-link>
router.push({ name: 'user', params: { userId: 123 } })

Axios for API Calls

GET request example:

axios.get('/user', {
  params: { ID: 12345 }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

POST request example:

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Spring Boot

Spring Boot simplifies the creation of Spring‑based applications by providing auto‑configuration and starter dependencies, allowing developers to get a runnable service up quickly with minimal XML configuration.

Developing a RESTful Service with Spring Boot

Typical flow: the front‑end sends an HTTP request to a @RestController, which delegates to a service layer, which finally calls a MyBatis mapper to execute SQL and returns JSON data.

// Controller example
@RequestMapping("/api")
public class UserController {
    @RequestMapping(value = "/user", method = RequestMethod.GET)
    public List<User> UserQry() {
        return userService.getUser();
    }
}

// Mapper example
@Select("select * from user")
List<User> getUser();

Key Spring annotations explained:

@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan

@RestController – returns JSON directly.

@RequestMapping – maps HTTP paths to handler methods.

@Autowired – injects beans automatically.

@Mapper – MyBatis mapper interface.

RESTful Concepts and Benefits

REST uses resource‑oriented URLs and standard HTTP verbs (GET, POST, PUT, DELETE). Benefits include readable URLs, standardized request/response, loose coupling between resources and views, easy OpenAPI generation, statelessness for scalability, and better interoperability.

Dubbo

Dubbo is a high‑performance Java RPC framework that provides service registration, discovery, and invocation.

Dubbo Microservice Basics

Provider registers services to a registry (e.g., Zookeeper).

Consumer subscribes to services from the registry.

Consumer invokes the registered service.

Implementing a Simple Dubbo Service

// Service interface
public interface DemoService {
    String sayHello(String name);
}

// Provider implementation
@Service
public class DemoServiceImpl implements DemoService {
    @Override
    public String sayHello(String name) {
        return "Hello, " + name + " (from Spring Boot)";
    }
}

// Consumer controller
@RestController
public class DemoConsumerController {
    @Reference
    private DemoService demoService;

    @RequestMapping("/sayHello/{name}")
    public String sayHello(@PathVariable("name") String name) {
        return demoService.sayHello(name);
    }
}

Spring Cloud vs Dubbo

Spring Cloud provides a suite of modules (Eureka/Zookeeper for service discovery, Hystrix for circuit breaking, Zuul for routing, Config for centralized configuration, Sleuth for tracing, etc.) covering the whole microservice ecosystem, whereas Dubbo focuses mainly on RPC and service governance. Spring Cloud uses JSON over HTTP, allowing loose coupling, while Dubbo relies on Java interfaces, requiring version management.

Resources

GitHub repositories:

Spring‑Boot + Vue: https://github.com/liangwei0101/Spring-Boot-And-Vue

Dubbo + Spring‑Boot: https://github.com/liangwei0101/Dubbo-Spring-Boot