制作ChatPDF之前端Vue搭建（二）

前端界面

接上篇: 制作ChatPDF之Elasticsearch8.13.4搭建（一）

为了实现一个基于 Vue.js 的前端应用，用户可以上传 PDF 文件，输入查询，并在输出框中显示查询结果，你需要以下步骤：

1. 初始化 Vue 项目：使用 Vue CLI 创建一个新的 Vue 项目。
2. 安装依赖：安装处理 PDF 文件和查询功能所需的库。
3. 创建组件：创建上传 PDF 文件、输入查询和显示结果的组件。
4. 实现 PDF 处理和查询功能：解析上传的 PDF 文件并实现查询功能。
5. 整合组件：将组件整合到一个页面中，实现交互逻辑。

技术架构图

+---------------------+      +------------------+       +-----------------+
|                     |      |                  |       |                 |
| Frontend (Vue.js)   +----->| Backend (Node.js)|<----->| Elasticsearch   |
|                     |      |                  |       |                 |
| - File Upload       |      | - Upload API     |       | - Store PDF Data|
| - Input Query       |      | - Query API      |       | - Full-text     |
| - Display Results   |      | - Parse PDF      |       |   Search        |
|                     |      |                  |       |                 |
+---------------------+      +------------------+       +-----------------+

步骤概述

1. Frontend (Vue.js):
   • 上传 PDF 文件并发送到后端。
   • 输入查询内容并发送到后端。
   • 显示查询结果。
2. Backend (Node.js):
   • 接收 PDF 文件并解析内容。
   • 将解析后的内容存储到 Elasticsearch。
   • 接收查询请求并从 Elasticsearch 中搜索内容。
   • 返回查询结果给前端。
3. Elasticsearch:
   • 存储 PDF 文件内容。
   • 提供全文搜索功能。

下面是一个基本的示例代码，展示如何实现上述功能。

1. 初始化 Vue 项目

首先，确保你已经安装了 Vue CLI。如果没有，先安装 Vue CLI：

npm install -g @vue/cli

然后创建一个新的 Vue 项目：

vue create pdf-query-app
cd pdf-query-app

2. 创建组件

创建一个新组件 PdfUploader.vue，用于上传 PDF 文件、输入查询和显示结果。

PdfUploader.vue

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="application/pdf" />
    <input type="text" v-model="query" placeholder="输入查询内容" />
    <button @click="searchPdf">查询</button>
    <div v-if="result">
      <h3>查询结果：</h3>
      <p>{{ result }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      result: null
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      fetch('http://localhost:3000/pdf/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
    },
    searchPdf() {
      fetch(`http://localhost:3000/pdf/search?q=${this.query}`)
        .then(response => response.json())
        .then(data => {
          this.result = data.hits.hits.map(hit => hit._source.content).join(', ');
        })
        .catch(error => console.error('Error:', error));
    }
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

4. 整合组件

在 App.vue 中使用 PdfUploader 组件：

App.vue

<template>
  <div id="app">
    <PdfUploader />
  </div>
</template>

<script>
import PdfUploader from './components/PdfUploader.vue';

export default {
  name: 'App',
  components: {
    PdfUploader
  }
};
</script>

<style>
/* 添加你的样式 */
</style>

5. 运行项目

最后，启动你的 Vue 项目：

npm run serve

访问 http://localhost:8080，你应该能够看到一个文件上传输入框、一个文本输入框和一个按钮。上传一个 PDF 文件，输入查询内容并点击“查询”按钮，查询结果将显示在下方。

这个示例展示了基本的文件上传、PDF 解析和查询功能。你可以根据需要进一步优化和扩展功能，例如添加错误处理、更高级的查询功能等。