当前位置：首页 > news >正文

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

news 2025/6/24 22:36:52

前端界面

接上篇: 制作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>