一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件

一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件
README:本文讲解使用requirejs模块化加载前端插件。
在前面,我们已经搭好了基于SpringMvc、MyBatis、Spring的后端框架。我们在此基础上添加前端模块。

首先我们定好目录结构:

一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第1张图片
webapp下只有新建common和pages是因为后面部署tomcat,如果文件过多,显得不清真。
在前面的spring-mvc配置中,我们也只开放了这两个文件夹。

列举常用的前端插件以及配置requirejs:

一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第2张图片

requirejs目录介绍:

一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第3张图片
后面配置其他插件模块的名称和地址等,主要在config.js中。配置解释如下:
一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第4张图片一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第5张图片
若要配置未采用AMD编写规范的需要使用exports属性。例如:
shim: {

      'underscore':{
        exports: '_'
      },
      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }
    }

视图模块:
一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第6张图片
公共jsp:
一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第7张图片
测试页面,jsp:
一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第8张图片
只需要加入公共引入的jsp和本身的js文件。
js文件:
一步一步带你搭建后台管理系统之使用requirejs整合常用前端插件_第9张图片
接下去就是自己的业务代码和组件的使用了。
项目地址:http://pan.baidu.com/s/1hrOCYpQ

你可能感兴趣的:(JAVA,WEB)