最近一直在研究用vue搭建前端平台，出现一个问题，随着前端页面的越来越多，webpack打包构建是会越来越慢，这个从每次代码修改后的热更新速度就可以看出来。
解决这个问题可以使用路由的懒加载，使用Vue的异步组件和webpack的 Code Splitting，很easy就实现。如：

1

const Foo = () => import('./Foo.vue')

vue的异步组件

1
2
3
4
5

Vue.component('async-component', function(resolve,reject){
    resolvo({
      template: '<div>async component example</div>'
    })
})

也可以写成这样：

1
2
3

Vue.component('async-component', 
    () = > import('./async-component')
)

局部注册时：

1
2
3
4
5
6

new Vue ({
    ...
    components: {
        'async-component': ()=>import('./async-component')
    }
})

webpack的code splitting

webpack的code splitting可以实现按需加载，减少首次加载时间。
作用：

1. 第三方类库单独打包
2. 按需加载，webpack支持定义分割点，通过require.ensure进行按需加载。
3. 通用模块单独打包。如一般我们会在 使用CommonChunkPlugin插件来合并公共文件，以免重复打包。

webpack遵循的原则是All in one ，就是从入口文件开始将所有的模块都打包到一个JS文件里面，包括引用的css、图片。打包时默认所有require都是在包文件中找，不同于requireJS可以直接require线上的URL

推荐阅读：

1. 路由懒加载

在node.js中，提供了一个path模块，专门用来处理路径的问题。

对window系统，目录分隔为’\‘, 对于UNIX系统，分隔符为’/‘
__dirname:在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。

node之path模块引用

//引用该模块
var path = require("path");

path.resolve

获取绝对路径，以应用程序为起点，根据参数字符串解析出一个绝对路径

var myPath = path.resolve('path1', 'path2', 'a/b\\c/');
console.log(myPath);//E:\workspace\NodeJS\path1\path2\a\b\c

path.join

该方法将多个参数值字符串结合成一个路径字符串

var joinPath = path.join(__dirname, 'a', 'b', 'c');
console.log(joinPath);      //   D:\nodePro\fileTest\a\b\c

path.extname

获取路径中的扩展名，如果没有’.’，则返回空

hql语句报错

from BreakCase b left join b.item t on b.item=t.id

org.hibernate.hql.ast.QuerySyntaxException: unexpected token: on near line 1,

原因是因为HQL不支持ON这个字符，如果要做关联关系就必须将On改为where

from BreakCase b left join b.item t where b.item=t.id

注意：此处breakCase与item是一对多的关系

ES6中关于Promise回调的小示例，以及resolve，reject的用法和catch的使用

back.removeTaskList = function(ids){
    return new Promise((resolve, reject) => {
        $.ajax({
            type:"post",
            url:"rest/task/removeTask",
            traditional : true,
            data:{
                ids:ids
            },
            success:function(data){
                resolve(data);
            },
            error:function(data){
                reject("数据正在使用中，删除失败!");
            }
        });
    })
}

back.removeTaskList(ids).then((data)=>{
    if(data){
        layer.msg("删除成功！");
    }else{
        layer.msg("删除失败!");
    }
}).catch(function(data){
    layer.msg(data);
});

最近项目中数据处理时存在多次异步请求，需要等所有请求完成时在进行其他操作，为了节约时间提高效率，实现多个异步请求同时进行，在所有异步请求都结束后进行其他操作。
为了实现这一目的，使用es6的新特性，Promise对象来实现。

function test1(){
    return new Promise((resole,reject)=>{
        ...
        resole(data);
    })
}

 function test1(){
    return new Promise((resole,reject)=>{
        ...
        resole(data);
    })
}

 function test3(){
    return new Promise((resole,reject)=>{
        ...
        resole(data);
    })
}

使用Promise.all实现以上三个函数同时执行完时回调，values中则包含三个函数的返回值。代码实现如下：

Promise.all(test1(),test2(),test3()).then(values=>{
    let test1Data = values[0];
    let test2Data = values[1];
    let test3Data = values[2];
    ...
})

坐标转换

将原始坐标转换成wkid:32652坐标，并且使用回调将数据返回

back.coordinateConvert = function(geometry,callback){
    var geometryService = new GeometryService(baseURL+"/Utilities/Geometry/GeometryServer");            
     var params = new ProjectParameters();
      params.geometries = [geometry];
      params.outSR = new SpatialReference(32652);
      geometryService.project(params).then(function(resGeometry){
          callback(resGeometry);
      })
}

数据查询

区域图层数据查询，并且使用回调将数据返回

back.getReginData = function(callback){
  var query = new Query();
  query.where = "1=1";
  query.returnGeometry = true;
  query.outFields = ["*"];
  var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/dt1124/MapServer/18");
  queryTask.execute(query,function(response){
      callback(response);
  })
}

relation

用于判断geometry之间的关系，如相交，包含，相切等

back.relation = function(geometries1,geometries2){
    var geometryService = new GeometryService(baseURL+"Utilities/Geometry/GeometryServer");
    var relationParams = new RelationParameters();
    relationParams.geometries1 = geometries1;
    relationParams.geometries2 = geometries2;
    relationParams.relation = RelationParameters.SPATIAL_REL_INTERSECTION;
    var result = geometryService.relation(relationParams);
    return result;
}

SPATIAL_REL_INTERSECTION:相交。可选择不同的关系
返回值result是个Deferred对象，调用时：

var relation = back.relation(resGeometry,geometryArray);
relation.then(function(data){
    console.dir(data);
})

结果如下图所示：

表示存在两个相交关系：geometries1[0]与geometries2[3]相交，geometries1[1]与geometries2[0]相交

eclipse配置

打开window->prefenerces->maven配置项

在Installations中点击add添加maven主目录

再在User Settings配置项中，在Global Settings和User Settings中添加maven的配置文件路径

setting.xml

最后，修改User Settings中添加的maven配置文件，

在setting.xml中mirrors节点下添加子节点，如下所示：

<mirror>
  <id>tomcat</id>
  <mirrorOf>*</mirrorOf>
  <name>Nexus aliyun</name>
  <url>http://192.168.1.194:8081/repository/maven-public/</url>
</mirror>

url路径为本地中央仓库地址

这样，eclipse中集成maven就完成啦，mark一下，以后就不会忘记啦！！！

由于web系统中有大量图片，为了避免tomcat文件越来越大，将图片文件夹移初tomcat目录下，放在本地磁盘中。
如果直接使用<img src="D:\image.jpg">引入，控制台会报无法找到图片的404错误。为解决这个问题，配置使用虚拟路径，让页面可以直接访问到服务器陌路以外的文件夹。

配置server.xml

在tomcat目录下，打开进入conf文件夹，编辑server.xml文件：添加如下配置：

<Context path="/image" docBase="D:/ftp" reloadable="true" debug="0" crossContext="true" />

其中path为虚拟路径， docBase是真实路径。
前台代码：

<div><img src="/image/{{ image.imagePath }}" style="width:100%;height:100%" /></div>

server web modules

配置完server.xml文件之后，启动tomcat会发现在浏览器中依然无法访问到这个图片，原因是还需要在eclipse中修改server的Web Modules
双击tomcat server进入配置管理页面，点击Modules选项卡进入Web Modules页面点击第二个选项把相应的虚拟路径和真实路径也添加进去，下图所示：

重启服务即可

重启服务即可看到

JS的对象排序的小技巧，使用sort()函数进行排序。

console.dir(process);
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
var processSort = process.sort(compare('id'));
console.dir(process);

控制台打印的输出如下图所示：

排序前

排序后

layer.prompt() 确认框

layer.prompt({
    title: '是否发送地址数据到'+row.jurisdiction+'?',
    value: row.address,
    formType: 2
}, function(text, index){
    layer.close(index);
    console.dir(text);
    $.ajax({
        url:'rest/app/sendItem',
        type:"post",
        data:{
            id:row.id
        },
        success:function(){
            layer.msg("发送成功："+text);    
            back.refresh();
        },
        error:function(){
            layer.msg("发送失败："+text);    
        }
    })

  });