Vue实现学生管理功能 Vue实现学生管理功能

本文实例为大家分享了Vue实现学生管理的具体代码，供大家参考，具体内容如下
【Vue实现学生管理功能】
文章图片

文章图片

难点

学生新建与学生编辑功能都用的一个组件，如何对其进行判断校验。
对用户输入进行校验，非空判断。
向服务器发送JSON数据，后端对JSON数据的转换。
三层架构中，各层功能划分
使用注解对学生数据进行操作

整体难度一般，但是小点儿比较多，综合性强。
例如我用axios像后端发送post时候，很容易忽略格式。
前后端数据交互时候，能传大就传大，数据越完整，数据表现越强
拿到后端数据时候，拆包层级要分清。

部分代码
Vue.js

显示分页学生信息

// Servlet String currentPage = request.getParameter("currentPage"); String pageSize = request.getParameter("pageSize"); PageBean pageBean = showAllStudentService.showAllStudent(Integer.parseInt(currentPage), Integer.parseInt(pageSize)); ObjectMapper objectMapper = new ObjectMapper(); String json = objectMapper.writeValueAsString(pageBean); response.getWriter().write(json); // Service@Test@Overridepublic PageBean showAllStudent(int currentPage, int pageSize) {PageHelper.startPage(currentPage, pageSize); SqlSession sqlSession = SqlSessionUtils.getSqlSession(false); StudentMapper mapper = sqlSession.getMapper(StudentMapper.class); List students = mapper.showStudent(); PageInfo pageInfo = new PageInfo<>(students); long total = pageInfo.getTotal(); int pages = pageInfo.getPages(); PageBean pageBean = new PageBean<>(total, students, pages); sqlSession.close(); return pageBean; }// Dao /*** 首页显示所有学生* @return 学生列表*/@Select("SELECT * FROM student")List showStudent();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。