前后端数据通信

时间：2023-01-24 10:52:59

一.语言选择

  • 后端选择go，数据库postgresql
  • 前端选择angular

二. 前后端通信

前端angular获取请求

  • 目前主要说的是http请求；
  • 在请求服务器通信时
    • 需要在头设置token,给服务器认证
    • get请求获取数据，需要把当前页page, 每页的显示多少条记录limit发给服务端，这里主要是在地址上传递给服务器
    • post请求添加数据，需要把前端所要发送的结构体通过json数据格式发送给服务端去接收，这里前端也要做好数据校验工作
    • pacth,put请求修改数据，第一个主要用来修改部分数据，put主要用来修改全部数据，都需要传递一个ID给服务端进行选择修改；
    • delete请求删除数据，在实际项目中，最好是通过禁用或启用来代替删除的工作

angular设置请求头代码

通过请求资源的参数

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);
  }
}

拦截器中设置header头信息

angular获取请求头代码

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);
      // }
    )
  }

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'
    })
  }

后端go获取数据

  • 用到的web框架为gin
  • 获取客户端发送过来的请求头 token, 作为客户端是否有权限操作
  • 通过请求的资源(get, post, pathc,put, delete),做相应的处理
    • get请求的资源，获取总条数，通过分页参数获取数据，返回数据给客户端，其中总条数通过发送头（X-Total-Count）传给客户端
    • post，获取客户端数据，然后进行数据校验，校验成功，插入数据，返回受影响的条数，和插入的ID
    • patch, pust , 获取要修改的ID，和修改的数据，服务端校验数据，插入数据，返回修改后的数据
    • delete，获取要删除的ID，返回删除成功的标记

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,
	})
}
标签：

相关文章