YoYoCms.AbpProjectTemplate

เว็บไซต์สาธิต

เรามาพูดถึงโครงการนี้กันก่อน เช่นเดียวกับชื่อเรื่อง มันเป็นเฟรมเวิร์กที่พัฒนาบน VUE+.NET นอกจากนี้ยังเป็นเฟรมเวิร์ก ABP ที่สมาชิกกลุ่มต่างเรียกร้องสำหรับเวอร์ชัน vue มาดูที่หน้าแรกกันก่อน:

มันค่อนข้างดี ฉันจะให้บัญชีทดลองแก่คุณ

ที่อยู่การสาธิต: http://vue.yoyocms.com/ บัญชี: การสาธิต รหัสผ่าน: bb123456 แน่นอน คุณยังสามารถลงทะเบียนบัญชีด้วยตนเองเพื่อตรวจสอบได้

แนะนำ

ก่อนอื่น สำหรับนักเรียนที่ไม่รู้จักกรอบงาน ABP เรามาอธิบายว่ากรอบงาน ABP คืออะไร:

ABP เป็นตัวย่อของ "โครงการ ASP.NET Boilerplate (โครงการ ASP.NET Boilerplate)" ASP.NET Boilerplate เป็นจุดเริ่มต้นใหม่สำหรับการพัฒนาแอปพลิเคชันเว็บสมัยใหม่โดยใช้แนวปฏิบัติที่ดีที่สุดและเทคโนโลยียอดนิยม โดยมีเป้าหมายที่จะกลายเป็นเฟรมเวิร์กแอปพลิเคชันเว็บสากลและเทมเพลตโครงการ Framework ABP เป็นเฟรมเวิร์กแอปพลิเคชันที่ใช้เทคโนโลยี ASP.NET CORE, ASP.NET MVC และ Web API ล่าสุด และด้วยการใช้เฟรมเวิร์กและไลบรารียอดนิยม ทำให้มีฟังก์ชันทั่วไปที่ใช้งานง่าย เช่น การอนุญาต การแทรกการขึ้นต่อกัน การตรวจสอบความถูกต้อง การจัดการข้อยกเว้น การแปลเป็นภาษาท้องถิ่น การบันทึก การแคช ฯลฯ สถาปัตยกรรม ABP ใช้สถาปัตยกรรมหลายชั้น (ชั้นโดเมน ชั้นแอปพลิเคชัน ชั้นโครงสร้างพื้นฐาน และชั้นการนำเสนอ) เช่นเดียวกับการออกแบบที่ขับเคลื่อนด้วยโดเมน (เอนทิตี พื้นที่เก็บข้อมูล บริการโดเมน บริการแอปพลิเคชัน DTO ฯลฯ) โครงสร้างพื้นฐานที่ดียังถูกนำไปใช้และจัดเตรียมแนวทางปฏิบัติที่ดีที่สุด เช่น การฉีดพึ่งพา เทมเพลต ABP สร้างเทมเพลตเริ่มต้นสำหรับโครงการของคุณได้อย่างง่ายดาย ประกอบด้วยเฟรมเวิร์กและไลบรารีที่ใช้บ่อยที่สุดตามค่าเริ่มต้น ยังให้คุณเลือกสถาปัตยกรรมหน้าเดียว (Angularjs) หรือหลายหน้า EntityFramework หรือ NHibernate เป็น ORM เยี่ยมชมเว็บไซต์อย่างเป็นทางการเพื่อเรียนรู้เพิ่มเติม

โครงสร้าง

โครงสร้างของโครงการที่เลือกในครั้งนี้คือ:

• .เน็ตเฟรมเวิร์ก 4.6
• VUE + VUEX + VUE-ROUTER เป็นเทคโนโลยีการแยกส่วนหน้าและส่วนหลัง แต่การแยกส่วนไม่บริสุทธิ์มากนัก เนื่องจากการออกแบบของ ABP หากคุณต้องการแยกส่วนหน้าและส่วนหน้าเพียงอย่างเดียว จะยุ่งยากนิดหน่อยเมื่อทำการอนุญาต ดังนั้นจึงไม่ใช้วิธีโทเค็น

ในบทความก่อนหน้านี้ [ABP Framework] การใช้การสกัดกั้นของ Dynamic Web Api ได้มีการอธิบายวิธีใช้โทเค็นสำหรับการตรวจสอบสิทธิ์ ในปัจจุบัน วิธีคุกกี้ยังคงใช้สำหรับการตรวจสอบ แต่ไม่ส่งผลกระทบต่อวิธีการพัฒนาส่วนหน้าและส่วนหลัง ดูหน้าเข้าสู่ระบบ:

การรับรู้ฟังก์ชัน

• เข้าสู่ระบบ ลงทะเบียน
• การสลับหลายภาษา
• การจัดการข้อความ
• การจัดการผู้เช่า (ผู้เช่าหลายราย)
• การจัดการบทบาท
• การประชุม
• การอนุญาต (การจัดการสิทธิ์)
• การจัดการการตั้งค่า
• การจัดการหลายภาษา
• บันทึกการตรวจสอบ
• Dynamic WebApi และฟังก์ชันอื่นๆ ฉันหวังว่าคุณจะได้สัมผัสมันด้วยตัวเอง

หากทักษะ .NET ของคุณไม่มั่นคงหรือคุณต้องการปรับปรุง ABP คือกรอบการเรียนรู้ที่ดีที่สุด

คำอธิบายสแต็กเทคโนโลยีส่วนหน้า:

####เฟรมเวิร์กที่ใช้โดยส่วนหน้า 1.vue
2.วูเอ็กซ์
3.vue-เราเตอร์
4.jquery

ไลบรารี UI

1.องค์ประกอบ-ui
2.คลื่น
3.บูตสแตรป
4.บีสแบดมิน

โครงสร้างโครงการ

• สร้างสคริปต์ที่สร้างโดย webpack
• config การกำหนดค่าการสร้าง webpack
• ไฟล์หลังจาก dist build
• ไดเร็กทอรีซอร์สโค้ด src
  • ไฟล์ทรัพยากรทั่วโลกของสินทรัพย์
  • วิธีการสาธารณะแบบสาธารณะทั่วไป
    • ชุดภาษาภาษา (ไม่ได้ใช้ชั่วคราว)
    • คลาสเครื่องมือ utils
  • ส่วนประกอบส่วนประกอบทั่วโลก
  • ตัวกรอง ตัวกรอง
  • Mixins จัดเก็บสไตล์ที่หลากหลาย
  • การกำหนดค่าเส้นทางของเราเตอร์
  • ชั้นคำขออินเทอร์เฟซบริการ
  • สโตร์วูเอ็กซ์
  • ผู้ขายจัดเก็บห้องสมุดบุคคลที่สาม
  • ดูไฟล์ดู
  • vuePlugin ปลั๊กอิน vue แบบกำหนดเอง
• ไฟล์คงที่แบบคงที่ไดเร็กทอรีที่คอมไพล์แล้วยังคงไม่เปลี่ยนแปลง

ต่อไปนี้เป็นคำพูดดั้งเดิมของเจ้าหน้าที่ส่วนหน้า ขอขอบคุณ Huixin666 ที่สละเวลาปรับปรุงอินเทอร์เฟซของ vue

ขั้นตอนการพัฒนา

ก่อนการพัฒนา เราถือว่าคุณมีพื้นฐานทักษะพื้นฐานใน es6 , sass , vue , vue-router และ vuex
ขอแนะนำให้อ่านคำแนะนำของ You Yuxi

ติดตั้งการพึ่งพาส่วนหน้า

ป้อนไดเร็กทอรี Assets ใน Web项目

 $ npm i

รันโครงการ

อย่าลืมเริ่มพื้นหลังก่อน

 $ npm run dev

webpack จะใช้ express เพื่อเริ่มเว็บเซิร์ฟเวอร์ด้วยพอร์ต 8986

ปรับใช้

 $ npm run build

คำสั่งนี้จะรวบรวมไฟล์ทั้งหมดลงในไดเร็กทอรี dist โปรดดูแผนภาพโครงสร้างโปรเจ็กต์ด้านบน

1.เพิ่มหน้า

• ก่อนอื่นให้ไปที่ src/views เพื่อสร้างไดเร็กทอรีโมดูล
  ตัวอย่างเช่น ขณะนี้ฉันได้เพิ่มไดเร็กทอรีชื่อ administration ซึ่งมีหน้าการจัดการระบบทั้งหมด นอกจากนี้ แต่ละโมดูลยังอาจมีไดเร็กทอรี components และ assets ซึ่งหมายความว่าส่วนประกอบและทรัพยากรในนั้นจะเป็นของโมดูลปัจจุบันเท่านั้น
• ถัดไป เพิ่ม Index.vue เป็นเพจการกำหนดเส้นทางหลักเพื่อควบคุมเพจทั้งหมดภายใต้โมดูลนี้
  ต้องให้ความสนใจกับบทบาทของการรักษา
• จากนั้นเพิ่มเพจที่คุณต้องการ เช่น User.vue
  หากคุณต้องการรับข้อมูล โปรดเพิ่มวิธีการชื่อ fetchData ใน methods ในวิธีนี้ คุณจะต้องเรียก abp.view.setContentLoading(false) หลังจากได้รับข้อมูลเพื่อปิดเลเยอร์มาสก์การโหลดของพื้นที่เนื้อหา (คุณสามารถดู User.vue)

2.เพิ่มเส้นทาง

• ป้อนไดเร็กทอรี src/router เพิ่มโฟลเดอร์โมดูลการกำหนดเส้นทาง และเพิ่มไฟล์ชื่อ index.js ในโฟลเดอร์
• จากนั้นลงทะเบียนข้อมูลเส้นทางที่เพิ่มในปัจจุบันใน src/router/index.js

3.เพิ่มบริการ

• ป้อนไดเร็กทอรี src/services และเพิ่มโมดูลที่สอดคล้องกับคำร้องขออินเทอร์เฟซ ตัวอย่างเช่น อ็อบเจ็กต์ที่เกี่ยวข้องกับบทบาทจะถูกวางใน roleService.js อ็อบเจ็กต์ที่เอ็กซ์พอร์ตโดยไฟล์ roleService.js สอดคล้องกับ abp.services.yoyocms.role ข้อดีของการใช้วิธีนี้คือสามารถจัดการและขยายได้อย่างสม่ำเสมอ

ข้างต้นเป็นสถานการณ์พื้นฐานของ ABP เวอร์ชัน vue

ดาวน์โหลดที่อยู่:

ที่อยู่โอเพ่นซอร์สของเวอร์ชัน vue: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate ที่อยู่สาธิตของเวอร์ชัน vue: http://vue.yoyocms.com/ ที่อยู่โอเพ่นซอร์สของเวอร์ชัน angularJS: https //github.com/ltm0203/YoYoCms เชิงมุมJS ที่อยู่สาธิตเวอร์ชัน: http://www.yoyocms.com

หากคุณมีข้อเสนอแนะที่ดีหรือข้อเสนอแนะเกี่ยวกับข้อบกพร่อง โปรดแจ้งปัญหาบน GitHub

ในเวลาเดียวกัน เรายังสร้างตัวสร้างโปรเจ็กต์ที่มีฟังก์ชันคล้ายกับเทมเพลต ABP อย่างเป็นทางการอีกด้วย ฟังก์ชั่นนี้จะเปิดตัวในช่วงกลางปี ​​ดังนั้นโปรดติดตามต่อไป