使用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任务。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/814420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

上海计算机学会 2023年10月月赛 丙组T1 三个数的中位数(模拟)

第一题&#xff1a;T1三个数的中位数 标签&#xff1a;模拟题意&#xff1a;给定三个整数&#xff0c;请输出按大小排序后&#xff0c;位于正中间的数字。题解&#xff1a;给三个数从小到大排序&#xff0c;输出中间的即可。代码&#xff1a; #include <bits/stdc.h> u…

itop4412内核编译_编译自定义函数到内核

我的itop4412开发板是半路捡的&#xff0c;所以没办法加他们的售后群&#xff0c;遇到的问题只好一点点记录吧 内核驱动编译 在日常工作过程中&#xff0c;编写内核程序可能机会不多&#xff0c;但是将厂商提供的内核源码编译到固件中&#xff0c;这个技能还是必须掌握的。 i…

每天学习一个Linux命令之w

每天学习一个Linux命令之w 介绍&#xff1a; 在Linux操作系统中&#xff0c;我们经常需要查看当前登录用户信息、系统负载以及其他用户的登录情况。w命令就是一个很常用的命令&#xff0c;它可以提供这些信息。本篇博客将详细介绍w命令及其所有可用的选项&#xff0c;帮助你更…

Redis入门到通关之String命令

文章目录 ⛄1 String 介绍⛄2 命令⛄3 对应 RedisTemplate API❄️❄️ 3.1 添加缓存❄️❄️ 3.2 设置过期时间(单独设置)❄️❄️ 3.3 获取缓存值❄️❄️ 3.4 删除key❄️❄️ 3.5 顺序递增❄️❄️ 3.6 顺序递减 ⛄4 以下是一些常用的API⛄5 应用场景 ⛄1 String 介绍 Stri…

Asterisk 21.2.0编译安装经常遇到的问题和解决办法之卸载pjsip

目录 会安装也要会卸载make uninstallldconfig 会安装也要会卸载 有些人就只会装。 最常见的场景就是需要卸载之前版本的pjproject。 一般来说&#xff0c;其他版本的 pjproject 会被作为静态链接库安装。这些库跟 Asterisk可能不兼容。 因此&#xff0c;在安装正确版本的pjpro…

连锁收银系统哪个好用 国内三大连锁收银系统评比

随着数字化管理趋势下互联网技术的不断发展革新&#xff0c;互联网技术&#xff0c;以及不断升级优化传统行业渠道模式&#xff0c;线上线下结合的电子商务模式正逐渐成为企业发展的趋势。而门店管理系统也在越来越多的企业应用。但市场上连锁店管理系统品牌诸多&#xff0c;很…

生产事故:线程管理不善诱发P0故障

背景 处于业务诉求&#xff0c;需要建立一个统一的调度平台&#xff0c;最终是基于 Dolphinscheduler 的 V1.3.6 版本去做二次开发。在平台调研建立时&#xff0c;这个版本是最新的版本 命运之轮开始转动 事故 表象 上班后业务部门反馈工作流阻塞&#xff0c;登录系统发现大…

设计模式(23):访问者模式

定义 表示一个作用于某对象结构中的各元素的操作&#xff0c;它使我们可以在不改变元素的类的前提下定义作用与这些元素的新操作。 模式动机 对于存储在一个集合中的对象&#xff0c;他们可能具有不同的类型(即使有一个公共的接口)&#xff0c;对于该集合中的对象&#xff0…

Java-博客系统(前后端交互)

目录 前言 博客系统基本情况 1 创建项目&#xff0c;引入依赖 2 数据库设计 2.1 分析 2.2 建库建表 3 封装数据库 3.1 在java目录下创建DBUtil类&#xff0c;通过这个类对数据库进行封装 3.2 在java目录下创建实体类&#xff08;博客类Blog&#xff09; 3.2 在java目录下创建…

docker nginx-lua发送post json 请求

环境准备 dockerfile from fabiocicerchia/nginx-lua:1.25.3-ubuntu22.04 run apt-get -qq update && apt-get -qq install luarocks run luarocks install lua-cjson run luarocks install lua-iconv run luarocks install lua-resty-http后台代理服务准备&#xff…

3D场景编辑方法——CustomNeRF

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;3D场景编辑方法——CustomNeRF1、研究背景2、提出方法3、CustomNeRF3.1、整体框架步骤3.2、对特定问题的解决 4、实验结果5、总结…

组合模式:构建树形对象结构的设计艺术

在软件开发中&#xff0c;组合模式是一种结构型设计模式&#xff0c;用于表示对象的部分-整体层次结构。通过使单个对象和组合对象具有相同的接口&#xff0c;这种模式允许客户端以统一的方式处理单个对象和组合对象。本文将详细介绍组合模式的定义、实现、应用场景以及优缺点。…

自动化运维(二十六)Ansible 实战变量插件和连接插件

Ansible 支持多种类型的插件&#xff0c;这些插件可以帮助你扩展和定制 Ansible 的功能。每种插件类型都有其特定的用途和应用场景。今天我们一起学习变量插件和连接插件。 一、变量插件 Ansible 变量插件允许动态地添加变量到主机或组中&#xff0c;这些变量可以在 playbook…

.net Web Api Post请求传递数据

.net c#调用Web Api Post请求传输数据&#xff0c;用.net8一直传不了自定义的json格式数据&#xff0c;后面找到用实体传递Api那边用一样字段的实体接收才能正常传输数据。记录一下 var mails new {Name "tt",Hobby "test" }; string json JsonConv…

2024HW--->入侵排查

在蓝队的面试中&#xff0c;我们有可能会被问到对可能被入侵的机器&#xff0c;怎么样去排查&#xff0c;下面就来总结一下 1.Windows入侵排查 1.检查系统账号的安全 检测系统账号&#xff0c;其实最重要的就是一个点 "查看服务器是否存在可疑账号、新增账号。" 最…

数据结构课程设计选做(一)---数字排序(哈希、排序)

2.1.1 题目内容 2.1.1-A [问题描述] 给定n个整数&#xff0c;请统计出每个整数出现的次数&#xff0c;按出现次数从多到少的顺序输出。 2.1.1-B [基本要求] &#xff08;1&#xff09;输入格式&#xff1a; 输入的第一行包含一个整数n&#xff0c;表示给定数字的个数。 第二…

蓝桥杯备赛:考前注意事项

考前注意事项 1、DevCpp添加c11支持 点击 工具 - 编译选项 中添加&#xff1a; -stdc112、万能头文件 #include <bits/stdc.h>万能头文件的缺陷&#xff1a;y1 变量 在<cmath>中用过了y1变量。 #include <bits/stdc.h> using namespace std;// 错误示例 …

院子里种点什么树风水好呢?

植物本身是一个丰富的生活领域&#xff0c;有着强烈的视觉暗示。其实&#xff0c;在家中养植物&#xff0c;是有许多好处的&#xff0c;它不仅能够装点庭院的环境让家更美丽&#xff0c;还能调节室内的空气质量&#xff0c;对家人的运势也有着非常大的帮助。 不过&#xff0c;并…

你的高佣副业不二之选,开始流量卡推广,一文看懂号卡推广

在这个信息化的时代&#xff0c;网络已成为人们生活中不可或缺的一部分。然而&#xff0c;在享受着便捷与高效的同时&#xff0c;我们也必须面对一个现实问题&#xff0c;也就是高昂的流量费用。为了解决这一困扰广大用户的痛点&#xff0c;我们今天带来了一个极具吸引力的机会…

005Node.js模块URL的使用

引入 URL 模块 要使用 URL 模块&#xff0c;首先需要在代码中引入它。可以使用以下代码将 URL 模块导入到你的脚本中&#xff1a; const url require(url);实例代码 const urlrequire(url); var apihttp://www.baidu.com?nameshixiaobin&age20; console.log(url.parse(…