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

前端界面

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

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

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

技术架构图

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

步骤概述

Frontend (Vue.js):
- 上传 PDF 文件并发送到后端。
- 输入查询内容并发送到后端。
- 显示查询结果。
Backend (Node.js):
- 接收 PDF 文件并解析内容。
- 将解析后的内容存储到 Elasticsearch。
- 接收查询请求并从 Elasticsearch 中搜索内容。
- 返回查询结果给前端。
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>