从零搭建一个仿百度搜索的 Web 应用

一篇关于如何用 Node.js + 原生前端技术，快速搭建一个高还原度百度搜索应用的小记。

前言

百度搜索是国内最常用的搜索引擎之一，它的界面简洁、辨识度高。本文记录了如何用最基础的技术栈——Node.js + Express 后端，原生 HTML/CSS/JS 前端——搭建一个「能看又能搜」的仿百度搜索应用。

没有 React，没有 Vue，没有 webpack。有时候，最简单的技术栈反而能最快地把想法变成现实。

项目做了什么

一句话概括：一个长得像百度、搜起来也像百度的网页应用。

具体来说：

• 首页：彩色 Logo、搜索框、"百度一下"按钮、热门搜索推荐——和百度首页几乎一模一样
• 搜索：输入关键词，点击按钮或按回车，跳转到结果页
• 结果页：每条结果包含蓝色标题链接、绿色 URL、灰色摘要，支持翻页
• 响应式：手机和电脑都能正常用

技术选型

核心思路：后端代理搜索请求，前端只管渲染。这样既避免了跨域问题，又能在 DuckDuckGo 没有结果时无缝切换到模拟数据。

项目结构

baidu-search-clone/
├── server.js              # Express 服务器，端口 8080
├── package.json           # 依赖配置
└── public/                # 静态资源
    ├── index.html          # 首页
    ├── results.html        # 搜索结果页
    ├── css/style.css       # 百度风格样式
    └── js/app.js           # 前端交互逻辑

结构非常简单，一眼就能看懂每个文件的作用。

几个实现细节

1. 彩色 Logo

百度 Logo 的标志性配色是「B蓝 a红 i蓝 d绿 u红」。用 CSS 的 span 标签给每个字母单独上色就能实现：

<span class="logo-b">B</span>
<span class="logo-a">a</span>
<span class="logo-i">i</span>
<span class="logo-d">d</span>
<span class="logo-u">u</span>

没有图片，没有 SVG，纯 CSS 文字着色，加载零延迟。

2. 搜索流程

用户在首页输入关键词后：

1. 前端跳转到 results.html?q=关键词
2. app.js 读取 URL 参数，调用后端 /api/search?q=关键词&page=1
3. 后端先尝试 DuckDuckGo Instant Answer API
4. 如果没有结果，生成多源模拟数据（百度百科、维基、知乎、CSDN 等 10+ 平台）
5. 返回 JSON，前端渲染结果列表

// 后端搜索接口核心逻辑
app.get('/api/search', async (req, res) => {
  const q = req.query.q;
  const page = parseInt(req.query.page) || 1;

  // 优先用 DuckDuckGo
  let results = await searchDuckDuckGo(q);

  // 没有结果就用模拟数据
  if (!results || results.length === 0) {
    results = generateMockResults(q, page);
  }

  res.json({ results, total, page, q });
});

3. 翻页

翻页不刷新页面，只重新请求 API 并渲染。前端维护当前页码，点击"下一页"时 page + 1，点击"上一页"时 page - 1，逻辑简单直接。

4. 响应式设计

用 CSS 的 @media 查询适配移动端：

@media (max-width: 768px) {
  .search-box { flex-direction: column; }
  .logo { font-size: 40px; }
}

搜索框在小屏幕上垂直排列，Logo 字号缩小，保证手机上也能舒适使用。

如何运行

# 克隆仓库
git clone https://gitcode.com/gcw_glulAQEf/baidu-search-clone.git

# 安装依赖
cd baidu-search-clone
npm install

# 启动服务器
node server.js

浏览器打开 http://localhost:8080，输入任意关键词搜索即可。

效果展示

• 首页：居中的彩色 Logo + 搜索框 + "百度一下"按钮，底部有热门搜索标签
• 搜索结果：输入"华为云"后，展示 10 条结果，每条包含标题、链接和摘要
• 翻页：底部有上一页/下一页按钮，可以浏览更多结果

一些思考

为什么不用框架？ 这个项目页面只有两个（首页 + 结果页），交互也不复杂。引入 React/Vue 反而增加了构建配置的复杂度。原生 JS 完全能胜任，而且任何人打开代码就能看懂。

为什么后端代理搜索请求？ 如果前端直接调用 DuckDuckGo API，会遇到跨域问题（CORS）。后端代理不仅解决了跨域，还能在 API 无结果时无缝切换到模拟数据，用户完全无感知。

模拟数据的意义 DuckDuckGo 的 Instant Answer API 并不是对所有关键词都有结果。模拟数据保证了任何搜索都有输出，让 demo 体验完整。模拟结果来自 10+ 个真实平台（百度百科、知乎、CSDN 等），看起来很真实。