java項目框架（前端：vue+requirejs，後端：spring boot+mybatis）

項目流程

前臺：vue+requirejs
後臺：spring boot+mybatis

前端========》後端

一、對於前端界面：

js文件較多，通過requirejs技術異步加載其他 js,也就是說在引入requirejs.js後只需要引入一個自己的js文件（app.js），將其他js配置到這個js文件中(app.js)；
操作如下：
在 script 標籤中，加入 data-main 屬性。這樣會默認加載 app.js，而我們只需要在 app.js 中填寫配置信息即可

<script data-main="js/app.js" src="js/require.js"></script>

然後在app.js中編寫

 require(["js/lib/index.js"], function () {
        // do something after loading index.js
    })

在具體項目中有以下三個文件：

1. config.js文件，用來配置全局變量，如所有js路徑。使用requirejs.config技術

requirejs.config({
    baseUrl:'plugins',
    urlArgs: 'ver=201903151140',
    paths:{
        jquery:'jQuery/jquery-2.2.3.min',
        bootstrap:'bootstrap/js/bootstrap.min',
        Vue:'vue/vue.min',
       。。。。
    }

});

// var logtemURL = "http://192.168.0.182:9002";
var systemURL = "http://localhost:9001";

// shim:{deps:['jquery']}

2. common.js文件，封裝公共的變量方法，

var C = {};
//匹配國內電話號碼[phone] 或 021-87888822)
C.istell = function (str) {
    var result = str.match(/\d{3}-\d{8}|\d{4}-\d{7}/);
    if (result == null) return false;
    return true;
}
//匹配身份證(15位或18位)
C.isidcard = function (str) {
    var result = str.match(/\d{15}|\d{18}/);
    if (result == null) return false;
    return true;
}
//移動電話
C.checkMobile = function (str) {
    if (!(/^1[3|5|8][0-9]\d{4,8}$/.test(str))) {
        return false;
    }
    return true;
}

3. app.js文件，具體自己的js文件，用來編寫自己的js內容和引入其他外部js插件

equirejs(['config'],function(){
    requirejs(['jquery','bootstrap','Vue'],function($,bootstrap,Vue){
        var reLoad = false;
        var pageIndex = 0;
        })
})

二、數據傳輸：
1、前臺，通過Vue技術現實在界面上，
在具體的js文件裏（app.js）創建Vue對象，對象裏創建具體方法，然後通過ajax異步請求的方式請求後臺數據

equirejs(['config'],function(){
    requirejs(['jquery','bootstrap','Vue'],function($,bootstrap,Vue){
        var reLoad = false;
        var pageIndex = 0;
         var vm = new Vue({
            el: "#employeeWeb",
            data: {
                queryName:'',
                typeInfo:typeInfo
            },
            methods: {
                  queryForm: function (index,tabValue) {
                    newLoadingShow();
                    //初始化表格數據
                    var data = {};
                    pageIndex = index;
                    data.pageIndex = index;
                    data.pageSize = pageSize;
                    data.name=this.queryName.trim();
                    //tabValue 銀行人員:1,三方公司人員:2
                    if(tabValue == null || tabValue == "" || tabValue == undefined){
                        tabValue = 1;
                     }
                    if(typeInfo == 0){
                        if(tabValue == 1){
                            data.roleId=$("#selectBtnMainRoleInfo").val();
                            data.branchId=$("#selectBtnMainSubBranch").val();
                        }else{
                            data.threePartId=$("#selectBtnMainThreePart").val();
                        }
                        data.tabValue = tabValue;
                        sessionStorage.setItem("tabValue",tabValue);
                    }else if(typeInfo == 2 && roleInfo.admin == 1){
                        data.roleId=$("#selectBtnMainRoleInfo").val();
                    }
                    data.instId = instId;
                    data.type = typeInfo;
                    var url = systemURL+'/web/EmployeeInfoController/getEmployeeInfoList';
                    ajaxMethod.method(url,data,"post",'json',"application/json",function (result) {
                        newLoadingHide();
                        var total = result.total;
                        if(total==0){
                            if(tabValue == 1){
                                tableEmpty(9);
                            }else{
                                tableEmpty2(9);
                            }
                        }else{
                            if(tabValue == 1){
                                tableEmpty();
                            }else{
                                tableEmpty2();
                            }
                        }
                        if(tabValue == 1){
                            vm.employeeData = result.data;
                        }else{
                            vm.employeeData2 = result.data;
                        }
                        if(!reLoad) vm.createPage(total,pageIndex);
                    },function (res) {
                        newLoadingHide();
                        if(tabValue == 1){
                            tableEmpty(9);
                        }else{
                            tableEmpty2(9);
                        }
                        C.dialogInfo.error('獲取用戶列表失敗');
                    });
                },
        })
})

在common.js中封裝異步請求方式,

 xhrFields: {withCredentials: true},//設置跨區域請求數據

//ajax請求數據
var ajaxMethod = {
    method: function (murl, mdata, method, dataType, contentType, success, error) {
        //無參數請求
        if (mdata == null && dataType == null) {
            $.ajax({
                url: murl,
                type: method,
                xhrFields: {withCredentials: true},
                error: function (data) {
                    error ? error(data) : function () {
                    };
                },
                success: function (data) {
                    if(data.code==8006){
                        top.location="login.html";
                    }
                    success ? success(data) : function () {
                    };
                }
            });
        }

通過異步請求，進入後臺採用過濾器的方式接收前臺跨域請求（在WebConfig文件中），
方法還有很多：https://blog.csdn.net/qq_43486273/article/details/83272500

 public CorsFilter corsFilter()
    {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

後臺接收後進行數據處理，在控制器返回Response對象(自己封裝)

@RequestMapping(value = "getEmployeeInfoList", method = RequestMethod.POST, produces = {"application/json;charset=utf-8"})
    public Response getEmployeeInfoList(@RequestBody ParamMap paramMap, HttpServletResponse response, HttpServletRequest request) {
        paramMap.setPages(paramMap.getPageIndex(), paramMap.getPageSize());
        List<EmployeeInfo> list = new ArrayList<>();
        Integer total = 0;
        try {
            list = employeeInfoService.getEmployeeInfoList(paramMap);
            total = employeeInfoService.count(paramMap);
        } catch (ServiceException e) {
            log.error(e.getMessage());
        }
        return Response.newResponse().setResults(total, list);
    }