一、做的什么?
利用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的路由也是需要多理解掌握的部分,这次的项目未实现的功能还有很多,没考虑的细节也很多,这次的学习让我深刻明白了自己的学习还不够,需要更进一步学习,达到更好。