最近色々と忙しく、長らくブログをお休みしていましたが、自分の考えを整理し、Metronic ベースの Bootstrap 開発フレームワークでの最近の経験をまとめて、皆さんと共有したいと思います。また、Bootstrap 開発に関する私自身の学習と研究を少しずつ記録し、このレスポンシブ フレームワークを少しずつ紹介する「MVC4+EasyUI ベースの Web 開発フレームワークの体験まとめ」シリーズを開始したいと考えています。
Bootstrap は、多くのプラットフォームで使用できるフロントエンド テクノロジ フレームワークであり、JQuery を統合することで、非常に豊富なインターフェイス効果を実現できます。しかし、中国における Bootstrap ベースの導入の多くは依然として教育に基づいており、この記事では、Bootstrap のさまざまな基礎知識と簡単な使用法を実際に基づいて包括的に紹介したいと考えています。 C# ベースの MVC プロジェクトの事例紹介は、実際のプロジェクトのコードとエフェクトのスクリーンショットを使用して説明されており、この分野での経験と洞察を詳細かつ直感的な方法で誰にでも紹介できるよう努めています。
以下は私のプロジェクト全体の全体的なレンダリングです。
スタートアップ メニュー領域のコンテンツはデータベースから動的に取得され、システムの上部バーに情報が表示され、個人情報の表示、ログアウト、画面のロックなどの個人データの迅速な処理がユーザーに提供されます。コンテンツ領域は主にツリーリストコントロールやテーブルコントロールなどで視覚的に表示することができ、一般的なデータも追加、削除、変更、ページングなどが必要となるため、様々な機能の処理を統合する必要があります。さらに、ユーザー データには、クエリと表示に加えて、インポート、エクスポート、およびその他の関連操作も必要です。これらは通常のデータ処理機能です。これらのルールとインターフェイス効果を決定したら、コード生成ツールを使用してそれらを生成し、これらの Web プロジェクトのインターフェイス効果を迅速に生成できます。
2. Bootstrap 開発フレームワークのメニュー表示
このセクションでは、フレームの先頭、メニューの処理と表示に戻ります。通常、メニューは管理の便宜上 3 つのレベルに分かれており、選択されたメニューは次のように折りたたまれて最小化されます。
Bootstrap では、メニューの構築は主に UL と LI を使用して、次のようなコードで実現できます。
<ul class="page-sidebar-menu page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"> <li class="start" id="1"> <a href="/Home/index"> <i class="icon-home"></i> <span class="title">首页</span> <span class="selected"></span> <span class="arrow open"></span> </a> </li> <li id="2"> <a href="javascript:;"> <i class="icon-basket"></i> <span class="title">行业动态</span> <span class="selected"></span> <span class="arrow open"></span> </a> <ul class="sub-menu"> <li class="heading" style="font-size:14px;color:yellow"> <i class="icon-home"></i> 行业动态 </li> <li> <a href="#"> <i class="icon-home"></i> <span class="badge badge-danger">4</span> 政策法规 </a> </li> <li> <a href="#"> <i class="icon-basket"></i> <span class="badge badge-warning">4</span> 通知公告 </a> </li> <li> <a href="#"> <i class="icon-tag"></i> <span class="badge badge-success">4</span> 动态信息 </a> </li> </ul> </li> </ul>
ただし、一般的なメニューは動的に変化します。つまり、メニューの内容をデータベースから取得してフロントエンド ディスプレイに設定する必要があります。このようにして、MVC コントローラーでメニューの内容を出力する必要があります。フロントエンドインターフェイスでは、メニューデータは動的であり、これは権限制御の基本的な処理でもあります。
基本クラスでは、メニュー データを取得し、ユーザーがログインした後にそれを ViewBag オブジェクトに入れることができます。
具体的なコードは次のとおりです。まず、ユーザーがログインしているかどうかを判断します。ログインしている場合は、ユーザーのメニュー データを取得し、後で使用できるように ViewBag に保存します。
へー
このうち、GetMenuString 関数はメニューの組み立て処理です。データベース内のメニューの情報は以下のようなツリー構造になっています。
データベース内のメニュー情報に基づいて、インターフェースで使用される HTML コードの一部を構築できます。
すごい
たとえば、第 3 レベルのメニューはコードを通じて生成できます。
/// <summary> /// 重写基类在Action执行之前的处理 /// </summary> /// <param name="filterContext">重写方法的参数</param> protected override void OnActionExecuting(ActionExecutingContext filterContext) { base.OnActionExecuting(filterContext); //得到用户登录的信息 CurrentUser = Session["UserInfo"] as UserInfo; if (CurrentUser == null) { Response.Redirect("/Login/Index");//如果用户为空跳转到登录界面 } else { //设置授权属性，然后赋值给ViewBag保存 ConvertAuthorizedInfo(); ViewBag.AuthorizeKey = AuthorizeKey; //登录信息统一设置 ViewBag.FullName = CurrentUser.FullName; ViewBag.Name = CurrentUser.Name; ViewBag.MenuString = GetMenuString(); //ViewBag.MenuString = GetMenuStringCache(); //使用缓存，隔一段时间更新 } }
もちろん、同時実行量を増やしたい場合は、メニューの頻繁な取得を減らし、この部分のデータを MemeryCache に置き、次のように処理することもできます。
#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 open'></span> </a>"; var secondTemplate = @" <li class='heading' style='font-size:14px;color:yellow'> <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>"; #endregion3. レイアウト ページの使用
上の図の
_Layout.cshtml は、C# ベースの MVC の全体レイアウト ビュー ページです。このようにして、メニューの表示内容、メインページのコンテンツとして確保されている部分、およびこのページのスクリプトの部分表示を設定できます。
メニュー表示コードは以下の通りです:
レイアウトページに確保されたページ表示セクションは以下の通りです。
Bootstrap は通常最後に JS ファイルをロードするため、必要な Jquery やその他のスクリプトをレイアウト ページに保持することに加えて、ロード用にスクリプト コンテンツの一部をページの下部に配置する必要もあります。スクリプトの読み込みでは、圧縮と統合の処理に MVC バンドル テクノロジが使用されます。この技術については、以前の記事「MVC4+EasyUIをベースとしたWeb開発フレームワークの体験まとめ(11) - バンドルを利用して簡略化されたページコードを処理する」を参照してください。
このように、各サブページのビューにレイアウトビューページを導入した後は、パーソナライズされたコンテンツを表示する部分を記述するだけです。具体的なコードは次のとおりです。
そして、ページの下部にスクリプトコードの必要な部分を含めるだけです。このようにして、ページが生成された後、レイアウトページに設定されているシーケンスブロックに従って適切に表示されます。コンテンツの一部が統合されます。
以前に撮影したスクリーンショットの多くは VS 環境のものですが、通常、ビュー ページを編集するときは、リッチ プラグを備えた強力な編集ツールである Sublime Text を使用します。 -ins 、インテリジェントな構文プロンプトなど、一度使用すると手放せなくなります。ビュー ページを編集するための非常に高速なツールなので、使用することを強くお勧めします。
VS は通常、ファイル管理、コンパイル、その他の処理に使用されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
