前言

这次前端开发用到angular中Ng-Matero框架，该框架对于大致实现了一个类似博客页面的模板，包括登陆注册页面，以及一个首页。这次实验的前端开发就是基于该模板进行的。

项目开发

开发环境

1. ubuntu操作系统
2. node.js
3. npm
4. angular-cli

angular-cli可以参考该博客

初始化项目

1. 使用 ng new <project-name>新建一个项目
2. 使用 cd <project-name>进入目标文件夹
3. 使用 ng add ng-matero添加框架
4. 使用 sudo npm install安装依赖
5. 使用 sudo npm run hmr运行项目
6. 打开浏览器访问 localhost:4200即可看见页面
   

修改项目

设置路由

点击左侧的sidebar上个人信息的图标，以及sidemenu时要对页面进行跳转，所以在routes-routing.module.ts文件中设置路由


并在相关组件上设置 routerLink,这样点击组件时就会进行跳转

个人信息页面

该页面要实时获取当前的用户信息，并且更改了用户信息之后，左侧的信息栏数据要动态更改
在/src/app/shared/components/使用 ng generate component userinfo创建一个component

在.ts文件中应用 SettingsService以及FormGroup相关的库，并且在constructor函数中声明变量，以及对相关变量进行赋值

以下是.html文件内容

[(ngModel)]是设置输入框的初始值为用户原本的信息，placeholder设置默认的提示信息，formControlName用于获取当前输入框的信息，方便写入数据库

save()函数是保存按钮的点击函数，主要是先获取当前输入框的内容，然后使用后端接口，发起http请求来对修改的数据持久化，最后刷新页面。

搜索框

因为搜索框和显示博客列表的页面并不是同一个文件，所以要在settings.service.ts创建一个接口来存储搜索查询到的博客以及搜索关键字

然后在顶部header中添加一个输入框，并加上一个删除按钮

• [(ngModel)]="BLOG.search"输入框的默认值为搜索的关键字
• (click)="exit()"设置叉号的点击事件
  
  该函数设置flag为false，说明博客列表显示的是所有博客，而非搜索的博客，并且刷新当前页面更新数据
• (click)="search()"设置搜索按钮的点击事件
  
  该函数会根据搜索的关键字利用后端接口进行http请求，接口返回搜索的博客列表，将得到的博客列表存储在settings.BLOG.blog中

在 blog-list.component.ts文件中添加一个逻辑判定，如果settings.BLOG.flag为false那么显示博客列表，如果为true则显示搜索列表

遇到问题

数据更新

因为很多页面的数据受其他文件的影响，所以是动态改变的，一开始更新数据之后页面不能同步更新，在查询相关资料后找到两种解决方法

1. 使用 location.reload() 直接刷新页面，这个方法比较直接和粗暴，用户体验比较差
2. 使用 ChangeDetectorRef 将数据与组件进行绑定，当数据更新之后，会自动检测，会自动刷新数据，而不是刷新页面，具体用法：

• 引用 import { ChangeDetectorRef } from "@angular/core"
• 在 constructor 中声明变量 private cd:ChangeDetectorRef
• 使用 this.cd.detectChanges() 来动态更新数据

动态获取输入框数据

在个人信息页面，改变信息之后如何获取当前的输入框信息让我很头疼，在仔细阅读官方文档之后找到解决方法，即使用FormGroup相关组件

• 引用 import { FormBuilder, FormGroup, Validators } from '@angular/forms
• 定义使用的 FromGroup 变量，并在 constructor 中声明变量 private fb: FormBuilder 并进行初始化
  
  -使用 this.userForm.get('').value 来获取当前输入框的值

结语

第一次使用angular的框架，所以在读懂框架上花费比较多的时间，并且框架的许多细节之处还不是很清楚，不过在阅读 angular官方文档 以及相关资料之后对于angular框架以及前端的实现有了深入了解。

`