1.简介
1) .环境配置
2) .提取页面
2）.动态生成菜单（无限级别树）
2.系统环境配置
项目需要程序数据支撑，这里选择MVC5.0+EF6.0[SQLSERVER]（不对MVC架构和SQLServer做出解读）
运行环境：VS2013+MVC5.0+EF6.1+SQLServer2012
解决方案名称：AppSolution 项目名称：App.Web(UI层)与App.Models(数据访问层) -直接访问模式
提取theme下的所有文件到MVC的Content，提取admin的index.html到_Layout.cshtml来准备改造
3.创建数据库和表
数据库：AppDataBase
创建以下数据表，并创建AppDB.edmx
USE [AppDataBase] GO /****** Object: Table [dbo].[SysModule] Script Date: 2015/9/15 21:03:39 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[SysModule]( [ID] [varchar](50) NOT NULL, --主键ID [Name] [varchar](50) NOT NULL, --菜单名称 [ParentID] [varchar](50) NULL, --上级ID [Url] [varchar](200) NULL, --URL [Iconic] [varchar](200) NULL, --图标 [Sort] [int] NULL, --排序 [Enable] [bit] NOT NULL, --是否显示 [CreateTime] [datetime] NULL, --创建时间 [IsLast] [bit] NOT NULL --是否最后一项 CONSTRAINT [PK_SysModule] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO SET ANSI_PADDING OFF GO ALTER TABLE [dbo].[SysModule] WITH NOCHECK ADD CONSTRAINT [FK_SysModule_SysModule] FOREIGN KEY([ParentID]) REFERENCES [dbo].[SysModule] ([Id]) GO ALTER TABLE [dbo].[SysModule] NOCHECK CONSTRAINT [FK_SysModule_SysModule] GO
人为造点数据
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('0','root','root','Index','icon-settings',NULL,0,NULL,0) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('1','一级菜单01','0','Index','icon-settings',NULL,0,NULL,0) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('11','二级菜单01-01','1','Index','icon-settings',NULL,0,NULL,0) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('111','三级菜单01-01-01','11','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('112','三级菜单01-01-02','11','Index','icon-settings',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('12','二级菜单01-02','1','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('13','二级菜单01-03','1','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('2','一级菜单02','0','Index','icon-settings',NULL,0,NULL,0) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('21','二级菜单02-01','2','Index','icon-settings',NULL,0,NULL,0) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('211','三级菜单02-01-01','5','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('212','三级菜单02-01-02','5','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('22','二级菜单02-02','2','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('23','二级菜单02-03','2','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('3','一级菜单03','0','Index','icon-settings',NULL,0,NULL,0) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('31','二级菜单03-01','3','Index','icon-settings',NULL,0,NULL,0) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('311','三级菜单03-01-01','31','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('312','三级菜单03-01-02','31','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('32','二级菜单03-02','3','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('33','二级菜单03-03','3','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('4','一级菜单04','0','Index','icon-settings',NULL,0,NULL,0) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('41','二级菜单04-01','4','Index','icon-link',NULL,0,NULL,1) INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('42','二级菜单04-02','4','Index','icon-link',NULL,0,NULL,1) (22 行受影响)
4.提取页面重要布局
我们是后台系统所以我们保留top. left menu和foot3个部分
我已经提取好了，请复制
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf-8" /> <title>Metronic | 版面展示title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="" name="description" /> <meta content="" name="author" /> <link href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" /> <!-- END GLOBAL MANDATORY STYLES --> <!-- BEGIN PAGE LEVEL PLUGIN STYLES --> <link href="~/Content/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" /> <!-- END PAGE LEVEL PLUGIN STYLES --> <!-- BEGIN PAGE STYLES --> <link href="~/Content/assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" /> <!-- END PAGE STYLES --> <!-- BEGIN THEME STYLES --> <link href="~/Content/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/css/plugins.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" id="style_color" /> <link href="~/Content/assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css" /> <!-- END THEME STYLES --> <link rel="shortcut icon" href="favicon.ico" /> head> <body class="page-header-fixed page-quick-sidebar-over-content page-sidebar-closed-hide-logo page-container-bg-solid"> <!-- BEGIN HEADER --> <div class="page-header navbar navbar-fixed-top"> <!-- BEGIN HEADER INNER --> <div class="page-header-inner"> <!-- BEGIN LOGO --> <div class="page-logo"> <a href="index.html"> <img src="~/Content/assets/admin/layout/img/logo.png" alt="logo" class="logo-default" /> a> <div class="menu-toggler sidebar-toggler hide"> div> div> <!-- END LOGO --> <!-- BEGIN RESPONSIVE MENU TOGGLER --> <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse"> a> <!-- END RESPONSIVE MENU TOGGLER --> <!-- BEGIN TOP NAVIGATION MENU --> <div class="top-menu"> <ul class="nav navbar-nav pull-right"> <!-- BEGIN NOTIFICATION DROPDOWN --> <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --> <li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <i class="icon-bell">i> <span class="badge badge-default"> 7 span> a> <ul class="dropdown-menu"> <li class="external"> <h3><span class="bold">12 pendingspan> notificationsh3> <a href="extra_profile.html">view alla> li> <li> <ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283"> <li> <a href="javascript:;"> <span class="time">just nowspan> <span class="details"> <span class="label label-sm label-icon label-success"> <i class="fa fa-plus">i> span> New user registered. span> a> li> <li> <a href="javascript:;"> <span class="time">3 minsspan> <span class="details"> <span class="label label-sm label-icon label-danger"> <i class="fa fa-bolt">i> span> Server #12 overloaded. span> a> li> <li> <a href="javascript:;"> <span class="time">10 minsspan> <span class="details"> <span class="label label-sm label-icon label-warning"> <i class="fa fa-bell-o">i> span> Server #2 not responding. span> a> li> <li> <a href="javascript:;"> <span class="time">14 hrsspan> <span class="details"> <span class="label label-sm label-icon label-info"> <i class="fa fa-bullhorn">i> span> Application error. span> a> li> <li> <a href="javascript:;"> <span class="time">2 daysspan> <span class="details"> <span class="label label-sm label-icon label-danger"> <i class="fa fa-bolt">i> span> Database overloaded 68%. span> a> li> <li> <a href="javascript:;"> <span class="time">3 daysspan> <span class="details"> <span class="label label-sm label-icon label-danger"> <i class="fa fa-bolt">i> span> A user IP blocked. span> a> li> <li> <a href="javascript:;"> <span class="time">4 daysspan> <span class="details"> <span class="label label-sm label-icon label-warning"> <i class="fa fa-bell-o">i> span> Storage Server #4 not responding dfdfdfd. span> a> li> <li> <a href="javascript:;"> <span class="time">5 daysspan> <span class="details"> <span class="label label-sm label-icon label-info"> <i class="fa fa-bullhorn">i> span> System Error. span> a> li> <li> <a href="javascript:;"> <span class="time">9 daysspan> <span class="details"> <span class="label label-sm label-icon label-danger"> <i class="fa fa-bolt">i> span> Storage server failed. span> a> li> ul> li> ul> li> <!-- END NOTIFICATION DROPDOWN --> <!-- BEGIN INBOX DROPDOWN --> <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --> <li class="dropdown dropdown-extended dropdown-inbox" id="header_inbox_bar"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <i class="icon-envelope-open">i> <span class="badge badge-default"> 4 span> a> <ul class="dropdown-menu"> <li class="external"> <h3>You have <span class="bold">7 Newspan> Messagesh3> <a href="page_inbox.html">view alla> li> <li> <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283"> <li> <a href="inbox.html?a=view"> <span class="photo"> <img src="~/Content/assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt=""> span> <span class="subject"> <span class="from"> Lisa Wong span> <span class="time">Just Now span> span> <span class="message"> Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... span> a> li> <li> <a href="inbox.html?a=view"> <span class="photo"> <img src="~/Content/assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt=""> span> <span class="subject"> <span class="from"> Richard Doe span> <span class="time">16 mins span> span> <span class="message"> Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... span> a> li> <li> <a href="inbox.html?a=view"> <span class="photo"> <img src="~/Content/assets/admin/layout3/img/avatar1.jpg" class="img-circle" alt=""> span> <span class="subject"> <span class="from"> Bob Nilson span> <span class="time">2 hrs span> span> <span class="message"> Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh... span> a> li> <li> <a href="inbox.html?a=view"> <span class="photo"> <img src="~/Content/assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt=""> span> <span class="subject"> <span class="from"> Lisa Wong span> <span class="time">40 mins span> span> <span class="message"> Vivamus sed auctor 40% nibh congue nibh... span> a> li> <li> <a href="inbox.html?a=view"> <span class="photo"> <img src="~/Content/assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt=""> span> <span class="subject"> <span class="from"> Richard Doe span> <span class="time">46 mins span> span> <span class="message"> Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... span> a> li> ul> li> ul> li> <!-- END INBOX DROPDOWN --> <!-- BEGIN TODO DROPDOWN --> <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --> <li class="dropdown dropdown-extended dropdown-tasks" id="header_task_bar"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <i class="icon-calendar">i> <span class="badge badge-default"> 3 span> a> <ul class="dropdown-menu extended tasks"> <li class="external"> <h3>You have <span class="bold">12 pendingspan> tasksh3> <a href="page_todo.html">view alla> li> <li> <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283"> <li> <a href="javascript:;"> <span class="task"> <span class="desc">New release v1.2 span> <span class="percent">30%span> span> <span class="progress"> <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Completespan>span> span> a> li> <li> <a href="javascript:;"> <span class="task"> <span class="desc">Application deploymentspan> <span class="percent">65%span> span> <span class="progress"> <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">65% Completespan>span> span> a> li> <li> <a href="javascript:;"> <span class="task"> <span class="desc">Mobile app releasespan> <span class="percent">98%span> span> <span class="progress"> <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">98% Completespan>span> span> a> li> <li> <a href="javascript:;"> <span class="task"> <span class="desc">Database migrationspan> <span class="percent">10%span> span> <span class="progress"> <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">10% Completespan>span> span> a> li> <li> <a href="javascript:;"> <span class="task"> <span class="desc">Web server upgradespan> <span class="percent">58%span> span> <span class="progress"> <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">58% Completespan>span> span> a> li> <li> <a href="javascript:;"> <span class="task"> <span class="desc">Mobile developmentspan> <span class="percent">85%span> span> <span class="progress"> <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">85% Completespan>span> span> a> li> <li> <a href="javascript:;"> <span class="task"> <span class="desc">New UI releasespan> <span class="percent">38%span> span> <span class="progress progress-striped"> <span style="width: 38%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">38% Completespan>span> span> a> li> ul> li> ul> li> <!-- END TODO DROPDOWN --> <!-- BEGIN USER LOGIN DROPDOWN --> <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --> <li class="dropdown dropdown-user"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <img alt="" class="img-circle" src="~/Content/assets/admin/layout/img/avatar3_small.jpg" /> <span class="username username-hide-on-mobile"> Nick span> <i class="fa fa-angle-down">i> a> <ul class="dropdown-menu dropdown-menu-default"> <li> <a href="extra_profile.html"> <i class="icon-user">i> My Profile a> li> <li> <a href="page_calendar.html"> <i class="icon-calendar">i> My Calendar a> li> <li> <a href="inbox.html"> <i class="icon-envelope-open">i> My Inbox <span class="badge badge-danger"> 3 span> a> li> <li> <a href="page_todo.html"> <i class="icon-rocket">i> My Tasks <span class="badge badge-success"> 7 span> a> li> <li class="divider"> li> <li> <a href="extra_lock.html"> <i class="icon-lock">i> Lock Screen a> li> <li> <a href="login.html"> <i class="icon-key">i> Log Out a> li> ul> li> <!-- END USER LOGIN DROPDOWN --> <!-- BEGIN QUICK SIDEBAR TOGGLER --> <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --> <li class="dropdown dropdown-quick-sidebar-toggler"> <a href="javascript:;" class="dropdown-toggle"> <i class="icon-logout">i> a> li> <!-- END QUICK SIDEBAR TOGGLER --> ul> div> <!-- END TOP NAVIGATION MENU --> div> <!-- END HEADER INNER --> div> <!-- END HEADER --> <div class="clearfix"> div> <!-- BEGIN CONTAINER --> <div class="page-container"> <!-- BEGIN SIDEBAR --> <div class="page-sidebar-wrapper"> <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing --> <!-- DOC: Change data-auto-speed="200" to adjust the sub menu slide up/down speed --> <div class="page-sidebar navbar-collapse collapse"> <!-- BEGIN SIDEBAR MENU --> <!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) --> <!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode --> <!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode --> <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing --> <!-- DOC: Set data-keep-expand="true" to keep the submenues expanded --> <!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed --> <ul class="page-sidebar-menu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"> <!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below "sidebar-toggler-wrapper" LI element --> <li class="sidebar-toggler-wrapper"> <!-- BEGIN SIDEBAR TOGGLER BUTTON --> <div class="sidebar-toggler"> div> <!-- END SIDEBAR TOGGLER BUTTON --> li> <!-- DOC: To remove the search box from the sidebar you just need to completely remove the below "sidebar-search-wrapper" LI element --> <li class="start active open"> <a href="javascript:;"> <i class="icon-folder">i> <span class="title">Multi Level Menuspan> <span class="arrow ">span> a> <ul class="sub-menu"> <li> <a href="javascript:;"> <i class="icon-settings">i> Item 1 <span class="arrow">span> a> <ul class="sub-menu"> <li> <a href="javascript:;"> <i class="icon-user">i> Sample Link 1 <span class="arrow">span> a> <ul class="sub-menu"> <li> <a href="#"><i class="icon-power">i> Sample Link 1a> li> <li> <a href="#"><i class="icon-paper-plane">i> Sample Link 1a> li> <li> <a href="#"><i class="icon-star">i> Sample Link 1a> li> ul> li