vue3项目之实现切换语言功能(一)
实现切换语言功能
·
实现切换语言功能
这个是 mock 接口功能实战,就是在组件中发送请求函数;比如申请修改语言,后端返回修改成功或者失败的对象结果。成功的话前端才能修改语言,失败则不能修改
编写 mock 接口
由此导出两个接口:
saveLanguageApi(language: any)
:在数据库中保存当前语言
fetchLanguageApi()
:返回数据库中当前语言接口
- 实现 mock 接口
// 修改当前语言包
export async function saveLanguageApi(language: any) {
// 创建 mock 加载效果
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(255, 255, 255, 0.7)',
})
// 首先打开数据库及对象仓库
await airbnbDB.openStore('language', 'id')
// 再更新仓库中的语言属性(id = 1)
let result = await airbnbDB.updateItem('language', { id: 1, language })
if (result) {
// 加载结束
setTimeout(() => { loading.close() }, 500)
return { code: '200', message: '成功', data: '切换语言成功', ok: true }
} else {
// 加载结束
setTimeout(() => { loading.close() }, 500)
return { code: '204', message: '失败', data: '切换语言失败', ok: false }
}
}
// 查询当前语言包
export async function fetchLanguageApi() {
// 创建 mock 加载效果
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(255, 255, 255, 0.7)',
})
// 首先打开数据库及对象仓库
await airbnbDB.openStore('language', 'id')
// 再查询仓库中的语言属性(id = 1)
let result = await airbnbDB.getItem('language', 1)
// 加载结束
setTimeout(() => { loading.close() }, 200)
if (result) {
return { code: '200', message: '成功', data: result, ok: true }
} else {
return { code: '204', message: '失败', data: false, ok: false }
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)