ผู้จัดการพนักงาน

ระบบการจัดการที่ใช้ Angular เวอร์ชัน 8 สำหรับ UI ส่วนหน้าและ Asp.Net Core สำหรับ Api เว็บส่วนหลัง

ขอบเขต

นี่เป็นโครงการเพื่อแสดงแนวคิดที่ขยายไปสู่โครงการขนาดใหญ่ เป็นระบบบริหารจัดการพนักงานพร้อมการตรวจสอบแบบฟอร์มโดยใช้ Angular และ ASP.Net Core แนวคิดคือการทำความคุ้นเคยและรวมเฟรมเวิร์ก JavaScript ยอดนิยมเข้ากับ C#/ASP.Net Core ในขณะเดียวกันก็จัดเตรียมการกำหนดเวอร์ชัน Api การทดสอบจุดสิ้นสุดของคอนโทรลเลอร์ และการตั้งค่าการทดสอบการรวมสำหรับการใช้งานฟีเจอร์ในอนาคต

การใช้วัตถุการถ่ายโอนข้อมูล (Dtos) โดยใช้ Auto Mapper ปกป้องและแมปคลาสเอนทิตีดั้งเดิมที่พบในไดเร็กทอรี DataEntities ของ Api กับคลาสสำหรับงานเฉพาะ เช่น ดึงข้อมูล สร้าง และแก้ไข

ภาพหน้าจอ

สแต็คการพัฒนา

แอปพลิเคชันถูกสร้างขึ้นโดยใช้เครื่องมือและกรอบงานต่อไปนี้:

C#/ASP.Net Core 2.2
เวอร์ชันเชิงมุม 8.3
บูทสแตรป 4
SQL Server หรือฐานข้อมูล PostgreSQL (กำหนดค่าได้ง่ายในคลาส DbContext)

การทดสอบจุดสิ้นสุดในตัว

โปรเจ็กต์ประกอบด้วยการทดสอบจุดสิ้นสุด Api ในตัวโดยใช้ Swagger นี่เป็นการตั้งค่าในคลาส Startup.cs ทั้งใน Configure services และ IConfiguration ที่จะใช้เมื่อเริ่มต้นระบบ หลังจากเปิดตัวโปรเจ็กต์ในสภาพแวดล้อมท้องถิ่น ให้ไปที่ https://localhost:5001/swagger เพื่อดูหน้าดัชนีการทดสอบ

ภาพหน้าจอ

ตั้งค่า

ในการทดสอบ/ใช้งานแอปพลิเคชันนี้ คุณจะต้องมีสิ่งต่อไปนี้:

Asp.Net Core 2.0 SDK ควรเป็น 2.2.1
Node.js เวอร์ชัน 8 ขึ้นไป
CLI เชิงมุม
Microsoft SQL Server หรือ pgAdmin สำหรับ PostgreSQL

การติดตั้ง

คว้าพื้นที่เก็บข้อมูลโดยการดาวน์โหลดไฟล์ zip หรือโคลนโครงการ

หลังจากโคลนหรือคลายซิปไฟล์แล้ว ให้ไปที่ไดเร็กทอรีที่มีไฟล์โซลูชัน:

 ~ $ cd src/EmployeeManager/

ในลำดับใดลำดับหนึ่ง ให้นำทางไปยังไฟล์ฝั่งไคลเอ็นต์หรือ api/เซิร์ฟเวอร์ และติดตั้งการขึ้นต่อกัน อีกครั้ง คุณจะต้องติดตั้ง Node.js และ npm พร้อมกับ .Net Core 2.2 SDK

สำหรับการพึ่งพาฝั่งไคลเอ็นต์:

 ~ $ cd src/EmployeeManager/client
~ $ npm install

ตรวจสอบให้แน่ใจว่าติดตั้ง @angularcli แล้วเช่นกัน:

 # for Angular
~ $ npm install -g @angular/cli @angular/core

สำหรับโค้ดฝั่งเซิร์ฟเวอร์ ให้สร้างและกู้คืนการขึ้นต่อกันและแพ็คเกจ NuGet:

 ~ $ cd src/EmployeeManager/server/
~ $ dotnet restore

การดำเนินการด้านสิ่งแวดล้อม

หากต้องการรันสภาพแวดล้อมท้องถิ่นบนฝั่งไคลเอ็นต์: ใช้คำสั่งสคริปต์ npm ในกล่องเทอร์มินัล/คำสั่งขณะอยู่ในไดเร็กทอรี ../client :

 # for Angular client
~ $ ng build -options

ซึ่งจะส่งเอาต์พุตไฟล์ JavaScript แบบย่อในไดเร็กทอรี wwwroot ของ API ผ่านทางสคริปต์ angular.json

ในการรันสภาพแวดล้อมท้องถิ่นบนฝั่งเซิร์ฟเวอร์: ใช้เครื่องมือ dotnet เพื่อรันในเทอร์มินัลหรือใช้ Visual Studio เพื่อรันด้วย CTL + F5

ไปที่ localhost:5001 (หรือไปที่ ) ในเบราว์เซอร์เพื่อดูบิลด์ปัจจุบันที่ทำงานอยู่

สิ่งที่ต้องทำ

เพิ่มการอนุญาตและการเข้าสู่ระบบ
เปิดใช้งานการค้นหาตามชื่อพนักงาน

ปัญหาที่ทราบและข้อบกพร่อง

การดำเนินการอัปเดตในคลาสจุดสิ้นสุดของคอนโทรลเลอร์ภายใต้ ApiVersion 2 (เช่น api/v2/endpoint) มีปัญหาในการส่งคำขอที่สำเร็จไปยังเซิร์ฟเวอร์เนื่องจาก AutoMapper ไม่สามารถผูก EmployeeDto กับ EmployeeUpdateDto ได้ ดังนั้นจึงใช้คลาสบริบทแทน ในเวอร์ชัน 1 ภายใต้เส้นทาง /v1/... (ปัญหาได้รับการแก้ไขแล้ว)

ขยาย

ข้อมูลเพิ่มเติม