系列目录

前言

为了符合后面更新后的重构系统，本文于2016-10-31日修正一些截图，文字

我们有了一系列的解决方案，我们将动手搭建新系统吧。

后台系统没有多大的UI视觉，这次我们采用的是标准的左右分栏，左边是系统菜单，右边是一个以tabs页组成的页面集合，每一个tab都可以单独刷新和关闭

开发工具

Visual Studio 2012（以上）

开始搭建

打开我们熟悉的VS创建一个空解决方案。我起了个名字叫Apps，类库命名空间将与Apps开头

如Apps.BLL,Apps.Web等命名

1. 新建MVC5.0的Web站点

2.前端框架EasyUI

EasyUI下载：有多新用多新 http://www.jeasyui.com/download/list.php

关于素材的存放，我列了下面

1.把jquery.easyui.min.js放到scripts目录下
2.主题themes放到到content下这里我只保留灰色和蓝色主题，其他主题我的审美有限度，大家可以到easyui官方下载新的主题
3.把Images文件夹移动到content下
4.Filters文件删掉
5.把素材放到content目录下，我已经为大家准备好这个项目所要用到的图片素材，不够我们再添加
6.把controllers的AccountController.cs,HomeController.cs删除
7.把View视图自带的cshtml删掉。

3.新建Home控制器

还是新建一个“空”的控制器，添加index视图

Index代码

<!DOCTYPE html>

<html>
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width" />
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/blue/css")
@Scripts.Render("~/bundles/home")
</head>
<body class="easyui-layout">
<div id="OverTimeLogin" class="easyui-dialog" data-options="closed:true,modal:true">
<iframe width="726px" scrolling="no" height="497px" frameborder="0" id="iOverTimeLogin"></iframe>
</div>
<div data-options="region:'north',border:false,split:true" style="height: 60px;">
<div class="define-head">
<div class="define-logo">
<div id="LoginTopLine">System Manage</div>
<div id="LoginBotoomLine">MVC4+EF5.0+EasyUI</div>
</div>
<div class="define-account">

</div>
</div>
</div>
<div data-options="region:'west',split:true,title:'菜单列表'" style="width: 200px; height:100%; padding-top: 2px; background-color:#fff; overflow:auto">
<div id="RightTree" style=" background-color:#fff;">
<div class="panel-loading">加载中...</div>
</div>
</div>
<div data-options="region:'south',border:false" style="height: 20px;">
<div class="define-bottom">

</div>
</div>
<div data-options="region:'center',border:false">
<div id="mainTab" class="easyui-tabs" data-options="fit:true">
<div title="我的桌面" data-options="closable:true" style="overflow: hidden; background:#fff">
<iframe scrolling="auto" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
</div>
<div id="tab_menu" class="easyui-menu" style="width: 150px;">
<div id="tab_menu-tabrefresh" data-options="iconCls:'icon-reload'">
刷新</div>
<div id="tab_menu-openFrame">
在新的窗体打开</div>
<div id="tab_menu-tabcloseall">
关闭所有</div>
<div id="tab_menu-tabcloseother">
关闭其他标签页</div>
<div class="menu-sep">
</div>
<div id="tab_menu-tabcloseright">
关闭右边</div>
<div id="tab_menu-tabcloseleft">
关闭左边</div>
<div id="tab_menu-tabclose" data-options="iconCls:'icon-remove'">
关闭</div>
<div id="menu" class="easyui-menu" style="width: 150px;">
</div>
</div>
</body>
</html>

这里我们看到head @Styles.Render("~/Content/css")这些代码，这是MVC的捆版压缩技术，将css和javascript压缩输出到页面。我已经做好了所以大家只要看下就可以。也可以谷歌一下他的原理组成。博客园很多大虾也都给出了答案。其文件是App_Start下的BundleConfig.cs

$(function () {
$('#tab_menu-tabrefresh').click(function () {
/*重新设置该标签 */
var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
$(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src", url);
});
//在新窗口打开该标签
$('#tab_menu-openFrame').click(function () {
var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
window.open(url);
});
//关闭当前
$('#tab_menu-tabclose').click(function () {
var currtab_title = $('.tabs-selected .tabs-inner span').text();
$('#mainTab').tabs('close', currtab_title);
if ($(".tabs li").length == 0) {
//open menu
$(".layout-button-right").trigger("click");
}
});
//全部关闭
$('#tab_menu-tabcloseall').click(function () {
$('.tabs-inner span').each(function (i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
$('#mainTab').tabs('close', t);
}
});
//open menu
$(".layout-button-right").trigger("click");
});
//关闭除当前之外的TAB
$('#tab_menu-tabcloseother').click(function () {
var currtab_title = $('.tabs-selected .tabs-inner span').text();
$('.tabs-inner span').each(function (i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
if (t != currtab_title)
$('#mainTab').tabs('close', t);
}
});
});
//关闭当前右侧的TAB
$('#tab_menu-tabcloseright').click(function () {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
$.messager.alert('提示', '前面没有了!', 'warning');
return false;
}
nextall.each(function (i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#mainTab').tabs('close', t);
}
});
return false;
});
//关闭当前左侧的TAB
$('#tab_menu-tabcloseleft').click(function () {

});
$(function () {
/*为选项卡绑定右键*/
$(".tabs li").live('contextmenu', function (e) {
/*选中当前触发事件的选项卡 */
var subtitle = $(this).text();
$('#mainTab').tabs('select', subtitle);
//显示快捷菜单
$('#tab_menu').menu('show', {
left: e.pageX,
top: e.pageY
});
return false;
});
});

$(function () {
$(".ui-skin-nav .li-skinitem span").click(function () {
var theme = $(this).attr("rel");
$.messager.confirm('提示', '切换皮肤将重新加载系统！', function (r) {
if (r) {
$.post("../../Home/SetThemes", { value: theme }, function (data) { window.location.reload(); }, "json");
}
});
});
});

index的脚本，这个home视图的脚本，他集成了tab页的右键菜单我已经集成到系统。运行之前要在Global.asax启用压缩

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace App.Admin
{
// 注意: 有关启用 IIS6 或 IIS7 经典模式的说明，
// 请访问 http://go.microsoft.com/?LinkId=9394801

public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();

WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
//启用压缩
BundleTable.EnableOptimizations = true;
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
}
}
}

在BundleConfig.RegisterBundles(BundleTable.Bundles);前面加入

//启用压缩
BundleTable.EnableOptimizations = true;
好，我们来看看效果！

如果你要启用灰色主题那么在将@Styles.Render("~/Content/themes/blue/css")

修改为@Styles.Render("~/Content/themes/gray/css")即可

其实这一些没什么好说的，只是为系统搭建了一个简单的框架。如果用easyui没有不下几个小时也是很难搭建起来的，不过别担心，我为大家准备了原代码

代码下载下载的源码有的同学运行有问题请把App_Start下的BundleConfig.cs更改为

using System.Web;
using System.Web.Optimization;

namespace App.Admin
{
public class BundleConfig
{
// 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{

bundles.Add(new ScriptBundle("~/bundles/common").Include(
"~/Scripts/common.js"));

bundles.Add(new ScriptBundle("~/bundles/home").Include(
"~/Scripts/home.js"));
bundles.Add(new ScriptBundle("~/bundles/account").Include(
"~/Scripts/Account.js"));
//easyui
bundles.Add(new StyleBundle("~/Content/themes/blue/css").Include("~/Content/themes/blue/easyui.css"));
bundles.Add(new StyleBundle("~/Content/themes/gray/css").Include("~/Content/themes/gray/easyui.css"));
bundles.Add(new StyleBundle("~/Content/themes/metro/css").Include("~/Content/themes/metro/easyui.css"));

bundles.Add(new ScriptBundle("~/bundles/jqueryfrom").Include(
"~/Scripts/jquery.form.js"));

bundles.Add(new ScriptBundle("~/bundles/easyuiplus").Include(
"~/Scripts/jquery.easyui.plus.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate.unobtrusive.plus.js"));

// 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
// 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

}
}
}

转载于:https://www.cnblogs.com/zxtceq/p/7514503.html

ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]相关推荐

java服装连锁店后台管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
java服装连锁店后台管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署 java服装连锁店后台管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署本源码技术栈: ...
【博主推荐】html后台管理系统框架(附源码)
html后台管理系统框架(附源码) 提示:内含有九套系统框架静态源码,包括列表,表单,曲线图,地图,报表,统计,弹框,加载等所有日常应用:不同的风格,炫酷的界面,可以直接嵌入自己的项目,并使用. 框架 ...
java计算机毕业设计ssm冷链物流管理系统的设计与开发90b3l（附源码、数据库）
java计算机毕业设计ssm冷链物流管理系统的设计与开发90b3l(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstor ...
MVC 停车场管理系统java jsp 程序设计课程设计毕业设计-附源码02141
因上传问题只上传了文案图片未上传点赞+收藏+关注 → 私信领取本源代码.数据库摘要如今,我国现代化发展迅速,人口比例急剧上升,在一些大型的商场,显得就格外拥挤,私家车的数量越来越 ...
临近期末，图书管理系统课设项目安排上（附源码）
图书管理系统项目介绍项目截图源码分享项目介绍本系统是一个基于java的图书管理系统,用Swing显示信息. 开发环境为IDEA,使用mysql数据库.用户分为用户和管理员. 项目截图源 ...
Java实现图书借阅管理系统（IO流存储数据，附源码）
目录前言一.项目概述 1.项目功能结构图 2.项目功能说明 3.项目其他说明二.开发过程中需要注意的问题 1.开发顺序及思路 2.IO流读写 3.数据共享 4.业务逻辑问题三.源码链接前言 ...
图书管理系统（PHP+MYSQL——前端+后端、整套源码）
一.功能前台功能: 前台功能: 1.用户注册.用户登录 2.书籍分类查看.查找单本书籍.借阅书籍.归还书籍 3.个人信息修改 4.退出后台功能: 1.后台登录 2.管理员密码修改 3.图书管理:查 ...
ssm框架超市进销存后台管理系统java进货商品信息库存销售管理jsp源码erp数据库mysql
本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当做编程入门的项目来做,故分享出本项目供初学者参考. 一.项目描述这是一个基于ssm框架 ...
微信小程序自驾游拼团+后台管理系统SSM-JAVA【数据库设计、论文、源码、开题报告】
功能介绍本系统的功能包括前台和后台两方面,前台的功能为旅游景点信息.拼团信息.旅游资讯信息.论坛信息等,用户可以参与拼团,发起者可以发起拼团和管理拼团订单.参团信息.后台的功能为用户管理.评价管理. ...

ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]

前言