Membangunkan dengan MySQL dan CoffeeScript: Bagaimana untuk melaksanakan fungsi carian data-tutorial mysql-php.cn

Membangunkan dengan MySQL dan CoffeeScript: Bagaimana untuk melaksanakan fungsi carian data

王林

Lepaskan： 2023-07-29 21:27:17

asal

698 orang telah melayarinya

Dibangunkan menggunakan MySQL dan CoffeeScript: Bagaimana untuk melaksanakan fungsi carian data

Pengenalan:
Dalam aplikasi web, fungsi carian data adalah sangat biasa dan penting. Sama ada tapak web e-dagang atau platform media sosial, pengguna mahu dapat mencari maklumat yang mereka perlukan dengan cepat dan tepat. Artikel ini akan memperkenalkan cara menggunakan MySQL dan CoffeeScript untuk melaksanakan fungsi carian data mudah, dan melampirkan contoh kod yang sepadan.

1. Penyediaan:
Sebelum bermula, kita perlu terlebih dahulu memastikan pangkalan data MySQL dan pengkompil CoffeeScript telah dipasang. Anda boleh memilih kaedah pemasangan yang sesuai mengikut sistem pengendalian dan pilihan anda.

2. Reka bentuk pangkalan data:
Andaikan kita mempunyai jadual bernama "produk", yang mengandungi medan berikut:

id: ID produk (kunci utama)
nama: nama produk
harga: harga produk
: Penerangan produk

3. Kod sebelah pelayan:

Mula-mula, buat fail bernama "search.coffee" untuk menulis kod sebelah pelayan.
Dalam fail, mula-mula perkenalkan modul MySQL dan buat sambungan ke pangkalan data. Kod khusus adalah seperti berikut:

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

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

Salin selepas log masuk

Seterusnya, kami boleh menulis antara muka API untuk menerima kata kunci carian dan mengembalikan data yang sepadan. Kod tersebut adalah seperti berikut:

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

Salin selepas log masuk

IV Kod pelanggan:

Buat fail HTML bernama "search.html" dan tambahkan kotak teks dan butang pada fail untuk memasukkan kata kunci carian dan mencetuskan Fungsi carian. Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Buat fail CoffeeScript bernama "search.coffee" dan tambah kod JavaScript untuk menghantar permintaan carian dalam fail. Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Buat fail JavaScript bernama "search.js" dan gunakan pengkompil CoffeeScript untuk menyusun fail "search.coffee" ke dalam fail JavaScript.

5. Jalankan aplikasi:

Dalam terminal, masukkan direktori tempat kod sisi pelayan disimpan, dan laksanakan arahan berikut untuk memulakan pelayan:

rreee

Buka "search.html" fail dalam penyemak imbas Lihat antara muka carian mudah.
Masukkan kata kunci dan klik butang "Cari", anda akan melihat nama produk sepadan dengan kata kunci yang dipaparkan pada halaman.

Kesimpulan:
Melalui langkah di atas, kami berjaya melaksanakan fungsi carian data mudah menggunakan MySQL dan CoffeeScript. Sudah tentu, ini hanyalah contoh asas, dan aplikasi sebenar mungkin memerlukan logik carian dan reka bentuk antara muka yang lebih kompleks. Saya harap artikel ini dapat membantu pembaca lebih memahami dan menggunakan teknologi yang berkaitan, dan seterusnya mengembangkan dan mengoptimumkan projek mereka.

Bahan rujukan:

Dokumentasi rasmi MySQL: https://dev.mysql.com/doc/
Dokumentasi rasmiCoffeeScript: https://coffeescript.org/

Atas ialah kandungan terperinci Membangunkan dengan MySQL dan CoffeeScript: Bagaimana untuk melaksanakan fungsi carian data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!