vue/vux+ssm 嵌套JSON数组的前后台处理方式

向右看齐 2022-05-20 06:05 354阅读 0赞

嵌套JSON数组的前后台处理方式，今天终于完成了这样的效果：

![70][]

前台页面的写法：

<template>
    	<div>
    		<Header></Header>
    		<router-view></router-view>
    		<h3 style="margin:20px 0 20px 20px">我的市场</h3>
    
    		<div v-for="(list,listIndex) in lists">
    			<hr style="height:1px;border:none;border-top:1px solid green;">
    			<cell :title="list.医院名称" is-link :link="{path:'work/hospBasicInfor',query:{hospital:list.hospital}}"></cell>
    			<x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;"
    			v-for="(officeItem,officeIndex) in list.科室名称">
    				<tr style="background-color: #F7F7F7">
    				<th colspan="5" @click="spaceChange(listIndex,officeIndex)">{
       { officeItem.科室名称}}</th>
    				</tr>
    				<tbody>
    					<tr v-if="officeItem.show">
    						<td height="50px;"></td>
    						<td><x-button mini type="primary">基本信息</x-button></td>
    						<td><x-button mini type="primary">工作汇报</x-button></td>
    						<td><x-button mini type="primary">客户档案</x-button></td>
    						<td><x-button mini type="primary">患者档案</x-button></td>
    					</tr>
    				</tbody>
    			</x-table>
    		</div>
    		
    		<Footer></Footer>
    	</div>
    </template>
    <script >
    import Footer from './Footer'
    import Header from '../Header'
    import { XTable, LoadMore, XButton, Cell,CellBox,Box} from 'vux'
    
    export default {
    	data(){
    		return{
    
    			lists:[]
    		}
    	},
        methods: {
        	spaceChange (listIndex,officeIndex) {
        		console.log(listIndex+"  "+officeIndex);
        		this.lists[listIndex].科室名称[officeIndex].show = !this.lists[listIndex].科室名称[officeIndex].show
        	},
        	getHospitalInfor(){
        		this.$router.replace({ path: '/work/hosBasicInfor'})
        	}
        },
        created () {
        	this.$http.get('',{
            		withCredentials: true  //打开cookie
            	})
        	.then(({data}) => {
        		console.log(data)
        		this.lists = data.result
        	})
        },
        components:{
        	Footer,
        	Header,
        	XTable,
        	LoadMore,
        	XButton,
        	Cell,
        	CellBox,
        	Box
        }
    }
    </script>
    <style scoped>
    * { touch-action: none; }
    </style>

##     ##

## **前台界面注意几个地方：** ##

1.  2个v-for 嵌套循环时，要注意嵌套情况下参数的使用和索引的使用。v-for中（）的2个参数，第一个是实例，第二个是索引

2.  spaceChange方法的写法，穿入地址相关的索引，然后精确的找到该按钮的show参数

3.  ajax的请求地址，要注意，我刚刚在前面讲过这个问题。[vux+ssm 前后台分离的跨域问题（续）][vux_ssm]

## **后台处理思路：** ##

数据库中有2张相关表：医院表和科室表，思路是先利用负责人id查找相关医院，然后遍历医院查找医院下面的科室。

由于前台有一个点击科室，分别显示下拉按钮的功能，所以，在每个科室里面还要添加控制下拉界面的参数“show”。所以还需要遍历每个科室，在其中添加一个show属性

后台的具体实现：

String staffId= "xxxxxxx";
            List<BasicHospAndOffice> hosp_Office = new ArrayList<BasicHospAndOffice>();
            try {
                String  basicHosp = basicHospMinuteService.selectHospB(staffId);
                List hospList = new ArrayList();
                hospList.add(basicHosp);
                for (int i=0; i <hospList.size(); i++) {
                    String hosp = hospList.get(i).toString();
                    //查找医院名
                    String hosp_hosp = hosp.replace("[", "").replace("]", "");
                    //查找科室名
                    List basicOffice = basicOfficeService.selectHospO(hosp_hosp);
    
                    //遍历科室给每个科室添加show属性，并赋值到officeWithShows数组中
                    List<OfficeWithShow> officeWithShows = new ArrayList<>();
                    for(int n=0;n<basicOffice.size();n++){
                        OfficeWithShow officeWithShow = new OfficeWithShow();
                        String s = (String) basicOffice.get(n);
                        officeWithShow.set科室名称(s);
                        officeWithShow.setShow(false);
                        officeWithShows.add(officeWithShow);
                    }
    
                    BasicHospAndOffice bo = new BasicHospAndOffice();
                    bo.set医院名称(hosp_hosp);
                    bo.set科室名称(officeWithShows);
                    hosp_Office.add(bo);
    
                    if (hosp_Office != null) {
                        return new JsonResult(JsonResult.SUCCESSCODE, "查询成功", hosp_Office);
                    } else {
                        return new JsonResult(JsonResult.FAILURECODE, "暂无信息，负责人编号输入有误！", "负责人编号输入有误！");
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
                return new JsonResult(JsonResult.FAILURECODE,"错误信息",e);
            }

[70]: /images/20220520/b18164f37d3f4c0d918a686a2e16c917.png
[vux_ssm]: https://blog.csdn.net/honnyee/article/details/81012634