Skip to content
Hello World Vue.js + Java Application
JavaScript Java Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
backend
frontend
README.html
README.md

README.md

1. Hello World Vue.js + Java Application

1.1. 概要

Vue.jsをフロントエンドに、Javaで書いたWeb APIをバックエンドにしたアプリケーション。

JavaのHello World REST APIを作って、フロントエンドのvue.jsに表示するだけのシステムを作る。

1.2. 構築手順

1.2.1. gradleとnpm初期設定

mkdir helloVueJava
cd helloVueJava
mkdir backend
mkdir frontend
cd backend
gradle init --type java-application
cd ../frontend
npm init

1.2.2. backend - Javaを構築

Spring BootでHello Worldを構築する。

  1. project nameを変更
    • settings.gradle
    • rootProject.name = 'hellovuejava-backend'
  2. gradleにSpring Boot Gradle pluginを追加する
  3. Spring Boot Webを依存関係に追加
    • spring-boot-starter-web
  4. main classを変更
    • mainClassName = 'hello.Main'
  5. mkdir src/main/java/hello
    • SampleController.javaを作成
    • Main.javaを作成
  6. gradle buildを実行
  7. gradle bootrun
    :compileJava UP-TO-DATE
    :processResources NO-SOURCE
    :classes UP-TO-DATE
    :findMainClass
    :bootRun
    
    .   ____          _            __ _ _
    /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
    ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
    \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
    '  |____| .__|_| |_|_| |_\__, | / / / /
    =========|_|==============|___/=/_/_/_/
    :: Spring Boot ::        (v1.5.3.RELEASE)
    略
    
  8. ブラウザでhttp://localhost:8080/helloにアクセス
    • Hello World! と表示されたら成功!

1.2.2.1. SampleController.java

package hello;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class SampleController {

    @GetMapping("/hello")
    String hello() {
        return "Hello World!";
    }
}

1.2.2.2. Main.java

package hello;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Main {

    public static void main(String[] args) {
        SpringApplication.run(Main.class, args);
    }
}

1.2.3. frontend - vue.jsを構築

Javaと違って実装するファイルが多いのでファイルの内容は割愛。

  1. .gitignoreを書く
    • /node_modules
  2. npmで必要なライブラリを追加する
    • npm i -S vue materialize-css jquery
    • npm i -D babel-core babel-loader babel-preset-es2015 css-loader file-loader style-loader url-loader vue-loader vue-template-compiler webpack webpack-dev-server
  3. .babelrcを書く
  4. アプリケーションを実装する
    • src
      • js
        • domain : ドメインクラスを置く場所
          • Hello.js : WebAPI GET処理
        • presentation
          • vue_components
            • Application.vue : Vueコンポーネントのルート
            • Hello.vue
        • index.js : Vueインスタンスを作る
      • index.html : index.jsを読み込むだけHTML
  5. webpackの設定を書く
    • webpacl.config.js
  6. package.jsonにbuildコマンドを追加する
    • "build": "mkdir -p build && cp src/index.html build/index.html && webpack",
  7. buildフォルダにindex.htmlとbundle.jsなどが出来てたらOK

1.2.4. アプリケーションを起動する

  1. Web APIを起動
    • cd backend
    • gradle bootrun
  2. フロントエンドのindex.htmlをブラウザで開く
  3. PRINT MESSAGEボタンを押して、Hello World!!と表示されたら成功!!
    • 動かないときは、ブラウザのWeb開発ツールを開いてコンソールやデバッグしてみる。

1.3. 参考

You can’t perform that action at this time.