(Angular)前后端完成分页处理，砥砺前行

Vue 面试题

1.Vue 双向绑定原理 2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？ 3.你是如何理解 Vue 的响应式系统的? 4.虚拟 DOM 实现原理 5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异? 6.Vue 中 key 值的作用？ 7.Vue 的生命周期 8.Vue 组件间通信有哪些方式? 9.watch、methods 和 computed 的区别? 10.vue 中怎么重置 data? 11.组件中写 name 选项有什么作用？ 12.vue-router 有哪些钩子函数? 13.route 和 router 的区别是什么？ 14.说一下 Vue 和 React 的认识，做一个简单的对比 15.Vue 的 nextTick 的原理是什么？ 16.Vuex 有哪几种属性? 17.vue 首屏加载优化 18.Vue 3.0 有没有过了解？ 19.vue-cli 替我们做了哪些工作？ …

算法

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数 ...

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

开源分享：docs.qq.com/doc/DSmRnRG…

• 当前页码

*/

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：

接下来是前台获取这个数据， 我前台框架是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实现订阅，从而实现异步

Vue 面试题

1.Vue 双向绑定原理 2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？ 3.你是如何理解 Vue 的响应式系统的? 4.虚拟 DOM 实现原理 5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异? 6.Vue 中 key 值的作用？ 7.Vue 的生命周期 8.Vue 组件间通信有哪些方式? 9.watch、methods 和 computed 的区别? 10.vue 中怎么重置 data? 11.组件中写 name 选项有什么作用？ 12.vue-router 有哪些钩子函数? 13.route 和 router 的区别是什么？ 14.说一下 Vue 和 React 的认识，做一个简单的对比 15.Vue 的 nextTick 的原理是什么？ 16.Vuex 有哪几种属性? 17.vue 首屏加载优化 18.Vue 3.0 有没有过了解？ 19.vue-cli 替我们做了哪些工作？ …

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数 ...

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666