React.js 集成 Kotlin Spring Boot 开发 Web 应用实例详解
React.js 集成 Kotlin Spring Boot 开发 Web 应用实例详解
项目工程目录
~/easykotlin/reakt$ tree
.
├── build
│ ├── kotlin
│ │ ├── compileKotlin
│ │ └── compileTestKotlin
│ └── kotlin-build
│ └── version.txt
├── build.gradle
├── gradle
│ └── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── reakt.iml
├── reakt.ipr
├── reakt.iws
├── reakt_main.iml
├── reakt_test.iml
└── src
├── main
│ ├── java
│ ├── kotlin
│ │ └── com
│ │ └── easykotlin
│ │ └── reakt
│ │ └── ReaktApplication.kt
│ └── resources
│ ├── application.properties
│ ├── static
│ └── templates
└── test
├── java
├── kotlin
│ └── com
│ └── easykotlin
│ └── reakt
│ └── ReaktApplicationTests.kt
└── resources
24 directories, 14 files
build.gradle
buildscript {
ext {
kotlinVersion = '1.2.0'
springBootVersion = '2.0.0.M7'
}
repositories {
mavenCentral()
maven { url "https://repo.spring.io/snapshot" }
maven { url "https://repo.spring.io/milestone" }
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}")
classpath("org.jetbrains.kotlin:kotlin-allopen:${kotlinVersion}")
}
}
apply plugin: 'kotlin'
apply plugin: 'kotlin-spring'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'
group = 'com.easykotlin'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
compileKotlin {
kotlinOptions.jvmTarget = "1.8"
}
compileTestKotlin {
kotlinOptions.jvmTarget = "1.8"
}
repositories {
mavenCentral()
maven { url "https://repo.spring.io/snapshot" }
maven { url "https://repo.spring.io/milestone" }
}
dependencies {
compile('org.springframework.boot:spring-boot-starter-actuator')
compile('org.springframework.boot:spring-boot-starter-data-jpa')
compile('org.springframework.boot:spring-boot-starter-freemarker')
compile('org.springframework.boot:spring-boot-starter-security')
compile('org.springframework.boot:spring-boot-starter-web')
compile("org.jetbrains.kotlin:kotlin-stdlib-jre8:${kotlinVersion}")
compile("org.jetbrains.kotlin:kotlin-reflect:${kotlinVersion}")
runtime('mysql:mysql-connector-java')
testCompile('org.springframework.boot:spring-boot-starter-test')
testCompile('org.springframework.security:spring-security-test')
}
ReaktApplication.kt
package com.easykotlin.reakt
import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication
@SpringBootApplication
class ReaktApplication
fun main(args: Array<String>) {
runApplication<ReaktApplication>(*args)
}
后端工程目录
~/easykotlin/reakt$ tree
.
├── LICENSE
├── README.md
├── build
│ ├── kotlin
│ │ ├── compileKotlin
│ │ └── compileTestKotlin
│ └── kotlin-build
│ └── version.txt
├── build.gradle
├── gradle
│ └── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── out
│ └── production
│ ├── classes
│ │ ├── META-INF
│ │ │ └── reakt_main.kotlin_module
│ │ └── com
│ │ └── easykotlin
│ │ └── reakt
│ │ ├── ReaktApplication.class
│ │ ├── ReaktApplicationKt$main$1$$special$$inlined$bean$1.class
│ │ ├── ReaktApplicationKt$main$1$$special$$inlined$bean$2$1$lambda$1.class
│ │ ├── ReaktApplicationKt$main$1$$special$$inlined$bean$2$1.class
│ │ ├── ReaktApplicationKt$main$1$$special$$inlined$bean$2$2$lambda$1.class
│ │ ├── ReaktApplicationKt$main$1$$special$$inlined$bean$2$2.class
│ │ ├── ReaktApplicationKt$main$1$$special$$inlined$bean$2.class
│ │ ├── ReaktApplicationKt$main$1.class
│ │ ├── ReaktApplicationKt.class
│ │ ├── WebSecurityConfig.class
│ │ ├── advice
│ │ │ └── GlobalExceptionHandlerAdvice.class
│ │ ├── controller
│ │ │ ├── ApiController.class
│ │ │ ├── LoginController.class
│ │ │ └── RouterController.class
│ │ ├── dao
│ │ │ ├── RoleDao.class
│ │ │ └── UserDao.class
│ │ ├── entity
│ │ │ ├── Role.class
│ │ │ └── User.class
│ │ ├── handler
│ │ │ ├── ControllerTools.class
│ │ │ └── MyAccessDeniedHandler.class
│ │ └── service
│ │ └── MyUserDetailService.class
│ └── resources
│ ├── application-daily.properties
│ ├── application-dev.properties
│ ├── application-prod.properties
│ ├── application.properties
│ └── logback-spring.xml
├── reakt.iml
├── reakt.ipr
├── reakt.iws
├── reakt_main.iml
├── reakt_test.iml
└── src
├── main
│ ├── java
│ ├── kotlin
│ │ └── com
│ │ └── easykotlin
│ │ └── reakt
│ │ ├── ReaktApplication.kt
│ │ ├── advice
│ │ │ └── GlobalExceptionHandlerAdvice.kt
│ │ ├── controller
│ │ │ ├── ApiController.kt
│ │ │ ├── LoginController.kt
│ │ │ └── RouterController.kt
│ │ ├── dao
│ │ │ ├── RoleDao.kt
│ │ │ └── UserDao.kt
│ │ ├── entity
│ │ │ ├── Role.kt
│ │ │ └── User.kt
│ │ ├── handler
│ │ │ └── MyAccessDeniedHandler.kt
│ │ ├── security
│ │ │ └── WebSecurityConfig.kt
│ │ └── service
│ │ └── MyUserDetailService.kt
│ └── resources
│ ├── application-daily.properties
│ ├── application-dev.properties
│ ├── application-prod.properties
│ ├── application.properties
│ ├── logback-spring.xml
│ ├── static
│ └── templates
└── test
├── java
├── kotlin
│ └── com
│ └── easykotlin
│ └── reakt
│ └── ReaktApplicationTests.kt
└── resources
45 directories, 58 files
前端Node React 工程部分:
使用 $ nowa init web 命令创建前端 web 工程:
~/easykotlin/reakt/front$ nowa init web
Welcome to nowa project generator!
I will use this template to generate your project:
https://github.com/nowa-webpack/template-uxcore/archive/v5.zip
May I ask you some questions?
? Project name reakt
? Project description An awesome project
? Author name jack
? Project version 1.0.0
? Project homepage
? Project repository
? Npm registry https://registry.npm.taobao.org
? Do you want SPA feature? Yes
? Do you want i18n feature? (Y/n) Y
Start to copy files ...
Generate file .editorconfig
Generate file .eslintignore
Generate file .eslintrc.json
Generate file .gitignore
Generate file abc.json
Generate file html/index.html
Generate file mock/user/query.js
Generate file package.json
Generate file src/app/app.js
Generate file src/app/app.less
Generate file src/app/db.js
Generate file src/app/routes.jsx
Generate file src/app/util.js
Generate file src/app/variables.js
Generate file src/components/search-data/index.js
Generate file src/components/search-data/SearchData.jsx
Generate file src/components/search-word/index.js
Generate file src/components/search-word/SearchWord.jsx
Generate file src/i18n/en.js
Generate file src/i18n/index.js
Generate file src/i18n/zh-cn.js
Generate file src/images/README.md
Generate file src/pages/demo/index.js
Generate file src/pages/demo/logic.js
Generate file src/pages/demo/PageDemo.jsx
Generate file src/pages/demo/PageDemo.less
Generate file src/pages/error/index.js
Generate file src/pages/error/PageError.jsx
Generate file src/pages/error/PageError.less
Generate file src/pages/home/index.js
Generate file src/pages/home/logic.js
Generate file src/pages/home/PageHome.jsx
Generate file src/pages/home/PageHome.less
Generate file webpack.config.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of react@>=0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@>=0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@>=0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@>=0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@>=0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] || 0.14.x || ^15.0.0-0 || 15.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15.6.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.3 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
added 249 packages in 15.628s
设置 JavaScript 的版本是 ES6
前端工程
~/easykotlin/reakt/front$ nowa server
Listening at http://192.168.0.104:3000
~/easykotlin/reakt/front$ nowa server
Listening at http://192.168.0.104:3000
webpack built 77b5a8beed9790822bea in 12869ms
Hash: 77b5a8beed9790822bea
Version: webpack 1.13.3
Time: 12869ms
Asset Size Chunks Chunk Names
app-zh-cn.js 1.98 MB 0 [emitted] app
1.home-zh-cn.js 641 kB 1 [emitted] home
2.demo-zh-cn.js 641 kB 2 [emitted] demo
3.error-zh-cn.js 540 kB 3 [emitted] error
webpack: bundle is now VALID.
nowa build 之后的默认输出目录在 dist 下面. 我们下面写一个构建脚本,分别拷贝这些 js,css,html 到 Spring Boot 工程的 resource 目录下面:
reakt.sh
#!/usr/bin/env bash
#build front js,css,html
cd ./front
nowa build
cd ../
#cp js,css,html to /templates, /static
kotlinc -script reakt.kts
#gradle bootRun
gradle bootRun
reakt.kts
import java.io.File
import java.io.FileFilter
val srcPath = File("./front/dist/")
val templatesPath = "src/main/resources/templates/"
val jsFile = "src/main/resources/static/js/"
val cssPath = "src/main/resources/static/css/"
val templatesDir = File("src/main/resources/templates/")
val cssDir = File("src/main/resources/static/css/")
val jsDir = File("src/main/resources/static/js/")
if (!templatesDir.exists()) templatesDir.mkdirs()
if (!cssDir.exists()) cssDir.mkdirs()
if (!jsDir.exists()) jsDir.mkdirs()
srcPath.listFiles().forEach {
val fileName = it.name
when {
fileName.endsWith(".html") -> {
println("Copy file: $fileName")
val htmlFile = File("$templatesPath$fileName")
it.copyTo(target = htmlFile, overwrite = true)
replaceJsCssSrc(htmlFile)
}
fileName.endsWith(".js") -> {
println("Copy file: $fileName")
it.copyTo(target = File("$jsFile$fileName"), overwrite = true)
}
fileName.endsWith(".css") -> {
println("Copy file: $fileName")
it.copyTo(target = File("$cssPath$fileName"), overwrite = true)
}
}
}
fun replaceJsCssSrc(htmlFile: File) {
val oldJsSrc = """