How to use MySQL to implement data front-end display function in Scala.js
How to use MySQL to implement data front-end display function in Scala.js
Overview:
In modern web applications, it is often necessary to obtain data from the database and display it on the front-end page. This article will introduce how to use the MySQL database to implement the data front-end display function in Scala.js. This article will use Scala language to write back-end code and Scala.js to write front-end code.
Environment settings:
First, you need to install Scala and MySQL servers locally. Make sure that the Scala development environment has been configured correctly and the MySQL server has been installed.
Create database:
Create a database named "example" in MySQL, and create a simple data table named "users", containing two columns: "id" and "name". Used to store the user's ID and name.
Create a Scala project:
Create a new Scala project and add the following dependencies to the project's build.sbt file:
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" )
Create the backend code:
In Create a file named "Main.scala" in the src/main/scala folder and add the following code in the file:
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()
}Create the front-end code:
In the src/main/scala folder Create a file named "index.scala.html" and add the following code in the file:
<!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>Run the project:
Execute the following command in the command line to start the Scala project:
sbt run
Open http://localhost:9000/ in your browser and you will see a table showing the user data obtained from the MySQL database.
Conclusion:
This article introduces how to use the MySQL database to implement the data front-end display function in Scala.js. We created a simple Scala project, defined classes and methods for interacting with the database, and used Scala.js to display the data obtained from the database in the front-end page. Through this example, you can better understand how to implement data interaction and display functions between Scala.js and MySQL. Hope this article is helpful to you.
The above is the detailed content of How to use MySQL to implement data front-end display function in Scala.js. For more information, please follow other related articles on the PHP Chinese website!
What Are the Limitations of Using Views in MySQL?May 14, 2025 am 12:10 AMMySQLviewshavelimitations:1)Theydon'tsupportallSQLoperations,restrictingdatamanipulationthroughviewswithjoinsorsubqueries.2)Theycanimpactperformance,especiallywithcomplexqueriesorlargedatasets.3)Viewsdon'tstoredata,potentiallyleadingtooutdatedinforma
Securing Your MySQL Database: Adding Users and Granting PrivilegesMay 14, 2025 am 12:09 AMProperusermanagementinMySQLiscrucialforenhancingsecurityandensuringefficientdatabaseoperation.1)UseCREATEUSERtoaddusers,specifyingconnectionsourcewith@'localhost'or@'%'.2)GrantspecificprivilegeswithGRANT,usingleastprivilegeprincipletominimizerisks.3)
What Factors Influence the Number of Triggers I Can Use in MySQL?May 14, 2025 am 12:08 AMMySQLdoesn'timposeahardlimitontriggers,butpracticalfactorsdeterminetheireffectiveuse:1)Serverconfigurationimpactstriggermanagement;2)Complextriggersincreasesystemload;3)Largertablesslowtriggerperformance;4)Highconcurrencycancausetriggercontention;5)M
MySQL: Is it safe to store BLOB?May 14, 2025 am 12:07 AMYes,it'ssafetostoreBLOBdatainMySQL,butconsiderthesefactors:1)StorageSpace:BLOBscanconsumesignificantspace,potentiallyincreasingcostsandslowingperformance.2)Performance:LargerrowsizesduetoBLOBsmayslowdownqueries.3)BackupandRecovery:Theseprocessescanbe
MySQL: Adding a user through a PHP web interfaceMay 14, 2025 am 12:04 AMAdding MySQL users through the PHP web interface can use MySQLi extensions. The steps are as follows: 1. Connect to the MySQL database and use the MySQLi extension. 2. Create a user, use the CREATEUSER statement, and use the PASSWORD() function to encrypt the password. 3. Prevent SQL injection and use the mysqli_real_escape_string() function to process user input. 4. Assign permissions to new users and use the GRANT statement.
MySQL: BLOB and other no-sql storage, what are the differences?May 13, 2025 am 12:14 AMMySQL'sBLOBissuitableforstoringbinarydatawithinarelationaldatabase,whileNoSQLoptionslikeMongoDB,Redis,andCassandraofferflexible,scalablesolutionsforunstructureddata.BLOBissimplerbutcanslowdownperformancewithlargedata;NoSQLprovidesbetterscalabilityand
MySQL Add User: Syntax, Options, and Security Best PracticesMay 13, 2025 am 12:12 AMToaddauserinMySQL,use:CREATEUSER'username'@'host'IDENTIFIEDBY'password';Here'showtodoitsecurely:1)Choosethehostcarefullytocontrolaccess.2)SetresourcelimitswithoptionslikeMAX_QUERIES_PER_HOUR.3)Usestrong,uniquepasswords.4)EnforceSSL/TLSconnectionswith
MySQL: How to avoid String Data Types common mistakes?May 13, 2025 am 12:09 AMToavoidcommonmistakeswithstringdatatypesinMySQL,understandstringtypenuances,choosetherighttype,andmanageencodingandcollationsettingseffectively.1)UseCHARforfixed-lengthstrings,VARCHARforvariable-length,andTEXT/BLOBforlargerdata.2)Setcorrectcharacters
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Notepad++7.3.1
Easy-to-use and free code editor
