MySQL을 사용하여 Scala.js에서 데이터 프런트 엔드 표시 기능을 구현하는 방법
- PHPz원래의
- 2023-07-30 09:55:561515검색
MySQL을 사용하여 Scala.js에서 데이터 프런트 엔드 표시 기능을 구현하는 방법
개요:
최신 웹 애플리케이션에서는 데이터베이스에서 데이터를 가져와 프런트 엔드 페이지에 표시해야 하는 경우가 많습니다. 이 기사에서는 MySQL 데이터베이스를 사용하여 Scala.js에서 데이터 프런트 엔드 표시 기능을 구현하는 방법을 소개합니다. 이 기사에서는 Scala 언어를 사용하여 백엔드 코드를 작성하고 Scala.js를 사용하여 프런트엔드 코드를 작성합니다.
환경 설정:
먼저 Scala와 MySQL 서버를 로컬에 설치해야 합니다. Scala 개발 환경이 올바르게 구성되었고 MySQL 서버가 설치되었는지 확인하십시오.
데이터베이스 생성:
MySQL에서 "example"이라는 데이터베이스를 생성하고 "id"와 "name"이라는 두 개의 열을 포함하는 "users"라는 간단한 데이터 테이블을 생성합니다. 사용자의 ID와 이름을 저장하는데 사용됩니다.
Scala 프로젝트 만들기:
새 Scala 프로젝트를 만들고 프로젝트의 build.sbt 파일에 다음 종속성을 추가합니다.
libraryDependencies ++= Seq( "com.typesafe.slick" %% "slick" % "3.3.0", "com.typesafe.slick" %% "slick-hikaricp" % "3.3.0", "mysql" % "mysql-connector-java" % "8.0.15", "org.scala-js" %%% "scalajs-dom" % "1.1.0", "org.scala-js" %%% "scalajs-jquery" % "0.9.6" )
백엔드 코드 만들기:
src/main/scala 폴더에 "라는 이름의 새 Scala 프로젝트를 만듭니다. Main.scala" 파일을 만들고 파일에 다음 코드를 추가합니다.
import slick.jdbc.MySQLProfile.api._
import scala.concurrent.{ExecutionContext, Future}
case class User(id: Int, name: String)
class Users(tag: Tag) extends Table[User](tag, "users") {
def id = column[Int]("id", O.PrimaryKey, O.AutoInc)
def name = column[String]("name")
def * = (id, name) <> (User.tupled, User.unapply)
}
object Main extends App {
implicit val ec: ExecutionContext = ExecutionContext.global
val db = Database.forConfig("mysqlDB")
val users = TableQuery[Users]
def createTable(): Future[Unit] = {
db.run(users.schema.createIfNotExists)
}
def insertUser(user: User): Future[Int] = {
db.run(users += user)
}
def getUsers: Future[Seq[User]] = {
db.run(users.result)
}
def deleteAllUsers(): Future[Int] = {
db.run(users.delete)
}
createTable().onComplete(_ => {
insertUser(User(1, "Alice"))
insertUser(User(2, "Bob"))
insertUser(User(3, "Charlie"))
})
// 下面是一个简单的Http服务器
import org.scalajs.dom
import org.scalajs.dom.html
import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
object HttpServer extends JSApp {
@JSExport
def main(): Unit = {
val table = dom.document.getElementById("table").asInstanceOf[html.Table]
getUsers.onComplete {
case scala.util.Success(users) =>
users.foreach(user => {
val row = table.insertRow(-1)
val idCell = row.insertCell(0)
val nameCell = row.insertCell(1)
idCell.textContent = user.id.toString
nameCell.textContent = user.name
})
case scala.util.Failure(exception) =>
dom.window.alert("Failed to fetch user data")
}
}
}
HttpServer.main()
}프런트 엔드 코드 생성:
src/main/scala 폴더에 "index.scala.html"이라는 파일을 생성하고 파일에 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Scala.js MySQL Demo</title>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript" src="/assets/example-scala-js-fastopt.js"></script>
</body>
</html> 프로젝트 실행:
명령줄에서 다음 명령을 실행하여 Scala 프로젝트를 시작합니다.
sbt run
브라우저에서 http://localhost:9000/을 열면 다음과 같은 테이블이 표시됩니다. MySQL 데이터베이스에서 얻은 사용자 데이터.
결론:
이 기사에서는 MySQL 데이터베이스를 사용하여 Scala.js에서 데이터 프런트 엔드 표시 기능을 구현하는 방법을 소개합니다. 간단한 Scala 프로젝트를 만들고 데이터베이스와 상호 작용하기 위한 클래스와 메서드를 정의했으며 Scala.js를 사용하여 데이터베이스에서 얻은 데이터를 프런트 엔드 페이지에 표시했습니다. 이 예제를 통해 Scala.js와 MySQL 간의 데이터 상호 작용 및 표시 기능을 구현하는 방법을 더 잘 이해할 수 있습니다. 이 기사가 도움이 되기를 바랍니다.
위 내용은 MySQL을 사용하여 Scala.js에서 데이터 프런트 엔드 표시 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!