Сколько вы знаете о Bootstrap Framework
Bootstrap-это интерфейсная техническая структура, которая может быть принята на многих платформах. Java/Php/.net можно использовать в качестве интерфейса переднего интерфейса. Интеграция jQuery может достичь очень богатых эффектов интерфейса. В настоящее время есть много плагинов начальной загрузки, которые могут быть предоставлены для каждого использования. Тем не менее, многие домашние вступления на основе начальной загрузки по-прежнему направлены на обучение, внедрение различных базовых знаний и простого использования начальной загрузки; В этой статье надеется предоставить всеобъемлющее введение в структуру разработки начальной загрузки, основанную на фактическом проекте MVC, основанном на C#, и объяснить его с помощью скриншотов фактического кода и эффекта проекта, стремясь ввести опыт и опыт в этой области подробно и интуитивно и интуитивно.
1. Обзор структуры разработки начальной загрузки на основе Metronic
Metronic-это зарубежная структура разработки начальной загрузки, основанная на HTML, JS и других технологиях, интегрируя многие передние технологии начальной загрузки и плагины. Это очень хорошая техническая структура. Основываясь на этой статье, в сочетании с моим исследованием веб -структуры MVC, эта статья объединяет структуру разработки Bootstrap, основанную на MVC, чтобы позволить ему удовлетворить структурные потребности реальных проектов.
Ниже приведены общие визуализации моего общего проекта.
Содержание области меню динамически получено из базы данных, а некоторая информация размещается в верхнем столбце системы, и оно предоставляет пользователям быстрая обработка персональных данных, такую как просмотр личной информации, вход в систему, блокировка экрана и т. Д. Как правило, данные также должны быть добавлены, удаляются, изменяются и пейджинг, поэтому необходимо интегрировать различные функции. В дополнение к запросу и отображению данных пользователя, он также требует операций импорта и экспорта, которые являются обычными функциями обработки данных. После определения этих правил и эффектов интерфейса мы можем генерировать их с помощью инструментов генерации кода для быстрого генерации интерфейсных эффектов этих веб -проектов.
2. Дисплей меню фреймворка разработки начальной загрузки
The entire framework involves a lot of content, including the use of various CSS features of regular Bootstrap, as well as menu bar, Bootstrap icon management, system top bar, tree control JSTree, Portlet container, Modal dialog box, Tab control, drop-down list Select2, checkbox iCheck, multi-text editing control summernote, file and picture upload display fileinput, prompt control bootstrap-toast and sweetalert, numerical adjustment control touchspin, Видеоарит видео управления видео-игроком и т. Д. Эти функции разработаны в целостном решении. Сбор этих превосходных плагинов может обеспечить нашу структуру более мощными функциями и богатым опытом интерфейса.
Этот раздел продолжает возвращаться к началу структуры, обработки и представления меню. Как правило, для удобства управления меню делятся на три уровня. Выбранные меню отличаются от других стилей меню. Меню можно сложить и минимизировать. Эффект заключается в следующем.
В начальной загрузке меню строительства является относительно простой задачей. В основном он использует UL и LI. Благодаря обработке стиля можно установить макет меню. Код выглядит следующим образом.
<ul data-hape-expeded = "false" data-auto-scroll = "true" data-slide-speed = "200"> <li id = "1"> <a href = "/home/index"> <i> </i> <pan> </span> <pan> </span> <pan> </span> </a> </li> <li id = "2". <i> </i> <pan> Тенденции отрасли </span> <pran> </span> <pran> </span> </a> <ul> <li style = "spant-size: 14px; цвет: желтый"> <i> </i> Trends </li> <li> <a href = "#"> </i> <span> 4 </li> <li> href = "#"> <i> </i> <pan> 4 </span> уведомления </a> </li> <li> <a href = "#"> <i> </i> <pan> 4 </span> Динамическая информация </a> </li> </li> </li> </li> </ul> </li> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul>
Тем не менее, наши общие меню динамически изменяются, то есть нам нужно получить их из базы данных и установить их на фронтальный дисплей. Таким образом, нам необходимо вывести содержание меню в контроллере MVC, а затем связывать их с интерфейсом переднего интерфейса, чтобы реализовать динамику данных меню. В то же время это также является основной обработкой управления разрешением.
В базовом классе мы можем получить данные меню и поместить их в объект Viewbag после входа пользователя.
Конкретный код выглядит следующим образом. Во -первых, определите, входит ли пользователь.
/// <summary> /// Перепишите обработку базового класса до выполнения действия /// </summary> /// <param name = "filterContext"> Переписать параметры метода </param> protected void onActionExeCuting (actionExeCutingContextContext) {base.onactionExecuting (filterContextextextextextextextextext) {base.onactionExecuting (filterContextextextextontext) {base.onactionExecuting (filterContextextextextextextextextextext) // Получить информацию о пользовательском входе в систему currentUser = session ["userInfo"] как userInfo; if (currentUser == null) {response.redirect ("/login/index"); // Если пользователь пуст, перейдите к интерфейсу входа в систему} else {// Установить атрибут авторизации, а затем назначьте значение для сохранения ConvertAuthorizedInfo (); Viewbag.AuthorizeKey = AuthorizeKey; // Информация о входе в систему viewbag.fullname = currentUser.fullname; Viewbag.name = currentUser.name; Viewbag.menustring = getMenustring (); //Viewbag.menustring = getMenustringCache (); // Используйте кэш и обновляйте его время от времени}}Среди них функция GetMenustring - это сборка и обработка меню. Информация меню в базе данных представляет собой структуру дерева, как показано ниже.
Мы можем создать некоторый HTML -код, используемый в интерфейсе на основе информации о меню базы данных.
#region определенный шаблон формата // javascript:; // {0}? TID = {1} var FirstTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <span class = 'title'> {2} </span> <span class = 'selected'> </span> <span class = 'arrow arrow arrow> <//span class ='> </span> <san> <span> <//span> </span> <//> <//span> <//span class = '> </span> <san> <///span> </span var SecondTemplate = @"<li class = 'heading' style = 'font-size: 14px; color: hello'> <i class = '{0}'> </i> {1} </li>"; var thirdtemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> {2} </a> </li>"; var FirstTemplateend = "</li>"; var SecondTemplatestart = "<ul class = 'sub-menu'>"; var SecondTemplateend = "</ul>"; #endregionНапример, меню третьего уровня может быть сгенерировано через код.
// icon 3 уровня = subnodeinfo.webicon; // TID-это идентификатор классификации верхнего уровня, SID является идентификатором меню третьего уровня tmpurl = string.format ("{0} {1} tid = {2} & sid = {3}", subnodeinfo.url, getUrljoiner (subnodeinfo.url), info.id, subnodeinfo.id); url = (! string.isnullorempty (subnodeinfo.url) && subnodeinfo.url.trim ()! = "#")? tmpurl: "javaScript:;"; SB = SB.AppendFormat (третий пояс, URL, ICON, subnodeinfo.name, subnodeinfo.id);Конечно, если вы хотите увеличить параллелизм, вы можете уменьшить частое поиск меню и поместить эту часть данных в MemeryCache следующим образом.
public String getMenustringCache () {string itemValue = memoryCacheHelper.getCacheitem <string> ("getMenustringCache", delegate () {return getMenustring ();}, null, dateTime.now.addminutes (5) // истечение за 5 минут, повторный язык); вернуть itemvalue; }3. Использование страниц макета
В то же время, чтобы улучшить повторное использование страницы, мы обычно извлекаем содержание одной и той же части каждой страницы и размещаем ее на общей странице макета. Таким образом, другие части унаследованы от страницы просмотра макета. Наша часть динамического меню также является частью контента в представлении макета.
_Layout.cshtml на рисунке выше представляет собой страницу представления MVC общего макета на основе C#. Таким образом, мы устанавливаем меню отображать контент на этой странице, а также часть содержимого основной страницы и часть отображения скрипта, и этого достаточно.
Код отображения меню заключается в следующем:
Раздел отображения страницы, оставшийся на странице макета, заключается в следующем.
Поскольку Bootstrap обычно помещает файлы JS в конце, в дополнение к сохранению некоторых необходимых JQUERY и других сценариев на странице макета, нам также необходимо поместить некоторые из содержимого скрипта в нижней части страницы для загрузки, и наше загрузка скрипта может быть сжата и интегрирована с использованием технологии Bundles MVC. Для этой технологии, пожалуйста, обратитесь к моей предыдущей статье, чтобы ввести «Краткое описание опыта структуры веб -разработки на основе MVC4+ EasyUI (11) - с использованием связков для обработки упрощенного кода страницы».
Таким образом, после того, как мы представляем страницу представления макета в представлениях каждой под страницы, нам нужно только написать часть персонализированного отображения, конкретный код заключается в следующем.
Затем в нижней части страницы просто включите код сценария для необходимой части. После того, как страница будет сгенерирована, она будет отображаться разумно в соответствии с блоками заказа, установленных страницей макета, и все части контента будут интегрированы.
4. Использование инструмента редактирования страницы Sublime Text
Многие из снимков экрана в предыдущем взяты из среды VS, но, как правило, когда мы редактируем страницу просмотра, мы используем возвышенный текст, мощный инструмент редактирования, богатые плагины, интеллектуальные подсказки для синтаксиса и т. Д., Который заставит вас любить его после использования. Это очень быстрый инструмент для редактирования страниц просмотра и настоятельно рекомендуется.
VS обычно используется для управления файлами, компиляции и другой обработки.
Вышеуказанный контент является краткой опытом структуры разработки, основанной на Metronic Bootstrap, представленном вам [I] обзору структуры и обработке модулей меню. Я надеюсь, что это будет полезно для всех. Если вы хотите узнать больше информации, обратите внимание на веб -сайт wulin.com!