springi18n中英文切换

i18n

在src下创建文件夹resources,在文件夹下创建属性文件

messages_en.properties

addProduct.form.productId.label = Product ID(en i18n)

addProduct.form.name.label = Product Name

addProduct.form.unitPrice.label = unitPrice

addProduct.form.description.label = description

addProduct.form.manufacturer.label = manufacturer

addProduct.form.category.label =     category

addProduct.form.unitsInStock.label = unitsInStock

addProduct.form.condition.label = condition

addProduct.form.productImage.label = productImage

messages_zh_CN.properties

addProduct.form.productId.label = \u4EA7\u54C1\u7F16\u53F7

addProduct.form.name.label = \u4EA7\u54C1\u540D\u79F0

addProduct.form.unitPrice.label = \u4EF7\u683C

addProduct.form.description.label = \u63CF\u8FF0

addProduct.form.manufacturer.label = \u5236\u9020\u5546

addProduct.form.category.label = \u7C7B\u522B

addProduct.form.unitsInStock.label = \u5E93\u5B58\u6570\u91CF

addProduct.form.condition.label = condition

addProduct.form.productImage.label = productImage

编辑框架配置文件

编辑addProduct.jsp

访问增加产品页面(显示中文)

<bean id="localeResolver"

   class="org.springframework.web.servlet.i18n.SessionLocaleResolver">

      <property name="defaultLocale" value="zh_CN" />

   </bean>

 

zh_CN修改为en

<property name="defaultLocale" value="en" />

访问增加产品页面(显示英文)

实现中英文切换

编辑框架配置文件

配置一个本地化拦截器

编辑addProduct.jsp

增加一个中英文切换

访问效果

为了在前端项目中利用 Vue 的 Cascader 级联选择器组件实现国际化,即通过 `vue-i18n` 实现内容的中英文转换,你可以按照下面步骤来进行配置: ### 一、安装必要的依赖库 首先确认已经安装了 `element-plus`(假设你正在使用 Element Plus 框架提供的 cascader 组件) 和 `vue-i18n` 插件。 ```bash npm install element-plus vue-i18n --save ``` ### 二、创建语言包文件夹并编写翻译信息 接下来,在 src 目录下建立 locales 文件夹用于存放不同语言的消息文件。例如 en.js 和 zh.js 分别表示英语和汉语版本的内容。每个 .js 文件包含一个导出的对象结构如下: **en.js** ```javascript export default { messages: { "select": "Select", // 其他选项... "province": "Province", "city": "City" } } ``` **zh.js** ```javascript export default { messages: { "select": "请选择", // 其他选项... "province": "省份", "city": "城市" } } ``` ### 三、初始化 i18n 对象及应用到 Vue 应用程序上 然后需要在 main.js 中引入上述的语言包,并完成对 vue-i18n 的实例化工作以及设置默认使用的语言环境。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 引入元素UI框架及其样式表 import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css' // 导入i18n相关的模块 import VueI18n from 'vue-i18n' import enLocale from './locales/en'; import zhLocale from './locales/zh'; const app = createApp(App); app.use(ElementPlus); app.use(VueI18n, new VueI18n({ locale: localStorage.getItem('lang') || 'zh', // 设置初始显示的语言,默认为简体中文(zh) fallbackLocale: 'en', messages: { en: enLocale.messages, zh: zhLocale.messages }, })); app.mount('#app'); ``` ### 四、修改级联选择框的数据源键值名称以便于支持国际化的渲染 为了让 Cascader 显示的文字能够依据用户当前选择的语言而变化,你需要保证数据源中的 label 属性对应的文本可以在多语言之间切换。比如可以将静态字符串替换成为动态获取的方式如 `$t('messageKey')`, 这里的 messageKey 就是你事先定义好的消息键名: ```json [ { value: 'zhejiang', label: this.$t('province'), children: [{ value: 'hangzhou', label: this.$t('city'), children: [ /* 更深层次的城市列表 */ ] }] } ] ``` 注意点是在实际编码过程中不能直接在这里面写this关键字,因为这并不是Vue组件内部;取而代之的是应当考虑如何从外部传参或者是构建函数来生成这个层级式菜单数组。 此外还可以自定义render-label属性来自行控制标签内容的具体展示形式。 ### 五、页面上增加语言切换按钮或其他交互方式让用户改变界面呈现的语言风格 最后一步就是允许访客根据个人喜好随时更改网站所用的语言了。可以通过点击事件触发对应方法去调整全局状态下的locale变量即可达成目的。 ```html <el-button @click="changeLanguage('zh')">中文</el-button> <el-button @click="changeLanguage('en')">English</el-button> <script setup> function changeLanguage(lang){ instance.global.i18n.locale.value = lang; localStorage.setItem('lang', lang); }; </script> ``` 以上就是在基于Vue+Element+Cascader场景下来实践一套简单的国际化方案的基本流程啦~希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值