如何使用MySQL在Scala.js中實作資料前端展示功能-mysql教程-PHP中文網

首頁

資料庫

mysql教程

如何使用MySQL在Scala.js中實作資料前端展示功能

PHPz

Jul 30, 2023 am 09:55 AM

mysql scalajs 數據前端展示

如何使用MySQL在Scala.js中實作資料前端展示功能

概述:
在現代web應用程式中，常常需要從資料庫取得數據，並在前端頁面上展示。本文將介紹如何使用MySQL資料庫在Scala.js中實作資料前端展示的功能。本文將使用Scala語言編寫後端程式碼，並使用Scala.js編寫前端程式碼。

環境設定：
首先，需要在本機上安裝Scala和MySQL伺服器。確保已經正確配置Scala開發環境，並安裝了MySQL伺服器。

建立資料庫：
在MySQL中建立一個名為「example」的資料庫，並建立一個名為「users」的簡單資料表，包含"id"和"name"兩個欄位。用於儲存使用者的ID和姓名。

建立Scala項目：
建立一個新的Scala項目，並新增下列依賴項到專案的build.sbt檔案：

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

登入後複製

建立後端程式碼：
在src/main/scala資料夾中建立一個名為"Main.scala"的文件，並在檔案中加入以下程式碼：

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

登入後複製

建立前端程式碼：
在src/main/scala資料夾中建立一個名為"index.scala.html"的文件，並在文件中新增以下程式碼：

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

登入後複製

運行專案：
在命令列中執行以下命令啟動Scala專案：

sbt run

登入後複製

在瀏覽器中開啟http://localhost:9000/，您將看到一個表格，其中顯示了從MySQL資料庫取得的使用者資料。

結論：
本文介紹如何使用MySQL資料庫在Scala.js中實作資料前端展示的功能。我們創建了一個簡單的Scala項目，定義了與資料庫互動的類別和方法，並使用Scala.js在前端頁面中展示了從資料庫中獲取的資料。透過這個例子，您可以更好地理解如何在Scala.js和MySQL之間實現資料互動和展示的功能。希望這篇文章對您有幫助。

以上是如何使用MySQL在Scala.js中實作資料前端展示功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

laravel入門實例 Apr 18, 2025 pm 12:45 PM

Laravel 是一款 PHP 框架，用於輕鬆構建 Web 應用程序。它提供一系列強大的功能，包括：安裝：使用 Composer 全局安裝 Laravel CLI，並在項目目錄中創建應用程序。路由：在 routes/web.php 中定義 URL 和處理函數之間的關係。視圖：在 resources/views 中創建視圖以呈現應用程序的界面。數據庫集成：提供與 MySQL 等數據庫的開箱即用集成，並使用遷移來創建和修改表。模型和控制器：模型表示數據庫實體，控制器處理 HTTP 請求。

MySQL和PhpMyAdmin：核心功能和功能 Apr 22, 2025 am 12:12 AM

MySQL和phpMyAdmin是強大的數據庫管理工具。 1）MySQL用於創建數據庫和表、執行DML和SQL查詢。 2）phpMyAdmin提供直觀界面進行數據庫管理、表結構管理、數據操作和用戶權限管理。

MySQL與其他編程語言：一種比較 Apr 19, 2025 am 12:22 AM

MySQL与其他编程语言相比，主要用于存储和管理数据，而其他语言如Python、Java、C 则用于逻辑处理和应用开发。MySQL以其高性能、可扩展性和跨平台支持著称，适合数据管理需求，而其他语言在各自领域如数据分析、企业应用和系统编程中各有优势。

解決數據庫連接問題：使用minii/db庫的實際案例 Apr 18, 2025 am 07:09 AM

在開發一個小型應用時，我遇到了一個棘手的問題：需要快速集成一個輕量級的數據庫操作庫。嘗試了多個庫後，我發現它們要么功能過多，要么兼容性不佳。最終，我找到了minii/db，這是一個基於Yii2的簡化版本，完美地解決了我的問題。

laravel框架安裝方法 Apr 18, 2025 pm 12:54 PM

文章摘要：本文提供了詳細分步說明，指導讀者如何輕鬆安裝 Laravel 框架。 Laravel 是一個功能強大的 PHP 框架，它 упростил 和加快了 web 應用程序的開發過程。本教程涵蓋了從系統要求到配置數據庫和設置路由等各個方面的安裝過程。通過遵循這些步驟，讀者可以快速高效地為他們的 Laravel 項目打下堅實的基礎。