首頁 > 文章 > 資料庫 > 如何使用MySQL在Scala.js中實作資料前端展示功能

如何使用MySQL在Scala.js中實作資料前端展示功能

PHPz原創: 2023-07-30 09:55:561530瀏覽

概述:
在現代web應用程式中，常常需要從資料庫取得數據，並在前端頁面上展示。本文將介紹如何使用MySQL資料庫在Scala.js中實作資料前端展示的功能。本文將使用Scala語言編寫後端程式碼，並使用Scala.js編寫前端程式碼。

環境設定：
首先，需要在本機上安裝Scala和MySQL伺服器。確保已經正確配置Scala開發環境，並安裝了MySQL伺服器。

建立資料庫：
在MySQL中建立一個名為「example」的資料庫，並建立一個名為「users」的簡單資料表，包含"id"和"name"兩個欄位。用於儲存使用者的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資料夾中建立一個名為"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中文網其他相關文章！

scala mysql html JS 数据库 http

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何在MySQL中使用快取技術來提高查詢速度？下一篇：如何在MySQL中使用快取技術來提高查詢速度？

看更多