向 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?
?選 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 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()],server: {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"> <button @click="search">查詢</button> <button @click="prefix">前綴查詢</button> <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('/api/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('/api/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('/api/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
> mydict-web@0.1.0 dev
> viteVITE v6.1.1 ready in 1083 ms? Local: http://localhost:5173/? Network: use --host to expose? press h + enter to show help
hShortcutspress r + enter to restart the serverpress u + enter to show server urlpress o + enter to open in browserpress c + enter to clear consolepress q + enter to quit
o?注意事項
- 跨域問題：在開發環境中使用?
cors?中間件解決跨域問題，在生產環境中可以通過配置反向代理等方式處理。 - MDX 文件路徑：確保?
app.js?中的?mdict Path?指向正確的?.mdx?詞典文件。 - 安全性：在生產環境中，需要考慮對后端接口進行安全防護，如限制請求頻率、驗證請求來源等。
通過以上步驟，你就可以實現一個簡單的在線英漢詞典查詢系統。
)
)
