MVVM паттерн: пошаговое внедрение в веб-разработку, примеры кода

# Установка Vue CLI
npm install -g @vue/cli

# Создание нового проекта
vue create mvvm-project

# Переход в директорию проекта
cd mvvm-project

# Запуск проекта в режиме разработки
npm run serve

mvvm-project/
├── public/
├── src/
│ ├── assets/ # Статические ресурсы
│ ├── components/ # Компоненты Vue (View)
│ ├── models/ # Модели данных (Model)
│ ├── viewmodels/ # ViewModels для связывания
│ ├── services/ # Сервисы для работы с API
│ ├── store/ # Vuex store (также часть Model)
│ ├── router/ # Настройка маршрутизации
│ ├── App.vue # Корневой компонент
│ └── main.js # Точка входа
├── tests/ # Директория для тестов
└── package.json

# Для работы с API
npm install axios

# Для управления формами (опционально)
npm install vee-validate

# Для типизации (опционально, но рекомендуется)
npm install typescript @vue/cli-plugin-typescript

// src/models/User.js
export class User {
constructor(id, name, email, role = 'user') {
this.id = id;
this.name = name;
this.email = email;
this.role = role;
this.createdAt = new Date();
}

isAdmin() {
return this.role === 'admin';
}

getDisplayName() {
return this.name || this.email.split('@')[0];
}
}

// src/viewmodels/UserProfileViewModel.js
import { User } from '../models/User';
import UserService from '../services/UserService';

export default {
data() {
return {
user: null,
isLoading: false,
error: null
};
},

computed: {
displayName() {
return this.user ? this.user.getDisplayName() : 'Guest';
},

canEditProfile() {
return this.user && (this.user.isAdmin() || this.$store.getters.isCurrentUser(this.user.id));
}
},

methods: {
async fetchUserProfile(userId) {
this.isLoading = true;
try {
const userData = await UserService.getUserById(userId);
this.user = new User(userData.id, userData.name, userData.email, userData.role);
this.error = null;
} catch (err) {
this.error = 'Failed to load user profile';
console.error(err);
} finally {
this.isLoading = false;
}
},

async updateProfile(updatedData) {
if (!this.canEditProfile) return;

try {
await UserService.updateUser(this.user.id, updatedData);
Object.assign(this.user, updatedData);
return true;
} catch (err) {
this.error = 'Failed to update profile';
return false;
}
}
}
};

<!-- src/components/UserProfile.vue -->
<template>
<div class="user-profile">
<div v-if="isLoading" class="loader">Loading...</div>

<div v-else-if="error" class="error">{{ error }}</div>

<div v-else-if="user" class="profile-content">
<h1>{{ displayName }}</h1>
<p>Email: {{ user.email }}</p>
<p>Role: {{ user.role }}</p>

<button v-if="canEditProfile" 
@click="showEditForm = true">
Edit Profile
</button>

<edit-form v-if="showEditForm" 
:user="user" 
@update="updateProfile" 
@cancel="showEditForm = false" />
</div>
</div>
</template>

<script>
import UserProfileViewModel from '../viewmodels/UserProfileViewModel';
import EditForm from './EditForm.vue';

export default {
components: { EditForm },
mixins: [UserProfileViewModel],
data() {
return {
showEditForm: false
};
},
created() {
this.fetchUserProfile(this.$route.params.id);
}
};
</script>

// Model
// src/models/Task.js
export class Task {
constructor(id, title, completed = false) {
this.id = id;
this.title = title;
this.completed = completed;
this.createdAt = new Date();
}

toggle() {
this.completed = !this.completed;
return this.completed;
}
}

// src/services/TaskService.js
export default {
getTasks() {
return fetch('/api/tasks').then(res => res.json());
},

addTask(task) {
return fetch('/api/tasks', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(task)
}).then(res => res.json());
},

updateTask(task) {
return fetch(`/api/tasks/${task.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(task)
}).then(res => res.json());
}
};

// ViewModel + View
// src/components/TaskList.vue
<template>
<div class="task-manager">
<h1>Task Manager</h1>

<div v-if="isLoading">Loading tasks...</div>
<div v-else-if="error">{{ error }}</div>

<div v-else>
<div class="new-task">
<input v-model="newTaskTitle" 
@keyup.enter="addTask" 
placeholder="Add new task" />
<button @click="addTask">Add</button>
</div>

<ul class="tasks">
<li v-for="task in tasks" 
:key="task.id" 
:class="{ completed: task.completed }">
<input type="checkbox" 
:checked="task.completed" 
@change="toggleTask(task)" />
<span>{{ task.title }}</span>
</li>
</ul>

<div class="stats">
<p>{{ completedTasksCount }} of {{ tasks.length }} completed</p>
</div>
</div>
</div>
</template>

<script>
import { Task } from '../models/Task';
import TaskService from '../services/TaskService';

export default {
data() {
return {
tasks: [],
newTaskTitle: '',
isLoading: false,
error: null
};
},

computed: {
completedTasksCount() {
return this.tasks.filter(task => task.completed).length;
}
},

methods: {
async fetchTasks() {
this.isLoading = true;
try {
const tasksData = await TaskService.getTasks();
this.tasks = tasksData.map(t => new Task(t.id, t.title, t.completed));
} catch (err) {
this.error = 'Failed to load tasks';
} finally {
this.isLoading = false;
}
},

async addTask() {
if (!this.newTaskTitle.trim()) return;

const newTask = new Task(Date.now(), this.newTaskTitle);

try {
const savedTask = await TaskService.addTask(newTask);
this.tasks.push(new Task(savedTask.id, savedTask.title, savedTask.completed));
this.newTaskTitle = '';
} catch (err) {
this.error = 'Failed to add task';
}
},

async toggleTask(task) {
task.toggle();

try {
await TaskService.updateTask(task);
} catch (err) {
task.toggle(); // Revert on failure
this.error = 'Failed to update task';
}
}
},

created() {
this.fetchTasks();
}
};
</script>

// Model
// src/app/models/task.model.ts
export class Task {
id: number;
title: string;
completed: boolean;
createdAt: Date;

constructor(id: number, title: string, completed: boolean = false) {
this.id = id;
this.title = title;
this.completed = completed;
this.createdAt = new Date();
}

toggle(): boolean {
this.completed = !this.completed;
return this.completed;
}
}

// Service (part of Model layer)
// src/app/services/task.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Task } from '../models/task.model';

@Injectable({
providedIn: 'root'
})
export class TaskService {
private apiUrl = '/api/tasks';

constructor(private http: HttpClient) {}

getTasks(): Observable<Task[]> {
return this.http.get<any[]>(this.apiUrl).pipe(
map(data => data.map(t => new Task(t.id, t.title, t.completed)))
);
}

addTask(task: Task): Observable<Task> {
return this.http.post<any>(this.apiUrl, task).pipe(
map(data => new Task(data.id, data.title, data.completed))
);
}

updateTask(task: Task): Observable<Task> {
return this.http.put<any>(`${this.apiUrl}/${task.id}`, task).pipe(
map(data => new Task(data.id, data.title, data.completed))
);
}
}

// Component (ViewModel + View)
// src/app/components/task-list/task-list.component.ts
import { Component, OnInit } from '@angular/core';
import { Task } from '../../models/task.model';
import { TaskService } from '../../services/task.service';

@Component({
selector: 'app-task-list',
templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent implements OnInit {
tasks: Task[] = [];
newTaskTitle: string = '';
isLoading: boolean = false;
error: string | null = null;

constructor(private taskService: TaskService) {}

ngOnInit(): void {
this.fetchTasks();
}

get completedTasksCount(): number {
return this.tasks.filter(task => task.completed).length;
}

fetchTasks(): void {
this.isLoading = true;
this.taskService.getTasks().subscribe({
next: (tasks) => {
this.tasks = tasks;
this.isLoading = false;
},
error: (err) => {
this.error = 'Failed to load tasks';
this.isLoading = false;
}
});
}

addTask(): void {
if (!this.newTaskTitle.trim()) return;

const newTask = new Task(Date.now(), this.newTaskTitle);

this.taskService.addTask(newTask).subscribe({
next: (task) => {
this.tasks.push(task);
this.newTaskTitle = '';
},
error: (err) => {
this.error = 'Failed to add task';
}
});
}

toggleTask(task: Task): void {
task.toggle();

this.taskService.updateTask(task).subscribe({
error: (err) => {
task.toggle(); // Revert on failure
this.error = 'Failed to update task';
}
});
}
}

// tests/unit/models/Task.spec.js
import { Task } from '@/models/Task';

describe('Task model', () => {
it('creates a task with default values', () => {
const task = new Task(1, 'Test task');

expect(task.id).toBe(1);
expect(task.title).toBe('Test task');
expect(task.completed).toBe(false);
expect(task.createdAt).toBeInstanceOf(Date);
});

it('toggles completion status correctly', () => {
const task = new Task(1, 'Test task');

expect(task.completed).toBe(false);

const result = task.toggle();
expect(result).toBe(true);
expect(task.completed).toBe(true);

task.toggle();
expect(task.completed).toBe(false);
});
});

// tests/unit/viewmodels/TaskListViewModel.spec.js
import { shallowMount, createLocalVue } from '@vue/test-utils';
import TaskList from '@/components/TaskList.vue';
import TaskService from '@/services/TaskService';
import { Task } from '@/models/Task';

// Mock the TaskService
jest.mock('@/services/TaskService', () => ({
getTasks: jest.fn(),
addTask: jest.fn(),
updateTask: jest.fn()
}));

describe('TaskList ViewModel', () => {
let wrapper;

beforeEach(() => {
// Reset mocks
TaskService.getTasks.mockReset();
TaskService.addTask.mockReset();
TaskService.updateTask.mockReset();

// Mock successful API response
TaskService.getTasks.mockResolvedValue([
{ id: 1, title: 'Task 1', completed: false },
{ id: 2, title: 'Task 2', completed: true }
]);

wrapper = shallowMount(TaskList);
});

it('fetches tasks on creation', () => {
expect(TaskService.getTasks).toHaveBeenCalled();
});

it('computes completedTasksCount correctly', async () => {
// Wait for async operations
await wrapper.vm.$nextTick();

expect(wrapper.vm.tasks.length).toBe(2);
expect(wrapper.vm.completedTasksCount).toBe(1);

// Toggle task state
wrapper.vm.tasks[0].completed = true;
expect(wrapper.vm.completedTasksCount).toBe(2);
});

it('adds a new task correctly', async () => {
const newTask = { id: 3, title: 'New task', completed: false };
TaskService.addTask.mockResolvedValue(newTask);

wrapper.vm.newTaskTitle = 'New task';
await wrapper.vm.addTask();

expect(TaskService.addTask).toHaveBeenCalled();
expect(wrapper.vm.tasks.length).toBe(3);
expect(wrapper.vm.tasks[2].title).toBe('New task');
expect(wrapper.vm.newTaskTitle).toBe('');
});

it('handles errors when fetching tasks', async () => {
TaskService.getTasks.mockRejectedValue(new Error('API Error'));

// Create a new wrapper to trigger the error
const errorWrapper = shallowMount(TaskList);
await errorWrapper.vm.$nextTick();

expect(errorWrapper.vm.error).toBe('Failed to load tasks');
expect(errorWrapper.vm.isLoading).toBe(false);
});
});

// tests/unit/components/TaskList.spec.js
import { mount } from '@vue/test-utils';
import TaskList from '@/components/TaskList.vue';

// Mock the ViewModel methods
jest.mock('@/services/TaskService', () => ({
getTasks: jest.fn().mockResolvedValue([]),
addTask: jest.fn(),
updateTask: jest.fn()
}));

describe('TaskList View', () => {
let wrapper;

beforeEach(() => {
wrapper = mount(TaskList);

// Set test data directly
wrapper.setData({
tasks: [
{ id: 1, title: 'Task 1', completed: false, toggle: jest.fn() },
{ id: 2, title: 'Task 2', completed: true, toggle: jest.fn() }
],
isLoading: false,
error: null
});
});

it('renders the correct number of tasks', () => {
const taskItems = wrapper.findAll('li');
expect(taskItems.length).toBe(2);
});

it('applies "completed" class to completed tasks', () => {
const taskItems = wrapper.findAll('li');
expect(taskItems.at(0).classes()).not.toContain('completed');
expect(taskItems.at(1).classes()).toContain('completed');
});

it('shows loading state when isLoading is true', async () => {
await wrapper.setData({ isLoading: true });
expect(wrapper.text()).toContain('Loading tasks');

const taskList = wrapper.find('ul.tasks');
expect(taskList.exists()).toBe(false);
});

it('shows error message when error is present', async () => {
await wrapper.setData({ error: 'Test error' });
expect(wrapper.text()).toContain('Test error');
});

it('calls addTask method when form is submitted', async () => {
wrapper.vm.addTask = jest.fn();

const input = wrapper.find('input[placeholder="Add new task"]');
const button = wrapper.find('button');

await input.setValue('New task');
await button.trigger('click');

expect(wrapper.vm.addTask).toHaveBeenCalled();
});

it('calls toggleTask when checkbox is clicked', async () => {
wrapper.vm.toggleTask = jest.fn();

const checkbox = wrapper.find('input[type="checkbox"]');
await checkbox.trigger('change');

expect(wrapper.vm.toggleTask).toHaveBeenCalled();
expect(wrapper.vm.toggleTask).toHaveBeenCalledWith(wrapper.vm.tasks[0]);
});
});