启动平台
开发示例
开发规范、前端开发规范、后端开发规范
1. 前端表单规范说明
前端框架方面: javamis平台前端框架采用 BootStrap框架为基础，javascript 库采用 jQuery 作为核心脚本框架。JavaMis平台在 Beetl原有强大的功能基础上， 做了一个强化，比如：
- 封装常用表单控件form标签，实现更加便捷的输入框、下拉框、搜索框等，实现自动与数据绑定
- 封装常用表单组件，如：多层级树结构选择组件、，可按部门id显示子部门树组件等等
- 封装常用javascript公共库，如：动态加载字典、动态获取input输入值、对话框、，提示框等等
- 封装常用bootstrap-table表格，前后端分页、表格排序、采用表单布局、栅格布局等等
- 封装常用bootstrap-table-ztree树表格，前后端分页、表格排序等等
- 封装常用layer层，实现表单使用率最大化，同时绑定导航框使得操作更渐变
- 封装常用ajax异常请求，实现开发速度更快，让开发者更专注于自己业务本身，无需再为请求后台而写重复代码
View视图方面：javamis平台取消了老式JSP视图，而是采用当前静态html视图，同时前端视图采用当前非常流行简单的 Beetl 模板引擎，它采用 JS 语法，它功能强大，性能良好，秒杀当前流行的模板引擎，而且还易学易用，这样做好处是使页面加载更快，页面布局更简单；同时为了降低耦合度，平台将所有视图文件分布到工程模块的资源目录下（如：/src/main/resources/views/）
1.1 html文件命名规范
为了提高编码效率和命名规范，平台前端html采用以下规范：- 业务 xx.html文件写在src/main/resources/views/business/目录下
- 根据业务需求在src/main/resources/views/business/目下创建相应的子文件夹，如：src/main/resources/views/business/product
- 列表页面名称：list.html 新增表单页面：form.html 编辑表单页面edit.html
举例：下面是以javamis-core核心模块创建html文件为例
(图：html静态文件命名规范)
温馨提示：上述是以平台javamis-core核心模块为例展示html命名规范，您书写代码时请在javamis-web模块src/main/resources/views/business/目录下创建相应的业务子目录和定义html文件！
2. 列表页面规范
2.1 list.html，此次我们拿 "新增用户" 表单为例(以下是 '新增用户'表单的部分代码)：
<% layout("/common.html"){ %> <div class=" page-content clearfix"> <div id="fold-expand" class="fold-expand"> <div class="h_products_list clearfix" id="products_list"> <!--机构管理树展示-开始--> <div id="scrollsidebar" class="left_Treeview"> <div class="show_btn" id="rightArrow"><span></span></div> <div class="widget-box side_content" > <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div> <div class="side_list"> <div class="widget-header header-color-green2"><h4 class="lighter smaller">组织机构</h4></div> <div class="widget-body"> <div class="widget-main padding-8"> <div id="deptTree" class="ztree"></div></div> </div> </div> </div> </div> <!--机构管理树展示-结束--> <!-- 用户列表管理-开始 --> <div> <div style="padding:3px 0px 8px;"></div> <div class="row table-body" id="testIframe"> <!-- 查询条件框-开始 --> <div class="table-search"> <div class="form-group search-condition"> <label class="control-label search-label">账号：</label> <div class="control-inline search-inline"> <#form:list id="userCode"/> </div> </div> <div class="form-group search-condition"> <label class="control-label search-label">姓名：</label> <div class="control-inline search-inline"> <#form:list id="userName"/> </div> </div> <div class="form-group search-condition"> <label class="control-label search-label">邮箱：</label> <div class="control-inline search-inline"> <#form:list id="email" iconClass="btn-list-button" icon="fa-envelope"/> </div> </div> <div class="form-group search-condition"> <label class="control-label search-label">性别：</label> <div class="control-inline search-inline"> <select class="input-dict-sm" id="sex" name="sex" dictType="user_sex" defaultValue="0"></select> </div> </div> <div class="form-group search-condition"> <label class="control-label search-label">电话：</label> <div class="control-inline search-inline"> <#form:list id="phone" iconClass="btn-list-button" icon="fa-phone"/> </div> </div> <div class="form-group search-button"> <#form:button class="btn btn-default btn-sm" onclick="obj.search()" name="查询"/> <% if(shiro.hasPermission("user:add")){ %> <#form:button class="btn btn-add btn-sm button-item" icon="fa-plus" iconLocation="icon-before" onclick="addPage('/user/form','新增用户')" name="新增"/> <% } %> <#form:button class="btn btn-add btn-sm button-item refreshButton" icon="fa-refresh" iconLocation="icon-before" onclick="refreshPage()" name="刷新" /> </div> </div> <!-- 查询条件框-结束 --> <!-- 表格table-开始--> <div id="table-list" style="margin-left:9px;"> <table id="tableList" style = "table-layout:fixed;width:100%;"></table> </div> <!-- 表格table-结束--> </div> </div> <!-- 用户列表管理-结束 --> </div> </div> </div> <script type="text/javascript" src="${ctxPath}/js/system/user/user.js"></script> <% } %>
2.2 搜索框 ：想要增加搜索框非常简单，您只需要将下面内容复制，然后替换名称(姓名：)和字段属性(userName)，即完成一个标准的搜索框，简单吧，让我们下面举两个例子吧~
姓名搜索框： 名称：“姓名”，字段属性：userName
<div class="form-group search-condition"> <label class="control-label search-label">姓名：</label> <div class="control-inline search-inline"> <#form:list id="userName"/> </div> </div>
(图：姓名搜索框)
是不是很简单呢，对的，就是这么简单~
邮箱搜索框：名称：“邮箱”; 字段属性：email; iconClass="btn-list-button" icon="fa-envelope"
<div class="form-group search-condition"> <label class="control-label search-label">邮箱：</label> <div class="control-inline search-inline"> <#form:list id="email" iconClass="btn-list-button" icon="fa-envelope" /> </div> </div>
(图：邮箱搜索框)
上面是实现一个带图标的搜索框，其实也非常简单，就是在<#form:list />内多增加两个元素就可以了，如：iconClass="btn-list-button" icon="fa-envelope"，现在说明一下这两个元素的用法：
- iconClass="btn-list-button" ：是固定写法，也就是告诉javamsi平台需要在该搜索框上增加图标的意思
- icon="fa-envelope" ：fa是fontawesome的缩写，envelope代表邮箱的图标，图标来自FontAwesome官网图标库
★温馨提示：所有list.html页面除了具体字段属性不同，布局和内容都是一样的!
3. 新增页面规范
3.1 form.html，此次我们拿 "新增部门" 表单为例(以下是 '新增部门'表单的部分代码)：
<%layout("/common.html"){%> <div class="box-header with-border"> <div class="box-title"> <i class="fa fa-user-o" style="font-size:12px;color:#6495ED;padding:0px 7px 0px 5px;"></i> <i style="font-size:16px">新增部门</i> <li class="long-gray-underline"></li> </div> <div class="box-title"> <i class="font-italic" style="font-size:15px;color:#1e5edb;padding:0px 7px 0px 26px;">基本信息</i> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> </div> <li class="short-gray-underline"></li> </div> </div> <div class="form-content"> <div class="form-horizontal" id="form"> <input type="hidden" id="id" value=""> <input type="hidden" id="deptId" value=""> <input type="hidden" id="parentId"> <div class="row"> <div class="col-xs-6"> <div class="input-group"> <label class="control-label col-sm-4" title="">* 上级部门：<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <#form:input type="text" id="parentName" class="required" iconClass="btn-input-search" icon="fa-search" value="" onclick="addParentOptionalLayer('/department/tree/','0','部门选择树')"/><!-- 当前获取的是全部部门，如若获取北京公司将0换成3，如若获取河北公司id是4;天津公司id是20;广东公司id是2 --> </div> </div> </div> <div class="col-xs-6"> <div class="input-group"> <label class="control-label col-sm-4" title="">* 部门编码：<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <#form:input id="code" class="required"/> </div> </div> </div> </div> <div class="row"> <div class="col-xs-6"> <div class="input-group"> <label class="control-label col-sm-4" title="">* 部门简称：<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <#form:input id="briefName" class="required"/> </div> </div> </div> <div class="col-xs-6"> <div class="input-group"> <label class="control-label col-sm-4" title="">* 部门全称：<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <#form:input id="fullName" class="required"/> </div> </div> </div> </div> <div class="box-title"> <i class="font-italic" style="font-size:15px;color:#1e5edb;padding:0px 7px 0px 26px;">详细信息</i> <li class="short-gray-underline"></li> </div> <div class="row"> <div class="col-xs-6"> <div class="input-group"> <label class="control-label col-sm-4" title=""><span class="required "></span> 电子邮箱：<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <#form:input id="email" iconClass="btn-input-button" icon="fa-envelope"/> </div> </div> </div> <div class="col-xs-6"> <div class="input-group"> <label class="control-label col-sm-4" title="">办公电话：<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <#form:input id="phone" iconClass="btn-input-button" icon="fa-phone"/> </div> </div> </div> </div> <div class="row"> <div class="button"> <#form:button class="btn btn-info" name="提交" id="ensure" icon="fa-check" onclick="submitPage('/department/save')"/> <#form:button class="btn btn-default" name="关闭" id="cancel" icon="fa-mail-reply-all" onclick="closePage()"/> </div> </div> </div> </div> <script type="text/javascript" src="${ctxPath}/js/system/department/department.js"></script> <%}%>
3.2 输入框 ：想要在表单页面增加输入框非常简单，您只需要将下面内容复制，然后替换名称(部门简称：)和字段属性(briefName)，即完成一个标准的输入框，简单吧，让我们下面举两个例子吧~
部门简称输入框： 名称：“部门简称”，字段属性：briefName
<div class="col-xs-6"> <div class="input-group"> <label class="control-label col-sm-4" title="">* 部门简称：<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <#form:input id="briefName" class="required"/> </div> </div> </div>
(图：部门简称框)
是不是很简单呢，对的，就是这么简单~
办公电话输入框：名称：“办公电话”; 字段属性：phone; iconClass="btn-input-button" icon="fa-phone"
<div class="col-xs-6"> <div class="input-group"> <label class="control-label col-sm-4" title="">办公电话：<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <#form:input id="phone" iconClass="btn-input-button" icon="fa-phone"/> </div> </div>
(图：邮箱搜索框)
上面是实现一个带图标的输入框，其实也非常简单，就是在<#form:input />内多增加两个元素就可以了，如：iconClass="btn-input-button" icon="fa-phone"，现在说明一下这两个元素的用法：
- iconClass="btn-input-button" ：是固定写法，也就是告诉javamsi平台需要在输入框上增加图标的意思
- icon="fa-phone" ：fa是fontawesome的缩写，phone代表电话的图标，图标来自FontAwesome官网图标库
★温馨提示：所有list.html页面除了具体字段属性不同，布局和内容都是一样的!