MySQLとCoffeeScriptで開発する：データ検索機能の実装方法-mysql チュートリアル-php.cn

MySQLとCoffeeScriptで開発する：データ検索機能の実装方法

王林

リリース： 2023-07-29 21:27:17

オリジナル

698 人が閲覧しました

MySQL と CoffeeScript を使用した開発: データ検索機能の実装方法

はじめに:
Web アプリケーションでは、データ検索機能は非常に一般的かつ重要です。電子商取引 Web サイトであれ、ソーシャルメディアプラットフォームであれ、ユーザーは必要な情報を迅速かつ正確に見つけられることを望んでいます。この記事では、MySQL と CoffeeScript を使用して簡単なデータ検索機能を実装する方法を紹介し、対応するコード例を添付します。

1. 準備:
始める前に、まず MySQL データベースと CoffeeScript コンパイラーがインストールされていることを確認する必要があります。オペレーティングシステムと好みに応じて、適切なインストール方法を選択できます。

2. データベース設計:
「products」という名前のテーブルがあり、次のフィールドが含まれているとします:

id: 製品 ID (主キー)
name: 製品名
price: 製品価格
description: 製品説明

3. サーバー側コード:

まず、サーバー側のコードを記述するための「search.coffee」という名前のファイルを作成します。
このファイルでは、まず MySQL モジュールを導入し、データベースへの接続を作成します。具体的なコードは次のとおりです。

mysql = require 'mysql'

# 创建与数据库的连接
connection = mysql.createConnection(
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'my_database'
)

# 连接数据库
connection.connect((err) ->
  if err
    throw err
  console.log 'Connected to MySQL database'
)

# 在此处编写其他相关服务器端代码

ログイン後にコピー

次に、検索キーワードを受け取り、一致するデータを返す API インターフェイスを作成できます。コードは次のとおりです。

# 创建搜索API接口
app.get '/api/search', (req, res) ->
  # 获取搜索关键字
  keyword = req.query.keyword

  # 在数据库中执行搜索
  sql = 'SELECT * FROM products WHERE name LIKE ? OR description LIKE ?'
  params = ['%' + keyword + '%', '%' + keyword + '%']

  connection.query sql, params, (err, results) ->
    if err
      throw err
    res.json results

  # 关闭数据库连接
  connection.end()

ログイン後にコピー

4. クライアントコード:

「search.html」という名前の HTML ファイルを作成し、テキストボックスと入力用の A ボタンを追加します。キーワードを検索し、検索機能をトリガーします。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>Data Search</title>
</head>
<body>
  <input type="text" id="keyword">
  <button onclick="search()">Search</button>
  <div id="results"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="search.js"></script>
</body>
</html>

ログイン後にコピー

「search.coffee」という名前の CoffeeScript ファイルを作成し、ファイル内で検索リクエストの送信に使用する JavaScript コードを追加します。コードは次のとおりです。

search = ->
  # 获取搜索关键字
  keyword = document.getElementById('keyword').value

  # 发送搜索请求
  $.get(
    '/api/search',
    {keyword: keyword},
    (data) ->
      # 将搜索结果显示在页面上
      resultsDiv = document.getElementById('results')
      resultsDiv.innerHTML = ''
      for product in data
        resultItem = document.createElement('div')
        resultItem.innerHTML = product.name
        resultsDiv.appendChild(resultItem)
  )

ログイン後にコピー

「search.js」という名前の JavaScript ファイルを作成し、CoffeeScript コンパイラを使用して「search.coffee」ファイルを JavaScript ファイルにコンパイルします。

5. アプリケーションを実行します:

ターミナルで、サーバー側コードが保存されているディレクトリを入力し、次のコマンドを実行してサーバーを起動します。

coffee search.coffee

ログイン後にコピー

「search.html」ファイルをブラウザで開くと、シンプルな検索インターフェイスが表示されます。
キーワードを入力して「検索」ボタンをクリックすると、ページ内に表示されているキーワードに一致する商品名が表示されます。

結論:
上記の手順により、MySQL と CoffeeScript を使用した簡単なデータ検索機能を実装することに成功しました。もちろん、これは単なる基本的な例であり、実際のアプリケーションではより複雑な検索ロジックとインターフェイスの設計が必要になる場合があります。この記事が、読者が関連テクノロジーをよりよく理解して適用し、プロジェクトをさらに拡張および最適化するのに役立つことを願っています。

参考資料: