nodejs:vue 3 + vite 作为前端,将 html 填入<iframe>,在线查询英汉词典

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 中的标题如下

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 如下

javascript 复制代码
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 如下

javascript 复制代码
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 如下

javascript 复制代码
{
  "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 文件:

html 复制代码
<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 词典文件。
  • 安全性:在生产环境中,需要考虑对后端接口进行安全防护,如限制请求频率、验证请求来源等。

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

相关推荐
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Spark2382 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
随笔记2 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆2 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang2 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
清灵xmf3 小时前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
web_Hsir3 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
爱摄影的程序猿4 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
前端极客探险家5 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
随笔记6 小时前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack