Maison base de données tutoriel mysql 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

Jul 30, 2023 am 09:55 AM
mysql scalajs 数据前端展示

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"
)
Copier après la connexion

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()
}
Copier après la connexion

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>
Copier après la connexion

Exécutez le projet :
Exécutez la commande suivante dans la ligne de commande pour démarrer le projet Scala :

sbt run
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

MySQL: la facilité de gestion des données pour les débutants MySQL: la facilité de gestion des données pour les débutants Apr 09, 2025 am 12:07 AM

MySQL convient aux débutants car il est simple à installer, puissant et facile à gérer les données. 1. Installation et configuration simples, adaptées à une variété de systèmes d'exploitation. 2. Prise en charge des opérations de base telles que la création de bases de données et de tables, d'insertion, d'interrogation, de mise à jour et de suppression de données. 3. Fournir des fonctions avancées telles que les opérations de jointure et les sous-questionnaires. 4. Les performances peuvent être améliorées par l'indexation, l'optimisation des requêtes et le partitionnement de la table. 5. Prise en charge des mesures de sauvegarde, de récupération et de sécurité pour garantir la sécurité et la cohérence des données.

Puis-je récupérer le mot de passe de la base de données dans Navicat? Puis-je récupérer le mot de passe de la base de données dans Navicat? Apr 08, 2025 pm 09:51 PM

Navicat lui-même ne stocke pas le mot de passe de la base de données et ne peut récupérer que le mot de passe chiffré. Solution: 1. Vérifiez le gestionnaire de mots de passe; 2. Vérifiez la fonction "Remember Motway" de Navicat; 3. Réinitialisez le mot de passe de la base de données; 4. Contactez l'administrateur de la base de données.

Comment créer Navicat Premium Comment créer Navicat Premium Apr 09, 2025 am 07:09 AM

Créez une base de données à l'aide de NAVICAT Premium: Connectez-vous au serveur de base de données et entrez les paramètres de connexion. Cliquez avec le bouton droit sur le serveur et sélectionnez Créer une base de données. Entrez le nom de la nouvelle base de données et le jeu de caractères spécifié et la collation. Connectez-vous à la nouvelle base de données et créez le tableau dans le navigateur d'objet. Cliquez avec le bouton droit sur le tableau et sélectionnez Insérer des données pour insérer les données.

MySQL: Concepts simples pour l'apprentissage facile MySQL: Concepts simples pour l'apprentissage facile Apr 10, 2025 am 09:29 AM

MySQL est un système de gestion de base de données relationnel open source. 1) Créez une base de données et des tables: utilisez les commandes CreateDatabase et CreateTable. 2) Opérations de base: insérer, mettre à jour, supprimer et sélectionner. 3) Opérations avancées: jointure, sous-requête et traitement des transactions. 4) Compétences de débogage: vérifiez la syntaxe, le type de données et les autorisations. 5) Suggestions d'optimisation: utilisez des index, évitez de sélectionner * et utilisez les transactions.

Comment afficher le mot de passe de la base de données dans NAVICAT pour MARIADB? Comment afficher le mot de passe de la base de données dans NAVICAT pour MARIADB? Apr 08, 2025 pm 09:18 PM

NAVICAT pour MARIADB ne peut pas afficher directement le mot de passe de la base de données car le mot de passe est stocké sous forme cryptée. Pour garantir la sécurité de la base de données, il existe trois façons de réinitialiser votre mot de passe: réinitialisez votre mot de passe via Navicat et définissez un mot de passe complexe. Affichez le fichier de configuration (non recommandé, haut risque). Utilisez des outils de ligne de commande système (non recommandés, vous devez être compétent dans les outils de ligne de commande).

Comment exécuter SQL dans Navicat Comment exécuter SQL dans Navicat Apr 08, 2025 pm 11:42 PM

Étapes pour effectuer SQL dans NAVICAT: Connectez-vous à la base de données. Créez une fenêtre d'éditeur SQL. Écrivez des requêtes ou des scripts SQL. Cliquez sur le bouton Exécuter pour exécuter une requête ou un script. Affichez les résultats (si la requête est exécutée).

Comment créer une nouvelle connexion à MySQL dans Navicat Comment créer une nouvelle connexion à MySQL dans Navicat Apr 09, 2025 am 07:21 AM

Vous pouvez créer une nouvelle connexion MySQL dans NAVICAT en suivant les étapes: ouvrez l'application et sélectionnez une nouvelle connexion (CTRL N). Sélectionnez "MySQL" comme type de connexion. Entrez l'adresse Hostname / IP, le port, le nom d'utilisateur et le mot de passe. (Facultatif) Configurer les options avancées. Enregistrez la connexion et entrez le nom de la connexion.

MySQL et SQL: Compétences essentielles pour les développeurs MySQL et SQL: Compétences essentielles pour les développeurs Apr 10, 2025 am 09:30 AM

MySQL et SQL sont des compétences essentielles pour les développeurs. 1.MySQL est un système de gestion de base de données relationnel open source, et SQL est le langage standard utilisé pour gérer et exploiter des bases de données. 2.MySQL prend en charge plusieurs moteurs de stockage via des fonctions de stockage et de récupération de données efficaces, et SQL termine des opérations de données complexes via des instructions simples. 3. Les exemples d'utilisation comprennent les requêtes de base et les requêtes avancées, telles que le filtrage et le tri par condition. 4. Les erreurs courantes incluent les erreurs de syntaxe et les problèmes de performances, qui peuvent être optimisées en vérifiant les instructions SQL et en utilisant des commandes Explication. 5. Les techniques d'optimisation des performances incluent l'utilisation d'index, d'éviter la numérisation complète de la table, d'optimiser les opérations de jointure et d'améliorer la lisibilité du code.

See all articles