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

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

news 2025/7/18 2:12:33

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

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

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dtcms.com/a/34377.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！