คุณรู้เกี่ยวกับเฟรมเวิร์ก bootstrap มากแค่ไหน
Bootstrap เป็นกรอบเทคนิคส่วนหน้าซึ่งสามารถนำมาใช้โดยหลายแพลตฟอร์ม Java/PHP/.NET สามารถใช้เป็นส่วนต่อประสานส่วนหน้า การบูรณาการ jQuery สามารถบรรลุเอฟเฟกต์อินเทอร์เฟซที่เข้มข้นมาก ปัจจุบันมีปลั๊กอิน bootstrap มากมายที่สามารถให้สำหรับทุกคนที่จะใช้ อย่างไรก็ตามการแนะนำตัวที่ใช้ bootstrap ในประเทศจำนวนมากยังคงมุ่งเน้นไปที่การสอนแนะนำความรู้พื้นฐานที่หลากหลายและการใช้ bootstrap อย่างง่าย บทความนี้หวังที่จะให้การแนะนำกรณีที่ครอบคลุมเกี่ยวกับกรอบการพัฒนา bootstrap ตามโครงการ MVC จริงตาม C#และอธิบายด้วยภาพหน้าจอของรหัสโครงการจริงและผลกระทบที่มุ่งมั่นที่จะแนะนำประสบการณ์และประสบการณ์ในพื้นที่นี้ในรายละเอียดและโดยสังหรณ์ใจ
1. ภาพรวมของกรอบการพัฒนา bootstrap ตามเมโทรนิก
Metronic เป็นกรอบการพัฒนา bootstrap ต่างประเทศที่ใช้ HTML, JS และเทคโนโลยีอื่น ๆ โดยรวมเทคโนโลยี Front-end และปลั๊กอินเข้าด้วยกันมากมาย มันเป็นกรอบทางเทคนิคที่ดีมาก จากบทความนี้รวมกับการวิจัยของฉันเกี่ยวกับเฟรมเวิร์กเว็บของ MVC บทความนี้รวมกรอบการพัฒนา bootstrap ตาม MVC เพื่อให้สามารถตอบสนองความต้องการเชิงโครงสร้างของโครงการจริง
ต่อไปนี้คือการเรนเดอร์โดยรวมของโครงการโดยรวมของฉัน
เนื้อหาของพื้นที่เมนูได้รับจากฐานข้อมูลแบบไดนามิกและข้อมูลบางอย่างถูกวางไว้ที่คอลัมน์ด้านบนของระบบและให้ผู้ใช้กับการประมวลผลข้อมูลส่วนบุคคลอย่างรวดเร็วเช่นการดูข้อมูลส่วนบุคคลการเข้าสู่ระบบล็อคหน้าจอ ฯลฯ โดยทั่วไปข้อมูลยังต้องเพิ่มลบแก้ไขและเพจดังนั้นฟังก์ชั่นต่าง ๆ จำเป็นต้องรวมเข้าด้วยกัน นอกเหนือจากการสืบค้นและการแสดงข้อมูลของผู้ใช้แล้วยังต้องใช้การดำเนินการที่เกี่ยวข้องกับการนำเข้าและส่งออกซึ่งเป็นฟังก์ชั่นการประมวลผลข้อมูลตามปกติ หลังจากพิจารณากฎและเอฟเฟกต์อินเทอร์เฟซเหล่านี้เราสามารถสร้างผ่านเครื่องมือสร้างรหัสเพื่อสร้างเอฟเฟกต์อินเทอร์เฟซของโครงการเว็บเหล่านี้ได้อย่างรวดเร็ว
2. การแสดงเมนูการพัฒนา Bootstrap Framework
เฟรมเวิร์กทั้งหมดเกี่ยวข้องกับเนื้อหาจำนวนมากรวมถึงการใช้คุณสมบัติ CSS ต่าง ๆ ของ bootstrap ปกติเช่นเดียวกับแถบเมนู, การจัดการไอคอน bootstrap, แถบด้านบนของระบบ, การควบคุมต้นไม้ jstree, คอนเทนเนอร์พอร์ตเล็ต, กล่องโต้ตอบโมดอล Control TouchSpin, การแสดงวิดีโอการเล่นการควบคุมวิดีโอผู้เล่น ฯลฯ คุณสมบัติเหล่านี้ได้รับการออกแบบในโซลูชันแบบองค์รวม การรวบรวมปลั๊กอินที่ยอดเยี่ยมเหล่านี้สามารถให้เฟรมเวิร์กของเราด้วยฟังก์ชั่นที่ทรงพลังกว่าและประสบการณ์อินเตอร์เฟสที่หลากหลาย
ส่วนนี้ยังคงกลับไปที่จุดเริ่มต้นของเฟรมเวิร์กการประมวลผลและการนำเสนอเมนู โดยทั่วไปเพื่อความสะดวกของการจัดการเมนูจะแบ่งออกเป็นสามระดับ เมนูที่เลือกนั้นแตกต่างจากรูปแบบเมนูอื่น ๆ เมนูสามารถพับและย่อให้เล็กสุดได้ เอฟเฟกต์มีดังนี้
ใน bootstrap การสร้างเมนูเป็นงานที่ค่อนข้างง่าย ส่วนใหญ่ใช้ UL และ LI ผ่านการประมวลผลสไตล์เค้าโครงเมนูสามารถตั้งค่าได้ รหัสมีดังนี้
<ul data-expanded = "false" data-auto-scroll = "true" data-slide-speed = "200"> <li id = "1"> <a href = "/home/index"> <i> </i> <pan> home </span> <i> </i> <pan> แนวโน้มอุตสาหกรรม </span> <span> </span> <span> </span> </a> <ul> <li style = "Font-Size: 14px; สี: สีเหลือง"> <i> </i> แนวโน้มของอุตสาหกรรม </li> <li> href = "#"> <i> </i> <span> 4 </span> ประกาศ </a> </li> <li> <a href = "#"> <i> </i> <pan> 4 </span> ข้อมูลไดนามิก </a> </li> </li> </li> </li> </li>
อย่างไรก็ตามเมนูทั่วไปของเรามีการเปลี่ยนแปลงแบบไดนามิกนั่นคือเราต้องได้รับจากฐานข้อมูลและตั้งค่าไว้ที่หน้าจอส่วนหน้า ด้วยวิธีนี้เราจำเป็นต้องส่งออกเนื้อหาเมนูในคอนโทรลเลอร์ MVC แล้วผูกไว้กับอินเตอร์เฟสส่วนหน้าเพื่อรับรู้การเปลี่ยนแปลงของข้อมูลเมนู ในเวลาเดียวกันนี่คือการประมวลผลพื้นฐานของการควบคุมการอนุญาต
ในคลาสพื้นฐานเราสามารถรับข้อมูลเมนูและใส่ลงในวัตถุ ViewBag หลังจากผู้ใช้เข้าสู่ระบบ
รหัสเฉพาะมีดังนี้ ขั้นแรกให้ตรวจสอบว่าผู้ใช้เข้าสู่ระบบหรือไม่หากเข้าสู่ระบบรับข้อมูลเมนูของผู้ใช้และมีอยู่ใน ViewBag สำหรับการใช้งาน
/// <summary> /// rewrite การประมวลผลของคลาสฐานก่อนการดำเนินการจะถูกดำเนินการ /// </summary> /// <param name = "FilterContext"> เขียนพารามิเตอร์ของเมธอด </param> void onActionExecuting // รับข้อมูลเกี่ยวกับผู้ใช้เข้าสู่ระบบ CurrentUser = เซสชัน ["userInfo"] เป็น 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 (); // ใช้แคชและอัปเดตทุกครั้งในขณะที่}}ในหมู่พวกเขาฟังก์ชั่น getMenustring คือการชุมนุมและการประมวลผลของเมนู ข้อมูลของเมนูในฐานข้อมูลคือโครงสร้างต้นไม้ดังที่แสดงด้านล่าง
เราสามารถสร้างรหัส HTML ที่ใช้ในอินเทอร์เฟซตามข้อมูลเมนูฐานข้อมูล
#เทมเพลตรูปแบบที่กำหนดไว้ // JavaScript :; // {0}? tid = {1} var firstTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <span class = 'title'> {2} </span> <span class = ' var secondTemplate = @"<li class = 'heading' style = 'font-size: 14px; color: yellow'> <i class = '{0}'> </i> {1} </li>"; var thichTemplate = @"<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ตัวอย่างเช่นเมนูระดับที่สามสามารถสร้างได้ผ่านรหัส
// ระดับ 3 ไอคอน = subnodeInfo.webicon; // TID เป็น ID การจำแนกระดับบนสุด SID คือเมนูเมนูระดับที่สาม tmpurl = string.format ("{0} {1} tid = {2} & sid = {3}", subnodeinfo.url, geturljoiner (subnodeinfo.url) url = (! string.isnullorempty (subnodeinfo.url) && subnodeinfo.url.trim ()! = "#")? tmpurl: "JavaScript:;"; sb = sb.appendformat (ThirdTemplate, url, ไอคอน, subnodeinfo.name, subnodeinfo.id);แน่นอนถ้าคุณต้องการเพิ่มการเกิดขึ้นพร้อมกันคุณสามารถลดการดึงเมนูบ่อยครั้งและนำส่วนนี้ของข้อมูลนี้ลงใน MemeryCache ดังต่อไปนี้
สตริงสาธารณะ getMenustringCache () {สตริง itemValue = MemoryCacheHelper.getCacheItem <String> ("getMenustringCache", มอบหมาย () {return getMenustring ();}, null, datetime.now.addminutes (5) // ใน 5 นาที ส่งคืนสินค้า; -3. การใช้หน้าเค้าโครง
ในเวลาเดียวกันเพื่อปรับปรุงการใช้ซ้ำของหน้าเว็บโดยทั่วไปเราจะแยกเนื้อหาของส่วนเดียวกันของแต่ละหน้าและวางไว้ในหน้าเค้าโครงโดยรวม ด้วยวิธีนี้ส่วนอื่น ๆ ทั้งหมดได้รับการสืบทอดจากหน้ามุมมองเลย์เอาต์ ส่วนเมนูแบบไดนามิกของเรายังเป็นส่วนหนึ่งของเนื้อหาในมุมมองเลย์เอาต์
_layout.cshtml ในรูปด้านบนคือหน้ามุมมองเลย์เอาต์โดยรวมของ MVC โดยใช้ C# ด้วยวิธีนี้เราตั้งค่าเนื้อหาการแสดงเมนูในหน้านี้รวมถึงส่วนหนึ่งของเนื้อหาหน้าหลักและส่วนหนึ่งของการแสดงสคริปต์และมันก็เพียงพอแล้ว
รหัสการแสดงผลของเมนูมีดังนี้:
ส่วนการแสดงหน้าหน้าซ้ายบนหน้าเค้าโครงมีดังนี้
เนื่องจาก Bootstrap โดยทั่วไปทำให้ไฟล์ JS ในตอนท้ายนอกเหนือจากการรักษา jQuery ที่จำเป็นและสคริปต์อื่น ๆ ในหน้าเค้าโครงเรายังต้องใส่เนื้อหาสคริปต์บางส่วนที่ด้านล่างของหน้าสำหรับการโหลดและการโหลดสคริปต์ของเราสามารถบีบอัดและรวมเข้ากับเทคโนโลยีของ MVC สำหรับเทคโนโลยีนี้โปรดดูบทความก่อนหน้าของฉันเพื่อแนะนำ "สรุปประสบการณ์ของกรอบการพัฒนาเว็บตาม MVC4+ EasyUI (11) - ใช้การรวมกลุ่มเพื่อประมวลผลรหัสหน้าง่าย"
ด้วยวิธีนี้หลังจากที่เราแนะนำหน้ามุมมองเลย์เอาต์ในมุมมองของแต่ละหน้าย่อยเราต้องเขียนส่วนหนึ่งของเนื้อหาการแสดงผลส่วนบุคคลรหัสเฉพาะมีดังนี้
จากนั้นที่ด้านล่างของหน้าเพียงรวมรหัสสคริปต์สำหรับส่วนที่ต้องการ หลังจากสร้างหน้าแล้วมันจะปรากฏขึ้นอย่างสมเหตุสมผลตามบล็อกคำสั่งที่กำหนดโดยหน้าเค้าโครงและทุกส่วนของเนื้อหาจะถูกรวมเข้าด้วยกัน
4. การใช้ข้อความการแก้ไขหน้าข้อความประเสริฐ
ภาพหน้าจอจำนวนมากในภาพก่อนหน้านี้มาจากสภาพแวดล้อม VS แต่โดยทั่วไปเมื่อเราแก้ไขหน้ามุมมองเราใช้ข้อความประเสริฐเครื่องมือแก้ไขที่ทรงพลังปลั๊กอินที่อุดมไปด้วยไวยากรณ์อัจฉริยะ ฯลฯ ซึ่งจะทำให้คุณรักหลังจากใช้มัน มันเป็นเครื่องมือที่รวดเร็วมากสำหรับการแก้ไขหน้ามุมมองและขอแนะนำอย่างยิ่ง
VS โดยทั่วไปจะใช้ในการจัดการไฟล์การรวบรวมและการประมวลผลอื่น ๆ
เนื้อหาข้างต้นเป็นบทสรุปของประสบการณ์ของกรอบการพัฒนาตาม bootstrap metronic แนะนำให้คุณ [i] ภาพรวมกรอบการทำงานและการประมวลผลโมดูลเมนู ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดให้ความสนใจกับเว็บไซต์ Wulin.com!