


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

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

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.

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.

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

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

É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).

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