基于 Angular4 的后台管理系统实战-JavaScript中文网-JavaScript教程资源分享门户

随着互联网行业的快速发展，越来越多的公司需要构建自己的后台管理系统来管理其业务。在前端技术中，Angular 是一个非常流行的框架，本文将介绍如何使用 Angular4 来构建一个后台管理系统。

环境搭建

首先要确保本地已经安装了 node.js 和 npm。安装完毕后，打开命令行工具输入如下命令：

npm install -g @angular/cli

这个命令将安装 Angular 的命令行工具，这是一个非常方便的工具，可以通过命令快速地创建组件、服务、指令、管道等等。

安装完成后，你可以在命令行工具中输入如下命令创建一个新的 Angular 项目：

ng new backend

这个命令将在当前目录下创建一个名为 backend 的项目，并自动安装依赖项和生成一些基本的文件和目录结构。

安装完成后，你可以通过如下命令启动项目：

ng serve

这个命令将会启动一个本地开发服务器，你可以在浏览器中访问 http://localhost:4200 来查看应用。

路由和导航

在一个后台管理系统中，导航应该是非常重要的一部分，它能够帮助用户快速地找到自己需要的功能。在 Angular 中，路由和导航非常容易实现。

首先，在项目的根目录下创建一个名为 app-routing.module.ts 的文件，并添加如下内容：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
  { path: 'users', loadChildren: './users/users.module#UsersModule' },
  { path: 'roles', loadChildren: './roles/roles.module#RolesModule' },
  { path: 'settings', loadChildren: './settings/settings.module#SettingsModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这个文件定义了路由规则。在这个例子中，我们添加了四个导航链接：dashboard、users、roles 和 settings。每一个导航链接都对应一个懒加载的模块，这样我们的应用就不会一次性加载所有的模块，从而提升了性能。

接下来，我们需要在 app.module.ts 文件中导入路由模块，并添加一个 router-outlet 指令，如下：

// javascriptcn.com 代码示例
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<router-outlet></router-outlet>

这个指令将会根据路由规则动态地加载组件，并替换当前组件的内容。

侧边栏和面包屑导航

为了更好的用户体验，我们需要添加一个侧边栏来展示导航链接，并在头部添加一个面包屑导航来帮助用户快速地了解当前位置。在 app.component.html 文件中，我们添加如下内容：

// javascriptcn.com 代码示例
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
  <a class="navbar-brand" href="#">后台管理系统</a>
</nav>

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item" routerLink="dashboard" routerLinkActive="active">
            <a class="nav-link" href="#">Dashboard</a>
          </li>
          <li class="nav-item" routerLink="users" routerLinkActive="active">
            <a class="nav-link" href="#">用户管理</a>
          </li>
          <li class="nav-item" routerLink="roles" routerLinkActive="active">
            <a class="nav-link" href="#">角色管理</a>
          </li>
          <li class="nav-item" routerLink="settings" routerLinkActive="active">
            <a class="nav-link" href="#">系统设置</a>
          </li>
        </ul>
      </div>
    </nav>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">首页</a></li>
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item active" aria-current="page">概览</li>
        </ol>
      </nav>

      <router-outlet></router-outlet>
    </main>
  </div>
</div>

这个文件定义了一个侧边栏和面包屑导航。侧边栏使用了 Bootstrap 的样式，你可以根据自己的需求进行修改。面包屑导航使用了 Angular 自带的指令，它能够自动地根据当前页面的路由显示正确的导航链接。

组件和服务

在 Angular 中，一个组件可以看做是一个 UI 控件，它接收一些参数并展示 UI。服务则是一个提供业务逻辑的对象，它可以被组件调用。

在我们的后台管理系统中，我们需要几个组件和一些服务来完成一些具体的业务。

仪表盘组件

仪表盘组件将会显示一些实时数据，如在线用户数、订单数量等等。在根目录下创建一个名为 dashboard 的模块，并添加一个名为 dashboard.component.ts 的组件：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这个组件非常简单，我们可以在 dashboard.component.html 文件中添加一些内容来展示实时数据。

用户管理组件

用户管理组件将会显示所有的用户信息，并提供添加、删除、更新等操作。在根目录下创建一个名为 users 的模块，并添加一个名为 users.component.ts 的组件：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这个组件将会需要一个用户服务来获取、添加、删除、更新用户信息。在根目录下创建一个名为 user.service.ts 的服务：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor() { }

  getAll() {
    // 获取所有的用户
  }

  add(user) {
    // 添加一个用户
  }

  delete(id) {
    // 删除一个用户
  }

  update(user) {
    // 更新一个用户
  }

}

这个服务通过注入的方式来被 UsersComponent 使用。

角色管理组件

角色管理组件将会显示所有的角色信息，并提供添加、删除、更新等操作。在根目录下创建一个名为 roles 的模块，并添加一个名为 roles.component.ts 的组件：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-roles',
  templateUrl: './roles.component.html',
  styleUrls: ['./roles.component.scss']
})
export class RolesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这个组件将会需要一个角色服务来获取、添加、删除、更新角色信息。在根目录下创建一个名为 role.service.ts 的服务：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RoleService {

  constructor() { }

  getAll() {
    // 获取所有的角色
  }

  add(role) {
    // 添加一个角色
  }

  delete(id) {
    // 删除一个角色
  }

  update(role) {
    // 更新一个角色
  }

}

这个服务通过注入的方式来被 RolesComponent 使用。

系统设置组件

系统设置组件将会提供一些系统级别的设置，如日志级别、缓存设置等等。在根目录下创建一个名为 settings 的模块，并添加一个名为 settings.component.ts 的组件：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这个组件将会需要一个设置服务来获取和修改系统设置。在根目录下创建一个名为 setting.service.ts 的服务：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SettingService {

  constructor() { }

  get(key: string) {
    // 获取一个设置项
  }

  set(key: string, value: any) {
    // 设置一个设置项
  }

}

这个服务通过注入的方式来被 SettingsComponent 使用。

总结

在本文中，我们介绍了如何使用 Angular4 来构建一个后台管理系统。我们讲解了一些基本的概念，如路由、侧边栏、面包屑导航、组件和服务等等。希望这篇文章能够对你有所帮助。如有问题欢迎留言讨论。

示例代码可以在我的 GitHub 上找到：https://github.com/xxx/xxx。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f6da74f6b2d6eab3f63e5d