So verwenden Sie MySQL, um die Daten-Front-End-Anzeigefunktion in Scala.js zu implementieren
- PHPzOriginal
- 2023-07-30 09:55:561530Durchsuche
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" )
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()
}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> Führen Sie das Projekt aus:
Führen Sie den folgenden Befehl in der Befehlszeile aus, um das Scala-Projekt zu starten:
sbt run
Ö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!