前言

Ng-Matero：基于 Angular Material 搭建的开源中后台管理框架。
本次项目的目标是搭建一个博客分享平台的客户端，虽然功能不止于中后台，但是 ng-Matero 框架的示例项目提供的页面：登录、注册、个人主页，这三个页面都做得很漂亮，我可以在此基础上，添加 http 访问代码，然后再加上 博客列表、博客详情 和 发布博客这三个页面，就可以完成项目目标了。
但是在使用 ng-Matero 的过程中，也出现了很多问题，后面的文章会一一列出，并给出解决方案。

对前端的一些个人理解

在开始时，我对前端的理解很模糊，现在我可以大致总结一下：所谓前端，是一台给用户（客户端-浏览器） 提供页面 的 web 服务器（可以跟后端是同一台，但前端主管页面[模板]，后端主管数据[库]）。
用户通过浏览器，使用 URL 向 web 服务器请求页面。
前端 Web 服务器 拿到用户请求（并解析其中的信息）后，向后端请求必要的数据，填充到预置模板后，再将完整的页面返回给客户端，并通过浏览器在用户的眼前展示出来。（可以发现，这个过程中，用户与后端从未直接交互）

项目开发介绍

项目开发环境：Debian 9.0（Deepin 15.1.0）

准备工作

由于 ng-Matero 是基于 Angular 的框架来实现的，所以要获取和运行该项目需要首先安装 Angular-cli，也就是前端框架的脚手架。
Angular-cli 安装和使用可以参考这个博客：https://blog.csdn.net/github_39533414/article/details/80462679

需要安装 nodejs（内置 npm），然后直接使用 npm 安装 Angular-cli 和其它组件。

这时，我对 Angular 框架的理解还只是在之前修改过一个基于 Angular-Spring 的 JavaWeb 项目，并未从零开始开发一个 Angular 前端。所以我选择先去 Angular 官网 学习一些上手项目的基本知识。

初始化项目

既然要开始运行 ng-Matero 项目了，第一步当然是上 Github 查看一下作者的对项目运行的指南了：
https://github.com/ng-matero/ng-matero

根据指南，使用 ng new <project-name> 创建一个 Angular 项目，进入项目文件夹。

使用 ng add ng-matero 添加 ng-Matero 框架示例项目代码（耐心等待…）

添加完毕，执行 npm run hmr 就能一键开启本地服务器，并部署前端项目。

使用浏览器访问：localhost:4200 即可看到示例项目的模样。
由于该示例没有连接后端服务器，所以登录界面，用户名和密码强制要求填入 “ng-matero”，输入后点击登录即可进入主页：

（这是我完成项目业务逻辑后的页面，您看到的跟这个不太一样，但没有关系，后面将提供实现细节）

改造示例项目

我们要做的工作：连接后端（使用 http 请求），添加新页面。

连接后端

大家可能有接触过 AngularJS，知道 http 请求可以使用 AngularJS 内置服务 $http 很方便地进行，可是到了框架里面，发现没有 $http，当前就是崩溃的。。。
然后到处查博客，无意中发现，http 请求应当使用框架组件来完成！
使用步骤：

• 首先引入 http 模块：在页面模板组件（component）的 ts 文件的头部加上，import { HttpClient } from "@angular/common/http"; //这里是HttpClient，从 @angular/common/http 模块中引入 HttpClient 服务。
• 在 component 的 constructor 中声明一个 HttpClient 服务组件
  
• 最后使用 this.$http 调用服务，发起请求即可，

this.$http.post(this.settings.URL+":9999/user/login",formData).subscribe(res=>{ // deal with the response
});

这里特别提醒一下，返回的 res 是一个未知的 [object,object]，意味着在使用 <.name> 访问 res 的字段的时候，编译器并不知道这个字段的存在，由是会报错。官方的做法是在 component 中定义一个 any 类型的局部变量：

然后把 res 赋值给 this.res_data，就可以放心使用 res 的字段了：

添加新页面

示例项目只有登录、注册和首页三个页面，我需要修改首页，让其显示一个博客列表，然后点击列表中的博客进入博客详情，最后还要在首页添加一个按钮，用于进入发布博客的页面。

那么以博客详情界面来介绍新增页面功能的实现吧：

添加模板页面组件

Angular 框架中，动态页面都是以模板形式存在，用户请求时，将相应的数据填充到模板页面中，形成完整的页面再返回给用户。
到页面模板的存放文件夹下，本示例项目默认存放页面模板的文件夹为：/src/app/core/routes，在命令行 cd 到该文件夹下（由于页面添加在首页，也即 dashboard 文件夹下，所以我是继续 cd 到了 dashboard 文件夹下），运行 ng generate component <component-name> 就可以生成一个模板的大礼包：

这个大礼包都有些什么呢？

• 一个 css 存放样式代码。
• 一个 html 模板页面。
• 两个 ts，黄的那个不用管，蓝色的是组件模块声明和定义的地方。

大礼包同时在路由中也添加了我们的模块，但要实现跳转，还得添加一点东西：
在 routes 文件夹下，找到 routes-routing.module.ts 文件，

可以看到了自动引入了我新增的模块。

还需要另外配置 路由的 URL：

在 const routes: Routes = [...] 下添加路径。就可以用 routes 进行跳转了。

页面模板编写

基本就是写 html 和 css，只是有些数据需要使用 双花括号 从 ts（js）获取。
比较典型的就是使用 ngFor 遍历一个数组，并复制 html 元素，制作列表：

<div *ngFor="let blog of blogs" (click)="onSelect(blog)"><div class="blog-container"><p class="blog-title">{{blog.Title}}</p><p class="blog-time">最近修改时间：{{blog.LastModified}}</p></div>
</div>

上面的代码就是利用 ngFor 遍历 ts 的 component 中从后端获取的 blogs 数据（博客 - 数组），并放到 div 中显示出来，那么效果就是之前展示的项目首页的图片中的那样。

表单

做管理平台，表单几乎是避不开的话题，ng-Matero 提供的示例项目的 login 模块已经给我们提供了 表单 的使用案例。
从案例中可以总结出来，表单是通过一个叫 @angular/forms 的组件完成的。
使用步骤：

• 导入组件，
  

• 声明 FormGroup 对象，
  
  我在组件中定义了一个内部变量 articleForm。

• 声明服务，我只用到了 FormBuilder 和 FormGroup（接口）
  
  这里我初始化了之前定义的 articleForm，为其添加了两个 字段，‘title’ 和 ‘content’。

• 在 html 中使用 articleForm 创建一个表单：

<div class="w-full h-full" fxLayout="row wrap"><form [formGroup]="articleForm" class = "form"><label>标题：</label><input class="title-input" placeholder="请输入文章标题" formControlName="title"><label>内容：</label><textarea rows="10" class="content-input" placeholder="请输入文章内容"formControlName="content"></textarea><button class="create-button" mat-raised-button color="primary"(click)="create()">{{'发布' | translate}}</button></form>
</div>

[formgroup] 绑定表单对象，input 中 formControlName 绑定表单对象的字段。
button 中 (click) 指代提交调用的函数。

• 表单提交函数

  create() : void {var req = {title : this.articleForm.get('title').value,content : this.articleForm.get('content').value,}this.$http.post(this.settings.URL+":9999/article/publish",req).subscribe(res=>{console.log(res);this.router.navigateByUrl("/dashboard");})}

展示一下页面：

一些疑难杂症

js 的数据发生改变了，但模板页面的数据没有实时刷新

这个是在我用 http 发送请求后，获取数据放到页面组件的局部变量中后，页面数据没有刷新（仍然是空白）。
这里需要使用 ChangeDetectorRef 组件服务，来监听数据变化，刷新页面数据（而不是刷新页面）。
具体步骤：

• 引入 ChangeDetectorRef
  import { ChangeDetectorRef } from "@angular/core";
• 声明服务
  
• 使用服务
  
  可以看到，我是在 http 装载数据之后，调用 cd 的 detectChanges 函数，这个函数就会监听组件内部数据是否变化，并重新给页面的所有模板数据装载最新数据。

至此，问题就解决了。

带多个参数的 http - get 请求

这个问题我一开始想的很美好，用字符串拼接一个问号，再把要传的参数以字符串的形式拼接上去，用 ‘&’ 连接各个参数。一试，果然不行。

下面来看一个可行的示例：

• 引入 HttpParams 接口
  import { HttpClient,HttpParams } from "@angular/common/http"; //这里是HttpClient
• 在请求时，创建一个 HttpParams 对象，在创建时，在后面用 .set 设置要传递的参数的键值对。（注意 HttpParams 一但创建，是不能直接用 req.page = “…” 的形式，添加参数。需要用 req = req.append(‘eachPage’,“5”) 这样的形式。）

let req = new HttpParams().set('page', this.pageIndex+"").set('eachPage',"5");this.$http.get(this.settings.URL+":9999/article/",{params:req}).subscribe(res=>{this.res_data = res;this.blogs = this.res_data.Message;// console.log(this.blogs);this.cd.detectChanges();})

还有一点要注意就是在 postman 上测试时，上面代码中的 :9999/article 后面是不需要 ‘/’ 的，但进行 http 请求时，需要添加这个 ‘/’。

结语

这次是本人第一次从零开始写 Angular 前端，虽然使用了 ng-Matero 的示例项目做基础，但很多页面和功能都是一点点实现的。所以算是对 Angular 前端框架有了一个更加全面和深入的认识。
遇到的很多问题，网上查找资料的时候，发现少有系统性的解答，这时，我是采用去查官方文档，或者是“广撒网”，用大量词条去寻找有用的博客。

鉴于 Angular 特性较为复杂，且社区支持少等问题，非常建议大家使用 Vue 进行开发，基于 Vue 的中后台管理系统框架可以参考本人的 前端开发-基于 Vue 的中后台管理系统框架。

---

个人总结，如有差错，敬请指正。