ในระบบมักจะมีรายการเมนูมากมายแต่ละรายการเมนูจะสอดคล้องกับหน้าเว็บ โดยทั่วไปผู้ใช้จะต้องใช้ฟังก์ชั่นที่ใช้กันทั่วไปเท่านั้น หากคุณต้องการไปเมนูในแต่ละระดับเพื่อค้นหาฟังก์ชั่นที่สอดคล้องกันมันค่อนข้างยุ่งยาก โดยเฉพาะอย่างยิ่งเมื่อมีเมนูและลูกค้าจำนวนมากไม่คุ้นเคยกับระบบโดยรวมหากมีโมดูลรายการโปรดคล้ายกับเบราว์เซอร์เชื่อมต่อและบันทึกเมนูที่ใช้กันทั่วไปและค้นหาหน้าเว็บที่สอดคล้องกันจากหน้าแรกของรายการโปรดนี้ทุกครั้ง บทความนี้แนะนำแนวคิดของการใช้รายการโปรดนี้ในกรอบการพัฒนา bootstrap ที่ใช้เมโทรนิก
1. เอฟเฟกต์การประมวลผลอินเทอร์เฟซรายการโปรด
เพื่อที่จะตระหนักถึงฟังก์ชั่นรายการโปรดนี้เรายังต้องวางทางเข้าสู่โมดูลรายการโปรดในตำแหน่งที่ชัดเจนของหน้าระบบเช่นเดียวกับฟังก์ชั่นที่สามารถเพิ่มลงในรายการโปรดที่เกี่ยวข้องสำหรับแต่ละหน้า
หลังจากการเปรียบเทียบเราวางฟังก์ชั่นรายการเหล่านี้ไว้ใกล้ชื่อหน้าเพื่อให้เราสามารถรวบรวมได้อย่างง่ายดายและรวดเร็วดังที่แสดงในเอฟเฟกต์ต่อไปนี้
เมื่อเราคลิกปุ่ม [เพิ่มลงในรายการโปรด] บนหน้าเราจะเพิ่มชื่อหน้าและการเชื่อมต่อที่เกี่ยวข้องกับบันทึกรายการโปรด
ในฟังก์ชั่น [ดูรายการโปรด] เราสามารถแสดงลิงก์หน้าเว็บที่เราได้เพิ่มคลิกหนึ่งในระเบียนเพื่อป้อนหน้าเว็บที่เกี่ยวข้องอย่างรวดเร็วซึ่งตระหนักถึงความต้องการของเราในการป้อนโมดูลการทำงานอย่างรวดเร็ว
สิ่งที่สำคัญที่สุดที่นี่คือการเรียงลำดับบันทึกรายการโปรดย้ายบันทึกขึ้นหรือลงเพื่อให้พวกเขาสามารถปฏิบัติตามการประมวลผลของอินเทอร์เฟซ
2. กระบวนการใช้งานของรายการโปรดของระบบ
หลังจากทำความเข้าใจกับผลกระทบส่วนต่อประสานด้านบนของฟังก์ชั่นรายการโปรดของหน้าระบบเราจำเป็นต้องเข้าใจกระบวนการใช้งานเฉพาะ ก่อนอื่นเราจำเป็นต้องออกแบบตารางเพื่อจัดเก็บข้อมูลที่สอดคล้องกับรายการโปรดชื่อเรื่องเพจที่อยู่หน้าเว็บการเรียงลำดับและข้อมูลอื่น ๆ
อินเทอร์เฟซการออกแบบฐานข้อมูลแสดงอยู่ด้านล่าง
เราสังเกตเห็นว่าบันทึกการเรียงลำดับจะถูกเก็บไว้ในรูปแบบทศนิยมและเราจัดเรียงตามค่าด้วยลองจิจูดเพื่อให้เมื่อเราสามารถปรับได้เราสามารถปรับเปลี่ยนขนาดระหว่างพวกเขา
ใช้ฐานข้อมูลการสร้างรหัสเครื่องมือ 2sharp เพื่อสร้างรหัสที่เกี่ยวข้องและเว็บคอนโทรลเลอร์และรหัสดูอย่างรวดเร็วจากนั้นรวมเข้ากับเฟรมเวิร์กเพื่อให้เราสามารถมีอินเทอร์เฟซของโมดูลทั้งหมดและประมวลผลรหัส
เนื่องจากโดยทั่วไปการแสดงข้อมูลและการแก้ไขอินเทอร์เฟซของเรานั้นค่อนข้างมาตรฐานและข้อกำหนดสำหรับการแสดงผลทางเข้าของรายการโปรดแตกต่างกันเราจำเป็นต้องเพิ่มมุมมองไปยังอินเทอร์เฟซรายการเพื่อแสดงอินเทอร์เฟซรายการอย่างง่ายดังแสดงในรูป
อินเทอร์เฟซนี้มีการประมวลผลการเคลื่อนไหวของบันทึกรวมถึงการขึ้นหรือลง
ดังที่ได้กล่าวไว้ก่อนหน้านี้การเรียงลำดับบันทึกของเราส่วนใหญ่จะประสบความสำเร็จผ่านเขตข้อมูล SEQ ของทศนิยมประเภท
เมื่อคลาสเอนทิตีเริ่มต้นเราจะกำหนดค่าการเรียงลำดับให้กับการประทับเวลา UNIX ของเวลาปัจจุบัน
รหัสฟังก์ชัน DateTimetoint ด้านบนแสดงอยู่ด้านล่างซึ่งเป็นวิธีการประมวลผลที่ใช้กันทั่วไปของเรา
/// <summary> /// อินเทอร์เฟซเวลาขยายสามารถส่งคืนค่าการรูปร่าง /// </summary> /// <param name = "เวลา"> </param> /// <tretion> </returs> สาธารณะคงที่ 1)); return (int) (เวลา - starttime) .totalseconds; -
เพื่อที่จะตระหนักถึงการเคลื่อนไหวของบันทึกเราจำเป็นต้องใช้การประมวลผลแบบลอจิคัลเคลื่อนย้ายที่เลเยอร์บริการ BLL เพื่ออำนวยความสะดวกในการโทรในคอนโทรลเลอร์
/// <summary> /// อัปเดตคำสั่งซื้อขึ้นหรือลง /// </summary> /// <param name = "id"> ID ที่บันทึกไว้ </param> /// <param name = "MoveUp"> เลื่อนขึ้นหรือเลื่อนลงจริงที่ด้านบน </param> ///
รหัสฟังก์ชันที่ใช้งานมีดังนี้
/// <summary> /// อัปเดตคำสั่งซื้อขึ้นหรือลง /// </summary> /// <param name = "id"> บันทึกรหัส </param> /// <param name = "moveup"> up หรือเลื่อนขึ้นจริง </param> /// <returns> </return> bool updown bool result = false; webFavoriteInfo info = findById (id); if (info! = null) {// สร้างเงื่อนไขสตริงแบบสอบถาม = ""; if (iSdescending) {ords = string.format ("seq {0} {1}", moveup? ">": "<", info.seq); } else {condition = string.format ("seq {0} {1}", moveup? "<": ">", info.seq); } var list = basedal.find (เงื่อนไข); ทศนิยม newseq = 0m; switch (list.count) {กรณี 0: newseq = info.seq; // มีอยู่แล้วที่ด้านบนหรือด้านล่างคำสั่งซื้อยังคงไม่เปลี่ยนแปลงตามค่าเริ่มต้น; กรณีที่ 1: // มีระเบียนด้านบนหรือต่ำกว่าถ้า (isDescending) {newSeq = moveUp? (รายการ [0] .seq + 1m): (รายการ [0] .seq - 1m); } else {newseq =! moveUp? (รายการ [0] .seq + 1m): (รายการ [0] .seq - 1m); } หยุดพัก; กรณีที่ 2: // พื้นที่กลางใช้ค่าเฉลี่ย newseq = (รายการ [0] .seq + รายการ [1] .seq) /2m; หยุดพัก; ค่าเริ่มต้น: // กรณีที่มากกว่าสองคือถ้า (moveUp) {newseq = (list [list.count - 2] .seq + list [list.count - 1] .seq) /2m; } else {newseq = (รายการ [0] .seq + รายการ [1] .seq) / 2m; } หยุดพัก; } // unified modification order info.seq = newseq; result = update (info, info.id); } ผลตอบแทนผลลัพธ์;}ด้วยวิธีนี้เราจะสรุปอินเทอร์เฟซเลเยอร์ BLL นี้ในคอนโทรลเลอร์ MVC เพื่ออำนวยความสะดวกในการประมวลผลการโทร AJAX ที่ส่วนหน้าของหน้า รหัสห่อหุ้มมีดังนี้
/// <summary> //// ย้ายบันทึก /// </summary> /// <param name = "id"> บันทึกรหัส </param> ///// <param name = "up"> สูงสุดเป็นจริง if (! string.isnullorEmpty (id)) {ลอง {result.success = bllfactory <webFavorite> .instance.updown (id, up); } catch (Exception Ex) {result.errorMessage = Ex.Message; }} return tojsonContent (ผลลัพธ์);}ด้วยวิธีนี้เราสามารถเรียกวิธีนี้ในมุมมองอินเตอร์เฟสที่ส่วนหน้าของหน้า
ขั้นแรกให้สร้างรหัส HTML front-end ผ่านการเชื่อมโยง JS ดังที่แสดงด้านล่าง
$ ("#grid_body"). html (""); $. แต่ละ (data.rows, ฟังก์ชั่น (i, item) {var tr = "<tr>"; tr + = "<td> <a class = 'btn btn-sm สีน้ำเงิน' href = '" "A href = 'JavaScript:; btn-sm blue 'onclick =/"down ('" + item.id + "')/" title =' ย้ายลง '> <span class =' glyphicon glyphicon-arrow-down '> </span> </a> "tr + =" </td> "tr + =" </tr> "จากนั้นประมวลผลผ่านฟังก์ชั่นขึ้นหรือลงและเลื่อนตำแหน่งขึ้นหรือลง
var updownUrl = "/webFavorite/updown" ฟังก์ชั่นขึ้น (id) {var postdata = {id: id, up: true}; $ .post (updownurl, postdata, ฟังก์ชั่น (JSON) {var data = $ .parsejson (json); ถ้า (data.success) {showtips ("เลื่อนขึ้นสำเร็จ"); refresh (); // refresh data - $ .post (updownurl, postdata, function (json) {var data = $ .parsejson (json); ถ้า (data.success) {showtips ("เลื่อนลงสำเร็จ"); refresh (); // รีเฟรชข้อมูลหน้าสิ่งนี้ใช้ลำดับการเคลื่อนไหวที่เราต้องการ นอกจากนี้เมื่อเพิ่มเราพิจารณาว่าผู้ใช้ที่เกี่ยวข้องได้เพิ่ม URL หรือไม่ หากมีอยู่จะไม่จำเป็นต้องเพิ่มซ้ำ ๆ ส่วนหน้าต้องเรียกมันผ่านอาแจ็กซ์แล้วตอบกลับ
ผ่านการใช้รหัสเหล่านี้เราสามารถจัดการรายการโปรดได้อย่างรวดเร็วและป้อนผู้ใช้อย่างรวดเร็วให้ประสบการณ์ที่เป็นมิตรมากขึ้น
ด้านบนเป็นฟังก์ชั่นที่ชื่นชอบของลิงค์ลิงค์ตาม bootstrap แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!