Merge branch 'master'
@@ -0,0 +1,25 @@
|
||||
module.exports = {
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
project: 'tsconfig.json',
|
||||
tsconfigRootDir: __dirname,
|
||||
sourceType: 'module',
|
||||
},
|
||||
plugins: ['@typescript-eslint/eslint-plugin'],
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
jest: true,
|
||||
},
|
||||
ignorePatterns: ['.eslintrc.js'],
|
||||
rules: {
|
||||
'@typescript-eslint/interface-name-prefix': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.hbs"],
|
||||
"options": {
|
||||
"parser": "html",
|
||||
"htmlWhitespaceSensitivity": "css",
|
||||
"singleQuote": false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,3 +1,69 @@
|
||||
# cats-gallery
|
||||
# Galeria kotów - Aplikacja MVC w NestJS
|
||||
|
||||
Cats gallery app written in Nestjs with MVC design pattern
|
||||
## Autor
|
||||
Igor Barcik
|
||||
|
||||
## Opis Aplikacji
|
||||
Galeria kotów to aplikacja webowa zbudowana w NestJS, wykorzystująca wzorzec projektowy MVC (Model-View-Controller). Aplikacja służy do przeglądania kolekcją zdjęć kotów.
|
||||
|
||||
### Dla kogo?
|
||||
- Miłośników kotów
|
||||
- Osób chcących przeglądać zdjęcia kotów
|
||||
|
||||
## Implementacja MVC w Aplikacji
|
||||
|
||||
### Model
|
||||
Reprezentacja danych i logiki biznesowej w `cats.service.ts`:
|
||||
|
||||
```ts
|
||||
@Injectable()
|
||||
export class CatsService {
|
||||
// Logika biznesowa związana z kotami
|
||||
// Operacje na danych
|
||||
}
|
||||
```
|
||||
|
||||
### View
|
||||
Widoki są renderowane przy użyciu silnika Handlebars (hbs):
|
||||
```ts
|
||||
const app = await NestFactory.create<NestExpressApplication>(AppModule);
|
||||
app.setViewEngine('hbs');
|
||||
```
|
||||
|
||||
### Controller
|
||||
Kontrolery obsługujące żądania HTTP w `cats.controller.ts`:
|
||||
|
||||
```ts
|
||||
@Controller('cats')
|
||||
export class CatsController {
|
||||
constructor(
|
||||
private readonly catsService: CatsService,
|
||||
private readonly navigationService: NavigationService,
|
||||
) {}
|
||||
|
||||
@Get()
|
||||
@Render('cats')
|
||||
async getCats() {
|
||||
// Logika kontrolera
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Struktura Projektu
|
||||
```
|
||||
src/
|
||||
├── cats/
|
||||
│ ├── cats.controller.ts # Kontroler obsługujący endpointy
|
||||
│ ├── cats.service.ts # Serwis zawierający logikę biznesową
|
||||
│ └── cats.module.ts # Moduł kotów
|
||||
├── views/ # Szablony widoków
|
||||
└── app.module.ts # Główny moduł aplikacji
|
||||
```
|
||||
|
||||
## Uruchomienie Aplikacji
|
||||
|
||||
Instalacja zależności:
|
||||
`pnpm install`
|
||||
|
||||
Uruchomienie w trybie developerskim:
|
||||
`pnpm run start:dev`
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/nest-cli",
|
||||
"collection": "@nestjs/schematics",
|
||||
"sourceRoot": "src",
|
||||
"compilerOptions": {
|
||||
"deleteOutDir": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"name": "mvc-app-nestjs",
|
||||
"version": "1.0",
|
||||
"description": "Simple cats gallery app built with NestJS",
|
||||
"author": "Igor Barcik",
|
||||
"private": true,
|
||||
"license": "UNLICENSED",
|
||||
"scripts": {
|
||||
"build": "nest build",
|
||||
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
|
||||
"start": "nest start",
|
||||
"start:dev": "nest start --watch",
|
||||
"start:debug": "nest start --debug --watch",
|
||||
"start:prod": "node dist/main",
|
||||
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch",
|
||||
"test:cov": "jest --coverage",
|
||||
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
|
||||
"test:e2e": "jest --config ./test/jest-e2e.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nestjs/common": "^10.0.0",
|
||||
"@nestjs/core": "^10.0.0",
|
||||
"@nestjs/platform-express": "^10.0.0",
|
||||
"@types/hbs": "^4.0.4",
|
||||
"hbs": "^4.2.0",
|
||||
"reflect-metadata": "^0.2.0",
|
||||
"rxjs": "^7.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nestjs/cli": "^10.0.0",
|
||||
"@nestjs/schematics": "^10.0.0",
|
||||
"@nestjs/testing": "^10.0.0",
|
||||
"@types/express": "^5.0.0",
|
||||
"@types/jest": "^29.5.2",
|
||||
"@types/node": "^20.3.1",
|
||||
"@types/supertest": "^6.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
||||
"@typescript-eslint/parser": "^8.0.0",
|
||||
"eslint": "^8.0.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-prettier": "^5.0.0",
|
||||
"jest": "^29.5.0",
|
||||
"prettier": "^3.3.3",
|
||||
"source-map-support": "^0.5.21",
|
||||
"supertest": "^7.0.0",
|
||||
"ts-jest": "^29.1.0",
|
||||
"ts-loader": "^9.4.3",
|
||||
"ts-node": "^10.9.1",
|
||||
"tsconfig-paths": "^4.2.0",
|
||||
"typescript": "^5.1.3"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"json",
|
||||
"ts"
|
||||
],
|
||||
"rootDir": "src",
|
||||
"testRegex": ".*\\.spec\\.ts$",
|
||||
"transform": {
|
||||
"^.+\\.(t|j)s$": "ts-jest"
|
||||
},
|
||||
"collectCoverageFrom": [
|
||||
"**/*.(t|j)s"
|
||||
],
|
||||
"coverageDirectory": "../coverage",
|
||||
"testEnvironment": "node"
|
||||
},
|
||||
"packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
|
||||
}
|
||||
|
After Width: | Height: | Size: 760 KiB |
|
After Width: | Height: | Size: 8.4 MiB |
|
After Width: | Height: | Size: 3.8 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 2.6 MiB |
|
After Width: | Height: | Size: 3.6 MiB |
|
After Width: | Height: | Size: 6.1 MiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 2.9 MiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 3.6 MiB |
|
After Width: | Height: | Size: 6.4 MiB |
|
After Width: | Height: | Size: 4.1 MiB |
@@ -0,0 +1,22 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { AppController } from './app.controller';
|
||||
import { AppService } from './app.service';
|
||||
|
||||
describe('AppController', () => {
|
||||
let appController: AppController;
|
||||
|
||||
beforeEach(async () => {
|
||||
const app: TestingModule = await Test.createTestingModule({
|
||||
controllers: [AppController],
|
||||
providers: [AppService],
|
||||
}).compile();
|
||||
|
||||
appController = app.get<AppController>(AppController);
|
||||
});
|
||||
|
||||
describe('root', () => {
|
||||
it('should return "Hello World!"', () => {
|
||||
expect(appController.getHello()).toBe('Hello World!');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Controller, Get, Render, Req } from '@nestjs/common';
|
||||
import { Request } from 'express';
|
||||
import { AppService } from './app.service';
|
||||
import { NavigationService } from './navigation/navigation.service';
|
||||
|
||||
@Controller()
|
||||
export class AppController {
|
||||
constructor(
|
||||
private readonly appService: AppService,
|
||||
private readonly navigationService: NavigationService,
|
||||
) {}
|
||||
|
||||
@Get()
|
||||
@Render('index')
|
||||
root(@Req() request: Request) {
|
||||
return {
|
||||
navItems: this.navigationService.getNavigationItems(request.path),
|
||||
message: this.appService.getHello(),
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { DiscoveryModule } from '@nestjs/core';
|
||||
import { AppController } from './app.controller';
|
||||
import { AppService } from './app.service';
|
||||
import { CatsController } from './cats/cats.controller';
|
||||
import { CatsService } from './cats/cats.service';
|
||||
import { NavigationService } from './navigation/navigation.service';
|
||||
|
||||
@Module({
|
||||
imports: [DiscoveryModule],
|
||||
controllers: [AppController, CatsController],
|
||||
providers: [AppService, CatsService, NavigationService],
|
||||
})
|
||||
export class AppModule {}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { Injectable } from '@nestjs/common';
|
||||
|
||||
@Injectable()
|
||||
export class AppService {
|
||||
getHello(): string {
|
||||
return 'Hello World!';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { CatsController } from './cats.controller';
|
||||
|
||||
describe('CatsController', () => {
|
||||
let controller: CatsController;
|
||||
|
||||
beforeEach(async () => {
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
controllers: [CatsController],
|
||||
}).compile();
|
||||
|
||||
controller = module.get<CatsController>(CatsController);
|
||||
});
|
||||
|
||||
it('should be defined', () => {
|
||||
expect(controller).toBeDefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Controller, Get, Render, Req } from '@nestjs/common';
|
||||
import { Request } from 'express';
|
||||
import { NavigationService } from 'src/navigation/navigation.service';
|
||||
import { CatsService } from './cats.service';
|
||||
|
||||
@Controller('cats')
|
||||
export class CatsController {
|
||||
constructor(
|
||||
private readonly catsService: CatsService,
|
||||
private readonly navigationService: NavigationService,
|
||||
) {}
|
||||
|
||||
@Get()
|
||||
@Render('cats')
|
||||
getGallery(@Req() request: Request) {
|
||||
const images = this.catsService.findAll();
|
||||
return {
|
||||
navItems: this.navigationService.getNavigationItems(request.path),
|
||||
images,
|
||||
message: 'Cats Gallery',
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { CatsService } from './cats.service';
|
||||
|
||||
describe('CatsService', () => {
|
||||
let service: CatsService;
|
||||
|
||||
beforeEach(async () => {
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
providers: [CatsService],
|
||||
}).compile();
|
||||
|
||||
service = module.get<CatsService>(CatsService);
|
||||
});
|
||||
|
||||
it('should be defined', () => {
|
||||
expect(service).toBeDefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Injectable } from '@nestjs/common';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
@Injectable()
|
||||
export class CatsService {
|
||||
private readonly imagesPath = path.join(
|
||||
process.cwd(),
|
||||
'public',
|
||||
'assets',
|
||||
'images',
|
||||
'cats',
|
||||
);
|
||||
|
||||
findAll(): string[] {
|
||||
const files = fs.readdirSync(this.imagesPath);
|
||||
const shuffled = [...files].sort(() => 0.5 - Math.random());
|
||||
return shuffled.map((file) => `/assets/images/cats/${file}`);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { NestFactory } from '@nestjs/core';
|
||||
import { NestExpressApplication } from '@nestjs/platform-express';
|
||||
import { join } from 'path';
|
||||
import { AppModule } from './app.module';
|
||||
import * as hbs from 'hbs';
|
||||
|
||||
async function bootstrap() {
|
||||
const app = await NestFactory.create<NestExpressApplication>(AppModule);
|
||||
|
||||
app.useStaticAssets(join(__dirname, '..', 'public'));
|
||||
app.setBaseViewsDir(join(__dirname, '..', 'views'));
|
||||
app.setViewEngine('hbs');
|
||||
|
||||
hbs.registerPartials(join(__dirname, '..', 'views', 'partials'));
|
||||
|
||||
await app.listen(3000);
|
||||
}
|
||||
bootstrap();
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { NavigationService } from './navigation.service';
|
||||
|
||||
describe('NavigationService', () => {
|
||||
let service: NavigationService;
|
||||
|
||||
beforeEach(async () => {
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
providers: [NavigationService],
|
||||
}).compile();
|
||||
|
||||
service = module.get<NavigationService>(NavigationService);
|
||||
});
|
||||
|
||||
it('should be defined', () => {
|
||||
expect(service).toBeDefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Injectable } from '@nestjs/common';
|
||||
import { DiscoveryService, MetadataScanner, Reflector } from '@nestjs/core';
|
||||
|
||||
export interface NavItem {
|
||||
path: string;
|
||||
label: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class NavigationService {
|
||||
constructor(
|
||||
private readonly discovery: DiscoveryService,
|
||||
private readonly metadataScanner: MetadataScanner,
|
||||
private readonly reflector: Reflector,
|
||||
) {}
|
||||
|
||||
private isGetMethod(handler: (...args: any[]) => any): boolean {
|
||||
return Reflect.getMetadata('method', handler) === 'GET';
|
||||
}
|
||||
|
||||
getNavigationItems(currentPath: string = '/'): NavItem[] {
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
path: '/',
|
||||
label: 'Home',
|
||||
active: currentPath === '/',
|
||||
},
|
||||
{
|
||||
path: '/cats',
|
||||
label: 'Cats',
|
||||
active: currentPath === '/cats',
|
||||
},
|
||||
];
|
||||
|
||||
return navItems;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { INestApplication } from '@nestjs/common';
|
||||
import * as request from 'supertest';
|
||||
import { AppModule } from './../src/app.module';
|
||||
|
||||
describe('AppController (e2e)', () => {
|
||||
let app: INestApplication;
|
||||
|
||||
beforeEach(async () => {
|
||||
const moduleFixture: TestingModule = await Test.createTestingModule({
|
||||
imports: [AppModule],
|
||||
}).compile();
|
||||
|
||||
app = moduleFixture.createNestApplication();
|
||||
await app.init();
|
||||
});
|
||||
|
||||
it('/ (GET)', () => {
|
||||
return request(app.getHttpServer())
|
||||
.get('/')
|
||||
.expect(200)
|
||||
.expect('Hello World!');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"moduleFileExtensions": ["js", "json", "ts"],
|
||||
"rootDir": ".",
|
||||
"testEnvironment": "node",
|
||||
"testRegex": ".e2e-spec.ts$",
|
||||
"transform": {
|
||||
"^.+\\.(t|j)s$": "ts-jest"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"removeComments": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"target": "ES2021",
|
||||
"sourceMap": true,
|
||||
"outDir": "./dist",
|
||||
"baseUrl": "./",
|
||||
"incremental": true,
|
||||
"skipLibCheck": true,
|
||||
"strictNullChecks": false,
|
||||
"noImplicitAny": false,
|
||||
"strictBindCallApply": false,
|
||||
"forceConsistentCasingInFileNames": false,
|
||||
"noFallthroughCasesInSwitch": false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<h1>{{message}}</h1>
|
||||
<div class="container">
|
||||
<div class="gallery">
|
||||
{{#each images}}
|
||||
<div class="gallery-item">
|
||||
<img src="{{this}}" alt="Cat Image" />
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
.gallery-item {
|
||||
height: 300px;
|
||||
flex-grow: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
img:hover {
|
||||
transform: scale(1.1);
|
||||
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
|
||||
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10pt;
|
||||
vertical-align: bottom;
|
||||
transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
user-select: none;
|
||||
}
|
||||
img:active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
translate: translate(-50%, -50%);
|
||||
transform: scale(1);
|
||||
z-index: 1000;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
filter: drop-shadow(0 0 40px rgba(0, 0, 0, 1));
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
<h1>{{message}}</h1>
|
||||
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>NestJS MVC</title>
|
||||
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
|
||||
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.istanbul.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> navbar}}
|
||||
<div class="container mt-4">
|
||||
{{{body}}}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
<nav>
|
||||
<menu>
|
||||
{{#each navItems}}
|
||||
<li class="{{#if active}}selected{{/if}}">
|
||||
<a href="{{this.path}}">{{this.label}}</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</menu>
|
||||
</nav>
|
||||