关于基于Spring Boot JVM与Kotlin/JS搭建无前端框架的传统服务端渲染Web应用的可行性及IntelliJ搭建方案的问询

你的场景（服务端主导渲染，客户端仅做轻量交互）非常适合用Kotlin/JS替代原生JS，而且完全支持Kotlin多平台特性——甚至能帮你复用服务端和客户端的共享逻辑，减少重复代码。下面分点给你拆解：

一、方案可行性与多平台支持 #

• Kotlin/JS适配轻量客户端场景：Kotlin/JS可以编译成标准的ES5/ES6 JavaScript，完全兼容浏览器环境，不需要依赖任何前端框架。你可以直接用它操作原生DOM，或者和jQuery无缝配合——Kotlin提供了完善的JS互操作能力，能直接调用jQuery的API，也能把Kotlin函数暴露给JS调用。
• 多平台支持完全没问题：你可以借助Kotlin Multiplatform（KMP）把共享的业务逻辑（比如数据模型、表单验证规则、业务常量）放在common模块，服务端（Spring Boot JVM）和客户端（Kotlin/JS）都能直接复用。比如用户提交的表单数据，客户端用共享的验证规则做前置校验，服务端用同一套规则做最终校验，避免两端逻辑不一致。

二、IntelliJ中搭建项目的步骤 #

我推荐直接创建一个Kotlin Multiplatform项目，同时包含Spring Boot（JVM）和浏览器端JS目标，这样能无缝整合共享代码：

1. 初始化项目 #

• 打开IntelliJ，选择「New Project」，在左侧选择「Kotlin」，然后选「Kotlin Multiplatform」
• 配置项目基本信息（名称、路径），然后在「Targets」里勾选「JVM」和「Browser JS」，点击「Create」

2. 配置Spring Boot到JVM模块 #

• 打开项目根目录的build.gradle.kts，在JVM目标的配置块中添加Spring Boot插件和依赖：

  kotlin {
      jvm {
          withJava()
          // 启用Spring Boot插件
          applyPlugin("org.springframework.boot")
          applyPlugin("io.spring.dependency-management")
      }
      js {
          browser {
              // 配置编译输出到Spring Boot的static目录，方便开发时自动加载
              distribution {
                  directory.set(project.layout.buildDirectory.dir("resources/main/static/js"))
              }
              binaries.executable()
          }
      }
      sourceSets {
          val commonMain by getting
          val jvmMain by getting {
              dependencies {
                  // 添加Spring Boot核心依赖
                  implementation("org.springframework.boot:spring-boot-starter-web")
                  implementation("org.springframework.boot:spring-boot-starter-freemarker") // 替换为Thymeleaf也可
              }
          }
          val jsMain by getting
      }
  }
  

3. 编写客户端Kotlin/JS代码 #

• 在jsMain/kotlin目录下创建你的客户端逻辑文件，比如ClientInteractions.kt：

  import kotlinx.browser.document
  import kotlinx.browser.window
  
  // 和jQuery互操作的示例
  external val jQuery: dynamic
  
  fun main() {
      // 页面加载完成后绑定事件
      window.addEventListener("load", {
          // 用Kotlin操作原生DOM
          document.getElementById("submit-btn")?.addEventListener("click", {
              val inputValue = document.getElementById("user-input")?.asDynamic()?.value
              println("用户输入：$inputValue")
          })
  
          // 用jQuery实现重置功能
          jQuery("#reset-btn").click {
              jQuery("#user-input").val("")
          }
      })
  }
  

4. 整合服务端渲染 #

• 在JVM模块的src/main/resources/templates下创建Freemarker/Thymeleaf模板，比如index.ftl，引入编译后的Kotlin/JS文件：

  <!DOCTYPE html>
  <html>
  <head>
      <title>服务端渲染示例</title>
      <script src="/js/kotlin.js"></script> <!-- Kotlin/JS运行时 -->
      <script src="/js/your-project-name.js"></script> <!-- 你的客户端代码编译产物 -->
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery -->
  </head>
  <body>
      <input type="text" id="user-input" placeholder="请输入内容">
      <button id="submit-btn">提交</button>
      <button id="reset-btn">重置</button>
  </body>
  </html>
  

• 在JVM模块中编写Spring Boot控制器：

  import org.springframework.stereotype.Controller
  import org.springframework.web.bind.annotation.GetMapping
  
  @Controller
  class HomeController {
      @GetMapping("/")
      fun index(): String {
          return "index"
      }
  }
  

5. 运行项目 #

• 开发阶段：先执行JS模块的browserDevelopmentRun任务（Gradle面板中js -> browser下），它支持热重载，修改客户端代码会自动更新
• 启动Spring Boot应用：运行JVM模块的Application.kt主类
• 访问http://localhost:8080，就能验证客户端逻辑正常工作

三、实用小技巧 #

• JS互操作优化：对于常用的JS库（比如jQuery），可以定义类型安全的外部接口，避免dynamic类型的不确定性：

  external interface JQueryElement {
      fun click(callback: () -> Unit)
      fun value(newValue: String): JQueryElement
      fun value(): String
  }
  external fun jQuery(selector: String): JQueryElement
  

• 共享代码复用：把数据类放在commonMain中，比如：

  // commonMain/kotlin/User.kt
  data class User(val username: String, val email: String)
  

  服务端接收请求时可以直接用这个类，客户端提交数据时也能复用，保证数据结构一致。

内容的提问来源于stack exchange，提问作者Lord Yggdrasill