vue实战之在线翻译项目

最新推荐文章于 2024-01-31 21:08:57 发布
最新推荐文章于 2024-01-31 21:08:57 发布
阅读量1.9k 收藏 7
点赞数 4
文章标签： vue实战 nodejs 在线翻译 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35788269/article/details/80655985
版权
vue实战之在线翻译项目

今天，博主带来的分享是vue实战之在线翻译项目，一个小小的vue项目，用到了vue的很多基础语法，传组件等等！我们先来看下效果把！


左侧输入一种语言，右侧选择要转换的语言，点击翻译就可以得到结果！是不是很神奇！当然博主这里仅仅罗列的七八种语言！我们就以汉语来展示了！

其他语言的展示：




可以输入与可以翻译的语言有：

< option value= "en" >英语 </ option >
< option value= "ru" >俄语 </ option >
< option value= "ko" >朝鲜语 </ option >
< option value= "ja" >日语 </ option >
< option value= "es" >西班牙语 </ option >
< option value= "it" >意大利语 </ option >
< option value= "de" >德语 </ option >

<option value="zh">中文</option>

博主比较懒，，就贴代码理解了！

好了，接下来我们正式开始把！先说下思路吧，一个是要翻译的表格制作（组件1），另一个是翻译的结果（组件2），

这是两个不同的子组件！

使用vue脚手架的话，，我们需要做点准备工作！

第一：安装node环境：直接去node官网下载就可以了，安装超级简单，直接点下一步，安装结束之后在C盘的program files下

会有一个nodejs文件夹的！node官网：https://nodejs.org/en/


第二部分：脚手架的安装：这个我们需要去一下Github！

网址：https://github.com/vuejs/vue-cli

根据需要选择不同的包：


点击进入之后选择webpack，并且安装


选择第一个webpack点击进入：安装步骤如下：

当然了，我们还需要node、ES6的基本语法知识，在这里博主就不多说了！

下面正式开始项目了！

首先，组件1代码：

< template >
< div id= "translateForm" >
< form id= "transform" v-on:submit=" formSubmit" >
< input type= "text" v-model=" textToTranslate" placeholder= "需要翻译的内容" >
< select v-model=" language" >
< option value= "en" >英语 </ option >
< option value= "ru" >俄语 </ option >
< option value= "ko" >朝鲜语 </ option >
< option value= "ja" >日语 </ option >
< option value= "es" >西班牙语 </ option >
< option value= "it" >意大利语 </ option >
< option value= "de" >德语 </ option >
< option value= "zh" >中文 </ option >
</ select >
< input class= "btn btn-primary" type= "submit" value= "翻译" >
</ form >
</ div >
</ template >

< script >


export default {
name: 'translateForm',
data : function(){
return{
textToTranslate: "",
language: ""
}

},
methods:{
formSubmit : function( e){
// alert(this.textToTranslate);
this. $emit( "formSubmit", this. textToTranslate, this. language);
e. preventDefault();

}
}
}
</ script >

< style >
</ style >
构建基本的内容，并且将所需数据传导父组件上！
组件2：
< template >
< div id= "translateOutput" >
< h2 >{{ translatedText}} </ h2 >
</ div >
</ template >

< script >


export default {
name: 'translateOutput',
props:[ "translatedText"]

}
</ script >

< style >


</ style >

从父组件中接受翻译的结果！
父组件部分：
< template >
< div id= "app" >
< h1 >在线翻译 </ h1 >
< h5 class= "text-muted" >简单 / 易用 / 便捷 </ h5 >
< translateForm v-on:formSubmit=" translateText" >
</ translateForm >
< translateOutput v-text=" translatedText" ></ translateOutput >

</ div >
</ template >

< script >
import TranslateForm from './components/TranslateForm'
import TranslateOutput from './components/TranslateOutput'
export default {
name: 'App',
data : function(){
return{ translatedText: ""}
},

components: {
TranslateForm, TranslateOutput
},
methods:{
translateText : function( text, language){
//alert(text);
this. $http. get(
'https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180611T041751Z.761a657e2b451443.1c8c07e511b6d3bf8a5744cf21be71903bb64489&lang='+ language+ '&text='+ text)
. then(( response) => {
// console.log(response.body.text[0]);
this. translatedText = response. body. text[ 0];
})
}
}
}
</ script >

< style >
#app{
text-align: center;
}
</ style >
注册两个子组件，绑定相关数据！
HTML部分代码：
<!DOCTYPE html >
< html >
< head >
< meta charset= "utf-8" >
< meta name= "viewport" content= "width=device-width,initial-scale=1.0" >
< title >myproject </ title >
< link rel= "stylesheet" href= https://bootswatch.com/4/superhero/bootstrap.min.css >
</ head >
< body >
< div id= "app" ></ div >
<!-- built files will be auto injected -->
</ body >
</ html >

翻译折磨神奇的东西自然少不了API了，博主这路用了一个翻译API：API网址：https://tech.yandex.com/

这里是引用的方法，上边的页面是进入主页之后点击Document进入得到的，如下图：

当然，我们还需要点击3，得到APIkey，需要注册就可以得到了！当然大家不想注册可以直接复制博主的！APIkey如下：



左手写爱等等
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目实现多语言切换的思路
10-14
主要介绍了vue项目实现多语言切换的思路，帮助大家完成多语言翻译，感兴趣的朋友可以了解下
vue项目实现中英文切换
weixin_45711931的博客
05-06 2546
步骤二：创建基本目录（language文件夹是翻译的数据文件，views文件夹下的是页面，part1和part2代表项目的不同模块，每个模块下都有对应的页面）需求：vue项目实现中英文切换。步骤一：安装vue-i18n。步骤三：简单编写下基本界面。如果要在js中引用如下。步骤四：编写翻译文件。
vue实现在线翻译功能
12-30
本文实例为大家分享了vue实现在线翻译功能的具体代码，供大家参考，具体内容如下 最终效果： APP.vue 在线翻译 简单/易用/方便 <!-- 表单组件 --> <!-- 显示组件 --> <scri
vue选择语言翻译页面
akkigg的博客
05-22 1197
vue选择语言翻译页面 自定义翻译 使用场景：默认翻译成繁体是区分不了港澳台三种繁体语言类型使用自定义翻译可以实现业务 调用内置方法 translate.nomenclature.append(from, to, properties); 传入参数说明： from要转换的语言，传入，例如“chinese_simplified” to翻译成目标语言，传入“要翻译的语言类型” properties配置表格，格式为属性的格式，每行一个规则，前后各用等号分隔，等号前为待翻译的单词或句子，等号后为自
Vue+Element-ui 国际化(i18n)切换中英文
qq_58824036的博客
07-06 1988
准备工作 安装 npm install vue-i18n –save 我的版本
使用Vue实现的在线翻译（附带源码）
Fyn_Andersen的博客
09-30 2335
1.预览 2.实现思路 我的项目结构： App.vue是根组件，在该页面中引用两个子组件，InputForm.vue是左侧的输入组件，右侧OutputForm.vue是右侧的输出结果组件。 具体的实现思路是，在InputForm组件中输入要查询的语句，选择要翻译成的语言，然后将语句传递给根组件，在根组件中，调用接口进行查询，然后将结果传递给OutputForm.vue组件显示。 3.具体实现 1...
vue中使用vue-i18n实现整个项目中英文切换
黄哈哈的博客
05-11 606
比如 element页码组件 随着语言切换而变化。
页面通过Vue进行整体页面不同语言切换 i18n库
zhuyuyaya的博客
01-31 1285
页面通过Vue进行整体页面不同语言切换,通过i18n库
Vue 新手入门项目 在线翻译
舒克、舒克的博客
11-16 1541
用的有道的API，最后效果是这样的 需要两个组件，一个是需要翻译的内容和目标语言TranslateFrom.vue，还有一个是翻译成功显示的内容TranslateText.vue 项目结构是这样的 HelloWorld.vue是懒得删，这个没用到。 TranslateFrom.vue <template> <div> <!--加上页面修饰符，提交时就不回再重载页面--> <!-- <form v-on:submit...
关于Vue项目导入谷歌翻译api
qq_38366946的博客
10-14 2423
index.html <script src="<%= BASE_URL %>googleTrans/js/element.js?cb=googleTranslateElementInit"></script> <script> setTimeout(()=>{ // eslint-disable-next-line no-undef new google.translate.TranslateElement(
vue_All_demo:vue实战项目原始码，在线翻译，博客，用户管理系统
03-24
vue_All_demo
基于springboot+vue的java毕业设计-经方药食两用服务平台项目实战(源码+演示录像+说明文档+数据库).rar
最新发布
03-06
基于springboot+vue的java毕业设计-经方药食两用服务平台项目实战(源码+演示录像+说明文档+数据库).rar 【项目技术】 开发语言：Java 框架：springboot+vue 架构：B/S 数据库：mysql 【实现功能】 系统设置管理：...
vue2饿了么APP与官方后台真实数据交互
05-14
初学vue时曾在网上搜索vue的实战项目源码，无奈大部分都是简单的demo，对于深究vue没有太大的帮助，剩下的一些大部分都是像音乐播放器之类的展示型项目，交互没有预期那么复杂。但我们实际在工作中，经常会遇到有...
衣物搭配管理系统（Vue+SpringBoot+MySQL）源码+数据库+功能文档+开题+文献+外翻+任务书+PPT
07-22
基于Vue+SpringBoot+MySQL的衣物搭配管理系统，包含项目全部源码、数据库脚本、功能文档、开题报告、文献综述、外文翻译、任务书、PPT，您可以在https://bbs.csdn.net/topics/616736989中预览本资源的全部内容，项目...
S007快递管理系统（Vue+SpringBoot+MySQL）源码+数据库+功能文档+开题+文献+外翻+中检+PPT
06-17
基于Vue+SpringBoot+MySQL的快递管理系统，包含项目全部源码、数据库脚本、功能文档、开题报告、文献综述、外文翻译、中检报告、PPT，您可以在https://bbs.csdn.net/topics/616040166中预览本资源的全部内容，项目...
vue实现中英文切换
热门推荐
weixin_44727080的博客
08-18 1万+
简单的使用（应用场景：15个以内页面的中英文切换） 1、安装 vue-i18n依赖 yarn add vue-i18n 或者 npm install vue-i18n --save-dev 2、在src/components下新建文件夹language，并在文件夹language下新建zh.js及en.js 【src/components/language/zh.js】 module.exports = { language: { name: 'English'
Vue项目中的多语言实现—vue-i18n插件的使用
weixin_43323097的博客
08-06 2698
vue-i18n 国际化 多语言实现
vue项目引入i18n国际化切换语言翻译功能
全易
08-12 817
安装： npm install vue-i18n --save 建立语言资源： src/assets/languages 例如中文和英文文件： 英文文件： export default { menu: { home: "home", msg: "this is an about page" }, content: { main: "this is content" } } 中文文件： export default { menu: { hom
vue前端项目实战案例+在线接口
05-14
这介绍一个简单的Vue前端项目实战案例，并提供在线接口。 实战案例：电影搜索网站 这个电影搜索网站可以让用户搜索电影，并获取电影的详细信息，包括电影名称、上映日期、评分、剧情简介、演员列表等。 实现思路： 1. 使用 Vue.js 构建前端页面，包括搜索框、搜索结果列表等。 2. 使用 Axios 库发送 HTTP 请求，获取电影信息。 3. 解析 JSON 数据，将电影信息显示在前端页面中。 4. 使用 CSS 样式美化页面，提高用户体验。 在线接口： 这里提供一个免费的电影搜索 API，可以用来获取电影信息。 API 地址：http://www.omdbapi.com/ API 文档：http://www.omdbapi.com/documentation.html 使用方法： 1. 注册账号并获取 API KEY。 2. 发送 HTTP GET 请求，包含电影名称和 API KEY。 例如： ```http http://www.omdbapi.com/?t=The+Matrix&apikey=yourapikey ``` 3. 解析 JSON 数据，获取电影信息。 代码示例： ```javascript import axios from 'axios' const API_KEY = 'yourapikey' export default { searchMovie(title) { const url = `http://www.omdbapi.com/?t=${title}&apikey=${API_KEY}` return axios.get(url) .then(response => response.data) } } ``` 以上就是一个简单的 Vue 前端项目实战案例和在线接口的介绍，希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值