崇文门网站建设,wap网站模式,新手做网络营销如何开始,网站首页不见怎么做数据展示
#xff08;例#xff1a;展示医院等级数据#xff0c;展示医院区域数据同理。#xff09; 接口文档中#xff0c;输入参数 测试一下接口#xff0c;发请求 看是否能够拿到信息 获取接口#xff0c;api/index.ts 中 /home/index.ts
// 统一管理首页模块接口
i…数据展示
例展示医院等级数据展示医院区域数据同理。 接口文档中输入参数 测试一下接口发请求 看是否能够拿到信息 获取接口api/index.ts 中 /home/index.ts
// 统一管理首页模块接口
import request from /utils/request.ts
import type { HospitalLevelAndRegionResponseData } from ./type
// 通过枚举管理首页模块的接口地址
enum API {// 获取医院等级以及地区的接口HOSPITALLEVELANDREGION_URL /cmn/dict/findByDictCode/
}
// 获取医院的等级或者获取医院地区的数据 接口返回的数据类型
export const reqHospitalLevelAndRegion (dictCode:string)request.getany,HospitalLevelAndRegionResponseData(API.HOSPITALLEVELANDREGION_URLdictCode);api/type.ts 中写 接口的 ts 类型。并在 api/index.ts 中写明 接口返回的数据类型 api/typs.ts
// 代表医院的等级或者地区数据的ts类型
export interface HospitalLevelAndRegion {id: number,createTime: string,updateTime: string,isDeleted: number,param: {},parentId: number,name: string,value: string,dictCode: string,hasChildren: boolean
}
export type HospitalLevelAndRegionArr HospitalLevelAndRegion[];
// 获得等级或者医院接口返回数据类型
export interface HospitalLevelAndRegionResponseData extends ResponseData{data: HospitalLevelAndRegionArr
}数据展示发请求- 拿数据- 渲染数据
pages/level/index.vue 中挂载完毕 就要获取数组展示数组。
用到的 ts 数据类型在 api 文件夹中 代码如下
/pages/index.vue
script langts
export default {name: Level,
};
/scriptscript setup langts
import { reqHospitalLevelAndRegion } from /api/home;
import { ref, onMounted } from vue;
import type { HospitalLevelAndRegionResponseData, HospitalLevelAndRegionArr } from /api/home/type
// 定义一个数组存储医院等级数据
let levelArr refHospitalLevelAndRegionArr([]);
// 控制医院等级高亮响应式数据
let activeFlag refstring();// 组件挂载完毕
onMounted((){getLevel();
});
// 获取医院等级的数组
const getLevel async () {// 发一个请求let result: HospitalLevelAndRegionResponseData await reqHospitalLevelAndRegion(Hostype);console.log(result);// 存储医院等级的数组if(result.code 200){levelArr.value result.data;}
} 渲染数据 高亮问题
设置一个控制高亮的响应式数据 activeFlag 点谁 默认存谁 谁高亮点击时响应式数据改变的方法动态类名控制 调整样式 /pages/index.vue
script setup langts
// 控制医院等级高亮响应式数据
let activeFlag refstring();// 点击等级的按钮回调
const changeLevel (level:string){// 高亮响应式数组存储level数值activeFlag.value level;// console.log(level);
}
/script
templatediv classlevelh1医院/h1div classcontentdiv classleft等级/divul classhospital!-- 为全部12345分别为后几个li --li :class{active:activeFlag} clickchangeLevel()全部/li li v-forlevel in levelArr :class{active:activeFlaglevel.value} :keylevel.value clickchangeLevel(level.value){{ level.name }}/li/uldiv classright/div/div/div
/template 根据等级和地区筛选医院展示
显示数据 子传父 // 父组件中
script langts
const getLevel (level: string) {// 收集参数 等级参数hostype.value level;// 再次发请求getHospitalInfo();
}
/script
template!-- 等级子组件 --Level getLevelgetLevel /
/template// 子组件中
script langts
const changeLevel (level:string){// 触发自定义事件将医院等级参数回传给父组件子传父$emit(getLevel,level);
}// 触发自定义事件 ,let $emit defineEmits([父组件函数]);
let $emit defineEmits([getLevel]);
/script
templateli clickchangeLevel()全部/li
