angularjs + springboot 前后台交互数据(异步)

javaservice
package com.bonc.core.service;


import com.bonc.core.mapper.oracle.MigrationMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Isolation;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.HashMap;
import java.util.List;
import java.util.Map;


/**
* Created by ljw on 2016/11/10.
*/



/*
* @Transactional  管理事务
* value:类型:String 描述:可选的限定描述符,指定使用的事务管理器
* readOnly :读写或只读事务,默认读写
* **/
    /*
    * 此种方法不用mybatis的逆向功能,
    * **/
@Service
@Transactional(value = "oracleTransaction", readOnly = true)
public class MigrationService {


    @Autowired
    private MigrationMapper migrationMapper;

        // selectNewAppend    mapperxml 里面的标签id
    /*昨日详情-昨日新增*/
    public Object selectNewAppend(Map<String, Object> map1) {

        Map<String,Object>  map = new HashMap<String,Object>();
        /**lvdian**/
        List<Map<String,Object>> zrxznr = this.migrationMapper.selectNewAppend(map1);
        map.put("zrxznr",zrxznr);

        return map;
    }
    /*昨日详情-昨日到期*/
    public Object selectEnd(Map<String, Object> map1) {

        Map<String,Object>  map = new HashMap<String,Object>();
        /**lvdian**/
        List<Map<String,Object>> zrgqnr = this.migrationMapper.selectEnd(map1);
        map.put("zrdqnr",zrgqnr);

        return map;
    }

      /*流口统计-性别分布*/
    public Object selectSex(Map<String, Object> map1) {

        Map<String,Object>  map = new HashMap<String,Object>();
        /*xbfbnr 是在这里定义,从后台传到前台*/
        List<Map<String,Object>> man = this.migrationMapper.selectMan(map1);
        List<Map<String,Object>> woman = this.migrationMapper.selectWoman(map1);
        map.put("man",man);
        map.put("woman", woman);
        return map;
    }
                /*流口统计-年龄分布*/


    public Object selectAge(Map<String, Object> map1) {


        Map<String,Object>  map = new HashMap<String,Object>();
        List<Map<String,Object>> selectage = this.migrationMapper.selectAgefb(map1);
        map.put("selectage",selectage);
        return map;

    }

                    /*少数名族分析*/
    public Object selectSsmz(Map<String, Object> map1) {

        Map<String,Object>  map = new HashMap<String,Object>();
        List<Map<String,Object>> selectssmz = this.migrationMapper.selectSsmz(map1);
        System.out.println("-------------------------------------------------------------------------------------");
        System.out.println(selectssmz);
        map.put("selectssmz",selectssmz);
        return map;

    }
}



----------------------------------------------------------------------------------------------
javacontroller



package com.bonc.core.controllers;

import com.bonc.core.service.MigrationService;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;


/**
* Created by Administrator on 2016/11/10.
*/
/*流程:controller调用service,service调用mapper接口,mapper接口里面的方法是根据xml文件写的*/

/*RequestMapping可以在类中,也可以在方法体中默认“”内就是value值,我的理解就是路径在service中的URL值就是两个路径相加*/
    @RestController
    @RequestMapping("/Migration")
    public class MigrationController {

    @Autowired  //注入 MigrationService
    private MigrationService migrationService;

    /*昨日新增*/
    @RequestMapping(value = "/selectNewAppend", method = RequestMethod.POST)
    @ResponseBody
    public Object selectNewAppend(@RequestBody Map<String, Object> params) {

       // System.out.println(params);
        return migrationService.selectNewAppend(params);//return 的是一个map 将此map放入了responsebody中了,而不是路径

    }

    /*昨日到期*/
    @RequestMapping(value = "/selectEnd", method = RequestMethod.POST)
    @ResponseBody
    public Object selectEnd(@RequestBody Map<String, Object> params) {

      //  System.out.println(params);
        return migrationService.selectEnd(params);

    }
    /*性别统计*/
     @RequestMapping(value = "/selectSex",method = RequestMethod.POST)
     @ResponseBody
     public Object selectSex(@RequestBody  Map<String, Object> params){
        // System.out.print(params);
         return migrationService.selectSex(params) ;
     }


    /*年龄分布*/
    @RequestMapping(value = "/selectAge",method = RequestMethod.POST)
    @ResponseBody
    public Object selectAge(@RequestBody  Map<String, Object> params){
        //System.out.print(params);
        return migrationService.selectAge(params) ;
    }

    /*少数民族流口*/
    @RequestMapping(value = "/selectSsmz",method = RequestMethod.POST)
    @ResponseBody
    public Object selectSSMZ(@RequestBody  Map<String, Object> params){
        return migrationService.selectSsmz(params) ;
    }
}




----------------------------------------------------------------------------------------------

javamapper

package com.bonc.core.mapper.oracle;

import java.util.List;
import java.util.Map;
/*此处写接口和逆向不同,直接是一个interface 不用继承,接口里面的方法与mapper。xml里面的方法名要一致*/
public interface MigrationMapper {
   // 昨日新增
   public List<Map<String,Object>> selectNewAppend(Map<String, Object> map);
   //昨日到期
   public List<Map<String,Object>> selectEnd(Map<String, Object> map);



                 /*查询性别分布*/
   public List<Map<String,Object>> selectMan(Map<String, Object> map);
   public List<Map<String,Object>> selectWoman(Map<String, Object> map);


                    /*年龄分布*/

    public List<Map<String,Object>> selectAgefb(Map<String, Object> map);


             /*少数民族分析*/
      public List<Map<String,Object>> selectSsmz(Map<String, Object> map);
}

mapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">


<!--
   此种方法不用逆向工程<mapper namespace="com.bonc.core.mapper.oracle.MigrationMapper">直接在namespace路径写你的接口映射文件路径即可,头应该是固定的。
-->
<mapper namespace="com.bonc.core.mapper.oracle.MigrationMapper">
     <!--昨日新增-->
  <select id="selectNewAppend"   parameterType="map" resultType="map">
     select xm,gmsfhm,czr_xm,hfrq,xxrksj from  QB_ZY_GA_LDRK where to_char(xxrksj,'yyyymmdd') like #{time,jdbcType=VARCHAR}
  </select>
    <!--昨日到期-->
    <select id="selectEnd"   parameterType="map" resultType="map">
        select xm,gmsfhm,czr_xm,hfrq,xxrksj from  QB_ZY_GA_LDRK where to_char(xxrksj,'yyyymmdd') like #{time,jdbcType=VARCHAR}
    </select>
    <!--年龄分布-->
    <select id="selectAge"   parameterType="map" resultType="map">

    </select>
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------

service  js

'use strict';
app.factory("migrationService", function($state, $http, $q, httpUrl) {
    var access_token=  sessionStorage.getItem('access_token');

    return {
        /*postData:controller调用zrxz的时候传递了参数,id和time*/
        /*昨日新增*/
        zrxz : function(postData) {
            var deffered = $q.defer();
            $http({
                method: "POST",
                /*注意这里的url后面的参数是后台controller里面注入的路径和方法(两个requestmapping)*/
                url: httpUrl + "/Migration/selectNewAppend",
                data: postData,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8"
                }

            }).success(function (data) {
                /*data 响应消息*/
                /*  resolve(value):向promise对象异步执行体发送消息告诉他我已经成功完成任务,value即为发送的消息*/
                deffered.resolve(data);
            }).error(function (data) {
                deffered.reject(null);
                $state.go("login");
            });

            return deffered.promise;

        },

        /*postData:controller调用zrxz的时候传递了参数,id和time*/
        /*昨日到期*/
        zrdq : function(postData) {
            var deffered = $q.defer();
            $http({
                method: "POST",
                /*注意这里的url后面的参数是后台controller里面注入的路径和方法(两个requestmapping)*/
                url: httpUrl + "/Migration/selectEnd",
                data: postData,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8"
                }

            }).success(function (data) {
                /*data 响应消息*/
                /*  resolve(value):向promise对象异步执行体发送消息告诉他我已经成功完成任务,value即为发送的消息*/
                deffered.resolve(data);
            }).error(function (data) {
                deffered.reject(null);
                $state.go("login");
            });

            return deffered.promise;

        },
        /*性别统计*/
        xbfb:function(postData) {
            var deffered = $q.defer();
            $http({
                method: "POST",
                url: httpUrl+"/Migration/selectSex",
                data:postData,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8"
                }
            }).success(function (data) {
                deffered.resolve(data);
            }).error(function (data) {
                deffered.reject(null);
                $state.go("login");
            });
           return deffered.promise;
        },
     
     
             /*年龄分布*/
        nlfb:function(postData) {
            var deffered = $q.defer();
            $http({
                method: "POST",
                url: httpUrl+"/Migration/selectAge",
                data:postData,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8"
                }
            }).success(function (data) {
                deffered.resolve(data);
            }).error(function (data) {
                deffered.reject(null);
                $state.go("login");
            });
            return deffered.promise;
        },

       
        /*少数民族分析*/
        ssmz:function(postData) {
            var deffered = $q.defer();
            $http({
                method: "POST",
                url: httpUrl+"/Migration/selectSsmz",
                data:postData,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8"
                }
            }).success(function (data) {
                deffered.resolve(data);
            }).error(function (data) {
                deffered.reject(null);
                $state.go("login");
            });
            return deffered.promise;
        }
    };

});
----------------------------------------------------------------------------------------------
controller  js

app.controller('migrationCtrl',['$rootScope','$scope','$state','migrationService', function ($rootScope, $scope, $state, migrationService) {
    /**
     * Created by lpsh0 on 2016/10/15.
     */
        var datas = [];
        for(var i = 0;i < 50;i ++){
            var onegroupdata = [];
            for(var j = 0;j < 30;j ++){
                var onedata = Math.round( Math.random() * 30);
                onegroupdata.push(onedata);
            }
            datas.push(onegroupdata);
        }
        //console.log(datas);
//  昨日详情
        var date = new Date();
        var month = date.getMonth() + 1;
        var strDate = date.getDate() -1;
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
       //var yesterday = date.getFullYear() + "" + month + "" + strDate;
        var yesterday= '20160915';
        /**辖区value**/
        //$rootScope 根作用域
        var codeId = "00000";

        //.then()方法是干什么的  migrationService调用了zrxz方法后返回的是一个promise对象,他有.then方法来处理回调,then方法中的data指的是它代表了相应对象的成功或失败信息,还可以接受两个
        //可选的函数作为参数。或者可以使用success和error回调代替。

        migrationService.zrxz({time: yesterday, codeId: codeId}).then(function (data) {
           // console.log( data.zrxznr);
            //此处应加判断,如果响应的内容为空的话前台取值有可能报错。
            if(data.zrxznr.length>0){
                $scope.zrxznrAll=data.zrxznr;//将数据存入scope中了,前台可以直接取到了。
                console.log($scope.zrxznrAll);
            }

        }


        );
               /*昨日到期*/
        migrationService.zrdq({time: yesterday, codeId: codeId}).then(function (data) {

            //此处应加判断,如果响应的内容为空的话前台取值有可能报错。
            if(data.zrdqnr.length>0){
                $scope.zrdqnrAll=data.zrdqnr;//将数据存入scope中了,前台可以直接取到了。
             //   console.log($scope.zrdqnrAll);
            }

        }

        );
               /*性别分布*/
        migrationService.xbfb({time: yesterday, codeId: codeId}).then(function (data) {
                  //alert(data.man);

                //xbfbnr是后台的servie定义的
                if(data.man.length>0){
                    $scope.manAll=data.man[0].MAN;//将数据存入scope中了,前台可以直接取到了。
                   // console.log($scope.manAll);

                }
            if(data.woman.length>0){
                $scope.womanAll=data.woman[0].WOMAN;
               // console.log($scope.womanAll);
            }

            }
        );
           
                  /*年龄分布*/
    var oneAll,twoAll,threeAll,fourAll,fiveAll,sixAll,sevenAll,eightAll,nighAll,tenAll;
    var list51=new Array([9])
    //var a = new Array([5]);
        migrationService.nlfb({time: yesterday, codeId: codeId}).then(function (data) {

            /*{"selectage":[{"TEN":0,"SEVEN":0,"NIGH":0,"ONE":0,"TWO":0,"THREE":2,"FOUR":3,"SIX":1,"FIVE":4,"EIGHT":0}]}*/
                //xbfbnr是后台的servie定义的
                if(data.selectage.length>0){
                    oneAll=data.selectage[0].ONE;//将数据存入scope中了,前台可以直接取到了。

                    twoAll=data.selectage[0].TWO;
                    threeAll=data.selectage[0].THREE;
                    fourAll=data.selectage[0].FOUR;
                    fiveAll=data.selectage[0].FIVE;
                    sixAll=data.selectage[0].SIX;
                    sevenAll=data.selectage[0].SEVEN;
                    eightAll=data.selectage[0].EIGHT;
                    nighAll=data.selectage[0].NIGH;
                    tenAll=data.selectage[0].TEN;
                }

            list51=[oneAll,twoAll,threeAll,fourAll,fiveAll,sixAll,sevenAll,eightAll,nighAll,tenAll];
            console.log("data"+list51)

            }  

        );



                    /*少数民族分布*/
        migrationService.ssmz({time: yesterday, codeId: codeId}).then(function (data) {
               // alert(data.selectssmz);
            console.log(data.selectssmz);
                if(data.selectssmz.length>0){
                    $scope.ssmzAll=data.selectssmz;
                }

            }
        );

























猜你喜欢

转载自190102110.iteye.com/blog/2337816
今日推荐