基于Express和MySQL的花卉搜索功能的设计与实现

本文链接：https://blog.csdn.net/qq_75101787/article/details/147197026

一、项目概述

本文介绍了一个基于Node.js Express框架和MySQL数据库的花卉信息搜索系统。该系统实现了以下核心功能：

用户通过前端界面输入花卉名称关键词
后端服务接收请求并查询MySQL数据库
返回匹配的花卉信息并以HTML格式渲染展示
包含图片、描述、价格等详细信息展示

二、技术架构

1. 后端技术栈

Node.js：JavaScript运行时环境
Express框架：轻量级Web应用- MySQL：关系型数据库存储花卉信息
连接池技术：优化数据库连接管理

2. 前端技术栈

HTML/CSS：页面结构和样式
jQuery：简化DOM操作和AJAX请求
响应式设计：适配不同设备屏幕

三、核心功能实现

1. 数据库设计

系统使用MySQL数据库存储花卉信息，主要字段包括：

``：花卉名称
url：花卉图片链接
content：花卉描述
price：原价
discount：折后价
numbers：月销量

CREATE DATABASE flower;

USE flower;

CREATE TABLE flowers (
    id INT AUTO_INCREMENT PRIMARY KEY,
    fname VARCHAR(50) NOT NULL COMMENT '花名',
    href VARCHAR(255) NOT NULL COMMENT转链接',
    url VARCHAR(255) NOT NULL COMMENT '花的图片链接',
    text VARCHAR(50) NOT NULL COMMENT '图片替代文字',
    content TEXT NOT NULL COMMENT '花的描述',
    price DECIMAL(10,2) NOT NULL COMMENT '原价',
    discount DECIMAL(10,2) NOT NULL COMMENT '打折后价格',
    numbers INT NOT NULL DEFAULT 0 COMMENT '库存数量',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='花卉信息表';

2. 后端服务实现

数据库连接配置

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'flower'
});

搜索接口实现

app.post('/search', function(req, res) {
  const keyword = req.body.keyword;
  
  pool.getConnection(function(err, connection) {
    connection.query('SELECT * FROM flower_name WHERE fname LIKE ?', 
      '%' + keyword + '%', 
      function(error, results) {
        // 处理结果并返回HTML
      });
  });
});

3. 前端交互实现

搜索表单提交

$('#searchForm').submit(function(event) {
  event.preventDefault();
  var keyword = $('#searchInput').val();
  
  $.ajax({
    url: 'http://localhost:5500/search',
    type: 'POST',
    data: { keyword: keyword },
    success: function(response) {
      $('#searchResults').html(response);
    }
  });
});

动态placeholder效果

const placeholders = ['玫瑰花', '牡丹花', '栀子花'];
let counter = 0;

function changePlaceholder() {
  document.getElementById('searchInput').placeholder = placeholders[counter];
  counter = (counter +) % placeholders.length;
}

setInterval(changePlaceholder, 6000);