How to use MySQL to implement data front-end display function in Scala.js-Mysql Tutorial-php.cn

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

PHPz

Release： 2023-07-30 09:55:56

Original

1521 people have browsed it

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

Copy after login

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()
}

Copy after login

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>

Copy after login

Run the project:
Execute the following command in the command line to start the Scala project:

sbt run

Copy after login

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!