Functional

README.md

@@ -0,0 +1,32 @@
+This is a base project to get started using Vue with Spring Boot Web.
+
+This project is designed to package the compiled code into a `.war` for deployment into web containers (default: Tomcat).
+
+# Node npm & Vue CLI
+You will need npm and the Vue CLI intalled. [Full Instructions](https://cli.vuejs.org/guide/installation.html)
+## npm 
+Goto the [Node.js Site](https://nodejs.org/en/) to install.
+## Vue CLI
+```
+npm install -g @vue/cli
+```
+
+# Building and running
+Here are some commands to get build and run the application
+## Development
+These sets of commands will continously build & serve the client and server as files change.
+You will need 2 terminals open because the watch commands are interactive
+
+### Terminal 1 - Building the client app
+```
+cd client
+npm run build-dev
+```
+### Terminal 2 - Building and serving server w/SPA hosting
+```
+cd server
+mvn spring-boot:run -Dspring-boot.run.profiles=development
+```
+### Alternative
+These can be executed with the Vue UI and your IDE if desired;
+just adjust the run configuration to match. 

client/.eslintrc.js

@@ -4,15 +4,15 @@ module.exports = {
     node: true
   },
   extends: [
-    "plugin:vue/essential",
-    "plugin:prettier/recommended",
-    "@vue/prettier"
+    'plugin:vue/essential',
+    'plugin:prettier/recommended',
+    '@vue/prettier'
   ],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   parserOptions: {
-    parser: "babel-eslint"
+    parser: 'babel-eslint'
   }
 };

client/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/app"]
+  presets: ['@vue/app']
 };

client/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build-dev": "vue-cli-service build --watch",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

client/src/App.vue

@@ -1,16 +1,17 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link>|
-      <router-link to="/about">About</router-link>
+      <router-link to="/">Home</router-link>&nbsp;|
+      <router-link to="/about">About</router-link>&nbsp;|
+      <router-link to="/counter">Counter</router-link>
     </div>
     <router-view />
   </div>
 </template>
 
 <style>
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

client/src/components/HelloWorld.vue

@@ -4,11 +4,9 @@
     <p>
       For a guide and recipes on how to configure / customize this project,
       <br />check out the
-      <a
-        href="https://cli.vuejs.org"
-        target="_blank"
-        rel="noopener"
-      >vue-cli documentation</a>.
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
     </p>
     <h3>Installed CLI Plugins</h3>
     <ul>
@@ -17,14 +15,16 @@
           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
           target="_blank"
           rel="noopener"
-        >babel</a>
+          >babel</a
+        >
       </li>
       <li>
         <a
           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
           target="_blank"
           rel="noopener"
-        >eslint</a>
+          >eslint</a
+        >
       </li>
     </ul>
     <h3>Essential Links</h3>
@@ -33,13 +33,19 @@
         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
       </li>
       <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
       </li>
       <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
       </li>
       <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
       </li>
       <li>
         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
@@ -48,7 +54,9 @@
     <h3>Ecosystem</h3>
     <ul>
       <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
       </li>
       <li>
         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
@@ -58,13 +66,21 @@
           href="https://github.com/vuejs/vue-devtools#vue-devtools"
           target="_blank"
           rel="noopener"
-        >vue-devtools</a>
+          >vue-devtools</a
+        >
       </li>
       <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
       </li>
       <li>
-        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
       </li>
     </ul>
   </div>

client/src/main.js

@@ -1,10 +1,10 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
+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");
+}).$mount('#app');

client/src/router.js

@@ -1,26 +1,32 @@
-import Vue from "vue";
-import Router from "vue-router";
-import Home from "./views/Home.vue";
+import Vue from 'vue';
+import Router from 'vue-router';
+import Home from '@/views/Home.vue';
+import Counter from '@/views/Counter.vue';
 
 Vue.use(Router);
 
 export default new Router({
-  mode: "history",
+  mode: 'history',
   base: process.env.BASE_URL,
   routes: [
     {
-      path: "/",
-      name: "home",
+      path: '/',
+      name: 'home',
       component: Home
     },
     {
-      path: "/about",
-      name: "about",
+      path: '/about',
+      name: 'about',
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () =>
-        import(/* webpackChunkName: "about" */ "./views/About.vue")
+        import(/* webpackChunkName: "about" */ '@/views/About.vue')
+    },
+    {
+      path: '/counter',
+      name: 'counter',
+      component: Counter
     }
   ]
 });

client/src/services/CounterService.js

@@ -0,0 +1,7 @@
+import ServerAPI from '@/services/ServerAPI.js';
+
+export default {
+  getVisitCount() {
+    return ServerAPI.getConnection().get('/counter');
+  }
+};

client/src/services/ServerAPI.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+  baseURL: '/api',
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+});
+
+export default {
+  getConnection() {
+    return apiClient;
+  }
+};

client/src/views/Counter.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>Visit Counter</h1>
+    <p>
+      The site has been visited
+      {{ visitCount ? visitCount : '[Calculating...]' }} times.
+    </p>
+  </div>
+</template>
+
+<script>
+import CounterService from '@/services/CounterService.js';
+
+export default {
+  data() {
+    return {
+      visitCount: null
+    };
+  },
+
+  created() {
+    console.log('Starting Call');
+    CounterService.getVisitCount()
+      .then(response => {
+        this.visitCount = response.data;
+      })
+      .catch(error => {
+        this.visitCount = 'error';
+        console.log('There was an error:', error.response);
+      });
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

client/src/views/Home.vue

@@ -7,10 +7,10 @@
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import HelloWorld from '@/components/HelloWorld.vue';
 
 export default {
-  name: "home",
+  name: 'home',
   components: {
     HelloWorld
   }

client/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  outputDir: '../server/src/main/resources/spa'
+};

server/.gitignore

@@ -4,6 +4,8 @@ target/
 !**/src/main/**
 !**/src/test/**
 
+src/main/resources/spa/**
+
 ### STS ###
 .apt_generated
 .classpath

server/src/main/java/geozak/springvue/server/ServletInitializer.java

@@ -5,9 +5,8 @@
 
 public class ServletInitializer extends SpringBootServletInitializer {
 
-	@Override
-	protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
-		return application.sources(SpringVueServerApplication.class);
-	}
-
+  @Override
+  protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
+    return application.sources(SpringVueServerApplication.class);
+  }
 }

server/src/main/java/geozak/springvue/server/SpringVueServerApplication.java

@@ -6,8 +6,7 @@
 @SpringBootApplication
 public class SpringVueServerApplication {
 
-	public static void main(String[] args) {
-		SpringApplication.run(SpringVueServerApplication.class, args);
-	}
-
+  public static void main(String[] args) {
+    SpringApplication.run(SpringVueServerApplication.class, args);
+  }
 }

server/src/main/java/geozak/springvue/server/controller/CounterController.java

@@ -0,0 +1,20 @@
+package geozak.springvue.server.controller;
+
+import geozak.springvue.server.service.CounterService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequestMapping("/api")
+public class CounterController {
+
+  @Autowired private CounterService counterService;
+
+  @GetMapping("/counter")
+  public Integer getVisitCount() {
+
+    return counterService.incrementVisitCount();
+  }
+}

server/src/main/java/geozak/springvue/server/service/CounterService.java

@@ -0,0 +1,13 @@
+package geozak.springvue.server.service;
+
+import org.springframework.stereotype.Service;
+
+@Service
+public class CounterService {
+
+  private int visitCount = 0;
+
+  public int incrementVisitCount() {
+    return ++visitCount;
+  }
+}