หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ng-ผู้ดูแลระบบ

เชื่อมต่อฉันเข้ากับ RESTFul API ของคุณเพื่อรับอินเทอร์เฟซการดูแลระบบที่สมบูรณ์ (DataGrid, ตัวกรอง, วิดเจ็ตแบบฟอร์มที่ซับซ้อน, ความสัมพันธ์แบบหลายโมเดล, แดชบอร์ด) ในเวลาไม่นาน! นอกเหนือจาก CRUD ธรรมดาแล้ว ng-admin ยังช่วยให้คุณสร้าง GUI ที่ซับซ้อนได้โดยไม่รบกวนคุณ

  • การสาธิตออนไลน์ (ที่มา)
  • เอกสารประกอบ

ขณะนี้โปรเจ็กต์นี้อยู่ในโหมดการบำรุงรักษา เราได้สร้างมันขึ้นมาใหม่ตั้งแต่ต้นด้วย React.js (โปรเจ็กต์ใหม่นี้เรียกว่า react-admin) และเรากำลังทุ่มเทความพยายามทั้งหมดกับเวอร์ชัน React

การติดตั้ง

เวอร์ชัน ng-admin ปัจจุบัน (ต้นแบบ) ขึ้นอยู่กับ Angular.js 1.6 หากคุณต้องการความเข้ากันได้กับ Angular 1.3 ให้ใช้ ng-admin 0.9

รับ ng-admin จากผู้จัดการแพ็คเกจที่คุณชื่นชอบ: 

npm install ng-admin --save
# or
yarn add ng-admin

ด้วยโมดูล Bundler

ng-admin เข้ากันได้กับ Webpack อย่างสมบูรณ์ และควรเข้ากันได้กับ Bundler โมดูลหลักที่มีอยู่ทั้งหมดด้วย หากคุณใช้อันใดอันหนึ่ง คุณเพียงแค่ต้องเพิ่มบรรทัดนี้: 

 const myApp = angular . module ( 'myApp' , [
    require ( 'ng-admin' ) ,
    // ...
] ) ;

หมายเหตุสำคัญ: เนื่องจากเรารวมเทมเพลต HTML ที่ใช้ require เพื่อป้องกันไม่ให้คำขอ AJAX ที่แสดงโดย templateUrl คุณจะต้องกำหนดค่าโมดูลบันเดิลของคุณให้จัดการกับ HTML สามารถทำได้ด้วย Webpack โดยใช้ตัวโหลด HTML: 

 module . exports = {
    // ...
    module : {
        loaders : [
            // ...
            { test : / .html$ / , loader : 'html' } ,
        ]
    } ,
} ;

หากบันเดิลโมดูลของคุณรองรับ SASS หรือ CSS คุณยังสามารถรวมสไตล์ชีตโดยใช้: 

 // SASS version
require ( 'ng-admin/lib/sass/ng-admin.scss' ) ;

// CSS version
require ( 'ng-admin/build/ng-admin.min.css' ) ;

เมื่อใช้โมดูลบันเดิล คุณจะสามารถสร้างแผนที่ต้นทางสำหรับ JavaScript และสไตล์ชีตทั้งหมดของคุณ ซึ่งช่วยให้คุณค้นหาจุดบกพร่องที่คลุมเครือที่สุดได้

ไม่มี Bundler โมดูล

หากคุณไม่มีโมดูล Bundler ไม่ต้องกังวล คุณยังสามารถรวม ng-admin ด้วยแท็ก <script> ได้: 

 < link rel =" stylesheet " href =" node_modules/ng-admin/build/ng-admin.min.css " >
< script src =" node_modules/ng-admin/build/ng-admin.min.js " > </ script >

การเริ่มต้นระบบผู้ดูแลระบบของคุณ

เพิ่ม ng-admin.min.css และ ng-admin.min.js ลงใน HTML เพิ่ม <div ui-view="ng-admin"> และกำหนดค่าผู้ดูแลระบบ: 

 <!doctype html >
< html lang =" en " >
  < head >
    < title > My First Admin </ title >
    < link rel =" stylesheet " href =" node_modules/ng-admin/build/ng-admin.min.css " >
  </ head >
  < body ng-app =" myApp " >
    < div ui-view =" ng-admin " > </ div >
    < script src =" node_modules/ng-admin/build/ng-admin.min.js " > </ script >
    < script type =" text/javascript " >
    var myApp = angular . module ( 'myApp' , [ 'ng-admin' ] ) ;
    myApp . config ( [ 'NgAdminConfigurationProvider' , function ( NgAdminConfigurationProvider ) {
        var nga = NgAdminConfigurationProvider ;
        // create an admin application
        var admin = nga . application ( 'My First Admin' ) ;
        // more configuration here later
        // ...
        // attach the admin application to the DOM and run it
        nga . configure ( admin ) ;
    } ] ) ;
    </ script >
  </ body >
</ html >

เริ่มต้นใช้งาน

ดูบทเฉพาะสำหรับการเริ่มต้นใช้งานสำหรับบทช่วยสอนแบบทีละขั้นตอนสำหรับผู้เริ่มต้น

ตัวอย่างการใช้งาน

  • คุณสามารถค้นหาการกำหนดค่าง่ายๆ ได้ในการสาธิตของผู้ดูแลบล็อก โดยที่เอนทิตีได้แก่ โพสต์ ความคิดเห็น และแท็ก REST API ระยะไกลถูกจำลองในเบราว์เซอร์โดยใช้ FakeRest
  • การสาธิต Poster Galore (ที่มา) เป็นตัวอย่างที่สมบูรณ์ยิ่งขึ้นของการดูแลระบบอีคอมเมิร์ซ โดยมีการรับรองความถูกต้อง หน้าเว็บ คำสั่ง และโมดูลแบบกำหนดเอง ทั้งหมดนี้จัดระเบียบอย่างดีผ่าน WebPack REST API ระยะไกลยังจำลองในเบราว์เซอร์โดยใช้ FakeRest

การอ้างอิงการกำหนดค่า

การดูแลระบบใน ng-admin ทำจาก แอปพลิเคชัน เดียวที่มีหลาย เอนทิตี แต่ละเอนทิตีมีได้ถึง 5 มุมมอง และแต่ละมุมมองมีหลาย ฟิลด์ 

 application
 |-header
 |-menu
 |-dashboard
 |-entity[]
    |-creationView
    |-editionView
    |-deletionView
    |-showView
    |-listView
        |-field[]
           |-name
           |-type

ดูบทเฉพาะสำหรับการอ้างอิงการกำหนดค่า API สำหรับรายละเอียดเพิ่มเติม

เคล็ดลับ : คุณจะไม่พบคลาสที่เกี่ยวข้องในโครงการ ng-admin ในความเป็นจริง API การกำหนดค่าของผู้ดูแลระบบมีอยู่ในไลบรารีแบบสแตนด์อโลนที่ไม่เชื่อเรื่องกรอบงาน เรียกว่า admin-config อย่าลังเลที่จะเรียกดูแหล่งที่มาของห้องสมุดนั้นเพื่อเรียนรู้เพิ่มเติม

ความสัมพันธ์

Ng-admin รองรับความสัมพันธ์ระหว่างเอนทิตีในมุมมองการอ่านและการเขียน และจัดเตรียมประเภทฟิลด์เฉพาะสำหรับสิ่งนั้น: reference , referenced_list , reference_many และ embedded_list บทการอ้างอิงความสัมพันธ์จะอธิบายรายละเอียดเพิ่มเติมว่าจะใช้ประเภทฟิลด์ใดในกรณีใด

นอกจากนี้ ส่วนฟิลด์ของบทการอ้างอิง API การกำหนดค่ายังมีรายการการตั้งค่าทั้งหมดสำหรับฟิลด์แต่ละประเภทเหล่านี้

การกำหนดค่าเมนู

ตามค่าเริ่มต้น ng-admin จะสร้างเมนูแถบด้านข้างโดยมีหนึ่งรายการต่อเอนทิตี หากคุณต้องการปรับแต่งแถบด้านข้างนี้ (ป้ายกำกับ ไอคอน ลำดับ การเพิ่มเมนูย่อย ฯลฯ) คุณต้องกำหนดเมนูด้วยตนเอง

ดูบทเฉพาะเกี่ยวกับการกำหนดค่าเมนู

การกำหนดค่าแดชบอร์ด

หน้าแรกของแอปพลิเคชัน ng-admin เรียกว่าแดชบอร์ด ใช้เพื่อแสดงข้อมูลที่สำคัญแก่ผู้ใช้ เช่น รายการล่าสุด หรือแผนภูมิ

ดูบทเฉพาะเกี่ยวกับการกำหนดค่าแดชบอร์ด

การปรับแต่งการแมป API

คำขอ HTTP ทั้งหมดที่สร้างโดย ng-admin ไปยัง REST API ของคุณดำเนินการโดย Restangle ซึ่งเหมือนกับ $resource บนสเตียรอยด์

ข้อกำหนด REST ไม่ได้ให้รายละเอียดเพียงพอที่จะครอบคลุมข้อกำหนดทั้งหมดของ GUI การดูแลระบบ ng-admin ตั้งสมมติฐานบางประการเกี่ยวกับวิธีการออกแบบ API ของคุณ สมมติฐานทั้งหมดนี้สามารถแทนที่ได้โดยใช้คำขอและตัวสกัดกั้นการตอบสนองของ Restangle

นั่นหมายความว่าคุณไม่จำเป็นต้องปรับ API ของคุณให้เป็น ng-admin ng-admin สามารถปรับให้เข้ากับ REST API ใดก็ได้ ต้องขอบคุณความยืดหยุ่นของ Restangle

ดูบทเฉพาะเรื่องการปรับแต่งการแมป API

ธีม

คุณสามารถแทนที่ HTML ทั้งหมดที่สร้างโดย ng-admin ได้ในระดับต่างๆ

ดูบทเฉพาะเรื่องธีม

การแปล

อินเทอร์เฟซ ng-admin ใช้ภาษาอังกฤษเป็นภาษาเริ่มต้น แต่รองรับการสลับเป็นภาษาอื่นด้วยการแปลเชิงมุม

ดูบทเฉพาะเรื่องการแปล

การเพิ่มหน้าแบบกำหนดเอง

สำหรับแต่ละเอนทิตี ng-admin จะสร้างเพจที่จำเป็นสำหรับการสร้าง การดึงข้อมูล การอัปเดต และการลบ (CRUD) เอนทิตีนี้ เมื่อคุณต้องการดำเนินการที่เฉพาะเจาะจงมากขึ้นกับเอนทิตี คุณต้องเพิ่มเพจแบบกำหนดเอง - เช่น เพจที่ขอที่อยู่อีเมลเพื่อส่งข้อความถึง คุณจะกำหนดเส้นทางไปยังเพจเฉพาะและแสดงในรูปแบบ ng-admin ได้อย่างไร?

ดูบทเฉพาะเรื่องการเพิ่มหน้าแบบกำหนดเอง

การเพิ่มประเภทที่กำหนดเอง

เมื่อคุณแมปฟิลด์ระหว่างการตอบสนอง REST API และ ng-admin คุณจะต้องระบุประเภทให้กับฟิลด์นั้น ประเภทนี้กำหนดวิธีการแสดงและแก้ไขข้อมูล มันง่ายมากที่จะปรับแต่งประเภท ng-admin ที่มีอยู่และเพิ่มประเภทใหม่

ดูบทเฉพาะเรื่องการเพิ่มประเภทแบบกำหนดเอง

เตรียมพร้อมสำหรับการผลิต

หากต้องการสร้างแหล่งที่มาของ ng-admin ที่มีการขึ้นต่อกันที่คุณต้องการ และรับคำแนะนำเกี่ยวกับตัวเพิ่มประสิทธิภาพ ให้ไปที่บทเฉพาะเรื่อง การเตรียมพร้อมสำหรับการผลิต

ข่าว

ติดตามบล็อก marmelab เพื่อดูข่าวสารเกี่ยวกับ ng-admin (บทช่วยสอน ปลั๊กอิน การออกใหม่ ฯลฯ)

คุณควรดูหน้าเผยแพร่ ng-admin บน GitHub เพื่อดูประกาศเกี่ยวกับการออกใหม่และบันทึกการเปลี่ยนแปลงทั้งหมด

สนับสนุน

Ng-admin เป็นโครงการโอเพ่นซอร์ส โดยชุมชนจะมีขนาดใหญ่ขึ้นทุกวัน คุณจะได้รับความช่วยเหลือโดยการสอบถามอย่างสุภาพในช่องทางต่อไปนี้:

  • สแต็คโอเวอร์โฟลว์
  • Gitter (แชทสด)

โปรดให้บริบทมากที่สุดเท่าที่จะเป็นไปได้ รวมถึงตัวอย่างการกำหนดค่าของผู้ดูแลระบบ และการตอบกลับจาก API ที่คุณกำลังแมป

กำลังมองหาเวอร์ชัน Material UI / React.js อยู่ใช่ไหม

marmelab/admin-on-rest โดยทีมเดียวกัน ใช้สถาปัตยกรรมที่แตกต่างกัน แต่ให้บริการที่คล้ายกัน: GUI ผู้ดูแลระบบสำหรับ REST API คราวนี้มาพร้อมกับ React.js, Redux, react-router และ Material UI

มีส่วนร่วม

ความคิดเห็นของคุณเกี่ยวกับการใช้งาน ng-admin ในบริบทเฉพาะของคุณนั้นมีค่า อย่าลังเลที่จะเปิด GitHub Issues สำหรับปัญหาหรือคำถามใดๆ ที่คุณอาจมี

ยินดีต้อนรับการมีส่วนร่วมทั้งหมด: โปรดส่งคำขอดึงสำหรับคุณสมบัติใหม่ / การแก้ไขข้อบกพร่องในส้อมของคุณที่คุณคิดว่าคุ้มค่าที่จะคืน

นอกจากนี้ หากคุณมีประสบการณ์กับ ng-admin โปรดตอบคำถามจากผู้มาใหม่ในช่องทางการสนับสนุนใดๆ (ดูด้านบน)

การติดตั้งการพึ่งพา

ติดตั้งการพึ่งพา npm (สำหรับการทดสอบ) โดยการเรียกเป้าหมาย install : 

make install

เรียกใช้แอปตัวอย่าง

หากต้องการทดสอบการเปลี่ยนแปลงของคุณ ให้เรียกใช้แอปตัวอย่างซึ่งมาพร้อมกับ REST API ตัวอย่าง โดยการโทร: 

make run

จากนั้นเชื่อมต่อกับ http://localhost:8000/ เพื่อเรียกดูแอปผู้ดูแลระบบ งานนี้ใช้ webpack-dev-server ซึ่งหมายความว่าเบราว์เซอร์จะโหลดเพจใหม่ทันทีที่มีการอัปเดตไฟล์หนึ่งในแหล่งที่มา สิ่งนี้ทำให้แอปบล็อกเป็นสภาพแวดล้อมการทดสอบสดที่เราต้องการ

การทดสอบ

ng-admin มีการทดสอบหน่วย (ขับเคลื่อนโดยกรรม) และการทดสอบตั้งแต่ต้นจนจบ (ขับเคลื่อนโดยไม้โปรแทรกเตอร์) เปิดตัวชุดการทดสอบทั้งหมดโดยโทร: 

make test

เคล็ดลับ: หากคุณกำลังดำเนินการทดสอบ Karma คุณสามารถป้องกันไม่ให้เปิดกระบวนการทั้งหมดใหม่ได้โดยการปิดใช้งานการรันครั้งเดียว: 

 ./node_modules/.bin/karma start src/javascripts/test/karma.conf.js

ปล่อย

ก่อนที่จะเผยแพร่เวอร์ชันใหม่ ให้เชื่อมต่อและย่อขนาดแหล่งที่มา JS และ CSS ให้เป็นสคริปต์ย่อขนาดด้วย: 

make build
git add build
git commit -m ' update built files '
git push origin master
git tag vx.x.x
# create a new tag
git push origin --tags
# publish to npm
npm publish

เคล็ดลับ : อย่าคอมมิตไฟล์ที่สร้างขึ้นใน Pull Requests เพราะมันจะบังคับให้ทำการรีบูตบน PR อื่น ๆ ทีมงานหลักจะดูแลการอัปเดตไฟล์ที่สร้างขึ้นเหล่านี้เป็นประจำ

ใบอนุญาต

ng-admin ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT และได้รับการสนับสนุนจาก marmelab

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด