今天完成的事情：
HTTP传递数据的方法：
1.URL参数
把参数放在URL中，适用于所有的HTTP请求Method，如GET，POST
如result=requests.post(url,params=data)
2. Form-data
通过HTML的FORM标签，传递数据给后端的方法
POST /test?url_key=value1 HTTP/1.1
Host: 192.168.137.130
Cache-Control: no-cache
----WebKitFormBoundaryE19zNvXGzXaLvS5C
Content-Disposition: form-data; name="key1"
value1
----WebKitFormBoundaryE19zNvXGzXaLvS5C
Content-Disposition: form-data; name="key2"
value2
----WebKitFormBoundaryE19zNvXGzXaLvS5C
3. x-www-form-urlencoded
把传递的数据放在请求体，即把传递数据转换为URL参数的形式，然后放在请求体中，而不是请求的URL中
加入请求头：
Content-Type: application/x-www-form-urlencoded
请求内容：
POST /test?url_key=value1 HTTP/1.1
Host: 192.168.137.130
Cache-Control: no-cache
Content-Type: application/x-www-form-urlencoded
key1=value1&key2=value2
4. JSON
请求体放JSON格式的传递数据
请求头：
Content-Type: application/json
请求内容：
POST /test?url_key=value1 HTTP/1.1
Host: 192.168.137.130
Content-Type: application/json
Cache-Control: no-cache
{"key2": "value2", "key1": "value1"}
从服务端获取数据：
hero-detail 英雄详情；hero.service.ts 英雄服务；hero-search 英雄搜索； heroes 英雄列表
修改英雄
在hero-detail.html添加保存按钮
<button (click)="save()">save</button>
添加保存方法，hero-detail.component.ts中
// 添加save()方法，使用heroservice中 updateHero() 方法保存英雄名字的修改
save(): void {
this.heroService.updateHero(this.hero)
.subscribe(() => this.goBack());
}
hero.service.ts中添加服务
updateHero(hero: Hero): Observable<any> {
return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
tap(_ => this.log(`updated hero id=${hero.id}`)),
catchError(this.handleError<any>('updateHero'))
);
}
并设置请求头
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
添加新英雄：
在heroes.component.html中插入点击事件
<div>
<label>Hero name:
<input #heroName />
</label>
<!-- (click) passes input value to add() and then clears the input -->
<button (click)="add(heroName.value); heroName.value=''">
add
</button>
</div>
heroes.component.html 中调用点击处理器（add()）
add(name: string): void {
name = name.trim();
if (!name) { return; }
this.heroService.addHero({ name } as Hero)
.subscribe(hero => {
this.heroes.push(hero);
});
}
addHero()方法添加hero.service.ts服务
addHero(hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
catchError(this.handleError<Hero>('addHero'))
);
}
删除英雄
在英雄列表中id列表的li后添加点击事件
<button class="delete" title="delete hero"
(click)="delete(hero)">x</button>
heroes.component.html 中添加delete() 处理器
delete(hero: Hero): void {
this.heroes = this.heroes.filter(h => h !== hero);
this.heroService.deleteHero(hero).subscribe();
}
把 deleteHero() 方法添加hero.service.ts
deleteHero(hero: Hero | number): Observable<Hero> {
const id = typeof hero === 'number' ? hero : hero.id;
const url = `${this.heroesUrl}/${id}`;
return this.http.delete<Hero>(url, this.httpOptions).pipe(
tap(_ => this.log(`deleted hero id=${id}`)),
catchError(this.handleError<Hero>('deleteHero'))
);
}
名字搜索:
创建搜索文件：ng generate component hero-search
添加搜索框
<!-- 英雄搜索 -->
<div id="search-component">
<h4><label for="search-box">Hero Search</label></h4>
<input #searchBox id="search-box" (input)="search(searchBox.value)" />
<ul class="search-result">
<!-- heroes$ 是一个 Observable 而不是数组 -->
<li *ngFor="let hero of heroes$ | async">
<a routerLink="/detail/{{hero.id}}">
{{hero.name}}
</a>
</li>
</ul>
</div>
设置搜索ts文件
import { Observable, Subject } from 'rxjs';
import {
debounceTime, distinctUntilChanged, switchMap
} from 'rxjs/operators';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
// heroes$ 声明为一个 Observable
heroes$: Observable<Hero[]>;
private searchTerms = new Subject<string>();
search(term: string): void {
this.searchTerms.next(term);
}
constructor(private heroService: HeroService) { }
// 串联 RxJS 操作符
ngOnInit(): void {
this.heroes$ = 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.heroService.searchHeroes(term)),
);
}
配置仪表视图：
添加搜索文件视图：在dashboard.component.html下添加
<app-hero-search></app-hero-search>
配置搜索服务
searchHeroes(term: string): Observable<Hero[]> {
if (!term.trim()) {
// if not search term, return empty hero array.
return of([]);
}
return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
tap(x => x.length ?
this.log(`found heroes matching "${term}"`) :
this.log(`no heroes matching "${term}"`)),
catchError(this.handleError<Hero[]>('searchHeroes', []))
);
}
问题：
感觉自己写不出来这样的文件，现在还有许多功能不会
传递数据的方法不是很了解有什么用处
返回列表
评论