MySQL과 CoffeeScript를 이용한 개발: 데이터 검색 기능 구현 방법-MySQL 튜토리얼-php.cn

MySQL과 CoffeeScript를 이용한 개발: 데이터 검색 기능 구현 방법

王林

풀어 주다： 2023-07-29 21:27:17

원래의

728명이 탐색했습니다.

MySQL 및 CoffeeScript를 사용하여 개발: 데이터 검색 기능 구현 방법

소개:
웹 애플리케이션에서 데이터 검색 기능은 매우 일반적이고 중요합니다. 전자상거래 웹사이트든 소셜 미디어 플랫폼이든 사용자는 필요한 정보를 빠르고 정확하게 찾을 수 있기를 원합니다. 이 기사에서는 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()

로그인 후 복사

IV. 클라이언트 코드:

"search.html"이라는 HTML 파일을 만들고 파일에 검색 키워드를 입력하고 검색을 실행하는 버튼과 텍스트 상자를 추가합니다. 코드는 다음과 같습니다.

<!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를 이용하여 간단한 데이터 검색 기능을 성공적으로 구현했습니다. 물론 이는 단지 기본적인 예일 뿐이며, 실제 적용에는 더욱 복잡한 검색 로직과 인터페이스 디자인이 필요할 수 있습니다. 이 글을 통해 독자들이 관련 기술을 더 잘 이해하고 적용하며, 프로젝트를 더욱 확장하고 최적화하는 데 도움이 되기를 바랍니다.

참고 자료: