Quanto você sabe sobre a estrutura do bootstrap
O Bootstrap é uma estrutura técnica front-end que pode ser adotada por muitas plataformas. Java/php/.net pode ser usado como uma interface front-end. A integração do jQuery pode obter efeitos de interface muito ricos. Atualmente, existem muitos plug-ins de bootstrap que podem ser fornecidos para que todos usem. No entanto, muitas introduções domésticas baseadas em bootstrap ainda se concentram no ensino, introduzindo vários conhecimentos básicos e uso simples do bootstrap; Este artigo espera fornecer uma introdução abrangente de caso à estrutura de desenvolvimento de bootstrap com base no projeto MVC real com base no C#e explicá -lo com capturas de tela do código e efeito do projeto reais, esforçando -se para introduzir a experiência e a experiência nessa área em detalhes e intuitivamente.
1. Visão geral da estrutura de desenvolvimento de bootstrap baseada em metrônico
A Metronic é uma estrutura de desenvolvimento de bootstrap estrangeira baseada em HTML, JS e outras tecnologias, integrando muitas tecnologias e plug-ins de Bootstrap front-end. É uma estrutura técnica muito boa. Com base neste artigo, combinado com minha pesquisa sobre a estrutura da Web da MVC, este artigo integra a estrutura de desenvolvimento de bootstrap baseada no MVC para permitir que ele atenda às necessidades estruturais dos projetos reais.
A seguir, são apresentadas as representações gerais do meu projeto geral.
O conteúdo da área de menu é obtido dinamicamente no banco de dados e algumas informações são colocadas na coluna superior do sistema e fornece aos usuários um rápido processamento de dados pessoais, como visualizar informações pessoais, registrar, travar a tela etc. A área de conteúdo é principalmente visualmente exibida dados, que podem ser exibidos através dos controles de listas de árvores e controle de tabela. Geralmente, os dados também precisam ser adicionados, excluídos, modificados e de paginação, portanto, várias funções precisam ser integradas. Além de consultar e exibir os dados do usuário, ele também requer operações relacionadas à importação e exportação, que são funções de processamento de dados de rotina. Depois de determinar essas regras e efeitos da interface, podemos gerá -las através de ferramentas de geração de código para gerar rapidamente os efeitos da interface desses projetos da Web.
2. Exibição do menu da estrutura de desenvolvimento de bootstrap
Toda a estrutura envolve muito conteúdo, incluindo o uso de vários recursos CSS de bootstrap regular, bem como barra de menu, gerenciamento de ícones de bootstrap, barra superior do sistema, controle de árvores JSTEE, contêiner de portlet, caixa de diálogo Modal, controle de tabela, listagem de manuseio, listar de listagem de listagem de listagem de listagem, listagem de listagem de listagem de listagem de edição multi-text, fios de listagem de edição multi-text, figura de consumo de edição de edição multi-text, figura de fios e imagens de listagem de edição multi-text, fios de fios de edição multi-text, fios de fios de edição multi-text, fios de edição multi-text, fios de fios de edição multi-text, fios de edição multi-text, figura de figura de edição multi-text, figura de figura de fios e fios de edição. TouchSpin, vídeo de exibição de videocoliadores de exibição de vídeo, etc. Esses recursos são projetados na solução holística. A coleta desses excelentes plug-ins pode fornecer à nossa estrutura funções mais poderosas e uma rica experiência na interface.
Esta seção continua retornando ao início da estrutura, o processamento e a apresentação do menu. Geralmente, para a conveniência da administração, os menus são divididos em três níveis. Os menus selecionados são diferentes de outros estilos de menu. Os menus podem ser dobrados e minimizados. O efeito é o seguinte.
No bootstrap, a construção de menus é uma tarefa relativamente fácil. Usa principalmente UL e Li. Através do processamento de estilo, o layout do menu pode ser definido. O código é o seguinte.
<ul data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"> <li id="1"> <a href="/Home/index"> <i></i> <span>Home</span> <span></span> <span></span> </a> </li> <li id="2"> <a href="javascript:;"> <i> </i> <pan> Trends da indústria </span> <pan> </span> </span> </span> </a> <ul> <li style = "font-size: 14px; cor: amarelo"> <i> </i> </spanle </li> <li> <a href = "#"> <i> href = "#"> <i> </i> <pan> 4 </span> avisos </a> </li> <li> <a href = "#"> <i> </i> </span> 4 </span> informações dinâmicas </a> </li>
No entanto, nossos menus gerais são alterados dinamicamente, ou seja, precisamos obtê-los no banco de dados e configurá-los para a tela front-end. Dessa forma, precisamos produzir o conteúdo do menu no controlador MVC e, em seguida, ligá-los à interface front-end para realizar a dinâmica dos dados do menu. Ao mesmo tempo, este também é o processamento básico do controle de permissão.
Na classe base, podemos obter os dados do menu e colocá -los no objeto Viewbag após o login do usuário.
O código específico é o seguinte. Primeiro, determine se o usuário está conectado. Se conectado, obtenha os dados do menu do usuário e está disponível no ViewBag para uso.
/// <summary> /// reescreva o processamento da classe base antes que a ação seja executada /// </summary> /// <param name = "filtercontext"> reescreva os parâmetros do método </param> protegido anular o OnactionExecuting (ActionExecutionContext FilterContext) {Base.onactionExecution; // Obtenha as informações sobre o usuário Login currentUser = session ["userInfo"] como userInfo; if (currentUser == null) {Response.redirect ("/login/index"); // Se o usuário estiver vazio, pule para a interface de login} else {// Defina o atributo de autorização e atribua o valor ao ViewBag para salvar o convertauthorizedInfo (); Viewbag.authorizeKey = AutorizeKey; // Login Information Set ViewBag.fullName = currentUser.fullName; Viewbag.name = currentUser.name; Viewbag.menustring = getMenustring (); //Viewbag.menustring = getMenustringCache (); // Use o cache e atualize -o de vez em quando}}Entre eles, a função GetMenustring está a montagem e o processamento dos menus. As informações do menu no banco de dados são uma estrutura de árvore, como mostrado abaixo.
Podemos criar algum código HTML usado na interface com base nas informações do menu do banco de dados.
#Region Defined Format Modelo // JavaScript:; // (0}? var SecondTemplate = @"<li class = 'thefting' style = 'font-size: 14px; cor: amarelo'> <i class = '{0}'> </i> {1} </li>"; var terceiroTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> {2} </a> </li>"; var FirstTemplateENDEND = "</li>"; var SecondTemplatestart = "<Ul Class = 'Submenu'>"; var SecondTemplateEnd = "</ul>"; #endregionPor exemplo, o menu de terceiro nível pode ser gerado através do código.
// Ícone de nível 3 = subnodeinfo.webicon; // TID é o ID de classificação de nível superior, Sid é o ID do menu de terceiro nível tmpurl = String.format ("{0} {1} tid = {2} & sid = {3}", subnodeinfo.url, geturlJoiner (subnodeinfo.url), info, info, info, info, info; url = (! string.isnullorEmpty (subnodeinfo.url) && subnodeinfo.url.trim ()! = "#")? tmpurl: "JavaScript:;"; sb = sb.appendFformat (terceiroTemplate, url, ícone, subnodeinfo.name, subnodeinfo.id);Obviamente, se você deseja aumentar a simultaneidade, poderá reduzir a recuperação frequente do menu e colocar essa parte dos dados no Memerycache, como segue.
public String getMenustringCache () {String ItemValue = MemoryCacheHelper.getCacheItem <String> ("getMenustringCache", delegate () {return getMenustring ();}, null, dateTime.now.addminutes (5) // expirar em 5 minutos, reget); retornar itemValue; }3. Uso de páginas de layout
Ao mesmo tempo, para melhorar a reutilização da página, geralmente extraímos o conteúdo da mesma parte de cada página e a colocamos na página de layout geral. Dessa forma, as outras partes são herdadas da página de exibição de layout. Nossa parte do menu dinâmico também faz parte do conteúdo na visualização do layout.
O _layout.cshtml na figura acima é a página de exibição de layout geral do MVC com base em C#. Dessa forma, definimos o menu exibir conteúdo nesta página, bem como a parte do conteúdo da página principal e parte da exibição do script, e é suficiente.
O código de exibição do menu é o seguinte:
A seção de exibição da página deixada na página de layout é a seguinte.
Como o bootstrap geralmente coloca os arquivos JS no final, além de reter alguns dos jQuery e outros scripts necessários na página de layout, também precisamos colocar parte do conteúdo do script na parte inferior da página para carregar, e nosso carregamento de script pode ser compactado e integrado usando a tecnologia Bundles da MVC. Para esta tecnologia, consulte meu artigo anterior para introduzir "Resumo da experiência da estrutura de desenvolvimento da Web com base no MVC4+ easyui (11) - usando pacotes para processar o código da página simplificado".
Dessa forma, depois que introduzimos a página de visualização de layout nas visualizações de cada subpagem, precisamos apenas escrever a parte do conteúdo de exibição personalizado, o código específico é o seguinte.
Em seguida, na parte inferior da página, basta incluir o código de script para a peça necessária. Depois que a página for gerada, ela será exibida razoavelmente de acordo com os blocos de pedidos definidos pela página de layout e todas as partes do conteúdo serão integradas.
4. Uso da ferramenta de edição de página texto sublime
Muitas das capturas de tela do anterior são do ambiente VS, mas geralmente quando editamos a página de visualização, usamos texto sublime, uma ferramenta de edição poderosa, plug-ins Rich, solicitações inteligentes de sintaxe, etc., o que fará com que você o ame depois de usá-lo. É uma ferramenta muito rápida para editar páginas de exibição e é altamente recomendado.
O VS é geralmente usado para fazer gerenciamento de arquivos, compilação e outro processamento.
O conteúdo acima é o resumo da experiência da estrutura de desenvolvimento baseada no bootstrap metronic introduzido a você [i] Visão geral da estrutura e processamento do módulo de menu. Espero que seja útil para todos. Se você quiser saber mais informações, preste atenção ao site wulin.com!