Đây là một ứng dụng CRUD đơn giản được xây dựng bằng MEAN (MongoDB, Express, Angular, Node. js) ngăn xếp. Bạn cũng có thể làm theo hướng dẫn từng bước để xây dựng ứng dụng này Show
 Làm thế nào để chạyĐặt chuỗi kết nối URI Atlas của bạn làm tham số trong ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),1. Đảm bảo bạn thay thế phần giữ chỗ tên người dùng và mật khẩu bằng thông tin đăng nhập của riêng bạn Ứng dụng này được tạo bằng JHipster 7. 9. 3, bạn có thể tìm tài liệu và trợ giúp tại https. //www. jhipster. công nghệ/tài liệu lưu trữ/v7. 9. 3 Cấu trúc dự ánCần có nút để tạo và được đề xuất để phát triển. ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),3 luôn được tạo để có trải nghiệm phát triển tốt hơn với các hook cam kết, tập lệnh đẹp hơn, v.v. Trong thư mục gốc của dự án, JHipster tạo các tệp cấu hình cho các công cụ như git, prettier, eslint, husky và các công cụ khác nổi tiếng và bạn có thể tìm tài liệu tham khảo trên web Cấu trúc ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),4 tuân theo cấu trúc Java mặc định
Phát triểnTrước khi bạn có thể xây dựng dự án này, bạn phải cài đặt và định cấu hình các phụ thuộc sau trên máy của mình
Sau khi cài đặt Node, bạn sẽ có thể chạy lệnh sau để cài đặt các công cụ phát triển. Bạn sẽ chỉ cần chạy lệnh này khi các phụ thuộc thay đổi trong gói. json ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),3 Chúng tôi sử dụng tập lệnh npm và CLI góc với Webpack làm hệ thống xây dựng của chúng tôi Chạy các lệnh sau trong hai thiết bị đầu cuối riêng biệt để tạo trải nghiệm phát triển thú vị khi trình duyệt của bạn tự động làm mới khi tệp thay đổi trên ổ cứng của bạn ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),4 Npm cũng được sử dụng để quản lý các phụ thuộc CSS và JavaScript được sử dụng trong ứng dụng này. Bạn có thể nâng cấp các phụ thuộc bằng cách chỉ định phiên bản mới hơn trong gói. json. Bạn cũng có thể chạy Lệnh ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),90 sẽ liệt kê tất cả các tập lệnh có sẵn để chạy cho dự án này Hỗ trợ PWAJHipster cung cấp hỗ trợ PWA (Ứng dụng web lũy tiến) và nó bị tắt theo mặc định. Một trong những thành phần chính của PWA là nhân viên dịch vụ Mã khởi tạo nhân viên dịch vụ bị tắt theo mặc định. Để kích hoạt nó, hãy bỏ ghi chú đoạn mã sau trong ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),91 ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }), Quản lý phụ thuộcVí dụ: để thêm thư viện Tờ rơi làm phụ thuộc thời gian chạy ứng dụng của bạn, bạn sẽ chạy lệnh sau Để hưởng lợi từ các định nghĩa kiểu TypeScript từ kho lưu trữ DefiniteTyped đang được phát triển, bạn sẽ chạy lệnh sau ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),9 Sau đó, bạn sẽ nhập các tệp JS và CSS được chỉ định trong hướng dẫn cài đặt của thư viện để Webpack biết về chúng. Chỉnh sửa src/main/webapp/ứng dụng/ứng dụng. mô-đun. tập tin ts ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),4 Chỉnh sửa src/main/webapp/content/scss/vendor. tập tin scss ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),5 Ghi chú. Vẫn còn một số việc khác cần làm cho Tờ rơi mà chúng tôi sẽ không trình bày chi tiết ở đây Để biết thêm hướng dẫn về cách phát triển với JHipster, hãy xem Sử dụng JHipster trong quá trình phát triển Sử dụng CLI gócBạn cũng có thể sử dụng Angular CLI để tạo một số mã máy khách tùy chỉnh Ví dụ, lệnh sau ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),6 sẽ tạo ra vài tập tin ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),7 Trung tâm điều khiển JHipsterTrung tâm điều khiển JHipster có thể giúp bạn quản lý và kiểm soát (các) ứng dụng của mình. Bạn có thể khởi động máy chủ trung tâm điều khiển cục bộ (có thể truy cập trên http. //máy chủ cục bộ. 7419) với ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),8 Xây dựng cho sản xuấtĐóng gói dạng hũĐể xây dựng jar cuối cùng và tối ưu hóa ứng dụng jhipsterMongodbSampleApplication cho sản xuất, hãy chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),40 Điều này sẽ nối và thu nhỏ các tệp CSS và JavaScript của máy khách. Nó cũng sẽ sửa đổi ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),92 để nó tham chiếu các tệp mới này. Để đảm bảo mọi thứ hoạt động, hãy chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),41 Sau đó điều hướng đến http. //máy chủ cục bộ. 8080 trong trình duyệt của bạn Tham khảo Sử dụng JHipster trong sản xuất để biết thêm chi tiết Bao bì như chiến tranhĐể đóng gói ứng dụng của bạn dưới dạng chiến tranh để triển khai ứng dụng đó tới máy chủ ứng dụng, hãy chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),42 thử nghiệmĐể chạy thử nghiệm ứng dụng của bạn, hãy chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),43 kiểm tra khách hàngCác bài kiểm tra đơn vị được điều hành bởi Jest. Chúng nằm trong src/test/javascript/ và có thể chạy với ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),44 Các thử nghiệm từ đầu đến cuối giao diện người dùng được cung cấp bởi Cypress. Chúng nằm trong src/test/javascript/cypress và có thể được chạy bằng cách khởi động Spring Boot trong một thiết bị đầu cuối ( ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),93) và chạy thử nghiệm ( ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),94) trong thiết bị đầu cuối thứ hai kiểm toán ngọn hải đăngBạn có thể thực hiện [kiểm tra ngọn hải đăng] tự động [https. // nhà phát triển. Google. com/web/tools/lighthouse/] với [kiểm toán cây bách] [https. //github. com/mfrachet/cypress-audit] bằng cách chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),95. Bạn chỉ nên chạy kiểm tra khi ứng dụng của bạn được đóng gói với hồ sơ sản xuất. Báo cáo về ngọn hải đăng được tạo vào năm 196 các bài kiểm tra khácCác bài kiểm tra hiệu suất được điều hành bởi Gatling và được viết bằng Scala. Chúng nằm trong src/test/gatling Để sử dụng các bài kiểm tra đó, bạn phải cài đặt Gatling từ https. // gatling. io/ Để biết thêm thông tin, hãy tham khảo trang Chạy thử nghiệm chất lượng mãSonar được sử dụng để phân tích chất lượng mã. Bạn có thể khởi động máy chủ Sonar cục bộ (có thể truy cập trên http. //máy chủ cục bộ. 9001) với ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),45 Ghi chú. chúng tôi đã tắt xác thực trong src/main/docker/sonar. yml để có trải nghiệm vượt trội khi dùng thử SonarQube, đối với các trường hợp sử dụng thực tế, hãy bật lại Bạn có thể chạy phân tích Sonar bằng cách sử dụng sonar-scanner hoặc bằng cách sử dụng plugin maven Sau đó, chạy phân tích Sonar ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),46 Nếu bạn cần chạy lại giai đoạn Sonar, vui lòng đảm bảo chỉ định ít nhất giai đoạn ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),97 vì các thuộc tính Sonar được tải từ sonar-project. tệp thuộc tính ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),47 Để biết thêm thông tin, hãy tham khảo trang Chất lượng mã Sử dụng Docker để đơn giản hóa quá trình phát triển (tùy chọn)Bạn có thể sử dụng Docker để cải thiện trải nghiệm phát triển JHipster của mình. Một số cấu hình docker-compose có sẵn trong thư mục src/main/docker để khởi chạy các dịch vụ bên thứ ba cần thiết Ví dụ: để bắt đầu cơ sở dữ liệu mongodb trong bộ chứa docker, hãy chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),48 Để dừng nó và xóa vùng chứa, hãy chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),49 Bạn cũng có thể cập bến hoàn toàn ứng dụng của mình và tất cả các dịch vụ mà nó phụ thuộc vào. Để đạt được điều này, trước tiên hãy tạo hình ảnh docker cho ứng dụng của bạn bằng cách chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),0 Hoặc xây dựng hình ảnh docker arm64 khi sử dụng hệ điều hành bộ xử lý arm64 như MacOS với họ bộ xử lý M1 đang chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),1 Sau đó chạy ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),2 Khi chạy Docker Desktop trên MacOS Big Sur trở lên, hãy cân nhắc bật ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),98 thử nghiệm để có hiệu suất xử lý tốt hơn (hiệu suất truy cập đĩa kém hơn) Để biết thêm thông tin, hãy tham khảo Sử dụng Docker và Docker-Compose, trang này cũng chứa thông tin về trình tạo phụ docker-compose ( ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),99), có thể tạo cấu hình docker cho một hoặc một số ứng dụng JHipster Tích hợp liên tục (tùy chọn)Để định cấu hình CI cho dự án của bạn, hãy chạy trình tạo phụ ci-cd ( ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),40), điều này sẽ cho phép bạn tạo các tệp cấu hình cho một số hệ thống Tích hợp liên tục. Tham khảo trang Thiết lập tích hợp liên tục để biết thêm thông tin |
