Maison > Article > base de données > Développement avec MySQL et CoffeeScript : comment implémenter la fonction de recherche de données

Développement avec MySQL et CoffeeScript : comment implémenter la fonction de recherche de données

王林original: 2023-07-29 21:27:17649parcourir

Développé à l'aide de MySQL et CoffeeScript : Comment implémenter la fonction de recherche de données

Introduction :
Dans les applications Web, la fonction de recherche de données est très courante et importante. Qu’il s’agisse d’un site de commerce électronique ou d’une plateforme de médias sociaux, les utilisateurs veulent pouvoir trouver les informations dont ils ont besoin rapidement et avec précision. Cet article expliquera comment utiliser MySQL et CoffeeScript pour implémenter une fonction de recherche de données simple et joindra des exemples de code correspondants.

1. Préparation :
Avant de commencer, nous devons d'abord nous assurer que la base de données MySQL et le compilateur CoffeeScript ont été installés. Vous pouvez choisir la méthode d'installation appropriée en fonction de votre système d'exploitation et de vos préférences.

2. Conception de la base de données :
Supposons que nous ayons une table nommée "products", qui contient les champs suivants :

id : ID du produit (clé primaire)
name : nom du produit
price : prix du produit
description : Description du produit

3. Code côté serveur :

Tout d'abord, créez un fichier nommé "search.coffee" pour écrire du code côté serveur.
Dans le fichier, introduisez d'abord le module MySQL et créez une connexion à la base de données. Le code spécifique est le suivant :

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

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

Ensuite, nous pouvons écrire une interface API pour recevoir des mots-clés de recherche et renvoyer les données correspondantes. Le code est le suivant :

# 创建搜索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()

IV. Code client :

Créez un fichier HTML nommé "search.html" et ajoutez une zone de texte et un bouton au fichier pour saisir des mots-clés de recherche et déclencher des recherches. Le code est le suivant :

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

Créez un fichier CoffeeScript nommé "search.coffee" et ajoutez le code JavaScript d'envoi de la requête de recherche dans le fichier. Le code est le suivant :

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

Créez un fichier JavaScript nommé "search.js" et utilisez le compilateur CoffeeScript pour compiler le fichier "search.coffee" en un fichier JavaScript.

5. Exécutez l'application :

Dans le terminal, entrez le répertoire où le code côté serveur est stocké et exécutez la commande suivante pour démarrer le serveur :

coffee search.coffee

Ouvrez le "search.html" fichier dans le navigateur. Voir une interface de recherche simple.
Entrez le mot-clé et cliquez sur le bouton "Rechercher", vous verrez les noms de produits correspondant au mot-clé affiché sur la page.

Conclusion :
Grâce aux étapes ci-dessus, nous avons implémenté avec succès une fonction de recherche de données simple à l'aide de MySQL et CoffeeScript. Bien sûr, il ne s’agit que d’un exemple simple, et les applications réelles peuvent nécessiter une logique de recherche et une conception d’interface plus complexes. J'espère que cet article pourra aider les lecteurs à mieux comprendre et appliquer les technologies associées, ainsi qu'à développer et optimiser davantage leurs projets.

Matériaux de référence :

Documentation officielle MySQL : https://dev.mysql.com/doc/
Documentation officielle CoffeeScript : https://coffeescript.org/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript mysql html coffeescript 接口 JS 数据库 https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter des opérations d'agrégation de données dans Scala à l'aide de MySQLArticle suivant：Comment implémenter des opérations d'agrégation de données dans Scala à l'aide de MySQL

Articles Liés

Voir plus