uniapp 根据json文件获对象名与值传入后台，并通过后台返回的字段拼接新的joson文件并下载。

最新推荐文章于 2024-07-13 10:58:01 发布
最新推荐文章于 2024-07-13 10:58:01 发布
阅读量266 收藏
点赞数 2
文章标签： uni-app json 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongxhuanbao/article/details/137785775
版权

 

        uniapp要通过json文件做多语言翻译，后台表示可以通过后台给我配置出我需要的翻译，我本地配置了四个语言文件，现在需要把这四个文件以下面这种格式传给后台

line:[
    {
        index: 	'key.keys.key',//json翻译的key值,这边分了三级
	    chinese: '你好', //json翻译文件的中文值
	    english: 'Hello', //英语
		spanish: 'Hola',  //西语
		catalunya:  'Hola', //加泰罗尼亚语
    }
   
]

 我的json文件是这样的

//中文zh.josn文件
{
    key:{
        keys:{
            key:'你好'
        }
    }
}

//西班牙语的es.json 文件
{
    key:{
        keys:{
            key:'Hello'
        }
    }
}

//英语的en.json文件
{
    key:{
        keys:{
            key:'Hola'
        }
    }
}

//加语的ca.json文件
{
    key:{
        keys:{
            key:'Hola'
        }
    }
}

我要做的是拆分我的json文件，下面是我的方法，大家有更好的方法可以使用自己的。

<script>
	import zhjson from '@/i18n/zh.json'
	import esjson from '@/i18n/es.json'
	import enjson from '@/i18n/en.json'
	import cajson from '@/i18n/ca.json'
	export default {
		data() {
			return {
				url: 'xxx.xxx'//后台地址
			}
		},
		methods: {
			// 上传本地数据
			updata(){
				let _this = this;
				let line = [];
				let keys = Object.keys(zhjson);
                //这里获取了对象名开始循环
				keys.forEach(item =>{
					if(typeof zhjson[item] == 'string'){
						let arr = {
							index: 	item,
							chinese	: zhjson[item],
							english: enjson[item],
							spanish: esjson[item],
							catalunya: cajson[item],
						}
						line.push(arr)
					}else if(typeof zhjson[item] == 'object'){
						let keystwo = Object.keys(zhjson[item]);
						keystwo.forEach(items =>{
							if(typeof zhjson[item][items] == 'string'){
								let arr = {
									index: 	item+ '.' + items,
									chinese	: zhjson[item][items],
									english: enjson[item][items],
									spanish: esjson[item][items],
									catalunya: esjson[item][items],
								}
								line.push(arr)
							}else if(typeof zhjson[item][items] == 'object'){
								let keythree = Object.keys(zhjson[item][items]);
								keythree.forEach(itemthree =>{
									if(typeof zhjson[item][items][itemthree] == 'string'){
										let arr = {
											index: 	item+ '.' + items+ '.' + itemthree,
											chinese	: zhjson[item][items][itemthree],
											english: enjson[item][items][itemthree],
											spanish: esjson[item][items][itemthree],
											catalunya: esjson[item][items][itemthree],
										}
										line.push(arr)
									}else {
										return
									}
								})
							}
						})
					}
				})
				console.log('line',line)
				// 这里是我上传到后台的接口
				this._post('uniapp/batch_upload',{
					program: '项目名', 
					client: '项目分类',
					line: line,
				},result => {
					
				})
			},
			// 生成本地json文件
			dataGenerate(){
				let _this = this;
				let line = [];
				console.log('jiekou')
				_this._post('uniapp/batch_download',{
					program: '项目名', 
					client: '项目分类',
					line: line,
				},result => {
                    //将拿到的数据进行拆分，组合成新的json文件
					_this.Generatejosn(result.data.line)
					
				})
			},
			// 生成json文件
			Generatejosn(data){
				var zhjsonlist = {},
					enjsonlist = {},
					esjsonlist = {},
					cajsonlist = {};
				data.forEach(item => {
					let strArr = item.index.split('.')
					if(strArr.length == 1){
						this.$set(zhjsonlist, strArr[0], item.chinese);
						this.$set(enjsonlist, strArr[0], item.english);
						this.$set(esjsonlist, strArr[0], item.spanish);
						this.$set(cajsonlist, strArr[0], item.catalunya);
					}else if(strArr.length == 2){
						if(zhjsonlist.hasOwnProperty(strArr[0])){
							this.$set(zhjsonlist[strArr[0]], strArr[1], item.chinese);
							this.$set(enjsonlist[strArr[0]], strArr[1], item.english);
							this.$set(esjsonlist[strArr[0]], strArr[1], item.spanish);
							this.$set(cajsonlist[strArr[0]], strArr[1], item.catalunya);
						}else{
							this.$set(zhjsonlist, strArr[0], {});
							this.$set(enjsonlist, strArr[0], {});
							this.$set(esjsonlist, strArr[0], {});
							this.$set(cajsonlist, strArr[0], {});
							this.$set(zhjsonlist[strArr[0]], strArr[1], item.chinese);
							this.$set(enjsonlist[strArr[0]], strArr[1], item.english);
							this.$set(esjsonlist[strArr[0]], strArr[1], item.spanish);
							this.$set(cajsonlist[strArr[0]], strArr[1], item.catalunya);
						}
						
					}else if(strArr.length == 3){
						if(zhjsonlist.hasOwnProperty(strArr[0])){
							if(zhjsonlist[strArr[0]].hasOwnProperty(strArr[1])){
								this.$set(zhjsonlist[strArr[0]][strArr[1]], strArr[2], item.chinese);
								this.$set(enjsonlist[strArr[0]][strArr[1]], strArr[2], item.english);
								this.$set(esjsonlist[strArr[0]][strArr[1]], strArr[2], item.spanish);
								this.$set(cajsonlist[strArr[0]][strArr[1]], strArr[2], item.catalunya);
							}else{
								this.$set(zhjsonlist[strArr[0]], strArr[1], {});
								this.$set(enjsonlist[strArr[0]], strArr[1], {});
								this.$set(esjsonlist[strArr[0]], strArr[1], {});
								this.$set(cajsonlist[strArr[0]], strArr[1], {});
								this.$set(zhjsonlist[strArr[0]][strArr[1]], strArr[2], item.chinese);
								this.$set(enjsonlist[strArr[0]][strArr[1]], strArr[2], item.english);
								this.$set(esjsonlist[strArr[0]][strArr[1]], strArr[2], item.spanish);
								this.$set(cajsonlist[strArr[0]][strArr[1]], strArr[2], item.catalunya);
							}
						}else{
							this.$set(zhjsonlist, strArr[0], {});
							this.$set(enjsonlist, strArr[0], {});
							this.$set(esjsonlist, strArr[0], {});
							this.$set(cajsonlist, strArr[0], {});
							this.$set(zhjsonlist[strArr[0]], strArr[1], {});
							this.$set(enjsonlist[strArr[0]], strArr[1], {});
							this.$set(esjsonlist[strArr[0]], strArr[1], {});
							this.$set(cajsonlist[strArr[0]], strArr[1], {});
							this.$set(zhjsonlist[strArr[0]][strArr[1]], strArr[2], item.chinese);
							this.$set(enjsonlist[strArr[0]][strArr[1]], strArr[2], item.english);
							this.$set(esjsonlist[strArr[0]][strArr[1]], strArr[2], item.spanish);
							this.$set(cajsonlist[strArr[0]][strArr[1]], strArr[2], item.catalunya);
						}
						
					}
				})
                //因为我要生成四个json文件，同时生成会导致只能生成一个，具体原因可能是销毁那部分的原因我也没研究，直接做了处理，让文件一个个生成
				let down = (i) =>{
					if(i == 0){
						var js = JSON.stringify(zhjsonlist);
					}else if (i == 1){
						var js = JSON.stringify(enjsonlist);
					}else if (i == 2){
						var js = JSON.stringify(esjsonlist);
					}else if (i == 3){
						var js = JSON.stringify(cajsonlist);
					}
					//创建一个文本blob对象
					var  blob = new Blob([js],{type:'application/json'})
					//构造下载连接
					const url = URL.createObjectURL(blob)
					//创建下载连接的A标签
					const a = document.createElement('a')
					a.href = url
					if(i == 0){
						a.download  = 'zh.json'
					}else if (i == 1){
						a.download  = 'en.json'
					}else if (i == 2){
						a.download  = 'es.json'
					}else if (i == 3){
						a.download  = 'ca.json'
					}
					//模拟点击下载连接
					document.body.appendChild(a)
					a.click()
					document.body.removeChild(a)
					//释放资源
					URL.revokeObjectURL(url)
					if(i == 0){
						down(1)
					}else if(i == 1){
						down(2)
					}else if(i == 2){
						down(2)
					}else if(i == 2){
						return;
					}
				}
				down(0)      
			},
			_get( url,data, resolve, fail, complete){
				let _this = this;
				uni.request({
					url: _this.url +  url,
					header: {
						'content-type': 'application/json'
					},
					data: data,
					success(res) {
						resolve(res.data)
					},
					fail(res) {
						
					},
					complete(res) {
						
					}
				});
			},
			_post(url,data, success, fail, complete){
				let _this = this;
				uni.request({
					url: _this.url +  url,
					header: {
						'content-type': 'application/json'
					},
					method: 'POST',
					data: data,
					success(res) {
						success(res.data)
					},
					fail(res) {
						
					},
					complete(res) {
						
					}
				});
			},
		}
	}
</script>

拆分组合上传，下载组合生成，这个逻辑。

tongchuanbao
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Ztree后台拼接Json
11-07
这个场景中提到的“Ztree后台拼接Json”主要指的是如何在服务器端（后台）处理并组合JSON数据，以便于ZTree前端组件能够正确渲染出树状结构。这个过程涉及到的数据处理和通信技术是关键知识点。 首先，我们需要了解...
Pbjson字符串生成与解析
05-18
Pbjson的工作原理是：当需要将protobuf对象转换为Json字符串时，它会遍历protobuf消息的字段，将每个字段的值转换为Json格式，并构建出对应的Json字符串。反向操作，解析Json字符串到protobuf对象时，Pbjson会解析...
uniapp数组转成json字符串
lplovewjm的博客
04-18 3696
uniapp转换JSON后用replace方法去除数组最外层的[]
往json对象添加新建的key和value，key，value是动态的方法
热门推荐
Copy_ing的博客
09-28 1万+
向json对象中添加动态的key,value 解决方法：创建方法，进行辅助添加 // 参数：json = json对象 ，prop = 属性，val = 值 function createJson(json,prop, val) {     // 如果 val 被忽略     if (typeof val === "undefined") {         // 删除属性         ...
uniapp 实现ios端和安卓端的文件下载，多文件管理
華勳的博客
07-14 4846
ios 安卓端下载，开始暂停，断点续下，下载文件删除查看，防止重复下载等功能。
uni-app读取json数据
weixin_45932157的博客
04-21 1万+
<template> <view> <view>程序员</view> <view v-for="(item,index) in list.programmers"> <view class="mytext"> <text>姓：{{item.firstName}}</text><text>名字：{{item.lastName}}&lt
uniapp-文件下载
qq_43033251的博客
04-14 1756
需求： 实现下载文件 uni.downloadFile({ // 注意：url是完整的下载地址，并不仅仅是api // 例如：http://192.168.xx.xx:8080/manange/xx/xx/?file=xxxxxxxx url: getBaseUrl("") + "/manage/manarchive/fileDownload" + // 参数 turnObjTo
基于HTML模板和JSON数据的JavaScript交互(移动端)_.docx
10-09
这个方法使用正则表达式找到所有形如`$var$`的变量，并使用传入的对象（JSON数据）来替换它们。正则表达式`/\$\w+\$/gi`匹配所有的美元符号包围的单词字符序列，`matchs.replace(/\$/g, "")`将匹配到的变量名转换为...
dynamicDrools:动态配置drools规则引擎和定时器
04-16
dynamicDrools 动态配置drools规则引擎和定时器 动态规则数据表配置见附件drools.sql 说明：本人使用了四张表 rule,trigger,...根据传递过来的json数据的deviceId字段，去数据库中查询，有没有对应deviceId的规则，如果
Android中Retrofit2.0的使用Demo
04-02
首先，我们需要创建`User`类，它的字段与JSON对象的键对应： ```java public class User { private int id; private String name; // getters and setters } ``` 当Retrofit收到JSON响应时，Gson会自动将JSON...
uniapp下载文件
kepler星球的博客
07-29 7460
uniapp下载文件
uni-app中json的转换
web15085112441的博客
02-23 1697
字符串转对象：JSON.parse(jsonStr); 对象转字符串：JSON.stringify(jsonObj)
uniapp存放json格式的数据
祈澈菇凉
06-16 1万+
在做前端开发的时候，少不了要用一些模拟的json的数据来进行测试，在没有拿到后端开发小伙伴的接口之前，就先尝试着自己写一下json数据吧，前面有说过，使用mock的方法来实现，有小伙伴可能不太习惯，那么json存放的文件夹以及在组件里面要用到的路径一定要注意哦。 比如：我首先要在static的静态资源文件夹底下新建一个json的数据，在每个组件页面，也就是pages底下的组件里面使用的时候，要注意...
在uniapp中如何使用地图
weixin_55800388的博客
07-12 304
最好是使用webview + html形式加载，避免打包app时的地图加载问题。对应的html一定需要注意目录结构。//从其他组件传来的值。
uniapp中使用uni-ui组件库
weixin_42289273的博客
07-11 268
【代码】uniapp中使用uni-ui组件库。
uni-app 扫描二维码获取信息功能
qq_42371932的博客
07-12 282
然后现在是可以扫描二维码的状态，扫描之后，可以看到首先是出发上一个页面的事件，然后返回上一页面。这样就可以扫描二维码之后，传递数据给上一页面。首先是扫描二维码的功能，可以参考这篇博文。接下来需要在扫描界面的上一页面做处理。最后设置事件中获取数据的方法。在mounted里挂载事件。需要在data里设置。
推荐一款uniapp拖动验证码插件
最新发布
weixin_59685936的博客
07-13 145
推荐一款uniapp拖动验证码插件
uniapp mac m1 arm芯片编译问题
z157794218的专栏
07-10 1122
遇到Macarm芯片（m1 m2）的uniapp异常
python 读取json文件并解析 修改字段值
07-13
你可以使用Python的内置模块`json`来读取和解析JSON文件，然后...在上面的代码中，你需要将`data.json`替换为你实际的JSON文件路径，并将`field_name`替换为你想要修改的字段名，`new_value`替换为你想要设置的新值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值