当前位置: 首页 > news >正文

使用Kotlin进行全栈开发 Ktor+Kotlin/JS

首发于Enaium的个人博客


前言

本文将介绍如何使用 Kotlin 全栈技术栈Ktor+Kotlin/JS来构建一个简单的全栈应用。

准备工作

创建项目

首先我们需要创建一个Kotlin项目,之后继续在其中新建两个子项目,一个是Kotlin/JS项目,另一个是Ktor项目。

添加依赖和插件

这里我使用了Gradlecatalog,在项目中的gradle目录下创建一个libs.versions.toml文件,用于管理项目中的依赖版本。

[versions]
jimmer = "0.0.9"
kotlin = "1.9.23"
ktor = "2.3.9"
ksp = "1.9.23-1.0.20"
coroutines = "1.8.0"
serialization = "1.6.3"
wrappers = "1.0.0-pre.729"
logback = "1.5.3"
postgresql = "42.7.3"
hikari = "5.1.0"
koin = "3.5.6"[libraries]
ktor-server-core = { module = "io.ktor:ktor-server-core-jvm", version.ref = "ktor" }
ktor-server-netty = { module = "io.ktor:ktor-server-netty-jvm", version.ref = "ktor" }
ktor-server-cors = { module = "io.ktor:ktor-server-cors", version.ref = "ktor" }
ktor-server-content-negotiation = { module = "io.ktor:ktor-server-content-negotiation", version.ref = "ktor" }
ktor-serialization-jsackson = { module = "io.ktor:ktor-serialization-jackson", version.ref = "ktor" }
ktor-server-config-yaml = { module = "io.ktor:ktor-server-config-yaml", version.ref = "ktor" }
logback = { module = "ch.qos.logback:logback-classic", version.ref = "logback" }
kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "serialization" }
kotlin-wrappers = { module = "org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom", version.ref = "wrappers" }
kotlin-wrappers-react = { module = "org.jetbrains.kotlin-wrappers:kotlin-react" }
kotlin-wrappers-react-dom = { module = "org.jetbrains.kotlin-wrappers:kotlin-react-dom" }
kotlin-wrappers-emotion = { module = "org.jetbrains.kotlin-wrappers:kotlin-emotion" }
postgresql = { module = "org.postgresql:postgresql", version.ref = "postgresql" }
hikari = { module = "com.zaxxer:HikariCP", version.ref = "hikari" }
koin = { module = "io.insert-koin:koin-ktor", version.ref = "koin" }[bundles]
api = ['ktor-server-core', 'ktor-server-netty', 'ktor-server-cors', 'ktor-server-content-negotiation', 'ktor-serialization-jsackson', 'ktor-server-config-yaml', 'logback', 'postgresql', 'hikari', 'koin']
app = ['kotlinx-coroutines-core', 'kotlinx-serialization-json', 'kotlin-wrappers-react', 'kotlin-wrappers-react-dom', 'kotlin-wrappers-emotion'][plugins]
jimmer = { id = "cn.enaium.jimmer.gradle", version.ref = "jimmer" }
kotlin-jvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
ktor = { id = "io.ktor.plugin", version.ref = "ktor" }
ksp = { id = "com.google.devtools.ksp", version.ref = "ksp" }
kotlin-plugin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }

之后我们分别在前端和后端项目中的build.gradle.kts文件中引入这些依赖和插件。

后端
plugins {alias(libs.plugins.kotlin.jvm)alias(libs.plugins.ktor)alias(libs.plugins.ksp)alias(libs.plugins.jimmer)application
}group = "cn.enaium"
version = "1.0.0"application {mainClass = "cn.enaium.TodoKt"applicationDefaultJvmArgs = listOf("-Dio.ktor.development=${extra["development"] ?: "false"}")
}dependencies {implementation(libs.bundles.api)
}

这里有一个配置,添加到gradle.properties文件中。

development=true
前端
plugins {alias(libs.plugins.kotlin.multiplatform)alias(libs.plugins.kotlin.plugin.serialization)
}kotlin {js {browser {commonWebpackConfig {cssSupport {enabled.set(true)}}}binaries.executable()}sourceSets {val jsMain by getting {dependencies {implementation(project.dependencies.enforcedPlatform(libs.kotlin.wrappers))implementation(libs.bundles.app)}}}
}

这里需要将前端项目的src/main改为src/jsMain

最后进入到根项目的settings.gradle.kts文件中添加以下代码。

pluginManagement {repositories {maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")google()gradlePluginPortal()mavenCentral()}
}dependencyResolutionManagement {repositories {google()mavenCentral()maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")}
}

还有gradle.build.kts文件中只保留以下代码。

plugins {alias(libs.plugins.kotlin.jvm) apply falsealias(libs.plugins.kotlin.multiplatform) apply false
}

好了,现在我们的项目已经准备好了。

编写代码

后端

首先创建配置文件src/main/resources/application.yml

ktor:deployment:port: 8080application:modules:- cn.enaium.TodoKt.module
jdbc:driver: 'org.postgresql.Driver'url: 'jdbc:postgresql://localhost:5432/postgres?currentSchema=todo'username: 'postgres'password: 'postgres'

之后创建logback配置文件src/main/resources/logback.xml

<configuration><appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"><encoder><pattern>%d{YYYY-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern></encoder></appender><root level="trace"><appender-ref ref="STDOUT"/></root><logger name="org.eclipse.jetty" level="INFO"/><logger name="io.netty" level="INFO"/>
</configuration>

还有创建数据库。

drop schema if exists todo cascade;
create schema todo;drop table if exists todo.task;
create table todo.task
(id         uuid primary key,name       text not null,start_time timestamp default now(),end_time   timestamp
)

之后创建一个主类cn.enaium.Todo

fun main(args: Array<String>) = EngineMain.main(args)

之后编写一个扩展函数cn.enaium.Todo.module

fun Application.module() {}

安装一些插件

Koin
install(Koin) {modules(module {single<ApplicationEnvironment> { environment }})
}
CORS
install(CORS) {allowMethod(HttpMethod.Options)allowMethod(HttpMethod.Post)allowMethod(HttpMethod.Get)allowHeader(HttpHeaders.AccessControlAllowOrigin)allowHeader(HttpHeaders.ContentType)anyHost()
}
Jackson
install(ContentNegotiation) {jackson {registerModules(ImmutableModule())}
}
Jimmer

接下来配置一下Jimmer

fun sql(environment: ApplicationEnvironment): KSqlClient {return newKSqlClient {setConnectionManager {HikariPool(HikariConfig().apply {driverClassName = environment.config.property("jdbc.driver").getString()jdbcUrl = environment.config.property("jdbc.url").getString()username = environment.config.property("jdbc.username").getString()password = environment.config.property("jdbc.password").getString()maximumPoolSize = 10connectionTimeout = 30000}).connection.use {proceed(it)}}setDialect(PostgresDialect())}
}

之后添加到Koin中。

single<KSqlClient> { sql(get()) }

编写一个Task实体类。

package cn.enaium.entityimport org.babyfish.jimmer.sql.Entity
import org.babyfish.jimmer.sql.GeneratedValue
import org.babyfish.jimmer.sql.Id
import org.babyfish.jimmer.sql.Table
import org.babyfish.jimmer.sql.meta.UUIDIdGenerator
import java.util.*/*** @author Enaium*/
@Entity
@Table(name = "task")
interface Task {@Id@GeneratedValue(generatorType = UUIDIdGenerator::class)val id: UUIDval name: Stringval startTime: Dateval endTime: Date?
}

接下来就可以编写Service了。

package cn.enaium.serviceimport cn.enaium.entity.Task
import cn.enaium.entity.endTime
import cn.enaium.entity.startTime
import org.babyfish.jimmer.sql.kt.KSqlClient
import org.babyfish.jimmer.sql.kt.ast.expression.isNotNull/*** @author Enaium*/
class TodoServe(private val sql: KSqlClient) {fun getTasks(): List<Task> {return sql.createQuery(Task::class) {orderBy(table.endTime.isNotNull(), table.startTime)select(table)}.execute()}fun saveTask(task: Task) {sql.save(task)}
}

这里我们添加两个方法getTaskssaveTaskgetTasks用于获取所有任务并按照创建时间和是否完成排序,saveTask用于保存任务,之后还是添加到Koin中。

single<TodoServe> { TodoServe(get()) }

之后我们在module添加路由。

val todoServe by inject<TodoServe>()routing {get("/task") {call.respond(todoServe.getTasks())}post("/task") {todoServe.saveTask(call.receive())call.response.status(HttpStatusCode.OK)}
}

前端

首先在src/jsMain/resources/index.html中添加以下代码,这里需要注意的是app.js,这个文件名称需要和前端的项目名称一致。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello, Kotlin/JS!</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>

之后写一个main函数。

import react.dom.client.createRoot
import web.dom.document/*** @author Enaium*/
fun main() {val container = document.getElementById("root") ?: error("Couldn't find root container!")createRoot(container).render(App.create())
}val App = FC {}

然后就可以编写组件了。

首先需要创建两个data类,一个是Task,另一个是TaskInputTask用于展示任务,TaskInput用于请求。

@Serializable
data class Task(val id: String, var name: String, val startTime: Long, val endTime: Long?) {fun copy(name: String = this.name, startTime: Long = this.startTime, endTime: Long? = this.endTime) =Task(id, name, startTime, endTime)fun toInput() = TaskInput(id, name, startTime, endTime)
}@Serializable
data class TaskInput(val id: String? = null,val name: String? = null,val startTime: Long? = null,val endTime: Long? = null
)

之后编写请求函数,使用fetch发送请求。

val coroutine = CoroutineScope(window.asCoroutineDispatcher())suspend fun fetchTasks(): List<Task> {window.fetch("http://localhost:8080/task").await().let {if (it.status != 200.toShort()) {throw Exception("Failed to fetch")}return Json.decodeFromDynamic<List<Task>>(it.json().await())}
}suspend fun saveTask(task: TaskInput) {window.fetch("http://localhost:8080/task",RequestInit(method = "POST",body = Json.encodeToString(TaskInput.serializer(), task),headers = json("Content-Type" to "application/json"))).await().let {if (it.status != 200.toShort()) {throw Exception("Failed to save")}}
}
TaskItem

编写一个TaskItem组件,用于展示任务,编辑任务,完成任务,逻辑就是点击Edit按钮可以编辑任务,按Enter保存,按Escape取消,点击Finish按钮完成任务。

external interface TaskItemProps : Props {var task: Task
}val TaskItem = FC<TaskItemProps> { props ->var editState by useState(false)var taskState by useState<TaskInput>()useEffect(listOf(taskState)) {taskState?.let {coroutine.launch {saveTask(it)window.location.reload()}}}div {if (editState) {input {defaultValue = props.task.nameonKeyUp = {if (it.asDynamic().key == "Enter") {taskState = props.task.copy(name = it.target.asDynamic().value as String).toInput()editState = false}if (it.asDynamic().key == "Escape") {editState = false}}}} else {div {css {color = if (props.task.endTime == null) Color("red") else Color("green")}div {+props.task.id}div {+props.task.name}div {+kotlin.js.Date(props.task.startTime).toLocaleString()props.task.endTime?.let {+" - "+kotlin.js.Date(it).toLocaleString()}}}button {+"Edit"onClick = {editState = !editState}}button {+"Finish"onClick = {taskState = props.task.copy(endTime = Date().getTime().toLong()).toInput()}}}}
}
App

最后编写App组件,获取任务列表,添加任务。

val App = FC {var tasksState by useState(emptyList<Task>())var taskState by useState<TaskInput>()useEffectOnce {coroutine.launch {tasksState = fetchTasks()}}useEffect(listOf(taskState)) {taskState?.let {coroutine.launch {saveTask(it)window.location.reload()}}}div {input {css {fontSize = 24.px}onKeyUp = {if (it.asDynamic().key == "Enter") {taskState = TaskInput(name = it.target.asDynamic().value as String)}}}div {css {marginTop = 10.pxdisplay = Display.flexflexDirection = FlexDirection.columngap = 10.px}tasksState.forEach {TaskItem {key = it.idtask = it}}}}
}

运行

前端和后端默认端口都是8080,所以先运行后端,之后运行前端。

后端使用application插件的run任务,前端使用jsBrowserDevelopmentRun任务。

相关文章:

使用Kotlin进行全栈开发 Ktor+Kotlin/JS

首发于Enaium的个人博客 前言 本文将介绍如何使用 Kotlin 全栈技术栈KtorKotlin/JS来构建一个简单的全栈应用。 准备工作 创建项目 首先我们需要创建一个Kotlin项目&#xff0c;之后继续在其中新建两个子项目&#xff0c;一个是Kotlin/JS项目&#xff0c;另一个是Ktor项目。…...

数据结构_带头双向循环链表

List.h 相较于之前的顺序表和单向链表&#xff0c;双向链表的逻辑结构稍微复杂一些&#xff0c;但是在实现各种接口的时候是很简单的。因为不用找尾&#xff0c;写起来会舒服一点。&#xff08;也可能是因为最近一直在写这个的原因&#xff09; #pragma once #include<std…...

常见的垃圾回收器(下)

文章目录 G1ShenandoahZGC 常见垃圾回收期&#xff08;上&#xff09; G1 参数1&#xff1a; -XX:UseG1GC 打开G1的开关&#xff0c;JDK9之后默认不需要打开 参数2&#xff1a;-XX:MaxGCPauseMillis毫秒值 最大暂停的时间 回收年代和算法 ● 年轻代老年代 ● 复制算法 优点…...

网桥的原理

网桥的原理 1.1 桥接的概念 简单来说&#xff0c;桥接就是把一台机器上的若干个网络接口“连接”起来&#xff0c;其结果是&#xff0c;其中一个网口收到的报文会被复制给其他网口并发送出去。以使得网口之间的报文能够互相转发。 交换机有若干个网口&#xff0c;并且这些…...

STM32 CAN过滤器细节

STM32 CAN过滤器细节 简介 每组筛选器包含2个32位的寄存器&#xff0c;分别为CAN_FxR1和CAN_FxR2&#xff0c;它们用来存储要筛选的ID或掩码 四种模式 模式说明32位掩码模式CAN_FxR1存储ID&#xff0c; CAN_FxR2存储哪个位必须要与CAN_FxR1中的ID一致 &#xff0c; 2个寄存器…...

网络编程(现在不重要)

目录 网络编程三要素与InetAddress类的使用 软件架构 面临的主要问题 网络编程三要素&#xff08;对应三个问题&#xff09; InetAddress的使用 TCP与UDP协议剖析与TCP编程案例&#xff08;了解&#xff09; TCP协议 UDP协议 例子 UDP、URL网络编程 URL&#xff1a;&…...

10-菜刀连接木马

找到了漏洞后&#xff0c;并且上传了木马之后才能使用的两款工具 中国菜刀和冰蝎 想办法获取别人的cookie&#xff0c;cookie中有session-id 一、中国菜刀 1、必须提前已经完成木马植入然后才能使用 2、木马必须是POST请求&#xff0c;参数自定义&#xff0c;在菜刀里给出…...

Unity数据持久化—Json存档

项目需求为&#xff1a; 1.实现存档列表&#xff0c;显示存档截图&#xff0c;可以查看之前保存的所有存档 2.点击存档直接加载到场景 首先&#xff0c;定义两个类&#xff0c;用于声明存档列表和存档所需要的List [System.Serializable] public class SaveData {//存储目标…...

基于SSM的在线学习系统的设计与实现(论文+源码)_kaic

基于SSM的在线学习系统的设计与实现 摘要 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的管理系统。本文介绍了在线学习系统的开发全过程。通过分析企业对于在线学习系统的需求&#xff0c;创建了一个计算机管理在线学习系统的方案。文章介绍了在线学习系…...

数据库SQL语言实战(二)

目录 检索查询 题目一 题目二 题目三 题目四 题目五 题目六 题目七 题目八 题目九&#xff08;本篇最难的题目&#xff09; 分析 实现&#xff08;两种方式&#xff09; 模板 总结 检索查询 按照要求查找数据库中的数据 题目一 找出没有选修任何课程的学…...

idea错误地commit后如何处理

如果你想使用命令行重新初始化 Git 仓库&#xff0c;可以按照以下步骤进行&#xff1a; 删除该项目的.git文件夹 打开命令行终端。 切换到项目所在的目录&#xff0c;使用 cd 命令。 在项目目录下运行以下命令来重新初始化 Git 仓库 git init这将在当前目录下创建一个新的 Git …...

VRTK(Virtual Reality Toolkit)深入介绍

VRTK是一个为Unity引擎设计的开源虚拟现实&#xff08;VR&#xff09;开发框架&#xff0c;旨在简化和加速VR应用的开发过程。这个工具包包含了一系列的模块和预设&#xff0c;使得开发者可以快速集成标准的VR功能&#xff0c;如物体交互、环境导航、用户界面管理等。下面将对V…...

【LeetCode热题100】【贪心算法】划分字母区间

题目链接&#xff1a;763. 划分字母区间 - 力扣&#xff08;LeetCode&#xff09; 要将一个字符串划分为多个子串&#xff0c;要求每个字母只能出现在一个子串里面 如果一个字母的当前位置是它在这个字符串里面最后一次出现的位置&#xff0c;那么这里就应该划分出来成为子串…...

第二届数据安全大赛暨首届“数信杯”数据安全大赛数据安全积分争夺赛-东区预赛部分WP

这里写目录标题 检材下载&#xff1a;1.理论题2.数据安全&#xff1a;pb:Sepack&#xff1a; 3.数据分析&#xff1a;数据分析&#xff08;1&#xff09;数据分析1-1:数据分析1-2:数据分析1-3: 数据分析&#xff08;3&#xff09;数据分析3-1&#xff1a;数据分析3-2&#xff1…...

如何在Python中使用matplotlib库进行数据可视化?

如何在Python中使用matplotlib库进行数据可视化&#xff1f; 在Python中使用matplotlib库进行数据可视化 数据可视化是将数据以图形或图像的形式展示出来的过程&#xff0c;它有助于我们更好地理解和分析数据。在Python中&#xff0c;matplotlib是一个非常受欢迎的数据可视化…...

网工基础协议——TCP/UDP协议

TCP和UDP的不同点&#xff1a; TCP(Transmission Control Protocol&#xff0c;传输控制协议)&#xff1b; UDP(User Data Protocol&#xff0c;用户数据报协议)&#xff1b; TCP&#xff1a;传输控制协议&#xff0c;面向连接可靠的协议&#xff0c;只能适用于单播通信&…...

ClickHouse--16--普通函数

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、日期函数1、时间或日期截取函数&#xff08;返回非日期&#xff09;2、时间或日期截取函数&#xff08;返回日期&#xff09;3、日期或时间日期生成函数 二、类…...

03-JAVA设计模式-组合模式

组合模式 什么是组合模式 组合模式&#xff08;Composite Pattern&#xff09;允许你将对象组合成树形结构以表示“部分-整体”的层次结构&#xff0c;使得客户端以统一的方式处理单个对象和对象的组合。组合模式让你可以将对象组合成树形结构&#xff0c;并且能像单独对象一…...

C++发票识别、发票查验接口示例,您的“发票管理专家”

发票识别发票查验接口。当财务人员在进行发票的数字化管理时&#xff0c;仅需一键上传发票图片&#xff0c;翔云发票识别接口即可快速、精准对发票的全票面信息进行提取&#xff0c;翔云发票查验接口可根据识别接口提取的发票信息实时联网进行真伪查验。助财务工作者从发票海洋…...

【电控笔记6.2】拉式转换与转移函数

概要 laplace&#xff1a;单输入单输出&#xff0c;线性系统 laplace 传递函数 总结...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...