Developing with MySQL and CoffeeScript: How to implement data search function-Mysql Tutorial-php.cn

Home

Database

Mysql Tutorial

Developing with MySQL and CoffeeScript: How to implement data search function

王林

Jul 29, 2023 pm 09:27 PM

mysqlData searchcoffeescript

Development using MySQL and CoffeeScript: How to implement data search function

Introduction:
In Web applications, data search function is very common and important. Whether it’s an e-commerce website or a social media platform, users want to be able to find the information they need quickly and accurately. This article will introduce how to use MySQL and CoffeeScript to implement a simple data search function, and attach corresponding code examples.

1. Preparation:
Before starting, we need to first ensure that the MySQL database and CoffeeScript compiler have been installed. You can choose the appropriate installation method according to your operating system and preferences.

2. Database design:
Suppose we have a table named "products", which contains the following fields:

id: product ID (primary key)
name: Product name
price: Product price
description: Product description

3. Server-side code:

First, create a file named "search.coffee" for writing server-side code.
In the file, first introduce the MySQL module and create a connection to the database. The specific code is as follows:

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

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

Next, we can write an API interface to receive search keywords and return matching data. The code is as follows:

# 创建搜索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. Client code:

Create an HTML file named "search.html" and add a text box and A button for entering search keywords and triggering the search function. The code is as follows:

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

Create a CoffeeScript file named "search.coffee" and add the JavaScript code used to send the search request in the file. The code is as follows:

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

Create a JavaScript file named "search.js" and use the CoffeeScript compiler to compile the "search.coffee" file into a JavaScript file.

5. Run the application:

In the terminal, enter the directory where the server-side code is stored, and execute the following command to start the server:

coffee search.coffee

Open the "search.html" file in the browser and you will see a simple search interface.
Enter keywords and click the "Search" button, you will see the product names matching the keywords displayed on the page.

Conclusion:
Through the above steps, we successfully implemented a simple data search function using MySQL and CoffeeScript. Of course, this is just a basic example, and actual applications may require more complex search logic and interface design. I hope this article can help readers better understand and apply related technologies, and further expand and optimize their projects.

Reference materials:

MySQL official documentation: https://dev.mysql.com/doc/
CoffeeScript official documentation: https://coffeescript. org/

The above is the detailed content of Developing with MySQL and CoffeeScript: How to implement data search function. For more information, please follow other related articles on the PHP Chinese website!

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