制作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>
5. 运行项目
最后,启动你的 Vue 项目:
npm run serve
访问 http://localhost:8080,你应该能够看到一个文件上传输入框、一个文本输入框和一个按钮。上传一个 PDF 文件,输入查询内容并点击“查询”按钮,查询结果将显示在下方。
这个示例展示了基本的文件上传、PDF 解析和查询功能。你可以根据需要进一步优化和扩展功能,例如添加错误处理、更高级的查询功能等。

相关文章:
制作ChatPDF之前端Vue搭建(二)
前端界面 接上篇: 制作ChatPDF之Elasticsearch8.13.4搭建(一) 为了实现一个基于 Vue.js 的前端应用,用户可以上传 PDF 文件,输入查询,并在输出框中显示查询结果,你需要以下步骤: 初始化 Vue …...
汽车IVI中控开发入门及进阶(二十一):DAB和FM 收音机
前言: 在过去的十年里,数字收音机对车载娱乐产生了重大影响。现在,几乎每辆新车都标配了这项技术,这也是我们60%以上的人收听收音机的方式。甚至有传言称,在不久的将来,将永久关闭调频发射机,使许多车载收音机过时。但一些相对年轻的汽车在工厂里仍然没有安装DAB,而且…...
智能sql LLM
DB-GPT:彻底改变数据库与私有LLM技术的交互 智能SQL生成:后端技术与LLM的完美结合 智能SQL生成:后端技术与LLM的完美结合_llm sql-CSDN博客 GitHub - eosphoros-ai/DB-GPT: AI Native Data App Development framework with AWEL(Agentic Wor…...
大聪明教你学Java | 深入浅出聊 Stream.parallel()
前言 🍊作者简介: 不肯过江东丶,一个来自二线城市的程序员,致力于用“猥琐”办法解决繁琐问题,让复杂的问题变得通俗易懂。 🍊支持作者: 点赞👍、关注💖、留言Ǵ…...
图解大模型分布式并行各种通信原语
背景 在分布式集群上执行大模型任务时候,往往使用到数据并行,流水线并行,张量并行等技术,这些技术本质上也就是对数据进行各种方案的切分,然后放到不同的节点上运算。不同节点在计算的过程中需要对数据分发或者同步等…...
张大哥笔记:下一个风口是什么?
我们经常会问,下一个风口是什么?我们可以大胆预测一下,2024年的风口是什么呢? 40年前,如果你会开车,那就是响当当的铁饭碗; 30年前,如果你会英语和电脑,那也绝对是个人才…...
AI去衣技术中的几何着色:揭秘数字时尚的魔法
在数字化时代,人工智能(AI)正以前所未有的速度改变我们的生活,从智能家居到自动驾驶汽车,再到个性化医疗。然而,AI的影响远不止于此。它正在重塑我们对艺术、设计和时尚的理解。特别是在数字时尚领域&#…...
Leecode---技巧---只出现一次的数字 / 多数元素
题解: 利用异或运算 a⊕a 0 的性质,可用来消除所有出现了两次的元素,最后剩余的即为所得。 class Solution { public:int singleNumber(vector<int>& nums){// 初始化为0int ans 0;for(int x: nums){// 异或操作ans ^ x;}retur…...
为图片设置经纬度信息
一、java实现 小编看了很多技术博客,但是测试要么下载的jar包中的api和博客对不上,要么就是不对,总之没实现 Java 读取图片信息 java 写入 exif 信息 使用Java读取和修改图片的Exif信息 java获取图片的GPS信息 https://drewnoakes.com/code/e…...
密码和密钥的联系与区别
密码和密钥是两个非常重要的概念,但容易混淆这两者,以下内容介绍了它们的联系和区别: 一、定义 密码(Password),在日常语境中,通常指的是个人为了验证自己的身份而设置的一段秘密的字符序列&am…...
C++编程法则365天一天一条(323)main函数执行之前和之后的动作
在C和C程序中,main 函数之前和之后执行的函数是由编译器、链接器和运行时环境共同决定的。以下是一些通常会在这些阶段执行的关键函数: 在 main 函数之前执行的函数 启动代码(Start-up Code): 这是由编译器提供的一段代码&#…...
阿里云短信服务使用(Java)
文章目录 一、流程1.打开短信服务2.提交材料申请资质3.资质通过后,申请短信签名并设置短信模板4.右上角设置AccessKey5.充值 二、参考官方文档调用API1.引入maven依赖2.调用API补充 一、流程 1.打开短信服务 登陆注册阿里云 搜索“短信服务”,点击“免…...
C++17之std::void_t
目录 1.std::void_t 的原理 2.std::void_t 的应用 2.1.判断成员存在性 2.1.1.判断嵌套类型定义 2.1.2 判断成员是否存在 2.2 判断表达式是否合法 2.2.1 判断是否支持前置运算符 2.2.3 判断两个类型是否可做加法运算 3.std::void_t 与 std::enable_if 1.std::void_t 的…...
零基础入门篇①⑥ Python可变序列类型--字典
Python从入门到精通系列专栏面向零基础以及需要进阶的读者倾心打造,9.9元订阅即可享受付费专栏权益,一个专栏带你吃透Python,专栏分为零基础入门篇、模块篇、网络爬虫篇、Web开发篇、办公自动化篇、数据分析篇…学习不断,持续更新,火热订阅中🔥专栏限时一个月(5.8~6.8)重…...
C语言面试题1-10
C语言中的内存管理及相关问题探讨 在C语言编程中,内存管理是一个至关重要的概念,掌握内存的分布及其操作不仅能够提高代码效率,还能避免常见的内存泄漏等问题。本文将详细介绍C语言中内存的分布、堆区和栈区的区别、标识符的命名规则、定义和…...
Qt Designer工具如何修改MainWindow窗口的标题
Qt Designer工具如何修改MainWindow窗口的标题 在MainWindow的属性编辑器中选择“windowTitle”后面一栏修改成期望的窗口标题名称即可。 按住“ctrlR”即可查看可视化界面的窗口标题...
车辆前向碰撞预警系统性能要求和测试规程
前言 本文整理《GB/T 33577-2017 智能运输系统-车辆前向碰撞预警系统性能要求和测试规程》国标文件关键信息,FCW系统性能和测试右给深层次的认识。 术语和定义 车辆前向碰撞预警系统 forward vehicle collision warning system自车 subject vehicle(SV)目标车辆 target ve…...
C#实现winform中渲染图的展示
在WinForms中实现图形的渲染展示,可以使用GDI绘图技术。下面是一个简单的示例,演示如何在WinForms中展示一个圆形图形,并根据用户输入的半径动态改变圆的大小: 请在Visual Studio中创建一个WinForms应用程序,并将以下…...
JTS库的讲解及使用
JTS(Java Topology Suite)是一套用于创建、操作和分析二维几何对象的Java库。JTS提供了丰富的几何操作和分析功能,是GIS(地理信息系统)应用中的重要工具。以下是JTS库的一些主要功能及其详细使用示例: 1. …...
【C++杂货铺】unordered系列容器
目录 🌈 前言🌈 📁 unordered系列关联式容器 📁 底层结构 📂 哈希概念 📂 哈希冲突 📂 哈希函数 📂 哈希冲突解决 📁 模拟实现 📁 总结 🌈 前…...
如何用Nucleus Co-Op实现本地多人游戏:5个维度解析开源工具的技术突破与应用价值
如何用Nucleus Co-Op实现本地多人游戏:5个维度解析开源工具的技术突破与应用价值 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 当你和…...
Phi-4-mini-reasoning部署实操手册:supervisor服务管理与日志排查指南
Phi-4-mini-reasoning部署实操手册:supervisor服务管理与日志排查指南 1. 模型概述 Phi-4-mini-reasoning 是一个专注于推理任务的文本生成模型,特别适合处理数学题、逻辑题、多步分析和简洁结论输出。与通用聊天模型不同,它采用"题目…...
WebAgent :基于 MCP 协议打造的智能应用“超级路由器”
本文由云软件体验技术团队李锦浩原创。 在 NextSDK 介绍文章里,我们聊了怎么用 opentiny/next-sdk 给前端页面快速接入智能化能力——几行代码嵌进去,用户扫个二维码,手机上就能弹出一个 Remoter 对话窗口,直接用自然语言远程操控…...
全能型 AI论文工具排行榜(2026 最新实测)
基于功能全面性、学术适配性、用户反馈质量以及操作便捷性,本文对当前主流AI论文写作工具进行了系统测评,按综合使用价值从高到低进行排序,并详细解析各工具的核心优势与适用领域。🏆 第一梯队:全流程学术解决方案&…...
Meta2d.js完整指南:5步掌握专业级2D可视化引擎开发
Meta2d.js完整指南:5步掌握专业级2D可视化引擎开发 【免费下载链接】meta2d.js The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和…...
QRCoder:开发者必备的二维码生成解决方案全攻略
QRCoder:开发者必备的二维码生成解决方案全攻略 【免费下载链接】QRCoder A pure C# Open Source QR Code implementation 项目地址: https://gitcode.com/gh_mirrors/qr/QRCoder 在数字化时代,二维码已成为信息传递的重要桥梁,但如何…...
老旧Mac重获新生:OpenCore Legacy Patcher如何突破苹果硬件限制
老旧Mac重获新生:OpenCore Legacy Patcher如何突破苹果硬件限制 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 当你的Mac因官方不再支持而无法更新系统&#…...
**实时内核中的任务调度机制:从理论到C++实现的深度探索**在嵌入式系统和高实时性应用中,**实时内核(Real-
实时内核中的任务调度机制:从理论到C实现的深度探索 在嵌入式系统和高实时性应用中,实时内核(Real-Time Kernel) 是整个系统稳定运行的核心。它不仅负责资源分配,还承担着任务调度、中断响应、同步机制等关键职责。本文…...
PADS 9.5集成的组件
PADS 9.5是一个高度集成的PCB设计平台,主要由三大核心组件构成:PADS Logic(原理图设计)、PADS Layout(PCB布局设计)和PADS Router(交互式布线)。这三个模块各司其职,又紧…...
300 元内降噪耳机横评:倍思 M2s / 绿联 T3 / 漫步者 X5 Pro 实测对比(续航・降噪・延迟全数据)
300 元内降噪耳机横评:倍思 M2s / 绿联 T3 / 漫步者 X5 Pro 实测数据对比(附续航 / 降噪 / 延迟测试结果) 摘要 本文针对学生党、通勤族高频使用的 300 元内主动降噪耳机,选取倍思 M2s、绿联 HiTune T3、漫步者 X5 Pro 三款热门机…...
