Tuxboard.Examples

ตัวอย่าง Tuxboard

Tuxboard เป็นไลบรารีแดชบอร์ดที่มีน้ำหนักเบาโดยเฉพาะสำหรับแพลตฟอร์ม ASP.NET Core มันหมายถึงวิธีการสร้างแดชบอร์ดสไตล์เลโก้

ฉันเพิ่มตัวอย่างเพิ่มเติมอย่างต่อเนื่องผ่านบทความในบล็อกของฉันและใช้ที่เก็บนี้สำหรับ "Dropzone" (ไม่ต้องกังวล ... จะมีอีกมาก)

ห้องสมุดตั้งอยู่ที่นี่และมีให้บริการผ่าน NuGet ที่นี่

สแต็คเทคโนโลยี

• ASP.NET CORE 6.0 หรือสูงกว่า (ใช้ C#)
• แกนเฟรมเวิร์กเอนทิตี

ตัวอย่าง

ที่เก็บมีตัวอย่างต่อไปนี้:

• 01-SimpleDashboard
  วิธีที่ง่ายที่สุดในการสร้างแผงควบคุมแบบคงที่ พื้นฐานมาก; ไม่มีจาวาสคริปต์ที่ไม่มีคุณสมบัติ (โพสต์ที่เกี่ยวข้อง)
  
  
• 02-widgetsexample
  แดชบอร์ดง่ายๆพร้อมวิดเจ็ตง่าย ๆ (โพสต์ที่เกี่ยวข้อง)
  
  
• 03-Dragwidgets
  การใช้ typescript เพื่อย้ายวิดเจ็ตรอบ ๆ บนแผงควบคุม (โพสต์ที่เกี่ยวข้อง)
  
  
• 04-tuxbar
  สาธิตวิธีการสร้างแถบเครื่องมือฟรีสำหรับ Tuxboard (โพสต์ที่เกี่ยวข้อง)
  
  
• 05-Layout-1
  สร้างกล่องโต้ตอบเค้าโครงอย่างง่ายเพื่อให้ผู้ใช้สามารถปรับวิธีการจัดโครงสร้างแดชบอร์ด (โพสต์ที่เกี่ยวข้อง)
  
  
• 06-Layout-2
  สร้างกล่องโต้ตอบเค้าโครงขั้นสูงสำหรับเลย์เอาต์ที่ซับซ้อนมากขึ้น (โพสต์ที่เกี่ยวข้อง)
  
  
• 07-ADD-Widgets
  สร้างกล่องโต้ตอบเพิ่มวิดเจ็ต (โพสต์ที่เกี่ยวข้อง)
  
  
• 08-widget-toolbar
  การเพิ่มปุ่มและดรอปดาวน์ลงในส่วนหัวของวิดเจ็ต (โพสต์ที่เกี่ยวข้อง)
  
  
• 09-user-Dashboard
  สร้างแดชบอร์ดเฉพาะผู้ใช้เมื่อผู้ใช้เข้าสู่ระบบ (โพสต์ที่เกี่ยวข้อง)
  
  
• 10-default-dashboards
  สร้างแดชบอร์ดเฉพาะบทบาทเมื่อผู้ใช้เข้าสู่ระบบ (โพสต์ที่เกี่ยวข้อง)
  
  
• 11-default-Widgets
  สร้างวิดเจ็ตเฉพาะบทบาท (โพสต์ที่เกี่ยวข้อง)
  
  
• 12-creating-widgets
  สร้างวิดเจ็ตประเภทต่าง ๆ (เร็ว ๆ นี้)
  
  

รันตัวอย่างในคอนเทนเนอร์ Docker

แต่ละตัวอย่างมี dockerfile ที่สามารถใช้ในการสร้างอิมเมจนักเทียบท่าที่สามารถใช้ในการเรียกใช้ตัวอย่างในคอนเทนเนอร์ Docker

นี่คือวิธีเรียกใช้ตัวอย่างเหล่านี้โดยใช้แผงควบคุมง่าย ๆ เป็นตัวอย่าง

1. ตั้งค่าตัวแปรสภาพแวดล้อม TuxBoardConfig__ConnectionString บนเทอร์มินัล Linux/Mac สิ่งนี้จะเป็นเช่นนี้แทนที่ที่อยู่ IP, ชื่อฐานข้อมูล, ชื่อผู้ใช้และรหัสผ่านของฐานข้อมูล SQL Server ของคุณ: export TUXBOARDCONFIG__CONNECTIONSTRING='Data Source=IP_ADDRESS;Initial Catalog=DATABASE_NAME;Integrated Security=false;MultipleActiveResultSets=True;TrustServerCertificate=True;User Id=USERNAME;Password=PASSWORD'
2. ไปที่โฟลเดอร์ 01-SampleDashboard และสร้างไฟล์ใหม่ที่เรียกว่า development.env ที่มีสิ่งต่อไปนี้:

 TUXBOARDCONFIG__CONNECTIONSTRING=CONNECTION STRING FROM STEP 2
ASPNETCORE_ENVIRONMENT=Development

3. ไปที่โฟลเดอร์ 01 -SimpleDashboard และเรียกใช้คำสั่ง docker build -t simpledashboard -f Dockerfile .
4. เรียกใช้ dotnet ef migrations add InitialCreate เพื่อเริ่มต้นการย้ายฐานข้อมูล
5. เรียกใช้ dotnet ef database update เพื่อใช้การย้ายฐานข้อมูลกับฐานข้อมูล
6. เรียกใช้คอนเทนเนอร์ Docker ด้วยคำสั่งต่อไปนี้ docker run --name dash -d --env-file development.env -p 8080:8080 simpledashboard

ในการเรียกใช้ตัวอย่างอื่นให้ลบฐานข้อมูลที่สร้างขึ้นในขั้นตอนที่ #3 และเรียกใช้ขั้นตอน #2 - #6 การเปลี่ยนชื่อของคอนเทนเนอร์ Docker จาก Simpledashboard เป็นชื่ออื่นเพื่อให้ตรงกับตัวอย่าง