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

nodejs：vue 3 + vite 作为前端，将 html 填入＜iframe＞，在线查询英汉词典

news 2026/4/21 22:31:31

向 doubao.com/chat/ 提问：
node.js + js-mdict 作为后端，vue 3 + vite 作为前端，编写在线查询英汉词典

后端部分（express + `js-mdict` ）

详见上一篇：nodejs：express + js-mdict 作为后端，vue 3 + vite 作为前端，在线查询英汉词典

前端部分（Vue 3 + Vite）

1. 创建前端项目

node -v
v18.20.6
npm -v
10.8.2

cd \js
cnpm create vite@latest mydict-web --template vue
选 Vue 3
选 Javascript

项目结构‌：Vite 会自动创建一个基本的项目结构，包括 src目录下的组件、路由和状态管理等文件。主要文件和目录如下：

App.vue：根组件
main.js：应用程序入口
router：Vue Router配置
store：状态管理

在 public 中添加一些英汉字典的样式：oalecd8e.css , oalecd8e.js , uk_pron.png, us_pron.png,
copy jquery-3.2.1.min.js pulibc\jquery.js

修改 index.html 中的标题如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite 在线英汉词典查询</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

修改 src/main.js 如下

import { createApp } from 'vue'
//import { onMounted, onUnmounted } from 'vue'
import App from './App.vue'
import axios from 'axios'createApp(App).mount('#app')

vite 代理服务器（Proxy）的配置通常用于开发环境，以解决跨域请求等问题。
修改 vite.config.js 如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],proxy: {'/api': {target: 'http://localhost:8006', // 后端服务地址changeOrigin: true,rewrite: (path) => path.replace(/\/api/, '')}}    
})

2. 安装依赖

cd mydict-web
cnpm install axios

cnpm install vue-router -S

package.json 如下

{"name": "mydict-web","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"axios": "^1.7.9","vue": "^3.5.13","vue-router": "^4.5.0"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","vite": "^6.1.0"}
}

3. 编写前端代码

修改 src/App.vue 文件：

<template><div id="app"><input v-model="sWord" placeholder="请输入英文单词" @keyup.enter="search" target="iframe">&nbsp; <button @click="search">查询</button>&nbsp; <button @click="prefix">前缀查询</button>&nbsp; <button @click="fuzzy">模糊查询</button><h3>查询结果</h3><div style="float:left; width:100%;"><div id="result" style="float:left; width:75%; height:500; border:2px;"><iframe ref="iframe" name="iframe" width="100%" height="500"> </iframe></div><div v-if="alist"><div v-html="alist" style="float:right; width:25%; height:500; border:2px;"></div></div></div><div v-if="error">{{ error }}</div></div>
</template><script setup>
import { ref } from 'vue';
import axios from 'axios';const sWord = ref('');
const result = ref('');
const error = ref('');
const iframe = ref(null);
const alist = ref(null);// 查询
const search = async () => {try {const response = await axios.get('http://localhost:8006/search', {params: {word: sWord.value}});let htm1 = response.data.result;const frame1 = iframe.value;if (frame1 && htm1) {let doc1 = frame1.contentWindow.document;doc1.open();doc1.write(htm1);doc1.close();}error.value = '';} catch (err) {result.value = '';error.value = err.response?.data?.error || '请求出错，请稍后重试';}
};// 前缀查询
const prefix = async () => {try {const response = await axios.get('http://localhost:8006/prefix', {params: {word: sWord.value}});let items = [];let wordls = response.data.wordls;wordls.forEach((item, i) => {if (i<=20){items[i] = `<a href="http://localhost:8006/query?word=${item}" target="iframe">${item}</a>`;}});if (items.length >0){ alist.value = items.join('<br>\n');}else { alist.value = '';}error.value = '';} catch (err) {alist.value = '';error.value = err.response?.data?.error || '请求出错，请稍后重试';}
};// 模糊查询
const fuzzy = async () => {try {const response = await axios.get('http://localhost:8006/fuzzy', {params: {word: sWord.value}});let items = [];let wordls = response.data.wordls;wordls.forEach((item, i) => {if (i<=20){items[i] = `<a href="http://localhost:8006/query?word=${item}" target="iframe">${item}</a>`;}});if (items.length >0){ alist.value = items.join('<br>\n');}else {alist.value = '';}error.value = '';} catch (err) {alist.value = '';error.value = err.response?.data?.error || '请求出错，请稍后重试';}
};</script><style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: left;color: #2c3e50;margin-top: 10px;
}
</style>

4. 运行前端项目

cd mydict-web
npm run dev

注意事项

跨域问题：在开发环境中使用 cors 中间件解决跨域问题，在生产环境中可以通过配置反向代理等方式处理。
MDX 文件路径：确保 app.js 中的 mdict Path 指向正确的 .mdx 词典文件。
安全性：在生产环境中，需要考虑对后端接口进行安全防护，如限制请求频率、验证请求来源等。

通过以上步骤，你就可以实现一个简单的在线英汉词典查询系统。

nodejs：vue 3 + vite 作为前端，将 html 填入＜iframe＞，在线查询英汉词典

向 doubao.com/chat/ 提问： node.js js-mdict 作为后端，vue 3 vite 作为前端，编写在线查询英汉词典后端部分（express js-mdict ） 详见上一篇：nodejs：express js-mdict 作为后端&#xff…...

编程日记 2025/2/24 8:13:16

QEMU源码全解析 —— 内存虚拟化（18）

接前一篇文章：QEMU源码全解析 —— 内存虚拟化（17）本文内容参考：《趣谈Linux操作系统》 —— 刘超，极客时间《QEMU/KVM源码解析与应用》 —— 李强，机械工业出版社 QEMU内存管理模型...

编程日记 2025/2/24 8:10:12

Spring Boot 日志管理（官网文档解读）

摘要本篇文章详细介绍了SpringBoot 日志管理相关的内容，文章主要参考官网文章的描述内容，并在其基础上进行一定的总结和拓展，以方便学习Spring Boot 的小伙伴能快速掌握Spring Boot 日志管理相关的内容。日志实现方式 Sping Boot 的日志管…...

编程日记 2025/2/24 8:08:10

MATLAB进阶之路：数据导入与处理

在MATLAB的学习旅程中，我们已经初步了解了它的基础操作。如今，我们将沿着这条充满惊喜的道路，迈向下一个重要的站点——数据导入与处理。这部分内容就像是为MATLAB注入了强大的能量，使其能够从现实的数据世界中汲取信息，然后像一位智慧的魔法师一样，巧妙地处理这些数据，…...

编程日记 2025/2/24 8:07:06

fcntl()函数的概念和使用案例 c语言

在 Linux 系统编程中，fcntl() 函数（File Control）是用于操作文件描述符的核心函数，可控制文件或套接字的底层属性。它支持多种操作，包括设置非阻塞模式、获取/设置文件状态标志、管理文件锁等。以下是详细概念和使用案…...

编程日记 2025/2/24 8:06:04

Linux红帽：RHCSA认证知识讲解（一）RedHat背景与环境配置

Linux红帽：RHCSA认证知识讲解（一）RedHat背景与环境配置前言一、RedHat公司背景二、RedHat环境安装步骤三、windows使用远程工具连接环境并上传文件到redhat方法： 前言在接下来的博客中，我们从基础开始将介绍红帽Linu…...

编程日记 2025/2/24 8:04:00

Windows11安装GPU版本Pytorch2.6教程

1: 准备工作针对已经安装好的Windows11系统，先检查Nvidia驱动和使用的CUDA版本情况。先打开Windows PowerShell，通过nvidia-smi命令查看GPU的情况，结果如下图1所示，从结果中可知使用的CUDA版本为12.8。图1：检测安装…...

编程日记 2025/2/24 8:01:56

网络传输的七层协议

网络传输的七层协议是 OSI模型（开放系统互联模型） 中的七个层次，每一层都负责不同的网络功能。具体如下： 物理层（Physical Layer） 负责在物理媒介上传输比特流，即将数据以电信号、光信号等形式在…...

编程日记 2025/2/24 7:59:51

【蓝桥杯集训·每日一题2025】 AcWing 6134. 哞叫时间II python

6134. 哞叫时间II Week 1 2月20日农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛，但她很难理解为什么他这么喜欢它。他说「竞赛中我最喜欢的部分是贝茜说『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。埃尔茜仍然不理解，所以农夫约翰将竞赛…...

编程日记 2025/2/24 7:58:41

Spring Boot数据访问（JDBC）全解析：从基础配置到高级调优

文章目录引言一、Spring Boot JDBC核心架构1.1 核心组件关系图1.2 自动配置逻辑二、基础配置实践2.1 数据源配置2.2 多数据源配置三、JdbcTemplate深度使用3.1 基础CRUD操作3.2 批处理优化四、事务管理4.1 声明式事务4.2 事务传播机制五、异常处理5.1 Spring异常体系5.2 自…...

编程日记 2025/2/24 7:57:33

三数之和：经典问题的多种优化策略

三数之和：经典问题的多种优化策略大家好，我是Echo_Wish。今天我们来聊一个经典的算法问题——三数之和（3Sum）。它是许多面试和算法竞赛中常见的问题之一，也常常考察我们对算法优化的理解和技巧。我们不仅要解决问题&…...

编程日记 2025/2/24 7:56:30

信息学奥赛一本通 1520：【例 1】分离的路径 | 洛谷 P2860 [USACO06JAN]Redundant Paths G

【题目链接】 ybt 1520：【例 1】分离的路径洛谷 P2860 [USACO06JAN]Redundant Paths G 【题目考点】 1. 图论：割边（桥） 边双连通分量【解题思路】每个草场是一个顶点，草场之间的双向路是无向边，该…...

编程日记 2025/2/24 7:55:29

架构师面试（六）：熔断和降级

问题在千万日活的电商系统中，商品列表页服务通过 RPC 调用广告服务；经过统计发现，在最近10秒的时间里，商品列表页服务在对广告服务的调用中有 98% 的调用是超时的； 针对这个场景，下面哪几项的说法是正确的…...

编程日记 2025/2/24 7:54:27

使用 DeepSeek 生成流程图、甘特图与思维导图：结合 Typora 和 XMind 的高效工作流

在现代工作与学习中，可视化工具如流程图、甘特图和思维导图能够极大地提升信息整理与表达的效率。本文将详细介绍如何使用 DeepSeek 生成 Mermaid 文本，结合 Typora 快速生成流程图和甘特图，并通过 Markdown 格式生成思维导图，最终…...

编程日记 2025/2/24 7:51:20

粘贴到Word里的图片显示不全

粘贴到Word里的图片显示不全，可从Word设置、图片本身、软件与系统等方面着手解决，具体方法如下： Word软件设置经实践发现，图片在word行距的行距出现问题，可以按照如下调整行距进行处理修改段落行距： 选…...

编程日记 2025/2/24 7:49:13

【C语言】结构体内存对齐问题

1.结构体内存对齐我们已经基本掌握了结构体的使用了。那我们现在必须得知道结构体在内存中是如何存储的？内存是如何分配的？所以我们得知道如何计算结构体的大小？这就引出了我们今天所要探讨的内容：结构体内存对齐。 1.1 对齐规…...

编程日记 2025/2/24 7:46:06

【蓝桥杯单片机】第十三届省赛第二场

一、真题二、模块构建 1.编写初始化函数(init.c) void Cls_Peripheral(void); 关闭led led对应的锁存器由Y4C控制关闭蜂鸣器和继电器 2.编写LED函数（led.c） void Led_Disp(unsigned char ucLed); 将ucLed取反的值赋给P0 开启锁存器关闭锁存…...

编程日记 2025/2/24 7:45:01

类与对象（5）

上一章是类与对象（4）-CSDN博客深入了构造函数和静态成员，大概讲解了类型转换最后一章最后一章友元在 C 中，友元提供了一种突破类的访问控制（封装）的方式。通过友元，外部的函数或类可以访…...

编程日记 2025/2/24 7:43:58

AI知识架构之数据采集

数据采集数据格式：结构化数据：以固定格式和结构存储，如数据库中的表以及 Excel 表格，易于查询和分析。半结构化数据：有一定结构但不如结构化数据严格，XML 常用于数据交换，JSON 在 Web 应用中广泛用于数据传输和存储。非结构化数据：无预定义结构，文本、图像、音频和视…...

编程日记 2025/2/24 7:39:49

细说STM32F407单片机2个ADC使用DMA同步采集各自的1个输入通道的方法

目录一、示例说明二、工程配置 1、RCC、DEBUG、CodeGenerator 2、USART6 3、TIM3 （1）Mode （2）参数设置 （3） TRGO （4）ADC1_IN0 1）ADCs_Common_Settings 2&a…...

编程日记 2025/2/24 7:38:45

VirtIO-GPU 指令流

VirtIO-GPU 指令流是虚拟机（Guest）与宿主机（Host）之间传输图形渲染命令的序列化字节流，基于 VirtIO 协议，分为 2D 控制指令流与 3D 渲染指令流（VirGL/Venus），通过 VirtQu…...

编程新知 2026/4/21 22:13:04

如何在Windows电脑上无缝安装Android应用：告别模拟器的5步终极指南

如何在Windows电脑上无缝安装Android应用：告别模拟器的5步终极指南【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想在Windows电脑上使用Androi…...

编程新知 2026/4/21 22:11:03

如何用Meshroom将普通照片变成专业3D模型：从零开始的完整指南

如何用Meshroom将普通照片变成专业3D模型：从零开始的完整指南【免费下载链接】Meshroom Node-based Visual Programming Toolbox 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom 你是否曾想过，用手机拍摄的日常照片就能创建出令人惊叹的…...

编程新知 2026/4/21 20:55:15

Simulink数据导入导出全攻略：从MATLAB工作区交互到信号日志分析，提升仿真效率的5个技巧

Simulink数据流高效管理：构建闭环仿真工作流的5个核心策略在工程仿真领域，数据就像血液一样贯穿整个系统建模的生命周期。每次打开Simulink模型时，我们都在与数据打交道——可能是来自实验室的实测数据需要导入作为激励源，也可能…...

编程新知 2026/4/21 19:32:57

STM32F030硬件SPI调试踩坑实录：为什么读写数据总是不对？

STM32F030硬件SPI调试实战：从异常波形到数据访问的深度解析当你在STM32F030上调试硬件SPI时，是否遇到过这样的场景：所有配置看起来都正确，逻辑分析仪显示的时钟信号也正常，但读回来的数据就是不对？这不是个…...

编程新知 2026/4/21 18:41:41

告别手动操作：30+专业Illustrator脚本如何彻底改变你的设计工作流

告别手动操作：30专业Illustrator脚本如何彻底改变你的设计工作流【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 你是否厌倦了在Adobe Illustrator中重复执行相同的操作…...

编程新知 2026/4/21 18:37:34

手把手教你用FontCreator汉化软件界面和制作中文图标字体（保姆级避坑指南）

手把手教你用FontCreator打造专业级中文图标字体在数字化设计领域，图标字体已经成为提升用户体验的利器。无论是开发者的后台管理系统，还是设计师的PPT演示文稿，一套风格统一、加载迅速的图标字体能让界面瞬间专业起来。而FontCreator作为字…...

编程新知 2026/4/21 18:37:34

GPEN效果边界再定义：非正面人脸（俯仰角＞30°）修复能力实测报告

GPEN效果边界再定义：非正面人脸（俯仰角>30）修复能力实测报告 1. 测试背景与目的 GPEN作为一款智能面部增强系统，在常规正面人像修复方面已经表现出色。但在实际应用中，我们经常会遇到各种非标准角度的人脸照片&am…...

编程新知 2026/4/21 17:03:14

WebPlotDigitizer：当计算机视觉遇见科研数据挖掘的智能革命

WebPlotDigitizer：当计算机视觉遇见科研数据挖掘的智能革命【免费下载链接】WebPlotDigitizer Computer vision assisted tool to extract numerical data from plot images. 项目地址: https://gitcode.com/gh_mirrors/we/WebPlotDigitizer 在科研和工程领…...

编程新知 2026/4/21 15:38:10

Phi-3.5-mini-instruct多场景：从学生作业辅导到工程师编程

Phi-3.5-mini-instruct多场景：从学生作业辅导到工程师编程 1. 模型概述 Phi-3.5-mini-instruct是微软推出的轻量级指令微调大语言模型，基于Transformer解码器架构构建。这个3.8B参数的模型特别引人注目的是它支持128K超长上下文窗口，同时保…...

编程新知 2026/4/21 15:01:37

后端部分（express + js-mdict ）