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

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

news 来源：原创 2025/9/17 7:04:50

向 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/9/17 7:04:50

基于 Python Django 的校园互助平台（附源码，文档）

博主介绍：✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不…...

编程日记 2025/9/17 6:58:47

玩转 Java 与 Python 交互，JEP 库来助力

文章目录玩转 Java 与 Python 交互，JEP 库来助力一、背景介绍二、JEP 库是什么？三、如何安装 JEP 库？四、JEP 库的简单使用方法五、JEP 库的实际应用场景场景 1：数据处理场景 2：机器学习场景 3：科学计算场…...

编程日记 2025/9/14 1:10:41

【Linux】基于UDP/TCP服务器与客户端的实现

目录一、UDP （一）Server.hpp （二）Server.cpp （三）Client.hpp （四）Client.cpp （五）User.hpp 二、TCP （一）多进程版本的服务器与…...

编程日记 2025/9/12 13:59:03

Unity for Python —— 强大的 Python 脚本支持提升 Unity 编辑器效率

内容将会持续更新，有错误的地方欢迎指正，谢谢! Unity for Python —— 强大的 Python 脚本支持提升 Unity 编辑器效率 TechX 坚持将创新的科技带给世界！ 拥有更好的学习体验 —— 不断努力，不断进步，不断探索 Tec…...

编程日记 2025/9/10 8:55:32

【Dubbo+Zookeeper】——SpringBoot+Dubbo+Zookeeper知识整合

🎼个人主页：【Y小夜】 😎作者简介：一位双非学校的大二学生，编程爱好者， 专注于基础和实战分享，欢迎私信咨询！ 🎆入门专栏：🎇【MySQL&#xff0…...

编程日记 2025/9/13 8:02:03

家用路由器的WAN口和LAN口有什么区别

今时今日，移动终端盛行的时代，WIFI可以说是家家户户都有使用到的网络接入方式。那么路由器当然也就是家家户户都不可或缺的设备了。而路由器上的两个实现网络连接的基础接口 ——WAN 口和 LAN 口，到底有什么区别？它们的功能和作用…...

编程日记 2025/9/10 6:52:54

Python--函数入门

1. 函数基础概念 1.1 什么是函数定义：函数是一段可重复调用的代码块，用于封装特定功能。核心作用： 代码重用：减少重复代码的编写。增强可读性：通过命名和模块化让代码逻辑更清晰。 1.2 函数的定义与调用 def 函…...

编程日记 2025/9/14 0:25:02

EasyRTC低延迟通信与智能处理：论嵌入式WebRTC与AI大模型的技术融合

在当今数字化时代，实时通信的需求日益增长，视频通话作为一种高效、直观的沟通方式，广泛应用于各个领域。WebRTC技术的出现，为实现浏览器之间的实时音视频通信提供了便捷的解决方案。而基于WebRTC技术的EasyRTC视频通话SDK&#xf…...

编程日记 2025/9/14 6:57:48

《操作系统 - 清华大学》 8 -6：进程管理：进程状态变化模型

进程状态及其转换全解析在操作系统中，进程有着特定的生命周期和多种状态变化。不考虑进程结束时，进程主要有三个基本状态。运行态：即进程正在占用CPU执行任务。总结：运行态表示进程当前正在使用CPU。就绪状态：进程…...

编程日记 2025/9/16 1:38:18

大语言模型中的 Token如何理解？

在大语言模型中，Token 是文本处理的基本单元，类似于“文字块”，模型通过将文本分割成Token来理解和生成内容。举一个形象一点的例子，可以理解为 AI 处理文字时的“最小积木块”。就像搭乐高时，每块积木是基础单位一样&…...

编程日记 2025/9/15 12:28:06

信息学奥赛一本通 1522：网络 | OpenJudge 百练 1144:Network

【题目链接】 ybt 1522：网络 OpenJudge 百练 1144:Network 【题目考点】 1. 图论：割点【解题思路】每个交换机是一个顶点，如果两地点之间有电话线连接，那么两顶点之间有一条无向边，该图是无向图。初始时任何地…...

编程日记 2025/9/10 10:37:31

3分钟快速本地部署deepseek

DeepSeek简介 DeepSeek 是杭州深度求索人工智能基础技术研究有限公司开发的一系列大语言模型，背后是知名量化资管巨头幻方量化3。它专注于开发先进的大语言模型和相关技术，拥有多个版本的模型，如 DeepSeek-LLM、DeepSeek-V2、DeepSeek-V3 等…...

编程日记 2025/9/10 16:57:27

Linux系统管理与编程01：准备工作

0 准备工作 0.1 安装VMWare Workstation pro17 到百度搜一下，到处都是。安装好VMWare Workstation pro17（以下简称VW）。图0- 1 安装过程略。 0.2下载CentOS7.6 图0- 2 选择minimal版本。 0.3下载yum库文件下载阿里云yum库文件https:…...

编程日记 2025/9/11 12:35:10

常用的几种编码方式

常见的编码方式有多种，每种编码方式都有其特定的用途和特点。以下是几种常见的编码方式： ASCII（美国信息交换标准代码） 用途：主要用于表示英文字符及控制字符。特点：使用7位二进制数表示字符，能…...

编程日记 2025/9/12 3:09:14

WebXR教学 03 项目1 旋转彩色方块

一、项目结构 webgl-cube/ ├── index.html ├── main.js ├── package.json └── vite.config.js二、详细实现步骤初始化项目 npm init -y npm install three vite --save-devindex.html <!DOCTYPE html> <html lang"en"> <head><…...

编程日记 2025/9/15 5:04:23

从零开始的网站搭建（以照片/文本/视频信息通信网站为例）

本文面向已经有一些编程基础（会至少一门编程语言，比如python），但是没有搭建过web应用的人群，会写得尽量细致。重点介绍流程和部署云端的步骤，具体javascript代码怎么写之类的，这里不会涉及。搭…...

编程日记 2025/8/30 0:44:21

public void ConfigureServices(IServiceCollection services) {....// 配置gzip 与 br的压缩等级为最优services.Configure<BrotliCompressionProviderOptions>(options > {options.Level CompressionLevel.Optimal;});services.Configure<GzipCompressionProvid…...

编程日记 2025/9/15 13:29:06

c++入门-------命名空间、缺省参数、函数重载

C系列文章目录 C系列前言一、命名空间二、缺省参数2.1、缺省参数概念2.2、缺省参数分类2.2.1、全缺省参数2.2.2、半缺省参数 2.3、缺省参数的特点三、函数重载3.1、函数重载概念3.2、构成函数重载的条件3.2.1、参数类型不同3.2.2、参数个数不同3.2.3、参数类型顺序不同前言…...

编程日记 2025/9/12 3:23:18

elf_loader：一个使用Rust编写的ELF加载器

本文介绍一个使用Rust实现的ELF加载器。下面是elf_loader的仓库链接： github： https://github.com/weizhiao/elf_loaderhttps://github.com/weizhiao/elf_loader crates.io： https://crates.io/crates/elf_loaderhttps://crates.io/cra…...

编程日记 2025/9/15 19:18:56

postman调用ollama的api

按照如下设置，不需要设置key 保持长会话的方法 # 首次请求 curl http://localhost:11434/api/generate -d {"model": "deepseek-r1:32b","prompt": "请永久记住：110，1-12，之后所有数学计算必…...

编程日记 2025/9/15 10:04:35

鸿蒙5.0实战案例：基于ArkUI的验证码实现

往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录） ✏️ 鸿蒙（HarmonyOS）北向开发知识点记录~ ✏️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~ ✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景&#…...

编程日记 2025/8/27 19:36:13

通俗理解什么是云原生？

by deepseek。一、核心理念：云原生到底是什么？ 1. 一句话定义云原生（Cloud Native） 是一种构建和运行应用程序的方法论，它利用云计算的优势（弹性、分布式、自动化），让软件从设计…...

编程日记 2025/9/13 12:19:26

基于PSO粒子群优化的BiLSTM双向长短期记忆网络序列预测算法matlab仿真,对比BiLSTM和LSTM

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a/matlab2024b 3.部分核心程序 （完整版代码包含详细中文注释和操作步骤视频…...

编程日记 2025/9/15 7:36:28

什么是完全前向保密（PFS）？

在当今数字化时代，信息安全至关重要。而密码学中的完全前向保密（Perfect Forward Secrecy，简称PFS）技术，已经成为保障信息安全的关键一环。如果没有完全前向保密，一旦长期密钥被泄露，攻击者就可…...

编程日记 2025/9/15 14:05:33

Oracle备库srvctl start丢失某个原有的service_names的案例

最近在测试主备环境中使用srvctl添加新的service之后，srvctl start发现其中一个原本用于主备同步的service丢失了。原始的参数文件中的service_names参数值如下(数据库中service_names的值也一样，省略查看步骤)： [oraclesmartdbstb01 202502…...

编程日记 2025/9/14 12:46:37

重学SpringBoot3-怎样优雅停机

更多SpringBoot3内容请关注我的专栏：《SpringBoot3》期待您的点赞??收藏评论重学SpringBoot3-怎样优雅停机 1. 什么是优雅停机？2. Spring Boot 3 优雅停机的配置3. Tomcat 和 Reactor Netty 的优雅停机机制 3.1 Tomcat 优雅停机3.2 Reactor Netty 优…...

编程日记 2025/9/16 1:38:21

SkyWalking集成Kafka实现日志异步采集经验总结

SkyWalking日志异步采集架构【重点知识】 1、【Agent】kafka-reporter-plugin-x.x.x.jar包放plugins目录后必走kafka（kafka没有正确配置就会报错） 2、【Agent】异步如不开启数据压缩，日志数据较大，pod多、业务大时容易造成网络…...

编程日记 2025/9/9 19:22:51

图论之 BFS

文章目录 3243.新增道路查询后的最短距离1311.获取你好友已观看的视频 BFS:广度优先搜索（BFS） 是一种常用的算法，通常用于解决图或树的遍历问题，尤其是寻找最短路径或层级遍历的场景。BFS 的核心思想是使用队列（FIFO 数…...

编程日记 2025/9/10 20:45:42

rust学习笔记5-所有权机制

rust核心就是所有权机制，是其内存管理的核心特性，旨在消除内存安全问题（如空指针、悬垂指针、内存泄漏等）而无需依赖垃圾回收（GC） 1.首先看一下语义模型当声明一个变量 let a "32";它的语义模…...

编程日记 2025/9/11 16:03:03

网站快速收录：如何优化网站404页面？

优化网站404页面是提升用户体验和SEO效果的重要一环。以下是一些优化404页面的建议： 一、设计友好的404页面简洁明了的提示信息：使用清晰的语言告诉用户该页面不存在或已被删除，避免使用过于技术化的术语。提供导航链接：在40…...

编程日记 2025/9/14 17:40:32

关于order by的sql注入实验

实验描述本实验基于sqli-lab的第46关进行测试本关的sql 语句为$sql "SELECT * FROM users ORDER BY $id" 利用sort进行sql注入，我们可以利用报错注入，延时注入来爆出数据 1.报错注入 1.手工测试爆出数据库 ?sort(extractvalue(1, c…...

编程日记 2025/9/9 6:23:28

Docker(Nginx)部署Vue

简介：目标使用docker将vue生成的dist文件，结合nginx生成镜像，然后运行； 1、首选确保vue项目正确运行，并能正确打包dist文件； 2、查看已经生成的dist文件 3、将dist文件打包为rar文件或者zip文件&#xf…...

编程日记 2025/9/4 17:16:47

从函数到神经网络

一、从函数到神经网络所有一切的前提是，你要相信这个世界上的所有逻辑和知识，都可以用一个函数来表示。Functions describe the world ! 比如输入物体的质量和加速度，根据牛顿第二定律，就可以得到物体施加的力，这就是…...

编程日记 2025/9/15 7:18:36

Python 字符串格式化 print

Python 字符串格式化 print flyfish 1. 使用百分号（%）操作符进行字符串格式化百分号（%）操作符是 Python 中比较传统的字符串格式化方式，它的使用方式类似于 C 语言中的 printf 函数。 # 格式化整数 num 10 print…...

编程日记 2025/9/10 9:23:16

LabVIEW 中的 Bluetooth.llb 库

Bluetooth.llb 库位于C:\Program Files (x86)\National Instruments\LabVIEW 2019\vi.lib\Platform目录，它是 LabVIEW 平台下用于蓝牙通信相关操作的重要库。该库为 LabVIEW 开发者提供了一系列工具，用于实现设备间的蓝牙连接、数据传输与交互等功能&…...

编程日记 2025/9/11 22:54:14

MySQL | MySQL库、表的基本操作01

MySQL库、表的基本操作01 一、库操作1.1 查看数据库1.2 创建数据库1.3 选择数据库1.4 查看创建数据库的SQL语句1.5 修改数据库1.6 删除数据库二、表操作2.1 创建数据表2.2 查看表2.3 查看表结构2.4 查看创建数据库的SQL语句2.5 修改表2.6 删除表 ⚠️MySQL版本 8.0 一、库操作…...

编程日记 2025/9/15 14:17:29

抖音试水AI分身；腾讯 AI 战略调整架构；百度旗下小度官宣接入DeepSeek...|网易数智日报

抖音试水AI分身，字节旗下AI智能体平台扣子已与抖音打通，相关功能内测中 2月19日消息，钛媒体App独家获悉，字节旗下AI智能体开发平台扣子（Coze）已与抖音打通，抖音创作者可在扣子智能体平台打造AI分…...

编程日记 2025/9/14 7:12:36

RPC 框架项目剖析

RPC 框架项目剖析说明本文用于梳理一个 rpc项目的实现细节，此项目基于cpp语言大概三千行左右，用于学习目的。项目链接：rpc项目项目底层类 1.抽象消息类描述： 各种消息的基类属性： 消息id，消息类型…...

编程日记 2025/9/15 21:45:03

前端 fetch API 调用 Tushare 的数据接口获取免费的基金股票信息数据

要在前端使用 JavaScript 的 fetch API 调用 Tushare 的数据接口，您需要遵循以下步骤： 1. 注册 Tushare 账号并获取 Token 首先，访问 Tushare 官网注册账号。注册成功后，登录账号，在个人中心获取您的 API Token。 …...

编程日记 2025/9/3 0:35:07

【SpringMVC】十分钟跑起来一个SpringMVC项目

目录标题 1 项目概述1.项目结构解析2. MVC项目的结构和每个组件的作用：3. 项目的工作流程：4 后期可以扩展的点：2.源码学习1. HelloController 类，Spring MVC控制器2 springmvc-servlet.xml - Spring MVC的主要配置文件3.web 目录 …...

编程日记 2025/9/16 7:43:18

LeetCode 热题 100 11. 盛最多水的容器

LeetCode 热题 100 | 11. 盛最多水的容器大家好，今天我们来解决一道经典的算法题——盛最多水的容器。这道题在LeetCode上被标记为中等难度，要求我们找到两条垂线，使得它们与 x 轴共同构成的容器可以容纳最多的水。下面我将详细讲解解题思路…...

编程日记 2025/9/12 6:07:43

Web自动化之Selenium实战案例1：论文pdf自动下载

在上一篇文章中，我们介绍了Selenium的基础用法和一些常见技巧。今天，我们将通过中国科学：信息科学网站内当前目录论文下载这一实战案例来进一步展示Selenium的web自动化流程。目录中国科学：信息科学当期目录论文下载 1.网页内…...

编程日记 2025/9/15 3:15:18

在VSCode中接入deepseek

注册就送14元2000万tokens。 https://cloud.siliconflow.cn/i/rnbA6i6U各种大模型下面介绍我是如如接入vscode的左边生成一个key，呆会vscode要用，不然401. 打开vscod，电脑能上网。下插件。下好要配置点它一下。要配置，全…...

编程日记 2025/9/14 10:31:38

CentOS停服后的替代选择：openEuler、Rocky Linux及其他系统的未来展望

CentOS停服后的替代选择：openEuler、Rocky Linux及其他系统的未来展望引言CentOS停服的背景华为openEuler：面向未来的开源操作系统1. 简介2. 特点3. 发展趋势 Rocky Linux：CentOS的精神继承者1. 简介2. 特点3. 发展趋势其他可选的替代系统1…...

编程日记 2025/9/10 9:44:49

vector的模拟实现

目录一、构造和析构函数二、插入删除访问迭代器三、迭代器失效四、拷贝构造和赋值五、tip 一、构造和析构函数 namespace stn {template<class T>class vector{typedef T* iterator;public:vector():_start(nullptr);, _end(nullptr), _endofstorage(nullptr){…...

编程日记 2025/9/15 18:25:43

【高可用】keepalived的试用与学习笔记

版本日期修订人描述V1.02025/2/23nick huang创建文档背景最近，预研给现有的Nginx单点实例添加故障转移的功能，以备单实例故障时无法快速恢复。本文记录Keepalived的学习笔记，供自己或同学日后参考。 Keepalived Keepalived是一个开源的…...

编程日记 2025/9/16 1:38:22

在Dify中实现联网检索功能（模拟DeepSeek）

跟着上一篇博客：Error response from daemon: Get “https://registry-1.docker.io/v2/“: request canceled while的解决办法-CSDN博客 DeepSeek发布之后，感觉联网检索功能变成标配了。这篇博客简单介绍一下怎么在Dify中配置初步的联网检索功能&#x…...

编程日记 2025/9/15 9:43:20