新公司新项目的认识总结

　　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();
    }