Rumah > Artikel > pangkalan data > Cara menggunakan MySQL untuk melaksanakan fungsi paparan bahagian hadapan data dalam Scala.js
Cara menggunakan MySQL untuk melaksanakan fungsi paparan bahagian hadapan data dalam Scala.js
- PHPzasal
- 2023-07-30 09:55:561529semak imbas
Cara menggunakan MySQL untuk melaksanakan fungsi paparan bahagian hadapan data dalam Scala.js
Ikhtisar:
Dalam aplikasi web moden, selalunya diperlukan untuk mendapatkan data daripada pangkalan data dan memaparkannya pada halaman hujung hadapan. Artikel ini akan memperkenalkan cara menggunakan pangkalan data MySQL untuk melaksanakan fungsi paparan bahagian hadapan data dalam Scala.js. Artikel ini akan menggunakan bahasa Scala untuk menulis kod hujung belakang dan Scala.js untuk menulis kod hujung hadapan.
Persediaan persekitaran:
Pertama, anda perlu memasang Scala dan pelayan MySQL secara setempat. Pastikan persekitaran pembangunan Scala telah dikonfigurasikan dengan betul dan pelayan MySQL telah dipasang.
Buat pangkalan data:
Buat pangkalan data bernama "contoh" dalam MySQL, dan buat jadual data ringkas bernama "pengguna", yang mengandungi dua lajur: "id" dan "nama". Digunakan untuk menyimpan ID dan nama pengguna.
Cipta projek Scala:
Cipta projek Scala baharu dan tambahkan kebergantungan berikut pada fail build.sbt projek:
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" )
Cipta kod hujung belakang:
Cipta projek Scala baharu dalam folder src/main/scala bernama " Main.scala" fail dan tambah kod berikut dalam fail:
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()
}Buat kod bahagian hadapan:
Buat fail bernama "index.scala.html" dalam folder src/main/scala dan tambah kod berikut dalam fail Tambah kod berikut dalam:
<!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> Jalankan projek:
Jalankan arahan berikut dalam baris arahan untuk memulakan projek Scala:
sbt run
Buka http://localhost:9000/ dalam penyemak imbas, anda akan melihat jadual dengan data Pengguna yang diperoleh daripada pangkalan data MySQL.
Kesimpulan:
Artikel ini memperkenalkan cara menggunakan pangkalan data MySQL untuk melaksanakan fungsi paparan bahagian hadapan data dalam Scala.js. Kami mencipta projek Scala yang mudah, menentukan kelas dan kaedah untuk berinteraksi dengan pangkalan data, dan menggunakan Scala.js untuk memaparkan data yang diperoleh daripada pangkalan data di halaman hujung hadapan. Melalui contoh ini, anda boleh lebih memahami cara melaksanakan interaksi data dan fungsi paparan antara Scala.js dan MySQL. Semoga artikel ini bermanfaat kepada anda.
Atas ialah kandungan terperinci Cara menggunakan MySQL untuk melaksanakan fungsi paparan bahagian hadapan data dalam Scala.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!