streamalism.org

1. סקירה כללית

במדריך זה, ניצור דוגמה ליישום CRUD פשוט המשתמש ב- AngularJS עבור הקצה הקדמי ו- Spring Data REST עבור ה- back-end.

2. יצירת שירות הנתונים REST

על מנת ליצור תמיכה בהתמדה, נשתמש במפרט Spring Data REST שיאפשר לנו לבצע פעולות CRUD במודל נתונים.

אתה יכול למצוא את כל המידע הדרוש כיצד להגדיר את נקודות הקצה של REST בהקדמה ל- Spring Data REST. במאמר זה נשתמש שוב בפרויקט הקיים שקבענו לצורך הדרכת ההקדמה.

לצורך התמדה, נשתמש ב- H2 במאגר זיכרון.

כמודל נתונים, המאמר הקודם מגדיר א אתר משתמש כיתה, עם תְעוּדַת זֶהוּת, שֵׁם ו אימייל מאפיינים וממשק מאגר שנקרא UserRepository.

הגדרת ממשק זה מורה לאביב ליצור את התמיכה בחשיפת משאבי איסוף REST ומשאבי פריט. בואו נסתכל מקרוב על נקודות הקצה העומדות לרשותנו כעת בהמשך נתקשר אליהן AngularJS.

2.1. משאבי האיסוף

רשימה של כל המשתמשים תהיה זמינה עבורנו בנקודת הסיום / משתמשים. ניתן להתקשר לכתובת URL זו בשיטת GET ותחזיר אובייקטים של JSON מהטופס:

{"_embedded": {"users": [{"name": "Bryan", "age": 20, "_links": {"self": {"href": "// localhost: 8080 / users / 1 "}," משתמש ": {" href ":" // localhost: 8080 / משתמשים / 1 "}}}, ...]}}

2.2. משאבי הפריט

בודד אתר משתמש ניתן לטפל באובייקט על ידי גישה לכתובות URL של הטופס / משתמשים / {userID} בשיטות HTTP שונות ובקשות מטעני מטען.

לאחזור א אתר משתמש אנחנו יכולים לגשת אליו / משתמשים / {userID} בשיטת GET. זה מחזיר אובייקט JSON של הטופס:

{"name": "Bryan", "email": "[email protected]", "_links": {"self": {"href": "// localhost: 8080 / users / 1"}, "User" : {"href": "// localhost: 8080 / משתמשים / 1"}}}

כדי להוסיף חדש אתר משתמשנצטרך להתקשר / משתמשים בשיטת POST. התכונות של החדש אתר משתמש רשומה תתווסף בגוף הבקשה כאובייקט JSON:

{name: "Bryan", דוא"ל: "[דוא"ל מוגן]"}

אם אין שגיאות, כתובת אתר זו מחזירה קוד סטטוס 201 נוצר.

אם אנו רוצים לעדכן את התכונות של ה- אתר משתמש לרשום, עלינו להתקשר לכתובת האתר / משתמשים / {UserID} בשיטת PATCH וגוף בקשה המכיל את הערכים החדשים:

{name: "Bryan", דוא"ל: "[email protected]"}

למחיקת א אתר משתמש אנו יכולים להתקשר לכתובת האתר / משתמשים / {UserID} בשיטת DELETE. אם אין שגיאות, זה מחזיר את קוד המצב 204 ללא תוכן.

2.3. תצורת MVC

נוסיף גם תצורת MVC בסיסית להצגת קבצי HTML ביישום שלנו:

@Configuration @EnableWebMvc מחלקה ציבורית MvcConfig מיישם את WebMvcConfigurer {public MvcConfig () {super (); } @Override public void configureDefaultServletHandling (תצורת תצורת DefaultServletHandlerConfigurer) {configurer.enable (); }}

2.4. מתיר בקשות מקור מוצלב

אם אנחנו רוצים לפרוס את AngularJS יישום חזיתי בנפרד מאשר ה- REST API - אז עלינו לאפשר בקשות מקוריות.

Spring Data REST הוסיף תמיכה לכך החל מגרסה 1.5.0. שחרור. כדי לאפשר בקשות מתחום אחר, כל שעליך לעשות הוא להוסיף את ה- @ CrossOrigin ביאור למאגר:

@CrossOrigin @RepositoryRestResource (collectionResourceRel = "משתמשים", path = "משתמשים") ממשק ציבורי UserRepository מרחיב את CrudRepository {}

כתוצאה מכך, על כל תגובה מנקודות הקצה של REST, כותרת של בקרת גישה-אפשר-מקור הוא יוסף.

3. יצירת לקוח AngularJS

לשם יצירת הקצה הקדמי של יישום ה- CRUD, נשתמש AngularJS - מסגרת JavaScript ידועה המקלה על יצירת יישומי חזית.

על מנת להשתמש AngularJSראשית עלינו לכלול את ה- angular.min.js קובץ בדף ה- html שלנו שייקרא משתמשים.html:

לאחר מכן עלינו ליצור מודול זוויתי, בקר ושירות שיתקשר לנקודות הקצה של REST ויציג את הנתונים שהוחזרו.

אלה ימוקמו בקובץ JavaScript בשם app.js שצריך לכלול גם את ה- משתמשים.html עמוד:

3.1. שירות זוויתי

ראשית, בואו ניצור שירות Angular שנקרא שירות UserCRUDS שיעשה שימוש במוזרקים AngularJS$ http שירות לביצוע שיחות לשרת. כל שיחה תתבצע בשיטה נפרדת.

בואו נסתכל על הגדרת השיטה לאחזור משתמש על ידי זיהוי באמצעות / משתמשים / {userID} נקודת סיום:

app.service ('UserCRUDService', ['$ http', פונקציה ($ http) {this.getUser = פונקציה getUser (userId) {החזר $ http ({שיטה: 'GET', url: 'users /' + userId} );}}]);

לאחר מכן, בואו נגדיר את הוסף משתמש שיטה אשר מגישה בקשת POST למערכת / משתמשים URL ושולח את ערכי המשתמש ב- נתונים תְכוּנָה:

this.addUser = פונקציה addUser (שם, דוא"ל) {החזר $ http ({שיטה: 'POST', url: 'משתמשים', נתונים: {name: name, דוא"ל: דוא"ל}}); }

ה updateUser השיטה דומה לזו שלמעלה, אלא שתהיה לה תְעוּדַת זֶהוּת פרמטר ומגיש בקשת תיקון:

this.updateUser = פונקציית updateUser (מזהה, שם, דוא"ל) {החזר $ http ({שיטה: 'תיקון', url: 'משתמשים /' + מזהה, נתונים: {שם: שם, דוא"ל: דוא"ל}}); }

השיטה למחיקת א אתר משתמש הרשומה תגיש בקשה למחוק:

this.deleteUser = פונקציה deleteUser (id) {להחזיר $ http ({method: 'DELETE', url: 'users /' + id})}

ולסיום, בואו נסתכל על השיטות לאחזור כל רשימת המשתמשים:

this.getAllUsers = פונקציה getAllUsers () {החזר $ http ({שיטה: 'GET', url: 'משתמשים'}); }

כל שיטות השירות הללו ייקראו על ידי AngularJS בקר.

3.2. בקר זוויתי

ניצור UserCRUDCtrlAngularJS בקר שיהיה לו שירות UserCRUDS מוזרק וישתמש בשיטות השירות כדי להשיג את התגובה מהשרת, לטפל ב- הַצלָחָה ו שְׁגִיאָה מקרים, ולהגדיר היקף $ משתנים המכילים את נתוני התגובה להצגתם בדף ה- HTML.

בואו נסתכל על ה- getUser () פונקציה המכנה את getUser (userId) פונקציית שירות ומגדירה שתי שיטות החזרה למקרה במקרה של הצלחה ושגיאה. אם בקשת השרת מצליחה, התגובה נשמרת ב- מִשׁתַמֵשׁ מִשְׁתַנֶה; אחרת, מטפלים בהודעות שגיאה:

app.controller ('UserCRUDCtrl', ['$ scope', 'UserCRUDService', פונקציה ($ scope, UserCRUDService) {$ scope.getUser = פונקציה () {var id = $ scope.user.id; UserCRUDService.getUser ($ scope.user.id). ואז (הצלחה בפונקציה (תגובה) {$ scope.user = respons.data; $ scope.user.id = id; $ scope.message = ''; $ scope.errorMessage = '';} , שגיאת פונקציה (תגובה) {$ scope.message = ''; אם (response.status === 404) {$ scope.errorMessage = 'המשתמש לא נמצא!';} אחר {$ scope.errorMessage = "שגיאה בקבלת המשתמש ! ";}});};}]);

ה הוסף משתמש() פונקציה תתקשר לפונקציית השירות המתאימה ותטפל בתגובה:

$ scope.addUser = פונקציה () {if ($ scope.user! = null && $ scope.user.name) {UserCRUDService.addUser ($ scope.user.name, $ scope.user.email). ואז (הצלחה בפונקציה (תגובה) {$ scope.message = 'המשתמש הוסיף!'; $ scope.errorMessage = '';}, שגיאת פונקציה (תגובה) {$ scope.errorMessage = 'שגיאה בהוספת משתמש!'; $ scope.message = '' ;}); } אחר {$ scope.errorMessage = 'אנא הזן שם!'; $ scope.message = "; }}

ה updateUser () ו מחק משתמש() הפונקציות דומות לזו שלמעלה:

$ scope.updateUser = פונקציה () {UserCRUDService.updateUser ($ scope.user.id, $ scope.user.name, $ scope.user.email). ואז (פונקציית הצלחה (תגובה) {$ scope.message = 'משתמש הנתונים עודכנו! '; $ scope.errorMessage =' ';}, שגיאת פונקציה (תגובה) {$ scope.errorMessage =' שגיאה בעדכון המשתמש! '; $ scope.message =' ';}); } $ scope.deleteUser = פונקציה () {UserCRUDService.deleteUser ($ scope.user.id). ואז (פונקציית הצלחה (תגובה) {$ scope.message = 'משתמש נמחק!'; $ scope.User = null; $ scope .errorMessage = '';}, שגיאת פונקציה (תגובה) {$ scope.errorMessage = 'שגיאה במחיקת משתמש!'; $ scope.message = '';}); }

ולבסוף, בואו נגדיר את הפונקציה השואבת רשימת משתמשים, ונשמור אותה ב- משתמשים מִשְׁתַנֶה:

$ scope.getAllUsers = פונקציה () {UserCRUDService.getAllUsers (). ואז (הצלחה בפונקציה (תגובה) {$ scope.users = respons.data._embedded.users; $ scope.message = ''; $ scope.errorMessage = ' ';}, שגיאת פונקציה (תגובה) {$ scope.message =' '; $ scope.errorMessage =' שגיאה בהשגת משתמשים! ';}); }

3.3. דף HTML

ה משתמשים.html העמוד יעשה שימוש בפונקציות הבקר שהוגדרו בסעיף הקודם ובמשתנים המאוחסנים.

ראשית, על מנת להשתמש במודול הזוויתי, עלינו להגדיר את ה- אפליקציה ng תכונה:

ואז, כדי להימנע מהקלדה UserCRUDCtrl.getUser () בכל פעם שאנחנו משתמשים בפונקציה של הבקר, אנחנו יכולים לעטוף את אלמנטים ה- HTML שלנו ב- div עם ng-controller ערכת נכס:

בואו ניצור אתטופס שיכניס ויציג את הערכים עבור ה- WebiteUser אובייקט שאנחנו רוצים לתפעל. לכל אחד מאלה יהיה מודל ng ערכת תכונות, הקושרת אותה לערך התכונה:

תְעוּדַת זֶהוּת:
שֵׁם:
גיל:

מחייב את תְעוּדַת זֶהוּת קלט ל תעודת זהות של משתמש משתנה, למשל, פירושו שבכל פעם שמשנים את ערך הקלט, ערך זה מוגדר ב- תעודת זהות של משתמש משתנה ולהיפך.

לאחר מכן, בואו נשתמש ב- נג לחץ תכונה להגדרת הקישורים שיפעילו את הפעלת כל פונקציית בקר CRUD שהוגדרה:

קבל משתמש עדכון משתמש הוסף משתמש מחק משתמש

לבסוף, בואו נציג את רשימת המשתמשים לחלוטין ולפי שם:

קבל את כל המשתמשים
{{usr.name}} {{usr.email}}

4. מסקנה

במדריך זה הראינו כיצד ניתן ליצור יישום CRUD באמצעות AngularJS וה נתוני האביב REST מִפרָט.

את הקוד השלם לדוגמא לעיל ניתן למצוא בפרויקט GitHub.

כדי להפעיל את היישום, אתה יכול להשתמש בפקודה קפיץ אתחול mvn: לרוץ וגש לכתובת האתר /users.html.