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 = {};
//匹配国内电话号码(0511-4405222 或 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);
    }