Maison > Article > base de données > Comment utiliser MySQL pour implémenter la fonction d'affichage frontal des données dans Scala.js
Comment utiliser MySQL pour implémenter la fonction d'affichage frontal des données dans Scala.js
- PHPzoriginal
- 2023-07-30 09:55:561515parcourir
Comment utiliser MySQL pour implémenter la fonction d'affichage frontal des données dans Scala.js
Vue d'ensemble :
Dans les applications Web modernes, il est souvent nécessaire d'obtenir des données de la base de données et de les afficher sur la page frontale. Cet article explique comment utiliser la base de données MySQL pour implémenter la fonction d'affichage frontal des données dans Scala.js. Cet article utilisera le langage Scala pour écrire du code back-end et Scala.js pour écrire du code front-end.
Configuration de l'environnement :
Tout d'abord, vous devez installer le serveur Scala et MySQL localement. Assurez-vous que l'environnement de développement Scala a été correctement configuré et que le serveur MySQL a été installé.
Créer une base de données :
Créez une base de données nommée "exemple" dans MySQL et créez une table de données simple nommée "utilisateurs", contenant deux colonnes : "id" et "nom". Utilisé pour stocker l'ID et le nom de l'utilisateur.
Créez un projet Scala :
Créez un nouveau projet Scala et ajoutez les dépendances suivantes au fichier build.sbt du projet :
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" )
Créez le code backend :
Créez un nouveau projet Scala dans le dossier src/main/scala nommé " Main.scala" et ajoutez le code suivant dans le fichier :
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()
}Créez le code front-end :
Créez un fichier nommé "index.scala.html" dans le dossier src/main/scala et ajoutez le code suivant dans le fichier Ajoutez le code suivant dans :
<!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> Exécutez le projet :
Exécutez la commande suivante dans la ligne de commande pour démarrer le projet Scala :
sbt run
Ouvrez http://localhost:9000/ dans le navigateur, vous verrez un table avec les données utilisateur obtenues à partir de la base de données MySQL.
Conclusion :
Cet article explique comment utiliser la base de données MySQL pour implémenter la fonction d'affichage frontal des données dans Scala.js. Nous avons créé un projet Scala simple, défini des classes et des méthodes pour interagir avec la base de données et utilisé Scala.js pour afficher les données obtenues à partir de la base de données sur la page frontale. Grâce à cet exemple, vous pouvez mieux comprendre comment implémenter l'interaction des données et les fonctions d'affichage entre Scala.js et MySQL. J'espère que cet article vous sera utile.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!