(Angular)前端和后端完成寻呼

基本思想是在后台获取所有数据。

按从前景和当前页码获得的每页金额

然后通过分页插件将分页的所有属性和当前页面的数据返回到前台。

首先，我们在后端创建几个实体类和一个工具类。Utils

请求分页属性：

PageRequest:

/**
 * 分页请求
 */
public class PageRequest {
    /**
     * 当前页码
     */
    private int pageNum;
    /**
     * 每页数量
     */
    private int pageSize;

    public int getPageNum() {
        return pageNum;
    }
    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }
    public int getPageSize() {
        return pageSize;
    }
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
}

返回的分页结果集：

PageResult：

/**
 * 分页返回结果
 */
public class PageResult {
    /**
     * 当前页码
     */
    private int pageNum;
    /**
     * 每页数量
     */
    private int pageSize;
    /**
     * 记录总数
     */
    private long totalSize;
    /**
     * 页码总数
     */
    private int totalPages;
    /**
     * 数据模型
     */
    private List content;
    public int getPageNum() {
        return pageNum;
    }
    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }
    public int getPageSize() {
        return pageSize;
    }
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
    public long getTotalSize() {
        return totalSize;
    }
    public void setTotalSize(long totalSize) {
        this.totalSize = totalSize;
    }
    public int getTotalPages() {
        return totalPages;
    }
    public void setTotalPages(int totalPages) {
        this.totalPages = totalPages;
    }
    public List getContent() {
        return content;
    }
    public void setContent(List content) {
        this.content = content;
    }
}

工具类：

PageUtils：

public class PageUtils {
    /**
     * 将寻呼信息封装到统一接口中
     * @param pageRequest
     * @param pageInfo
     * @return
     **/
    public static PageResult getPageResult(PageRequest pageRequest, PageInfo pageInfo) {
        PageResult pageResult = new PageResult();
        pageResult.setPageNum(pageInfo.getPageNum());
        pageResult.setPageSize(pageInfo.getPageSize());
        pageResult.setTotalSize(pageInfo.getTotal());
        pageResult.setTotalPages(pageInfo.getPages());
        pageResult.setContent(pageInfo.getList());
        return pageResult;
    }
}

我的UserController：

// 参数：pageNum: 1, pageSize: 5
@CrossOrigin(origins = {"http://localhost:4200", "null"})
@RequestMapping(value = "/findUserLogPage", method = RequestMethod.POST)
@ResponseBody
public Object findPage(@RequestBody PageRequest pageQuery) {
    return userService.findPage(pageQuery);
}

UserService:

PageResult findPage(PageRequest pageRequest);

UserServiceImpl（使用分页插件帮助分页）:

@Override
public PageResult findPage(PageRequest pageRequest) {
   return PageUtils.getPageResult(pageRequest, getPageInfo(pageRequest));
}

/**
 * 调用分页插件以完成分页
 *
 */
private PageInfo getPageInfo(PageRequest pageRequest) {
   int pageNum = pageRequest.getPageNum();
   int pageSize = pageRequest.getPageSize();
   // PageHelper写在需要分页的地方。sql上面的查询，否则我不知道该给哪一个sql做分页
   PageHelper.startPage(pageNum, pageSize);
   List sysMenus = logDao.selectPage();
   return new PageInfo(sysMenus);
}

Dao层：

List selectPage();

XML：

      SELECT
u.user_id,
u.user_name,
u.description,
l.register_datetime
FROM
t_log l
INNER JOIN t_user u ON u.user_id = l.user_id

接下来是前景以获取该数据， 我的前框是Angular

首先，让我们先使用它。 postman 测试返回值是什么。

[外链图片传输失败,源站可以具有防盗链机制。,建议保存图片并直接上传。(img-G4f1Bjuv-1594703786131)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200714121424021.png)]

在知道返回值是什么样子之后， 我们可以把这个请求发送到前台的左半部， 然后在获取时将值分配给该返回值类型的右半部分， 看看代码

export class LogComponent implements OnInit {
  totalItems: number;
  currentPage = 1;
  userId = ; // 用户ID
  userName = ; // 用户名
  description = ; // 用户描述
  datetime = ; // 登陆时间
  csvSeparator = ,;
  logs: Logs[];
  pages: Page;
  page: number;
  totalSize: number;
  totalPages: number;
  pageSize: number;
  constructor(private getAllLogsService: GetAllLogsService, private router: Router) { }

  ngOnInit(): void {
    this.page = 1;
    // const params = {
    //   userId: this.userId,
    //   userName: this.userName,
    //   description: this.description,
    //   datetime: this.datetime
    // };
    // this.getAllLogsService.getAllLogs(params).subscribe((logs: Logs[]) => {
    //   this.logs = logs;
    // });
    const userLogPage = {
      pageNum: this.page,
      pageSize: 5
    };
    this.getAllLogsService.getUserLogPage(userLogPage).subscribe((pages: Page) => {
      this.pages = pages;
      this.logs = pages.content;
      this.totalPages = pages.totalPages;
      this.totalSize = pages.totalSize;
      this.pageSize = pages.pageSize;
      this.totalItems = Math.ceil(pages.totalSize / 5) * 10;
    });
  }

如上所述（未完成， 稍后补充）， 这种方法是首次使用的ngOnInit里面， 这样他就可以在开始加载页面时获得有关分页的数据。

， 然后让我们看看前台分页组件。

      

        

          
          
        
      
      
        当前页面的页数: {{page}}
        总页数为: {{totalPages}}
        所有数据都是: {{totalSize}}
        单页数据数: {{pageSize}}
        
      

pageChanged 调用函数， 让我们来看看这个pageChanged里面写的是什么

  pageChanged(event: any): void {
    this.page = event.page;
    const userLogPage = {
      pageNum: this.page,
      pageSize: 5
    };
    // logs是给导出csv每页数据
    this.getAllLogsService.getUserLogPage(userLogPage).subscribe((pages: Page) => {
      this.pages = pages;
      this.logs = pages.content;
    });
  }

如上图， 每次我们点击更改页数时，我们都会得到一次数据，我会查看这些数据以使首页看起来更好。 我固定了pageSize为5

angular可用于subscribe实现订阅以启用异步

让我们来看看this.getAllLogsService.getUserLogPage(userLogPage)中的代码

import { Injectable } from @angular/core;
import { HttpClient } from @angular/common/http;

@Injectable()
export class GetAllLogsService {
  constructor(private httpClient: HttpClient) { }
  public getAllLogs(data: any) {
    return this.httpClient.post(http://localhost:8080/getAllLog, null);
  }
  public getUserLogPage(data: any) {
    return this.httpClient.post(http://localhost:8080/findUserLogPage, data);
  }
}

将数据发送到后台并取回数据。pages: Page里面

实现效果截图：

我在这里插入一条关于subscribe的知识点, 这涉及到ES6箭头函数是一个问题，箭头函数可以绑定当前上下文。this

所以有两种写法

this.getAllLogsService.getUserLogPage(userLogPage).subscribe((pages: Page)=> {
      // 箭头函数可以绑定当前上下文
      this.pages = pages;
      this.logs = pages.content;
    });

????可以重写

    const _this = this;
    // logs是给导出csv每页数据
    // tslint:disable-next-line: only-arrow-functions
    this.getAllLogsService.getUserLogPage(userLogPage).subscribe(function(pages: Page) {
      // 箭头函数可以绑定当前上下文
      _this.pages = pages;
      _this.logs = pages.content;
    });