近期学习收获

1.学会使用GitHub命令行工具。
1.1拉取最新代码步骤：
a. git checkout main ——确保自己在main分支上
b. git pull ——拉取最新代码
c. git branch 分支名 ——创建新的分支
d. git checkout 分支名 ——转换到新建分支上进行代码的编写
1.2将本地代码推到服务器上：
a. git add . ——将项目的所有文件添加到缓存中(如果是文件下，会一起将文件夹提交上去)
b. git commit -a -m '描述信息' ——将项目文件提交到本地仓库
c. git push origin 当前分支号 ——将代码提交到服务器上
2.mockapi下index界面分页查询
2.1在village.api.ts中编写模拟后台；

      // 分页查询
      {
        method: 'GET',
        url: `${this.baseUrl}/page`,
        result: (urlMatches: any, options: { params: HttpParams; }) => {
          const params = options.params as HttpParams;
          console.log('接受的参数为：', params);
          const page = +params.get('page');
          const size = +params.get('size');
          console.log(this.baseUrl, 1);
          // 参数校验
          Assert.isNotNullOrUndefined(page, size, 'page,size为必选');
          Assert.isDefined(params.get('name'), '选填参数未添加全');

          // 构建返回数据
          const beginId = page * size;
          const villages = new Array<Village>();
          for (let i = 0; i < +size; i++) {
            const community = {
              id: randomNumber(),
              name: randomString('社区'),
              pinyin: randomString('pinyin'),
              town: {
                name: randomString('乡镇'),
              } as Town
            } as Community;
            const model = {
              id: randomNumber(),
              name: randomString('3D模型'),
              pinyin: randomString('pinyin'),
            } as Model;
            villages.push({
              id: beginId + i,
              name: randomString('小区'),
              pinyin: randomString('pinyin'),
              longitude: randomNumber(),
              latitude: randomNumber(),
              model,
              establishTime: randomNumber(),
              type: randomNumber(),
              community,
            } as Village);
          }
          return {
            content: villages, number: page, size, totalElements: 40 + randomNumber()
          } as Page<Village>;
        }
      },

2.2在village.service.ts层中写page方法，调用village.api.ts；

/**
   * 分页
   * @param param 查询参数
   */
  // 函数page，参数为param是一个对象，函数类型为Observable<Page<Village>>
  page(param: {
    page: number,
    size: number,
  }): Observable<Page<Village>> {

    // 定义http请求头，添加page和size
    const httpParams = new HttpParams()
      .append('page', param.page.toString())
      .append('size', param.size.toString());

    // 返回根据相应链接订阅的数据，将数据中的每一个json对象转换为 VILLAGE 对象。
    return this.httpClient.get<Page<Village>>(`${this.url}/page`, {params: httpParams})
      .pipe(map(data => new Page<Village>(data).toObject(d => new Village(d))));
  }

2.3在village\index.component.ts中写分页接口，调用village.service.ts中方法；

  // 初始化函数，类型为void，继承OnInit就必须有此函数，且必须有函数体
  ngOnInit(): void {
    this.route.queryParams.subscribe((params: { page?: string, size?: string }) => {
      this.queryParams = {...params};

      const page = +getDefaultValueWhenUndefinedOrNull(params.page, '0');
      const size = +getDefaultValueWhenUndefinedOrNull(params.size, config.size.toString());
      this.villageService.page({page, size})
        .subscribe(page => {
          this.validate(page);
          this.pageData = page;
        })
    })
  }

2.4写前端html页面，调用village\index.component.ts，将虚拟后台的数据进行反显。