爱站程序员基地7.27~学习笔记——后端前端的数据传输架构
-
后端
service
/*** 通过站点辅导查询Uv数据* @param courseEduId* @param dn* @param time* @return*/JSONArray searchUvByTutorAndDn(String courseEduId,String dn,String time);
-
impl （import com.cdeledu.yunqi.biz.dao.BizIntegrateDataExtendMapper;）
@Overridepublic JSONArray searchUvByTutorAndDn(String courseEduId, String dn, String time) {JSONArray re = new JSONArray();//权限判断Map<String, Object> perms = currentPerms();List<SysDataPerm> dataPermLimit = (List<SysDataPerm>) perms.get(dn + \"DataPerm\");List<String> dataParamCode = getDataParamCode(dataPermLimit);if (dataParamCode != null && dataParamCode.contains(\"uv\")) {JSONObject data = new JSONObject();List<Map<String, Object>> list = bizIntegrateDataExtendMapper.searchUvByTutorAndDn(courseEduId, dn, time);if (list != null && list.size() > 0) {for (int i = 0; i < list.size(); i++) {Map<String, Object> item = list.get(i);String device = item.get(\"device\") + \"\";String key = \"\";if (\"mobile\".equals(device) || \"app\".equals(device) || \"wechat\".equals(device)) {key = \"M端\";} else if (\"pc\".equals(device)) {key = \"PC端\";}if (StringUtils.isEmpty(key)) {continue;}int uv = item.get(\"uv\") == null ? 0 : Integer.parseInt(item.get(\"uv\") + \"\");Object o = data.get(key);if (o != null) {data.put(key, Integer.parseInt(o.toString()) + uv);} else {data.put(key, uv);}}}if (data.size() > 0) {Set<String> keySet = data.keySet();for (String key : keySet) {JSONObject tmp = new JSONObject();tmp.put(\"x\", key);tmp.put(\"y\", data.get(key));re.add(tmp);}}}return re;}
controller
/*** 通过辅导网站获取uv数据** @param paramObj* @return*/@Override@PostMapping(\"searchUvByTutorAndDn\")public HttpEntity<ResponseMessage> searchUvByTutorAndDn(@RequestBody IntegratedDataRequest paramObj) {try {//时间处理integrateDataService.getTimeAndTutor(paramObj);JSONArray dataByDurTime = integrateDataService.searchUvByTutorAndDn(paramObj.getCourseeduId(),paramObj.getDn(),paramObj.getDt());Map<String,Object> data = new HashMap<>();data.put(\"params\",paramObj);data.put(\"dataByDurTime\",dataByDurTime);return responseBody(new SingleData<>(data));} catch (Exception e) {log.error(\"获取数据异常\", e);return responseBody(RESPONSE.ERROR);}}
dao层
- mapper
/*** 通过站点辅导查询Uv数据* @param catalogId* @param dn* @param time* @return*/List<Map<String,Object>> searchUvByTutorAndDn(String courseEduId,String dn,String time);
- xml
<select id=\"searchUvByTutorAndDn\" resultType=\"java.util.HashMap\">SELECTinnercode,device,SUM( uv ) AS uvFROMbiz_flow_catalog_deviceWHEREdt = #{time}AND dn = #{dn}and innercode IN(SELECTinnercodefrom biz_catalog_relationwherecourseeduid = #{courseEduId}and dn = #{dn})GROUP BYinnercode,device</select>
前端
sercie.tsx
import {request} from \'umi\';import {QueryType} from \"@/pages/AllSiteFlow/data\";import {getToken} from \"@/utils/auth\";//后端的searchUvByTutorAndDnexport async function searchUvByTutorAndDn(params?:QueryType) {return request(\'/api/biz/integrated/searchUvByTutorAndDn\', {method: \"POST\",data: params,headers: {\'Authorization\': \'Bearer\' + getToken()},// mode: \"no-cors\"});}
model.tsx
[li]
“`tsx
import {AnalysisData} from “./data”;
import {
//后端的方法searchUvByTutorAndDn
searchUvByTutorAndDn,
xxxxxx,
xxx
} from “./service”;
import {Effect, Reducer} from “@@/plugin-dva/connect”;
import {selectRootCatalogByDn} from “@/services/catalog”;
export interface ModelType {
namespace: string;
state: AnalysisData;
effects: {
//前端的方法searchUvPieOfDay
searchUvPieOfDay: Effect
xxxxx
xxx
};
reducers: {
save: Reducer;
}
}
const initState: AnalysisData[] = []
const Model: ModelType = {
namespace: ‘allSiteFlow’,
state: initState,
effects: {
* searchUvPieOfDay({payload}, {call, put}) {
const response = yield call(searchUvByTutorAndDn, payload);
yield put({
type: ‘save’,
//前端方法的对象flowUvPieDay
payload: {“flowUvPieDay”: response.data}
});
},
},
reducers: {
save(state, {payload}) {
return {
…state,
…payload
};
}
}
};
export default Model;
[/li]
data.tsx
export interface AnalysisData {dataPerm:{},firstDnAndTutorAndTime:IFirstDnAndTutorAndTime,flowDayData:IFlowDayData,flowWeekData:{},flowMonthData:{},flowUvLineDay:[],flowUvLineWeek:[],flowUvLineMonth:[],//前端方法的对象flowUvPieDay，可定义其数据类型flowUvPieDay:VisitDataType[],flowUvPieWeek:VisitDataType[],flowUvPieMonth:VisitDataType[],}export interface IFirstDnAndTutorAndTime {dn:string}export interface VisitDataType {x: string;y: number;}
index.tsx
//前端方法seachUvPieOfDay//1/4//获取流量图getFlowUvPieLineD = (tutorid) => {this.setState({courseeduId: tutorid}, () => {this.searchUvPieOfDay();this.searchUvLineOfDay();})}//2/4 render外callback = (key) => {if (key == \"revenue\") {this.searchByDn(\"\");this.selectSaleDataOfDay();this.selectSaleMoneyPieOfDay();this.selectSaleMoneyDevice();this.selectSubjectCourseInfo();this.selectClassCourseInfo();this.selectSaleMoneyLineOfDay();this.selectSaleDataOfWeek();this.selectSaleDataOfMonth();this.selectSaleMoneyPieOfWeek();this.selectSaleMoneyLineOfMonth();this.selectClassCourseInfoMonth();this.selectSaleMoneyLineOfWeek();this.selectClassCourseInfoWeek();this.selectSubjectCourseInfoOfMonth();this.selectSubjectCourseInfoOfWeek();this.selectSaleMoneyPieOfMonth();this.selectSaleMoneyDeviceOfWeek();this.selectSaleMoneyDeviceOfMonth();}if (key == \"flow\") {this.searchFlowDataByDnAndTime();this.searchUvPieOfDay();this.searchUvPieOfWeek();this.searchUvPieOfMonth();this.searchFlowDataByDnAndDurTimeWeek();this.searchFlowDataByDnAndDurTimeMonth();this.searchUvLineOfDay();this.searchUvLineOfWeek();this.searchUvLineOfMonth();this.searchByDn(\"\");}}//3/4// UV 饼图 -天searchUvPieOfDay = () => {this.props.dispatch({type: \'allSiteFlow/searchUvPieOfDay\',payload: {dn: this.state.flowUvDayDn,courseeduId: this.state.courseeduId,}})}//4/4 render外componentDidMount() {this.searchFlowDataByDnAndTime();this.searchUvPieOfDay();this.searchUvPieOfWeek();this.searchUvPieOfMonth();this.searchFlowDataByDnAndDurTimeWeek();this.searchFlowDataByDnAndDurTimeMonth();this.searchUvLineOfDay();this.searchUvLineOfWeek();this.searchUvLineOfMonth();this.searchByDn(\"\");}//前端对象flowUvPieDay//1/3 render内const {dataPerm,flowDayData,flowWeekData,flowMonthData,flowUvLineDay,flowUvLineWeek,flowUvLineMonth,flowUvPieDay,flowUvPieWeek,flowUvPieMonth,classCourseDay,classCourseWeek,classCourseMonth,devicePieDay,devicePieWeek,devicePieMonth,saleDataGeneralOfDay,saleDataGeneralOfWeek,saleDataGeneralOfMonth,saleMoneyLineOfDay,saleMoneyLineOfMonth,saleMoneyLineOfWeek,studyCardPieDay,studyCardPieWeek,studyCardPieMonth,subjectCoursePieDay,subjectCoursePieWeek,subjectCoursePieMonth,firstDnAndTutorAndTime,} = allSiteFlow//2/3 获取站点const getTutorPieDayByDn = (dn) => {lowUvPieDay.params.dn = dn;flowUvPieDay.params.courseeduId = \"\";this.setState({flowUvDayDn: dn}, () => {this.searchByDn(dn)})}//3/3<SelectshowSearch={true}placeholder=\"选择站点\"optionFilterProp=\"children\"bordered={false}className={styles.webSitetBar}value={flowUvPieDay && flowUvPieDay.params ? flowUvPieDay.params.dn : \"\"}onChange={getTutorPieDayByDn}>{dataPerm && dataPerm.dns && dataPerm.dns.map((item) => (<Select.Option key={item.value} value={item.value}>{item.name}</Select.Option>))}</Select><SelectshowSearch={true}placeholder=\"选择辅导\"optionFilterProp=\"children\"bordered={false}style={{width: 200}}className={styles.tutorBar}onChange={this.getFlowUvPieLineD}value={flowUvPieDay && flowUvPieDay.params ? flowUvPieDay.params.courseeduId : \"\"}>{dataPerm && dataPerm.bizCatalogRelations && dataPerm.bizCatalogRelations.map((item) => (<Select.Option key={item.courseeduid} value={item.courseeduid + \'\'}>{item.courseeduname}</Select.Option>))}</Select></div><Row gutter={8}><Col span={12} className={styles.colMark}><div className={styles.subDivCol}><div className={styles.divLineDate}><div style={{fontWeight: 400, lineHeight: \'57px\'}}>UV饼图</div></div></div><Pie style={{marginRight: 8}}hasLegendsubTitle={<FormattedMessage id=\"allsiteflow.analysis.uv\" defaultMessage=\"独立访客\"/>}total={() => numeral(flowUvPieDay && flowUvPieDay.dataByDurTime && flowUvPieDay.dataByDurTime.reduce((pre, now) => now.y + pre, 0)).format(\'0,0\')}data={flowUvPieDay && flowUvPieDay.dataByDurTime ? flowUvPieDay.dataByDurTime : []}valueFormat={(value) => numeral(value).format(\'0,0\')}height={248}lineWidth={4}/>
