MySQL を使用して Scala.js にデータ フロントエンド表示機能を実装する方法
- PHPzオリジナル
- 2023-07-30 09:55:561476ブラウズ
MySQL を使用して Scala.js にデータ フロントエンド表示機能を実装する方法
概要:
最新の Web アプリケーションでは、多くの場合、データベースからデータを取得して、それをデータベースに表示する必要があります。フロントエンドページ。この記事では、MySQL データベースを使用して、Scala.js でデータのフロントエンド表示機能を実装する方法を紹介します。この記事では、Scala 言語を使用してバックエンド コードを記述し、Scala.js を使用してフロントエンド コードを記述します。
環境設定:
まず、Scala サーバーと MySQL サーバーをローカルにインストールする必要があります。 Scala 開発環境が正しく構成されており、MySQL サーバーがインストールされていることを確認してください。
データベースの作成:
MySQL で「example」という名前のデータベースを作成し、「id」と「name」の 2 つの列を含む「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" )
バックエンド コードを作成します:
In Create a src/main/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 中国語 Web サイトの他の関連記事を参照してください。