DevUI 实战教程：从零构建电商后台管理系统（完整版）

📅 发布时间：2026/6/20 6:02:19

DevUI 实战教程：从零构建电商后台管理系统（完整版）

本教程将带你使用 Angular 18 和 DevUI 组件库，从零开始构建一个功能完整的电商后台管理系统。

教程目录

项目效果预览
前置要求
第一章：项目初始化
第二章：安装和配置 DevUI
第三章：创建数据模型
第四章：实现国际化服务
第五章：构建商品服务
第六章：搭建页面布局
第七章：实现商品列表
第八章：实现添加编辑功能
第九章：实现删除功能
第十章：添加响应式样式
总结与扩展

项目效果预览

完成本教程后，你将获得：

✅ 商品列表展示（表格形式）
✅ 添加新商品（模态框表单）
✅ 编辑商品信息
✅ 删除商品（带确认对话框）
✅ 搜索商品功能
✅ 多语言切换（中文/英文）
✅ 响应式布局（支持桌面和移动端）

前置要求

在开始之前，请确保你的开发环境满足以下要求：

Node.js: 18.x 或更高版本
npm: 9.x 或更高版本
Angular CLI: 18.x
代码编辑器: VS Code（推荐）

第一章：项目初始化

1.1 安装 Angular CLI

首先，全局安装 Angular CLI：

npm install -g @angular/cli@18

验证安装：

ng version

1.2 创建新项目

使用 Angular CLI 创建新项目：

ng new devui-project

在创建过程中，选择以下选项：

Would you like to add Angular routing? → No（本教程不需要路由）
Which stylesheet format would you like to use? → SCSS

1.3 进入项目目录

cd devui-project

1.4 启动开发服务器

ng serve

打开浏览器访问 http://localhost:4200，你应该能看到 Angular 的欢迎页面。

第二章：安装和配置 DevUI

2.1 安装 DevUI

在项目根目录下执行：

npm install ng-devui --save
npm install @devui-design/icons --save
npm install @angular/localize@18 --save --legacy-peer-deps

2.2 配置 DevUI 样式

打开 angular.json 文件，在 styles 数组中添加 DevUI 的 CSS 文件。

需要在两个地方添加（build 和 test 配置中）：

"styles": [
"src/styles.scss",
"node_modules/ng-devui/devui.min.css"
]

2.3 配置动画支持

打开 src/app/app.config.ts，添加动画支持：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideAnimations()  // 添加这一行
]
};

2.4 禁用 SSR（可选）

如果遇到 SSR 相关问题，可以在 angular.json 中移除 SSR 配置：

找到 build 配置下的这几行并删除：

"server": "src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "server.ts"
}

第三章：创建数据模型

3.1 创建 models 目录

mkdir src/app/models

3.2 创建商品模型

创建文件 src/app/models/product.model.ts：

export interface Product {
id: number;
name: string;
category: string;
price: number;
stock: number;
description: string;
status: 'active' | 'inactive';
createdAt: Date;
}
export interface ProductFormData {
name: string;
category: string;
price: number;
stock: number;
description: string;
status: 'active' | 'inactive';
}

代码说明：

Product: 完整的商品数据模型，包含 ID 和创建时间
ProductFormData: 表单数据模型，用于添加和编辑商品时的数据绑定

第四章：实现国际化服务

4.1 创建 services 目录

mkdir src/app/services

4.2 创建国际化服务

创建文件 src/app/services/i18n.service.ts。

由于代码较长，这里展示核心结构：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
export type Language = 'zh-CN' | 'en-US';
@Injectable({
providedIn: 'root'
})
export class I18nService {
private currentLang = new BehaviorSubject<Language>('zh-CN');public currentLang$: Observable<Language> = this.currentLang.asObservable();private translations: Record<Language, any> = {'zh-CN': {app: { title: '电商后台管理系统', language: '语言' },product: {title: '商品管理',add: '添加商品',edit: '编辑商品',delete: '删除商品',// ... 更多翻译}},'en-US': {app: { title: 'E-commerce Admin System', language: 'Language' },product: {title: 'Product Management',add: 'Add Product',// ... 更多翻译}}};constructor() {// 从 localStorage 读取保存的语言设置（需要处理 SSR）if (typeof window !== 'undefined' && typeof localStorage !== 'undefined') {const savedLang = localStorage.getItem('language') as Language;if (savedLang && (savedLang === 'zh-CN' || savedLang === 'en-US')) {this.currentLang.next(savedLang);}}}setLanguage(lang: Language): void {this.currentLang.next(lang);if (typeof window !== 'undefined' && typeof localStorage !== 'undefined') {localStorage.setItem('language', lang);}}translate(key: string, params?: any[]): string {const keys = key.split('.');let value: any = this.translations[this.currentLang.value];for (const k of keys) {value = value?.[k];}if (typeof value === 'string' && params) {params.forEach((param, index) => {value = value.replace(`{${index}}`, param);});}return value || key;}t(key: string, params?: any[]): string {return this.translate(key, params);}}

完整的翻译内容请参考项目源码中的 i18n.service.ts 文件。

代码说明：

使用 BehaviorSubject 管理当前语言状态
支持中英文两种语言
提供参数化翻译功能（如：'共 {0} 条'）
使用 localStorage 持久化语言选择
SSR 兼容性处理

第五章：构建商品服务

5.1 创建商品服务文件

创建文件 src/app/services/product.service.ts：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Product, ProductFormData } from '../models/product.model';
@Injectable({
providedIn: 'root'
})
export class ProductService {
private products = new BehaviorSubject<Product[]>([]);public products$: Observable<Product[]> = this.products.asObservable();constructor() {this.initMockData();}private initMockData(): void {const mockProducts: Product[] = [{id: 1,name: 'iPhone 15 Pro',category: '电子产品',price: 7999,stock: 50,status: 'active',description: '最新款苹果手机，搭载A17 Pro芯片',createdAt: new Date('2024-01-15')},// ... 更多示例数据];this.products.next(mockProducts);}getProducts(): Observable<Product[]> {return this.products$;}addProduct(formData: ProductFormData): void {const currentProducts = this.products.value;const newId = Math.max(...currentProducts.map(p => p.id), 0) + 1;const newProduct: Product = {...formData,id: newId,createdAt: new Date()};this.products.next([...currentProducts, newProduct]);}updateProduct(id: number, formData: ProductFormData): void {const currentProducts = this.products.value;const index = currentProducts.findIndex(p => p.id === id);if (index !== -1) {const updatedProduct: Product = {...currentProducts[index],...formData};currentProducts[index] = updatedProduct;this.products.next([...currentProducts]);}}deleteProduct(id: number): void {const currentProducts = this.products.value;this.products.next(currentProducts.filter(p => p.id !== id));}getProductById(id: number): Product | undefined {return this.products.value.find(p => p.id === id);}}

代码说明：

使用 BehaviorSubject 实现响应式数据管理
initMockData() 初始化 5 个示例商品
提供完整的 CRUD 操作方法
所有数据变更都会自动通知订阅者

由于篇幅限制，完整教程内容请查看项目中的以下文件：

第六章到第十章的详细内容
完整的代码示例
样式文件的完整代码

或访问项目源码查看 app.component.ts、app.component.html 和 app.component.scss 文件。

快速参考：核心代码结构

组件类结构 (app.component.ts)

export class AppComponent implements OnInit {
// 数据属性
products: Product[] = [];
filteredProducts: Product[] = [];
searchText = '';
showProductModal = false;
// 表单相关
isEditMode = false;
editingProductId: number | null = null;
productForm: ProductFormData = { /* ... */ };
// 下拉选项
categories = [/* ... */];
statusOptions = [/* ... */];
languages = [/* ... */];
// 核心方法
ngOnInit(): void { /* 订阅数据 */ }
onSearch(): void { /* 搜索过滤 */ }
openAddModal(): void { /* 打开添加表单 */ }
openEditModal(product: Product): void { /* 打开编辑表单 */ }
submitForm(): void { /* 提交表单 */ }
deleteProduct(product: Product): void { /* 删除商品 */ }
changeLanguage(lang: Language): void { /* 切换语言 */ }
}

模板结构 (app.component.html)

<d-layout>
<d-header><!-- 头部：标题 + 语言切换 --></d-header><d-content><!-- 工具栏：添加按钮 + 搜索框 --><!-- 商品列表表格 --><!-- 表格底部统计 --></d-content></d-layout><!-- 商品表单模态框 --><div class="modal-overlay" *ngIf="showProductModal"><!-- 表单内容 --></div>