Cara menggunakan MySQL untuk melaksanakan fungsi paparan bahagian hadapan data dalam Scala.js-tutorial mysql-php.cn

Cara menggunakan MySQL untuk melaksanakan fungsi paparan bahagian hadapan data dalam Scala.js

PHPz

Lepaskan： 2023-07-30 09:55:56

asal

1528 orang telah melayarinya

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"
)

Salin selepas log masuk

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()
}

Salin selepas log masuk

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>

Salin selepas log masuk

Jalankan projek:
Jalankan arahan berikut dalam baris arahan untuk memulakan projek Scala:

sbt run

Salin selepas log masuk

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!