后台采用.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. day 71 crm(8) 权限组件的设置,以及权限组件的应用

    ---恢复内容开始--- 前情提要: strak 组件是增删改查组件 , 生活中,需求权限组件,  不足: 1,前后端不分离,   2, 空url也会刷新界面,造成资源浪费   3,如果角色忘记设置权 ...

  2. odoo开发笔记 -- 日常开发注意点小节

    onchange depends区别 视图字段增加readonly属性

  3. (转)MVC 与三层架构

    原文:https://juejin.im/post/5929259b44d90400642194f3 MVC 与三层架构 一.简述 在软件开发中,MVC与三层架构这两个专业词汇经常耳闻,同时总有很多人 ...

  4. SpringMVC+FreeMarker+Mybatis 整合

    这个项目自己有时写写测试代码什么的, 代码比较简单,代码已放在 github : https://github.com/zhouyongtao/homeinns-web 目录结构: 贴一下Maven的 ...

  5. php数组方法

    查找.筛选与搜索数组元素是数组操作的一些常见功能.下面来介绍一下几个相关的函数. in_array()函数 in_array()函数在一个数组汇总搜索一个特定值,如果找到这个值返回true,否则返回f ...

  6. 全网最详细的用pip安装****模块报错：Could not find a version that satisfies the requirement ****(from version:) No matching distribution found for ****的解决办法（图文详解）

    不多说,直接上干货! 问题详情 这个问题,很普遍.如我这里想实现,Windows下Anaconda2 / Anaconda3里正确下载安装用来向微信好友发送消息的itchat库. 见,我撰写的 全网最 ...

  7. 【原】ATI显卡设置双显示器

    Ubuntu 12.04系统下加上增加一个显示器后,一直只能镜像显示,或只能用笔记本的屏幕显示,另一个屏幕无法使用了,上网搜索了一下解决办法,通过下面的方法可以解决问题: 编辑/etc/X11/xor ...

  8. Dubbo源码学习--优雅停机原理及在SpringBoot中遇到的问题

    Dubbo源码学习--优雅停机原理及在SpringBoot中遇到的问题 相关文章: Dubbo源码学习文章目录 前言 主要是前一阵子换了工作,第一个任务就是解决目前团队在 Dubbo 停机时产生的问题 ...

  9. 当语音识别搭配AI之后，我的语音助手更懂我的心了

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云AI中心发表于云+社区专栏 我今天演讲主要分四个部分,第一个是分享语音识别概述,然后是深度神经网络的基础:接下来就是深度学习在语 ...

  10. GCC 多文件编辑

    #include <stdio.h> int plus(int a, int b); int minus(int a, int b); int multiply(int a, int b) ...