Web应用基础

一、做的什么？

利用angular做了一个学生姓名，学号的信息系统，能实现基本的增删改查。

二、 开发过程

1、首先确定了开发的主题，确定了要完成学生信息系统。
2、设计组件

仪表盘组件：

<h3>学生代表</h3>
<div class="student-menu">
  <a *ngFor="let stu of students"
      routerLink="/detail/{{student.id}}">
      {{student.name}}
  </a>
</div>

<app-student-search></app-student-search>

h2 {
    text-align: center;
  }
  
  .heroes-menu {
    padding: 0;
    margin: auto;
    max-width: 250px;
  
    /* flexbox */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;
    align-items: flex-start;
  }
  
  a {
    background-color: #b45177;
    border-radius: 2px;
    padding: 1rem;
    font-size: 1.2rem;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    text-align: center;
    width: 100%;
    min-width: 70px;
    margin: .5rem auto;
    box-sizing: border-box;
  
    /* flexbox */
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
  }
  
  @media (min-width: 600px) {
    a {
      width: 18%;
      box-sizing: content-box;
    }
  }
  
  a:hover {
    background-color: #000;
  }

学生信息修改组件：

<div *ngIf="hero">
    <h2>修改 {{student.name | uppercase}} 的信息</h2>
    <div><span>学号: </span>{{student.id}}</div>
    <div>
      <label for="student-name">学生姓名: </label>
      <input id="student-name" [(ngModel)]="student.name" placeholder="Student name"/>
    </div>
    <button (click)="goBack()">返回</button>
    <button (click)="save()">确定</button>
  </div>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { Student } from '../student';
import { StudentService } from '../student.service';

@Component({
  selector: 'app-student-detail',
  templateUrl: './student-detail.component.html',
  styleUrls: [ './student-detail.component.scss' ]
})
export class StudentDetailComponent implements OnInit {
  student: Student | undefined;

  constructor(
    private route: ActivatedRoute,
    private heroService: StudentService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getStudent();
  }

  getStudent(): void {
    const id = parseInt(this.route.snapshot.paramMap.get('id')!, 10);
    this.StudentService.getHero(id)
      .subscribe(student => this.student = student);
  }

  goBack(): void {
    this.location.back();
  }

  save(): void {
    if (this.student) {
      this.studentService.updateStudent(this.student)
        .subscribe(() => this.goBack());
    }
  }
}

学生查询组件

<div id="search-component">
    <label for="search-box">查询学生</label>
    <input #searchBox id="search-box" (input)="search(searchBox.value)" />
  
    <ul class="search-result">
      <li *ngFor="let hero of students$ | async" >
        <a routerLink="/detail/{{student.id}}">
          {{student.name}}
        </a>
      </li>
    </ul>
  </div>

import { Component, OnInit } from '@angular/core';

import { Observable, Subject } from 'rxjs';

import {
   debounceTime, distinctUntilChanged, switchMap
 } from 'rxjs/operators';

import { student } from '../student';
import { studenService } from '../student.service';

@Component({
  selector: 'app-student-search',
  templateUrl: './student-search.component.html',
  styleUrls: [ './student-search.component.scss' ]
})
export class StudentSearchComponent implements OnInit {
  students$!: Observable<Student[]>;
  private searchTerms = new Subject<string>();

  constructor(private StudentService: StudentService) {}

  // Push a search term into the observable stream.
  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    this.students$ = this.searchTerms.pipe(
      // wait 300ms after each keystroke before considering the term
      debounceTime(300),

      // ignore new term if same as previous term
      distinctUntilChanged(),

      // switch to new search observable each time the term changes
      switchMap((term: string) => this.StudentService.searchstudents(term)),
    );
  }
}

2、进行了angular的学习，通过angular教程完成了项目的开发，
3、学习了MDB —angular，对排版、形式等进行了优化。
4、将项目部署到GitHub。

三、遇到的问题

1、开发过程中遇到版本不兼容的问题，上网搜寻并手动更新了版本，得以解决
2、开发创建项目选择了css而未选择scss，导致使用MDB时出现了许多的错误，采用了手动修改文件后缀，但是未能解决，最终只能重新创建项目时选择scss，得以解决
3、数据方面，起初的数据单向连接不能实现数据交互，采用双向连接得以解决
4、在MDB设计上遇到许多关于排版的问题，参考了MDB官网进行了调改

四、总结

此次动态网页的学习让我发现了自己对angular的把握还不够，css和js需要进一步学习，不够熟练，angular的路由也是需要多理解掌握的部分，这次的项目未实现的功能还有很多，没考虑的细节也很多，这次的学习让我深刻明白了自己的学习还不够，需要更进一步学习，达到更好。