一.语言选择
- 后端选择go,数据库
postgresql
- 前端选择
angular
二. 前后端通信
前端angular获取请求
- 目前主要说的是http请求;
- 在请求服务器通信时
- 需要在头设置
token
,给服务器认证 - get请求获取数据,需要把当前页page, 每页的显示多少条记录limit发给服务端,这里主要是在地址上传递给服务器
- post请求添加数据,需要把前端所要发送的结构体通过json数据格式发送给服务端去接收,这里前端也要做好数据校验工作
- pacth,put请求修改数据,第一个主要用来修改部分数据,put主要用来修改全部数据,都需要传递一个ID给服务端进行选择修改;
- delete请求删除数据,在实际项目中,最好是通过禁用或启用来代替删除的工作
- 需要在头设置
angular设置请求头代码
1. 通过请求资源的参数
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UserType } from '../user/user.type';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
getData(curPage: number, pageSize: number) {
// 设置请求头部信息
const httpOptions = new HttpHeaders({
Authorization: 'my-appid',
Token: 'my_token'
})
console.log(MyHttpParams)
return this.http.get<UserType[]>(`/api/ctp/users?_page=${curPage}&_limit=${pageSize}`, {observe: 'response', headers: MyHttpParams});
}
updateData(id: number, user: UserType) {
return this.http.patch(`api/ctp/users/${id}`, user);
}
}
请求头合起来写有错误,不知道哪里错误
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UserType } from '../user/user.type';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
getData(curPage: number, pageSize: number) {
// 设置请求头部信息
const httpOptions = {
observe: 'response', // 加上这个就有错误
headers: new HttpHeaders({
Authorization: 'my-token',
Token: 'xxxx'
})
}
return this.http.get<UserType[]>(`/api/ctp/users?_page=${curPage}&_limit=${pageSize}`, httpOptions);
}
}
2. 拦截器中设置header头信息
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
console.log("http 拦截器开始", request.url);
const token = localStorage.getItem('ctp-token');
// 需要克隆一份请求头,在克隆的请求头中添加头信息的,然后返回给下一个
const authReq = request.clone({
headers: request.headers.set("token", `${token}`),
})
console.log("headers:", authReq.headers);
console.log("responseType:", authReq.responseType);
return next.handle(authReq);
}
}
angular获取请求头代码
- 请求参数中需要加入
observe: 'response'
,默认是body
user.service.ts
文件, 在请求参数中加入 observe: 'response'
getUsers(curPage: number, pageSize: number) {
const url = `/api/admin/users?_page=${curPage}&_limit=${pageSize}`
// 获取整个返回体,包括返回头
return this.http.get<UserType[]>(url, {
observe: 'response'
})
}
user.component.ts
文件
fetchData(curPage: number, pageSize:number) {
this.userService.getUsers(curPage, pageSize).subscribe((res: HttpResponse<any>) => {
// console.log('users:', res.body.data);
if (res.body != null) {
// 获取服务端发送过来的头信息
this.length = Number(res.headers.get('X-Total-Count'));
this.userLists = res.body.data;
// 这里需要服务器返回的记录长度
this.dataSource = new MatTableDataSource<UserType>(this.userLists);
console.log('headers:', res.headers);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
},
// error => {
// console.log('error:', error);
// }
)
}
后端go获取数据
- 用到的web框架为gin
- 获取客户端发送过来的请求头
token
, 作为客户端是否有权限操作 - 通过请求的资源(get, post, pathc,put, delete),做相应的处理
- get请求的资源,获取总条数,通过分页参数获取数据,返回数据给客户端,其中总条数通过发送头(
X-Total-Count
)传给客户端 - post,获取客户端数据,然后进行数据校验,校验成功,插入数据,返回受影响的条数,和插入的ID
- patch, pust , 获取要修改的ID,和修改的数据,服务端校验数据,插入数据,返回修改后的数据
- delete,获取要删除的ID,返回删除成功的标记
- get请求的资源,获取总条数,通过分页参数获取数据,返回数据给客户端,其中总条数通过发送头(
go设置请求头代码
func (con UserController) Index(c *gin.Context) {
c.Writer.Header().Set("X-Total-Count", "50")
// 查找用户
userList := []models.User{}
models.DB.Find(&userList)
c.JSON(http.StatusOK, gin.H{
"data": userList,
})
}
go获取请求头代码
func (con UserController) Index(c *gin.Context) {
fmt.Println(c.Request.Header.Get("Authorization"))
// 查找用户
userList := []models.User{}
models.DB.Find(&userList)
c.JSON(http.StatusOK, gin.H{
"data": userList,
})
}