文档章节

前台页面开发规范

Gtwo
 Gtwo
发布于 2015/11/16 17:11
字数 864
阅读 27
收藏 0

web前台规范和使用说明.doc

下载地址:http://pan.baidu.com/s/1mgzYdxY

java公用类库(nl-common) 

下载地址:http://pan.baidu.com/s/1sjlAKIp

前台页面目录结构

---
|---- controls/ 第三方插件库目录
|---- css/ css样目录
|---- error/ 请求出错处理的页面
|---- images/ 存放图片目录
|---- index.html 
|---- index.jsp 首页
|---- js/ 存放脚本目录(包话自己写的插件)
|---- left.html 左边的树型导航页面
|---- login.jsp 登录页面
|---- not.jsp
|---- not-login.jsp 没有登录处理的页面
|---- not-purview.jsp 没有权限处理的页面
|---- validate-code.jsp 生成验证码页面
|---- WEB-INF
|---- WEB-INF/common/ 存放公用部分页面
|---- WEB-INF/content/ 存放jsp页面目录
|---- WEB-INF/tag/ 存放定义权标签
|---- WEB-INF/urlrewrite.xml 地址重定向的配置文件
|---- WEB-INF/web.xml web项目配置文件

在首页或独立页面的引入css和js 的规范

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 每个页必须是UTF-8编码 -->
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <meta http-equiv="x-ua-compatible" content="ie=8" /><!-- 高于IE8版本兼容IE8版本,解决布局问题 -->
 <title>标准web例子——首页</title>
 <!-- 引入样式 --> <!-- 为了提高性能把引入样式放在页面的前面 -->
 <link rel="stylesheet" type="text/css" href="/baseweb-webapp/controls/operamasks-ui/operamasks-ui-2.0/css/default/om-default.css" media="all"/>
 <link rel="stylesheet" type="text/css" href="/baseweb-webapp/controls/jquery-loadmask/jquery.loadmask.css" media="all"/>
 <link rel="stylesheet" type="text/css" href="/baseweb-webapp/css/all.css" media="all"/>
</head>
<body>
 <!-- 页面的内容 -->
</body>
<!-- 引入脚本 --> <!-- 为了提高性能把引入样式放在页面的后 -->
<script type="text/javascript" src="/baseweb-webapp/controls/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/baseweb-webapp/controls/jquery-loadmask/jquery.loadmask.min.js"></script>
<script type="text/javascript" src="/baseweb-webapp/js/common.js"></script>
<script type="text/javascript" src="/baseweb-webapp/controls/operamasks-ui/operamasks-ui-2.0/js/operamasks-ui.min.js"></script>
<script type="text/javascript" src="/baseweb-webapp/js/my-controls/om-selectdialog.js"></script>
<script type="text/javascript" src="/baseweb-webapp/js/my-controls/upload.js"></script>
<script type="text/javascript" src="/baseweb-webapp/js/operamasks-ui-extend.js"></script>
<script type="text/javascript" src="/baseweb-webapp/controls/jquery-validation/validate.addmethod.js"></script>
<script type="text/javascript" src="/baseweb-webapp/controls/jquery-validation/messages_cn.js"></script>
<script type="text/javascript">
/** 页面写的脚本 */
</script>
</html>

项目的首页index.jsp代码:

<%@ page language="java" errorPage="/WEB-INF/common/exception.jsp" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <meta http-equiv="x-ua-compatible" content="ie=8" />    
 <title>标准web例子——首页</title>
 <script type="text/javascript">
 if (window.top!=window.self){<%-- 防止用iframe攻击项目  --%>
  window.top.location.href=window.self.location.href;
 }
 </script>
 <%@ include file="/WEB-INF/common/resources/css/operamasks-ui.jsp"%>
 <%@ include file="/WEB-INF/common/resources/css/jquery-loadmask.jsp"%>
 <link rel="stylesheet" type="text/css" href="${basePath }/css/all.css" media="all"/>
</head>
<body>
    <div id="north-panel">
     <div class="logo"></div>
  <div class="topRight">
   <span>当前用户:<a><%=com.nenglong.baseweb.webapp.util.UserUtil.getLoginUserAccount(request)%></a></span>
   |<span><a href="javascript:;" onclick="updatePassword()">修改密码</a></span>
   |<span><a href="javascript:;" onclick="logout()">退出</a></span>
  </div>
    </div>
    <div id="east-panel">
     <div id="accordionId"></div>
    </div>
    <div id="center-panel"></div>
</body>
<%@ include file="/WEB-INF/common/resources/js/jquery.jsp"%>
<%@ include file="/WEB-INF/common/resources/js/jquery-loadmask.jsp"%>
<script type="text/javascript" src="${basePath }/js/common.js"></script>
<%@ include file="/WEB-INF/common/resources/js/operamasks-ui.jsp"%>
<script type="text/javascript" src="${basePath }/js/operamasks-ui-extend.js"></script>
<%@ include file="/WEB-INF/common/resources/js/jquery-validation-addmethod-messages.jsp"%>
<script type="text/javascript">
 /*修改密码*/
 function updatePassword(){
  if($("#password-dialog").size()==0)
   $('<div id="password-dialog" class="dialogUI"></div>').appendTo("body");
     
  nengLongOpenDialog(
   "#password-dialog",
   {url:"${basePath }/user/account!passwordUI.do"},
   {title:"修改密码", width:500}
  );
 }
 
 /*退出*/
 function logout(){
  nengLongConfirm({
   title:"确认退出系统", content:"确定退出系统吗?",
   onClose:function(value){
    if(value){
     top.location.href="${basePath }/privilege/login!logout.do";
    }
   }
  });
 }
 /*加载Url的结果到主面板里*/
 function mainLoadUrl(url, title){
  var panel="#center-panel", opt;
  if(typeof url=="string"){
   url=url.replace(/^[/]+/,"");
   opt={url:url};
  }else if(typeof url=="object"){
   opt=url
  }
  nengLongLoad(panel, opt);
  $(panel).omPanel("setTitle", title);
 }
 
 $(function () {
  $('body').omBorderLayout({
   spacing:2, fit:true,
   panels:[
    {id:"north-panel", region:"north", header:false},
     {id:"center-panel", region:"center", title:"桌面"},
     {id:"east-panel", collapsible:true, title:"菜单导航", region:"west", width:200, resizable:true}
   ]
        });
  $.ajax({
   type:"GET", dataType:"html", url:"${basePath }/left.html",
   success:function(data){
    var myAccordion=$("#accordionId");
    try{
     myAccordion.html(data);
    }catch(ex){
     myAccordion.html("");
    }
   }
  });
 });
</script>
</html>


© 著作权归作者所有

共有 人打赏支持
Gtwo
粉丝 1
博文 42
码字总数 35045
作品 0
中山
程序员
私信 提问
PHP代码生成器--PHPGEN

一、PHPGEN是什么? 简单来说,PHPGEN是一个PHP代码生成器。 详细来讲,PHPGEN是一款在线的PHP代码生成器,它可以帮助您在几分钟之内完成一个功能完善的数据库后台管理系统和前台展示。 二、...

匿名
2009/04/12
14.7K
1
thinkcmf/ThinkCMF

ThinkCMF 5.0.170927 就爱吃版 当开学版遇上国庆和中秋,也只能叫就爱吃版了! 祝我们的祖国节日快乐,也祝大家中秋快乐! 版本特别记事:https://www.thinkcmf.com/topic/1578.html 系列讲座...

thinkcmf
2013/12/20
0
0
十分钟让你快速入门django

django概述 django是用python语言写的一个web框架。web框架的作用有以下几点: 减少重复的繁琐的工作,web开发中有很多重复的没有技术含量的工作,web工作可以将这些工作封装好,或者自动化实...

钟森龙
2017/12/24
0
0
Spring Boot统一异常处理最佳实践

摘要: SpringBoot异常处理。 原文:Spring MVC/Boot 统一异常处理最佳实践 作者:赵俊 Fundebug经授权转载,版权归原作者所有。 前言 在 开发中, 我们经常会需要处理各种异常, 这是一件棘手...

Fundebug
01/16
0
0
从零开始学 Web 之 HTML(一)认识前端

大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩...

fengdaoting
2018/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android Messenger进程间客户端向服务端传递数据

Messenger:客户端向服务端传递数据 1.Service: public class MessengerService extends Service { private Messenger messenger = new Messenger(new Handler() { public void handleMess......

Coding缘
5分钟前
0
0
Pod在多可用区worker节点上的高可用部署

一、 需求分析 当前kubernetes集群中的worker节点可以支持添加多可用区中的ECS,这种部署方式的目的是可以让一个应用的多个pod(至少两个)能够分布在不同的可用区,起码不能分布在同一个可用...

zhaowei121
23分钟前
1
0
oracle XTTS介绍

一、什么是XTTS 首先什么是XTTS。XTTS其实是从TTS来的,TTS其实也是传输数据的一种手段,传输数据的时候可能用过EXP的方式,再往后可能用数据泵导入导出一些数据,或者去做备份然后再恢复。其...

突突突酱
23分钟前
0
0
[缺陷分析]半同步下多从库复制异常

引 言 本文是由爱可生研发团队出品的「图解MySQL」系列文章,不定期更新,但篇篇精品。 爱可生开源社区持续运营维护的小目标: 每周至少推送一篇高质量技术文章 每月研发团队发布开源组件新版...

爱可生
24分钟前
0
0
二维数组序号重置

public static function unique_arr($array2D,$stkeep=false,$ndformat=true){ // 判断是否保留一级数组键 (一级数组键可以为非数字) if($stkeep) $stArr = array_keys($array2D); // 判断是......

dragon_tech
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部