So verwenden Sie MySQL, um die Daten-Front-End-Anzeigefunktion in Scala.js zu implementieren-MySQL-Tutorial-php.cn

So verwenden Sie MySQL, um die Daten-Front-End-Anzeigefunktion in Scala.js zu implementieren

PHPz

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

Original

1533 Leute haben es durchsucht

So implementieren Sie mit MySQL die Front-End-Anzeigefunktion für Daten in Scala.js

Übersicht:
In modernen Webanwendungen ist es häufig erforderlich, Daten aus der Datenbank abzurufen und auf der Front-End-Seite anzuzeigen. In diesem Artikel wird erläutert, wie Sie mithilfe der MySQL-Datenbank die Daten-Front-End-Anzeigefunktion in Scala.js implementieren. In diesem Artikel wird die Scala-Sprache zum Schreiben von Back-End-Code und Scala.js zum Schreiben von Front-End-Code verwendet.

Umgebungseinrichtung:
Zunächst müssen Sie Scala und den MySQL-Server lokal installieren. Stellen Sie sicher, dass die Scala-Entwicklungsumgebung korrekt konfiguriert und der MySQL-Server installiert ist.

Datenbank erstellen:
Erstellen Sie in MySQL eine Datenbank mit dem Namen „example“ und erstellen Sie eine einfache Datentabelle mit dem Namen „users“, die zwei Spalten enthält: „id“ und „name“. Wird zum Speichern der ID und des Namens des Benutzers verwendet.

Erstellen Sie ein Scala-Projekt:
Erstellen Sie ein neues Scala-Projekt und fügen Sie die folgenden Abhängigkeiten zur build.sbt-Datei des Projekts hinzu:

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

Nach dem Login kopieren

Erstellen Sie den Backend-Code:
Erstellen Sie ein neues Scala-Projekt im Ordner src/main/scala mit dem Namen „ Main.scala“-Datei und fügen Sie den folgenden Code in die Datei ein:

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

Nach dem Login kopieren

Erstellen Sie den Front-End-Code:
Erstellen Sie eine Datei mit dem Namen „index.scala.html“ im Ordner src/main/scala und fügen Sie sie in die Datei „Hinzufügen“ ein den folgenden Code in:

<!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>

Nach dem Login kopieren

Führen Sie das Projekt aus:
Führen Sie den folgenden Befehl in der Befehlszeile aus, um das Scala-Projekt zu starten:

sbt run

Nach dem Login kopieren

Öffnen Sie http://localhost:9000/ im Browser. Sie sehen eine Tabelle mit dem Benutzerdaten aus der MySQL-Datenbank.

Fazit:
In diesem Artikel wird erläutert, wie Sie mithilfe der MySQL-Datenbank die Daten-Front-End-Anzeigefunktion in Scala.js implementieren. Wir haben ein einfaches Scala-Projekt erstellt, Klassen und Methoden für die Interaktion mit der Datenbank definiert und Scala.js verwendet, um die aus der Datenbank erhaltenen Daten auf der Front-End-Seite anzuzeigen. Anhand dieses Beispiels können Sie besser verstehen, wie Sie Dateninteraktionen und Anzeigefunktionen zwischen Scala.js und MySQL implementieren. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie MySQL, um die Daten-Front-End-Anzeigefunktion in Scala.js zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!