Home > Article > Database > 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

PHPzOriginal: 2023-07-30 09:55:561515browse

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!

scala mysql html JS 数据库 http

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use caching technology in MySQL to improve query speed?Next article：How to use caching technology in MySQL to improve query speed?

See more

How to use MySQL to implement data front-end display function in Scala.js

Related articles