如何使用MySQL在Scala.js中實作資料前端展示功能
概述:
在現代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中文網其他相關文章!