2019年5月29日，新公司，新项目。转眼一个月了，经过这段时间的适应感觉自己还能挺住。今天趁着周末，也趁着工作需求暂时能够告一段落，总结总结这段时间遇到的坑。
坑1:前后端分离，进行适配（老系统重构升级，页面已经调试完成）
需求描述：以前没怎么搞过前后端分离的项目，新公司新项目使用的恰恰就是前后端分离。于是虚心请教，自主学习，开始准备将公司大佬搞到一半的适配接手，还好有个模板已经适配完了，可以照猫画虎。对了前端用的Vue.JS
需求实现：以下标红的代码即跟后端代码关联起来的地方（target后面的地址一定要能够访问）
module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:8080/', changeOrigin: true, pathRewrite: { '^/api': '' } } }, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- devtool: 'cheap-module-eval-source-map', cacheBusting: true, cssSourceMap: true },
坑2：第一步完成之后，第二步就很简单了，页面访问哪个方法，在后台就找到哪个方法就行，前后端一致即可，跟正常没有前后端分离一样，不过因为我现在用的vuejs所以返回格式需要修改。
坑3：介绍一下vuejs以及el组件的使用
select选择器的使用：
<el-select @change="changeBank()" v-model="bankIdList" multiple size="small" collapse-tags style="margin-left: 20px;" placeholder="请选择分行（可多选）"> <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select>
需要在vue的date中添加options属性
<script> export default { name: "Work-Push", data(){ return { closeBtn:false, table:[], wo_id:'', options: [], bankIdList: [], } },
并开始赋值，
methods:{ queryList(){ this.utils.post(this,'getWorkOrderReqRow.do',{orderId:this.wo_id},d=>{ this.table = d; }); }, // 加载所有分行 loadAllBranch() { console.log(1); this.utils.post(this,'allBranchForVue.do',{},d=>{ console.log(d); this.options = d; }); }, },
切记一定要在初始化时，将方法加载执行，因为选择在跳转到这个页面就要进行加载选择项，所以放在初始化中
created(){ this.wo_id = this.$route.params.id; console.log(this.wo_id); this.queryList(); //查询方法 this.loadAllBranch(); }
在vuejs中有date、methods、watch、created，分别代表数据、方法、监听、初始化，如下代码所示
<script> export default { name: "Work-Push", data(){ return { closeBtn:false, table:[], wo_id:'', options: [], bankIdList: [], } }, methods:{ queryList(){ this.utils.post(this,'getWorkOrderReqRow.do',{orderId:this.wo_id},d=>{ this.table = d; }); }, // 加载所有分行 loadAllBranch() { console.log(1); this.utils.post(this,'allBranchForVue.do',{},d=>{ console.log(d); this.options = d; }); }, changeBank() { console.log(2); console.log(this.bankIdList); }, pushWorkOrder(){ this.utils.post(this,'addWorkOrder.do',{orderId:this.wo_id,bankIdList:JSON.stringify(this.bankIdList)},d=>{ this.closeBtn = true; if(d == 'success'){ this.$message({ message: '推送成功', type: 'success' }); }else if(d == 'finish'){ this.$message({ message: '已推送成功，请勿重复推送', type: 'success' }); }else{ this.$message({ message: '推送失败' }); } }); }, off(){ this.utils.post(this,'updateWorkOrderStatu.do',{orderId:this.wo_id},d=>{ this.closeBtn = true; if(d == 'success'){ this.$message({ message: '关闭成功', type: 'success' }); } }); this.changePath('/work-order'); } }, watch: { $route: { deep: true, handler() { this.wo_id = this.$route.params.id; } } }, created(){ this.wo_id = this.$route.params.id; console.log(this.wo_id); this.queryList(); this.loadAllBranch(); } } </script>
关于Element组件，直接去：https://element.eleme.cn/#/zh-CN/component/installation 这个网站学习即可，随用随查。
比如用到button按钮组件。搜索之后就会出现如下图
点击显示代码，就会出现以下所有按钮类型对应的代码，直接复制粘贴即可使用。
<el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <el-row> <el-button plain>朴素按钮</el-button> <el-button type="primary" plain>主要按钮</el-button> <el-button type="success" plain>成功按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>警告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button> </el-row> <el-row> <el-button round>圆角按钮</el-button> <el-button type="primary" round>主要按钮</el-button> <el-button type="success" round>成功按钮</el-button> <el-button type="info" round>信息按钮</el-button> <el-button type="warning" round>警告按钮</el-button> <el-button type="danger" round>危险按钮</el-button> </el-row> <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row>
http接口的认识：不同系统之间传输信息。
需求描述：A系统向B系统推送工单，因为数据较为简单，而且都是我们公司自己的系统，所以直接使用Http接口进行传递。
需求实现：
/** * 模拟请求 * * @param url 资源地址 * @param map 参数列表 * @param encoding 编码 * @return * @throws ParseException * @throws IOException */ public static String send(String url, Map<String,String> map,String encoding) throws ParseException, IOException{ String body = ""; //创建httpclient对象 CloseableHttpClient client = HttpClients.createDefault(); //创建post方式请求对象 HttpPost httpPost = new HttpPost(url); //装填参数 List<NameValuePair> nvps = new ArrayList<NameValuePair>(); if(map!=null){ for (Map.Entry<String, String> entry : map.entrySet()) { nvps.add(new BasicNameValuePair(entry.getKey(), entry.getValue())); } } //设置参数到请求对象中 httpPost.setEntity(new UrlEncodedFormEntity(nvps, encoding)); System.out.println("请求地址："+url); System.out.println("请求参数："+nvps.toString()); //设置header信息 //指定报文头【Content-type】、【User-Agent】 httpPost.setHeader("Content-type", "application/x-www-form-urlencoded"); httpPost.setHeader("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)"); //执行请求操作，并拿到结果（同步阻塞） CloseableHttpResponse response = client.execute(httpPost); //获取结果实体 HttpEntity entity = response.getEntity(); if (entity != null) { //按指定编码转换结果实体为String类型 body = EntityUtils.toString(entity, encoding); } EntityUtils.consume(entity); //释放链接 response.close(); return body; }
/** * 将工单推送给分行 * @throws IOException * */ @RequestMapping("pushWorkOrder") public void pushWorkOrder(HttpServletResponse response, HttpServletRequest request) throws IOException{ //String orderId = "&orderID="+ HttpRequestUtil.urlEncode(request.getParameter("orderID"),"utf-8"); String orderId = request.getParameter("orderID"); WorkOrder workOrder=workOrderService.getWorkOrderByID(orderId); if(workOrder==null) { ResultUtil.Error(response, "没有对应的工单号"); } List<RequestRow> requestRowList = requestRowService.listRequestRowByWoId(orderId); String rowList = com.alibaba.fastjson.JSON.toJSON(requestRowList).toString(); String wo = com.alibaba.fastjson.JSON.toJSON(workOrder).toString(); Map<String,String> params = new HashMap<>(); params.put("requestRows",rowList); params.put("workOrder",wo); String detUrl = "http://127.0.0.1:8080/firewall/getWorkOrder.do"; String result = HttpRequestUtil.send(detUrl,params,"utf-8"); String msg = result.equals("success") ? "success" : "error"; try { response.getWriter().write(msg); } catch (IOException e) { e.printStackTrace(); } }
接下来就是B系统接收到信息之后，对数据处理以及返回信息。
/** * 获取8088的推送信息 * @param response * @param request * @param session * @return * @throws ParseException * @throws IOException */ @RequestMapping("getWorkOrder") public void getWorkOrder(HttpServletResponse response, HttpServletRequest request, HttpSession session) throws ParseException, IOException { String workOrder = request.getParameter("workOrder"); String rows = request.getParameter("requestRows"); UserModel user = userService.getUserByName("w06804"); user.setRoleName("管理员"); com.alibaba.fastjson.JSONArray requestRows = com.alibaba.fastjson.JSONArray.parseArray(rows); com.alibaba.fastjson.JSONObject workOrderJson = com.alibaba.fastjson.JSONObject.parseObject(workOrder); JSONArray jsonarray=new JSONArray(); WorkOrder wOrder = new WorkOrder(); //wOrder.setWorkOrderId(workOrderJson.get("workOrderId").toString()); wOrder.setWorkOrderName(workOrderJson.get("workOrderName").toString()); wOrder.setExecuteTime(workOrderJson.get("executeTime").toString()); wOrder.setRequestRowFromZH(JSONArray .fromObject(workOrderJson.get("reqRowListFrom")) ); wOrder.setSource(wOrder.source_zh); wOrder.setState(wOrder.state_c); wOrder.setUserName("w06804"); //暂时写死 管理员账号 //处理bfid String uId = user.getId(); String uoId = this.userOrgService.getOrgIdByUser(uId); //String name = this.orgService.getNameById(uoId); String bfId = "BF-ZH"; String time = workOrderJson.get("executeTime").toString().substring(0,10).replace("-",""); String bfTime = "%" + time + "%"; List<WorkOrder> workOrderList = this.workOrderService.isExist(bfTime); if(workOrderList.isEmpty()){//按照日期查询 当天没有数据时num设置为1 wOrder.setNum(1); bfId += "-" + time + "-0001"; }else{//当天存在数据时 找到当天最大的num 并按照num的位数 进行拼接 拼接之后将num的值加1 int numMax = this.workOrderService.getMaxNum(bfTime); int num = numMax + 1; if(num < 10){ bfId += "-" + time + "-000" + num; }else if(num >= 10 && num < 100){ bfId += "-" + time + "-00" + num; }else if(num >= 100 && num < 1000){ bfId += "-" + time + "-0" + num; }else{ bfId += "-" + time + "-" + num; } wOrder.setNum(num); } wOrder.setWorkOrderId(bfId); wOrder.setBfId(""); wOrder.setType(WorkOrder.type_1); //来源为8088推送过来的 wOrder.setBossId(workOrderJson.get("workOrderId").toString()); workOrderService.insertWorkOrderByPush(wOrder); JSONArray json = JSONArray.fromObject(rows); if(json.size()>0){ for(int i=0;i<json.size();i++){ RequestRow requestRow = new RequestRow(); // 遍历 jsonarray 数组，把每一个对象转成 json 对象 JSONObject job = json.getJSONObject(i); // 得到 每个对象中的属性值 requestRow.setServiceType(job.get("serviceType").toString()); //requestRow.setWoId(job.get("woId").toString()); requestRow.setWoId(bfId); requestRow.setPortUse(job.get("portUse").toString()); requestRow.setSourseAddress(job.get("sourseAddress").toString()); requestRow.setDestServerName(job.get("destServerName").toString()); requestRow.setDestPort(job.get("destPort").toString()); requestRow.setDestAddress(job.get("destAddress").toString()); requestRow.setSourseServerName(job.get("sourseServerName").toString()); requestRow.setLinkType(job.get("linkType").toString()); requestRow.setId(job.get("id").toString()); requestRow.setGateWay(job.get("gateway").toString()); requestRow.setFlowType(job.get("flowType").toString()); requestRow.setTimeRange(job.get("timeRange").toString()); requestRowService.insertRequestRow(requestRow); } } policyGenerateService.policyMake(wOrder.getWorkOrderId(),wOrder.getReqRowListFrom(),user); response.getWriter().write("success"); response.getWriter().flush(); response.getWriter().close(); }