Ringkasan Pengalaman Kerangka Pengembangan Berdasarkan Bootstrap Metronic [1] Tinjauan Kerangka dan Pemrosesan Modul Menu

Seberapa banyak yang Anda ketahui tentang kerangka bootstrap

Bootstrap adalah kerangka teknis front-end yang dapat diadopsi oleh banyak platform. Java/php/.net dapat digunakan sebagai antarmuka front-end. Mengintegrasikan jQuery dapat mencapai efek antarmuka yang sangat kaya. Saat ini, ada banyak plug-in bootstrap yang dapat disediakan untuk digunakan semua orang. Namun, banyak perkenalan berbasis bootstrap domestik masih fokus pada pengajaran, memperkenalkan berbagai pengetahuan dasar dan penggunaan bootstrap yang sederhana; Artikel ini berharap untuk memberikan perkenalan kasus komprehensif untuk kerangka pengembangan bootstrap berdasarkan proyek MVC yang sebenarnya berdasarkan C#, dan menjelaskannya dengan tangkapan layar kode dan efek proyek yang sebenarnya, berusaha untuk memperkenalkan pengalaman dan pengalaman di bidang ini secara rinci dan secara intuitif.

1. Gambaran Umum Kerangka Pengembangan Bootstrap Berdasarkan Metronik

Metronic adalah kerangka pengembangan bootstrap asing berdasarkan HTML, JS dan teknologi lainnya, mengintegrasikan banyak teknologi dan plug-in bootstrap bootstrap dan plug-in. Ini adalah kerangka teknis yang sangat baik. Berdasarkan artikel ini, dikombinasikan dengan penelitian saya tentang kerangka kerja web MVC, artikel ini mengintegrasikan kerangka pengembangan bootstrap berdasarkan MVC untuk memungkinkannya memenuhi kebutuhan struktural proyek aktual.

Berikut ini adalah rendering keseluruhan dari keseluruhan proyek saya.

Konten area menu secara dinamis diperoleh dari database, dan beberapa informasi ditempatkan di kolom atas sistem, dan memberikan pengguna dengan pemrosesan data pribadi yang cepat, seperti melihat informasi pribadi, keluar, mengunci layar, dll. Area konten terutama ditampilkan secara visual, yang dapat ditampilkan melalui kontrol daftar pohon dan kontrol meja. Secara umum, data juga perlu ditambahkan, dihapus, dimodifikasi, dan paging, sehingga berbagai fungsi perlu diintegrasikan. Selain kueri dan menampilkan data pengguna, ini juga membutuhkan operasi terkait impor dan ekspor, yang merupakan fungsi pemrosesan data rutin. Setelah menentukan aturan dan efek antarmuka ini, kami dapat menghasilkannya melalui alat pembuatan kode untuk dengan cepat menghasilkan efek antarmuka dari proyek web ini.

2. Tampilan Menu Kerangka Pengembangan Bootstrap

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, video Play-Play Control Player, dll. Fitur-fitur ini dirancang dalam solusi holistik. Mengumpulkan plug-in yang sangat baik ini dapat memberikan kerangka kerja kami dengan fungsi yang lebih kuat dan pengalaman antarmuka yang kaya.

Bagian ini terus kembali ke awal kerangka kerja, pemrosesan dan presentasi menu. Secara umum, untuk kenyamanan manajemen, menu dibagi menjadi tiga tingkatan. Menu yang dipilih berbeda dari gaya menu lainnya. Menu dapat dilipat dan diminimalkan. Efeknya adalah sebagai berikut.

Di Bootstrap, menu membangun adalah tugas yang relatif mudah. Ini terutama menggunakan ul dan li. Melalui pemrosesan gaya, tata letak menu dapat diatur. Kode adalah sebagai berikut.

 <ul data-mondar-mandir = "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> </span> </a> </Li> </span = "2 hrip = </span> </span> </span> </san> </a> </li> li> <pan =" 2 <i></i> <span>Industry Trends</span> <span></span> <span></span> </a> <ul> <li style="font-size:14px;color:yellow"> <i></i> Industry Trends</li> <li> <a href="#"> <i></i> <span>4</span> Policies and Regulations</a> </li> <li> <a href = "#"> <i> </i> <span> 4 </span> pemberitahuan </a> </li> <li> <a href = "#"> <i> </i> <span> 4 </span> Informasi dinamis </a> </li> </li> </li> </li> </ul> </ul> </ul> </li> </li> </ul> </ul> </ul> </ul> </li> </li> </ul> </ul> </li> </Ul> </li> </li> </li> </ul> </li> </Ul> </ul> </li> </li> </ul> </ul> </li>

Namun, menu umum kami diubah secara dinamis, yaitu, kita perlu mendapatkannya dari database dan mengaturnya ke tampilan front-end. Dengan cara ini, kita perlu mengeluarkan konten menu di pengontrol MVC dan kemudian mengikatnya ke antarmuka front-end untuk mewujudkan dinamika data menu. Pada saat yang sama, ini juga merupakan pemrosesan dasar kontrol izin.

Di kelas dasar, kita bisa mendapatkan data menu dan memasukkannya ke objek ViewBag setelah pengguna masuk.

Kode spesifiknya adalah sebagai berikut. Pertama, tentukan apakah pengguna masuk. Jika masuk, dapatkan data menu pengguna dan tersedia di Viewbag untuk digunakan.

 /// <summary> /// Rewrite the processing of the base class before the action is executed/// </summary> /// <param name="filterContext">Rewrite the parameters of the method</param> protected override void OnActionExecuting(ActionExecutingContext filterContext) { base.OnActionExecuting(filterContext); // Dapatkan informasi tentang login pengguna CurrentUser = sesi ["userInfo"] sebagai userInfo; if (currentUser == null) {response.redirect ("/login/index"); // Jika pengguna kosong, lompat ke antarmuka login} else {// atur atribut otorisasi, dan kemudian tetapkan nilai ke Viewbag untuk menyimpan convertAuthorizedInfo (); Viewbag.authorizeKey = otorizeKey; // informasi login set viewbag.fullname = currentUser.fullname; Viewbag.name = currentUser.name; ViewBag.Menustring = getMenustring (); //Viewbag.menustring = getMenustringCache (); // Gunakan cache dan perbarui sesekali}}

Di antara mereka, fungsi getMenustring adalah perakitan dan pemrosesan menu. Informasi menu dalam database adalah struktur pohon seperti yang ditunjukkan di bawah ini.

Kami dapat membangun beberapa kode HTML yang digunakan di antarmuka berdasarkan informasi menu database.

 Template format yang ditentukan #Region // javascript :; // {0}? Tid = {1} var firstTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <span class = 'title'> {2} </span> <span class = 'SPAN> </SPAN>"; var secondTemplate = @"<li class = 'heading' style = 'font-size: 14px; color: yellow'> <i class = '{0}'> </i> {1} </li>"; var fhirdTemplate = @"<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

Misalnya, menu tingkat ketiga dapat dihasilkan melalui kode.

 // level 3 ikon = subnodeInfo.webicon; // TID adalah ID klasifikasi tingkat atas, SID adalah ID menu tingkat ketiga TMPURL = String.Format ("{0} {1} tid = {2} & sid = {3}", subnodeInfo.url, getUrljoiner (subnodeInfo.url), info.id, Subnode, getUrljoiner (SubnodeInfo.url), info.id, Subnode); url = (! string.isnullorEmpty (subnodeInfo.url) && subnodeInfo.url.trim ()! = "#")? tmpurl: "JavaScript :;"; SB = SB.AppendFormat (ThirdTemplate, URL, Ikon, SubnodeInfo.name, SubnodeInfo.id);

Tentu saja, jika Anda ingin meningkatkan konkurensi, Anda dapat mengurangi pengambilan menu yang sering dan memasukkan bagian data ini ke dalam memericache, sebagai berikut.

 String publik getMenustringCache () {string itemValue = memorycacheHelper.getCacheitem <String> ("getMenustringCache", delegate () {return getMenustring ();}, null, datetime.now.addminutes (5) // ekspirasi dalam 5 menit, kembali); mengembalikan itemValue; }

3. Penggunaan halaman tata letak

Pada saat yang sama, untuk meningkatkan penggunaan kembali halaman, kami umumnya mengekstrak konten dari bagian yang sama dari setiap halaman dan menempatkannya di halaman tata letak keseluruhan. Dengan cara ini, semua bagian lainnya diwarisi dari halaman Tata Letak. Bagian menu dinamis kami juga merupakan bagian dari konten dalam tampilan tata letak.

_Layout.cshtml pada gambar di atas adalah halaman tampilan tata letak keseluruhan MVC berdasarkan C#. Dengan cara ini, kami mengatur konten tampilan menu di halaman ini, serta bagian dari konten halaman utama dan bagian dari tampilan skrip, dan itu sudah cukup.

Kode tampilan menu adalah sebagai berikut:

Bagian tampilan halaman yang tersisa di halaman tata letak adalah sebagai berikut.

Karena Bootstrap umumnya menempatkan file JS di akhir, selain mempertahankan beberapa jQuery yang diperlukan dan skrip lain pada halaman tata letak, kami juga perlu meletakkan beberapa konten skrip di bagian bawah halaman untuk memuat, dan pemuatan skrip kami dapat dikompresi dan diintegrasikan menggunakan teknologi bundel MVC. Untuk teknologi ini, silakan merujuk ke artikel saya sebelumnya untuk memperkenalkan "Ringkasan Pengalaman Kerangka Pengembangan Web berdasarkan MVC4+ EXEADUI (11) - Menggunakan bundel untuk memproses kode halaman yang disederhanakan".

Dengan cara ini, setelah kami memperkenalkan halaman tampilan tata letak dalam tampilan setiap subpage, kami hanya perlu menulis bagian dari konten tampilan yang dipersonalisasi, kode spesifik adalah sebagai berikut.

Kemudian di bagian bawah halaman, cukup sertakan kode skrip untuk bagian yang diperlukan. Setelah halaman dihasilkan, itu akan ditampilkan secara wajar sesuai dengan blok pesanan yang ditetapkan oleh halaman tata letak, dan semua bagian konten akan diintegrasikan.

4. Penggunaan Alat Pengeditan Halaman Teks Sublime

Banyak tangkapan layar di yang sebelumnya berasal dari lingkungan VS, tetapi umumnya ketika kami mengedit halaman tampilan, kami menggunakan teks luhur, alat pengeditan yang kuat, plug-in yang kaya, petunjuk sintaks yang cerdas, dll., Yang akan membuat Anda menyukainya setelah menggunakannya. Ini adalah alat yang sangat cepat untuk mengedit halaman tampilan dan sangat disarankan.

VS umumnya digunakan untuk melakukan manajemen file, kompilasi, dan pemrosesan lainnya.

Konten di atas adalah ringkasan pengalaman kerangka kerja pengembangan berdasarkan Bootstrap Metronic yang diperkenalkan kepada Anda [i] Tinjauan Kerangka dan Pemrosesan Modul Menu. Saya harap ini akan membantu semua orang. Jika Anda ingin mengetahui informasi lebih lanjut, harap perhatikan situs web Wulin.com!