Vue项目获取后端传递的json数据并在前端给json数组添加自定义数据

版权声明:欢迎转载,注明作者和出处就好!如果不喜欢或文章存在明显的谬误,请留言说明原因再踩哦,谢谢,我也可以知道原因,不断进步!https://blog.csdn.net/csonst1017/article/details/85710904

因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端的json没有的,所以在把json数组的数据添加进data()函数里的数组的时候动态的添加一些数据。

1.首先获取后端的json数据:

var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));

successResponse是服务器响应内容,其中包含json数据。这里涉及到一个json格式转化问题,因为响应内容successResponse是个对象,所以我们需要先用stringify函数把json转成字符串形式。但因为后面要获取json里面指定的key对应的value,并且自定义添加一些数据,所以我们还需要用parse函数转成Json对象形式(也叫json序列化)。有的朋友就会问了,为什么不直接使用successResponse.data.data?还要转来转去?因为原本不是json对象。是HttpServletResponse对象。

2.遍历json数组对象,添加自定义数据

for (var i = 0; i < jsonObj.length; i++) {
	jsonObj[i].index='table'+jsonObj[i].menuId;
}

给json数组对象的每个位置添加自定义内容index:‘table’。
这里数组对象里原来是没有index这个key的,但是会自己添加进去。

3.将改造后的json数组对象传给data()里声明的数组。

this.items[1].subs=jsonObj;

在这里插入图片描述

4.运行vue项目并请求后端:
增加内容前的json数组(console.log输入到console查看):
在这里插入图片描述

增加后:
在这里插入图片描述

可以看到数组每个下标内容都添加上了index+id。

最后贴上组件的完整代码:

<template>
	<div class="sidebar">
		<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
		 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
			<!-- <el-button @click="getMenu()">lianjie</el-button> -->
			<template v-for="item in items">
				<template v-if="item.subs">
					<el-submenu :index="item.index" :key="item.index">
						<template slot="title">
							<i :class="item.icon"></i><span slot="title">{{ item.menuName }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
								<template slot="title">{{ subItem.menuName }}</template>
								<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
									{{ threeItem.menuName }}
								</el-menu-item>
							</el-submenu>
							<el-menu-item v-else :index="subItem.index" :key="subItem.index">
								{{ subItem.menuName }}
							</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index">
						<i :class="item.icon"></i><span slot="title">{{ item.menuName }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import bus from '../common/bus';
	export default {
		data() {
			return {
				responseResultData: [],
				// menuName: '',
				collapse: false,
				items: [{
						icon: 'el-icon-lx-home',
						index: 'dashboard',
						menuName: '系统首页'
					},
					{
						icon: 'el-icon-lx-cascades',
						index: '1',
						menuName: '基础表格',
						subs: []
					},
					{
						icon: 'el-icon-lx-copy',
						index: 'tabs',
						menuName: 'tab选项卡'
					},
					{
						icon: 'el-icon-lx-calendar',
						index: '3',
						menuName: '表单相关',
						subs: [{
								index: 'form',
								menuName: '基本表单'
							},
							{
								index: '3-2',
								menuName: '三级菜单',
								subs: [{
										index: 'editor',
										menuName: '富文本编辑器'
									},
									{
										index: 'markdown',
										menuName: 'markdown编辑器'
									},
								]
							},
							{
								index: 'upload',
								menuName: '文件上传'
							}
						]
					},
					{
						icon: 'el-icon-lx-emoji',
						index: 'icon',
						menuName: '自定义图标'
					},
					{
						icon: 'el-icon-lx-favor',
						index: 'charts',
						menuName: 'schart图表'
					},
					{
						icon: 'el-icon-rank',
						index: '6',
						menuName: '拖拽组件',
						subs: [{
								index: 'drag',
								menuName: '拖拽列表',
							},
							{
								index: 'dialog',
								menuName: '拖拽弹框',
							}
						]
					},
					{
						icon: 'el-icon-lx-warn',
						index: '7',
						menuName: '错误处理',
						subs: [{
								index: 'permission',
								menuName: '权限测试'
							},
							{
								index: '404',
								menuName: '404页面'
							}
						]
					}
				]
			}
		},
		computed: {
			onRoutes() {
				return this.$route.path.replace('/', '');
			}
		},
		created() {
			// 通过 Event Bus 进行组件间通信,来折叠侧边栏
			bus.$on('collapse', msg => {
				this.collapse = msg;
			});
			this.getMenu();
		},
		methods: {
			getMenu() {
				this.$axios
					.get('/api/admin/system/menu/list')
					.then(successResponse => {
						//获取json中的data部分
						if (successResponse.data.code === 200) {
							var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));
							console.log("增加内容前:"+JSON.stringify(jsonObj));
							for (var i = 0; i < jsonObj.length; i++) {
								jsonObj[i].index='table'+jsonObj[i].menuId;
							}
							this.items[1].subs=jsonObj;
							console.log("增加内容后:"+JSON.stringify(this.items[1].subs));
						}
					})
					.catch(failResponse => {}).catch(error => {
						console.log(error.response.data.code)
					})
			},
		}
	}
</script>

<style scoped>
	.sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 70px;
		bottom: 0;
		overflow-y: scroll;
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 250px;
	}

	.sidebar>ul {
		height: 100%;
	}
</style>

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试