后台采用.net MVC框架,前端采用requirejs。整个系统页面布局基本不变,每个页面只改变Main_Content部分。

模板页cshtml:

<!DOCTYPE html>
<!--公用的模版页面_layout.cshtml-->
<head>
<meta charset="utf-8">
<title>@ViewBag.Title</title>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon">
<!--引入公共样式,需要在BundleConfig.cs 文件里定义样式集-->
@Styles.Render("~/css/common")
<!--子页面中@section cssImport部分(<link>标签内容)将要显示的位置-->
@RenderSection("cssImport", required: false)
<!-- 同步引入requirejs -->
<script src="~/js/require.js"> </script>
<script src="~/js/json2.js"></script>
</head>
<body>
<!--—子页面内容中除去@section name部分后将要显示的区域-->
<div class="main_content">@RenderBody()</div>
<!-- 公用部分js,单独封装成一个app模块,在子页面的js依赖中引入 -->
<script type="text/javascript">
//...
</script>
<!--子页面中@section jsImport部分(<script>标签内容)将要显示的位置,尽量在文档结尾处-->
@RenderSection("jsImport", required: false)
</body>
</html>

子页面cshtml:

@{
ViewBag.Title = "子页面标题";
}
<!--当前子页面用到的样式,会并到模版页面@RenderSection('cssImport')注解处-->
@section CssImport{
<link href="~/css/vender/jquery.jscrollpane.css" rel="stylesheet" />
<link href="~/css/main/subPage.css" rel="stylesheet" />
} <!-- 子页面html标签部分 -->
<form name="CONDITION_FORM" id="js-form" action="" method="post" style="display:none">
<input type="text" name="queryStr" id="queryStr" />
</form>
<div class="selectModel">...</div> <!-- 当前子页面js逻辑,会并到模版页面@RenderSection('jsImport')注解处 -->
@section jsImport{
<script>
require('~/js/config',function(){
require(['currentPage'], function (module) {
module.init();
});
})
</script>
}

子页面js:

//子页面业务模块,app为公用部分模块
define(['app','components/jtable/jtable'], function (app, jtable) {
'use strict';
var module = {
options: {},
init: function (options) {
// 合并参数
var self = this;
_.map(options, function (item, key) { self.options[key] = item; });
//业务逻辑
this.bindEvents();
},
bindEvents: function () {
//...
}
};
return module;
});

pms前端结构的更多相关文章

  1. 使用float设置经典的网站前端结构(深入探讨)

    .要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...

  2. 使用position设置经典的网站前端结构

    能脱离文档流的设置: float:left/right position:absolute; 绝对定位 position:fixed; 固定定位 //搞清楚position的属性值的意思就容易明白 使 ...

  3. 使用float设置经典的网站前端结构

    float浮动是能使得标签脱离文档流,此处脱离文档流,是指此便签后面的,没有脱离文档流的标签将此标签当作透明,按正常来布局. float脱离文档流,是受到父级范围限制的,在父级范围内脱离文档流,脱离文 ...

  4. 用“MEAN”技术栈开发web应用(一)AngularJs前端架构

    前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技 ...

  5. 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  6. 前端CSS兼容的一些思路

    半夜睡不着觉,起来写第一博. 近段时间,公司要给一个网站产品增加一个换色功能,安排我负责该事项. 之前参与过一些定制项目,是基于该产品的二次开发,说实话里面的前端结构很混乱.所以第一步就是将html前 ...

  7. 基于React的PC网站前端架构分析

    代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象 有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解 ...

  8. 自学前端开发,现在手握大厂offer,我的故事还在继续

    简要背景 我是一个非科班出身的程序员,而且是连续跨专业者,用一句话总结就是:16 届本科学完物流,保送研究生转交通,自学前端开发的休学创业者. 17 年休学创业,正式开始学习前端,离开创业公司后,我又 ...

  9. AnguarJS测试的实施步骤整理

    最近开发用到了AngularJS,据说目前大型系统都用这个作为前端.最近参与的一个项目,web部分重度使用了AngularJS,整个前端架构有组织有纪律.所谓的有纪律就是说,有比较完善的测试用例,用上 ...

随机推荐

  1. 不一样的日期、时间转换(moment.js)

    无意中遇到了一种很奇怪的日期格式,从接口中返回的日期是这样的,如 2018-02-06T11:59:22+08:00 .然而这却不是我们想要的,我们要的是这种,YYYY-MM-DD HH:mm:ss. ...

  2. OS之内存管理 --- 虚拟内存管理(二)

    关于虚拟内存管理之前的请看:OS之内存管理 - 虚拟内存管理(一) 帧分配 每个进程对的最小帧数是由操作系统的体系结构决定的,但是最大帧数是由可用物理内存的数量决定的.所以在这之间,对于进程的帧的分配 ...

  3. POJ 2593

    #include <iostream> #include <stdio.h> using namespace std; int cmp ( const void *a , co ...

  4. spring 资源访问

    spring 资源访问 Resource resource=null; //访问网络资源 resource=new UrlResource("file:bool.xml"); // ...

  5. Android在代码中获取应用签名

    平时都是用AS敲命令获取签名信息...还没有在代码中获取过签名~ 也算是老编程了,没做过这个稍微有点尴尬...本着有好轮子就用的原则,网上找了几篇博客,这块内容已经很完善了,我也没什么可以优化的... ...

  6. 接口测试学习笔记(Jmeter)

    常见接口协议: 1.http 超文本传输协议 2.https 安全超文本传输协议 3.ftp 文件传输协议 4.tcp 网络控制协议 5.IP 互联网协议 6.udp 用户数据协议 -- HTTP协议 ...

  7. T-SQL触发器,限制一次只能删除一条数据

    /****** Object: Trigger [dbo].[trg_del] Script Date: 01/01/2016 12:58:28 ******/ SET ANSI_NULLS ON G ...

  8. 揭开Future的神秘面纱——任务执行

    前言 此文承接之前的博文 解开Future的神秘面纱之取消任务 补充一些任务执行的一些细节,并从全局介绍程序的运行情况. 系列目录 揭开Future的神秘面纱——任务取消 揭开Future的神秘面纱— ...

  9. Go基础知识

    编程基础 Go程序是通过package来组织的(与Python类似) 只有package名称为main的包可以包含main函数 一个可执行程序有且仅有一个main包 一般结构basic_structu ...

  10. 第一章 Java Web工作原理

    一:在本章我们将学到如下的内容 >HTTP协议原理 >服务器端Web编程原理 >Servlet与Web容器 >Java Web应用程序的组成 >Tomcat介绍 一:1. ...