真实项目开发收获与总结

前言

首先感谢潘老师近期一直在我的学习和开发上给予的指导与帮助，同时也为自己能参与到真实的项目开发中而感到十分幸运。言归正传，结合近期项目开发我将分别从：1.真实项目开发感受；2.GitHub初步使用;3.对于Angular学习及使用，这三个方面进行总结。

真实项目开发

1.团队合作
在参与真实项目开发中，我感受到我的团队合作能力得到了全面的培养和锻炼。
（1）团队成员依据个人情况领取任务，同时一定要将领取的任务指定给自己，避免任务重复完成而造成的时间浪费。比如：在一次开发中，我与团队成员同时进行了相同任务忘了进行指定，在提交时就发生了重复的问题。往小说是浪费了个人的时间，往大说就是拖慢了项目进度。
（2）近期学习开发中，我的速度相对来说进行的比较快，但也存在“欲速则不达”的问题。在团队开发中，我与大家相互交流，相互帮助解决各自问题的同时也可以进一步弥补不足、提升自己，同时也避免一些类似错误的发生。
（3）正如潘老师所说“要将自己放在团队领导者的角度思考问题”。比如老师团队中张贴字母表的故事，仅仅是一张字母表就引申出团队开发问题、代码规范问题、时间效率问题，使我深深感受到一个团队领导者的重要性。当处在一个更高位置去思考问题时，考虑的方面将会更广、更深。我承认这一点在近期我做不是很到位，但我会将这句话记于心，并慢慢践于行。
2.代码规范化和无障碍交流
我认为二者是相辅相成的。代码规范化书写一方面保证了代码的健壮性减少bug产生，一方面也增强了代码可读性来方便团队成员阅读非自己书写的代码，从而确保无障碍交流。换言之好的无障碍交流就要有一定的规范，代码规范化就是很好的例子：
（1）注释的书写

/**
 * 小区管理mockApi
 */
export class VillageApi implements MockApiInterface {
  private baseUrl = 'village';

（2）在单元测试文件中，描述清楚当前组件属于谁

describe('village->EditComponent', () => {});

（3）养成格式化代码的习惯

GitHub初步使用

这是我第一次接触Git与GitHub，通过学习了解到：Git是一个分布式版本控制工具；GitHub是一个代码托管中心。就近期所使用的过的Git命令做一总结：
1.基本操作命令

git status  //查看状态
git add .  //将工作区的 文件 添加到暂存区（“.”表示当前文件夹及子文件夹中所有未添加的文件）
git common -a -m "描述信息"  //将暂存区 文件 提交到本地库
git reset  //版本前进或后退
git branch [分支名称]  //创建分支
git branch -v  //查看分支
git checkout [分支名称]  //切换分支

2.与GitHub相关命令
（1）开发前命令步骤

git clone [远程地址|远程地址别名]  //克隆
git checkout main  //切换到主分支，确保自己在主分支上
git pull  //拉取最新代码
git branch [分支名]  //建立与issue号同名的分支
git checkout [分支名]  //切换到开发分支

注：git pull = git fetch [远程分支名] + git merge [远程分支名]
（2）pull request命令步骤

// 上传到本地
git add .
git commit -a -m "描述信息"
// 将代码提交到GitHub上
git push origin [当前分支号]

对于Angular学习及使用

在Angular学习过程中，让我觉得最有趣与神奇的是其单元测试，也是我第一次接触到“用代码测试代码”。单元测试又称模块测试，针对软件设计中的最小单位——程序模块，进行正确性检查的测试工作。其中里面的用代码来模拟点击按钮，以及在测试文件中临时搭建父组件都让我觉得十分神奇，值得反复学习、研究。其次是mock-api一个便捷的REST接口数据模拟工具，利用其来模拟后台，用于前后端隔离测试和开发调试，从而实现在没有后台的情况下前端业务的正常开发。
1.某新增功能的数据流
在真实项目开发中第一次结合使用mock-api完成某项的新增功能时，整个代码的书写过程以及数据的流向都是比较模糊的，这也使得在第一次编写代码时既花费了许多时间，又出现了许多问题。直到修正完所有代码并加以总结后，才明白了数据的流向和每次数据流动时的格式。我在实际开发中总结发现，明白数据流后再进行代码书写就相对流畅，也不对会有漏写的问题。下面先给出代码，最后给出数据流图：
（1）在town.api.ts中编写模拟后台

// 新增乡镇
      {
        method: 'POST',
        url: this.baseUrl + `/save`,
        result: (urlMatches: any, option: { body: { name: string, pinyin: string }; }) => {
          let body = {} as { name: string, pinyin: string };

          if (option) {
            body = option.body;
          }

          return {
            id: randomNumber(),
            name: body.name,
            pinyin: body.pinyin
          } as Town;
        }
      },

（2）在town.service.ts中编写save方法，写完后可以利用town.service.spec.ts进行单元测

/**
   * 新建乡镇
   */
  public save(town: Town): Observable<Town> {
    Assert.isString(town.name, 'type of town name must be string');
    Assert.isString(town.name, 'type of town name must be string');

    return this.httpClient.post<Town>(`${this.baseUrl}/save`, town)
      .pipe(map(data => new Town(data)));
  }

（3）在town\add.component.ts中获取浏览器中数据，并调用M层传入新数据对后台发送请求

const newTown = new Town({
      name: this.formGroup.get('name').value,
      pinyin: this.formGroup.get('pinyin').value
    });

// 调用M层方法传入新乡镇信息对后台进行请求
this.townService.save(newTown)
  .subscribe(
        () => this.commonService.success(() => this.commonService.back()),
        error => console.log('保存失败', error));
  }

（4）在town\add.component.spec.ts中引入mockapi（示例中ApiTestingModule为测试的mockapi文件）

import {ApiTestingModule} from '../../../api/api.testing.module';
import {RouterTestingModule} from '@yunzhi/ng-router-testing';


describe('town->AddComponent', () => {
  let component: AddComponent;
  let fixture: ComponentFixture<AddComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AddComponent],
      imports: [
        ReactiveFormsModule,
        RouterTestingModule,
        ApiTestingModule
      ]
    })
      .compileComponents();
  });

注：town.api.ts与town.service.ts中的url一定要保持一致，否则会在控制台报错，错误如下

此时看完代码部分再来看数据流就会对每一部分代码所执行有进一步认识。

2.其他
下面是在项目开发中遇到问题及解决方法的总结
（1）遇到此类报错，应该先检查模拟文件是否加到Api数组中，如无问题再检查请求路径是否与Api中声明的路径是否一致。

（2）此问题是在拉取最新代码到主分支进行测试时，应该要检查环境是否发生变化。可以使用npm install来安装本地所缺少环境。

（3）选择组件使用了[formControl]，没有使用[formControlName]，就会使得在没有选择乡镇时保存按钮任然可以使用，保存按钮校验产生问题。

（4）此处的option未设置值，但在保存时后台断言也没有报错。控制台数据打印出的是“平房”或“楼房”，后台断言使用的是Assert.isNotNullOrUndefined()，断言健壮性不够。

最后发现type的数据类型为number，而非自己所认为的string，因此做出如下修改，且断言使用Assert.isNumber()。

总结

1.理解
在近期实践开发中，我发现越是往后开发越要理解整个项目的业务逻辑关系，理解代码的执行过程。不能只是简单的功能实现、代码的生搬硬套。举一个例子：在实现小区管理的新增功能时，就将乡镇也作为一个字段来保存。但已经有社区这个字段，而且社区当中包换了乡镇，选择出社区就可以其确定乡镇。所以在小区新增中将乡镇单独作为一个字段保存就显得画蛇添足。
2.重复的轮子
我所写的断言：

 Assert.isString(body.name, 'village name must be set');
 Assert.isString(body.pinyin, 'village pinyin must be set');
 Assert.isNumber(body.longitude, 'village longitude must be set');
 Assert.isNumber(body.latitude, 'village latitude must be set');
 Assert.isNumber(body.type, 'VillageType must be set');
 Assert.isDefined(body.community, body.community.id, 'communityId must be set');
 Assert.isDefined(body.model, body.model.id, 'modelId must be set');
 Assert.isString(body.establishTime, 'establishTime must be set');

老师所写的断言：

 Assert.isDefined(body, body.community, body.model, 'data validate false');
 Assert.isString(body.name, body.pinyin, 'some properties must be string');
 Assert.isNumber(body.longitude,
            body.latitude,
            body.type,
            body.community.id,
            body.model.id,
            body.establishTime, 'some properties must be number');

给出代码就一目了然，归其原因我认为还是对于断言的使用理解不到位，只是照搬照抄。
3.不断地学习
通过这次真实项目的开发，我收获了一些经验、方法，但其与合格二字还是相差甚远。在开发过程中我也感受到有许多东西需要不断地学习，不断地丰富完善。路漫漫其修远兮，吾将上下而求索。

真实项目开发收获与总结

前言