Vue-学生管理功能实例

难点

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

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

部分代码

Vue.js

<script>let app = new Vue({el:"#app",data:{currentPage:1, //当前页pageSize:10, //每页显示条数total:0, //总记录数;list:[],//当前页数据//绑定学生信息student:{name:"",age:""}},methods:{pager:function(num){this.currentPage = num;this.getData();},getData:function () {axios.post("/StudentManager/showAllServlet?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then((resp) => {this.list = resp.data.datas;this.total = resp.data.total;});},add:function () {if (this.student.id === undefined) {axios.post("/StudentManager/addStudentServlet", this.student).then((resp) =>{if (resp.data.flag){this.getData();}else {alert("添加失败!");}});}else {axios.post("/StudentManager/updateStudentServlet", this.student).then((resp)=>{if (resp.data.flag){this.getData();}else {alert("修改失败!");}});}},deleteStudent:function (id) {axios.post("/StudentManager/deleteStudentServlet?id="+id).then((resp)=>{if (resp.data.flag){this.getData();}else {alert("删除失败!");}});},findById:function (id) {axios.post("/StudentManager/findByIdStudentServlet?id=" + id).then((resp)=>{this.student = resp.data;});}},mounted:function () {this.getData();}});
</script>

显示分页学生信息

// ServletString currentPage = request.getParameter("currentPage");String pageSize = request.getParameter("pageSize");PageBean<Student> 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<Student> showAllStudent(int currentPage, int pageSize) {PageHelper.startPage(currentPage, pageSize);SqlSession sqlSession = SqlSessionUtils.getSqlSession(false);StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);List<Student> students = mapper.showStudent();PageInfo<Student> pageInfo = new PageInfo<>(students);long total = pageInfo.getTotal();int pages = pageInfo.getPages();PageBean<Student> pageBean = new PageBean<>(total, students, pages);sqlSession.close();return pageBean;}
// Dao/*** 首页显示所有学生* @return 学生列表*/@Select("SELECT * FROM student")List<Student> showStudent();

Vue-学生管理功能实例相关推荐

尚硅谷智慧校园 —— 5、学生管理功能实现
目录 1.回显搜索条件中的班级选项 1.1.在 controller 添加方法 2.查询学生信息(分页带条件) 2.1.在 service 及其实现类添加方法 2.2.在 controller 添加方 ...
一步步使用SpringBoot结合Vue实现登录和用户管理功能
文章目录前言 1.前后端分离简介 2.示例所用技术简介一.环境准备 1.前端 1.1.安装Node.js 1.2.配置NPM源 1.3.安装vue-cli脚手架 1.4.VS Code 1.5.C ...
servlet+mysql实现的学生评教系统(角色:学生、教师、管理员功能：评教、修改密码、评教规则管理、评教结果查看、学生管理、教师管理、班级管理、学生信息、评教结果可视化展示等)
博客目录 servlet+mysql实现的学生评教系统实现功能截图使用技术实现的功能代码写在最后 servlet+mysql实现的学生评教系统本系统学生评教的管理,分为学生.教师.管理员三 ...
vue后台系统管理项目-角色权限分配管理功能
vue后台系统管理项目: 技术选型:vue + element-ui 菜单权限管理模块功能角色列表查询,通过(角色名称:角色编号:状态:启用.禁用)进行角色数据搜索. 查询.重置.新建角色功能角色 ...
c语言实现创建学生成绩表，实现插入、删除和统计等管理功能。
c语言实现创建学生成绩表,实现插入.删除和统计等管理功能. #include <stdio.h> #include <stdlib.h> #include <malloc ...
php学生成绩管理系统，数据库使用MySQL，包括源代码和数据库SQL文件，具有学生和教师登录管理功能
php学生成绩管理系统,数据库使用MySQL,包括源代码和数据库SQL文件,具有学生和教师登录管理功能数据库SQL文件 /*Navicat Premium Data TransferSource S ...
Swing+Mysql实现的学院管理系统（角色：学生、教师、管理员功能包含学生管理、教师管理、班级管理、成绩管理、点名考勤系统、休闲游戏、校园通信、音乐系统、留言管理、专业管理等）
博客目录 Swing+mysql的校园管理系统实现功能截图系统功能使用技术代码写在最后 Swing+mysql的校园管理系统本系统综合了校园管理的所有功能,一共分为三个角色:学生.教师.管 ...
SSH+Mysql实现的作业批改管理系统（功能包含分学生、教师、管理员三种角色登录，作业上传、给老师留言、学习内容下载、作业评分、给学生留言、教师学生管理、公告管理、学习资源管理、作业管理等）
博客目录 SSH+Mysql实现的作业批改管理系统实现功能截图系统功能使用技术代码完整源码 SSH+Mysql实现的作业批改管理系统本系统是一个作业批改管理系统系统,分为三个角色:学生.教 ...
Java MVC+structs2+mysql实现的宿舍管理系统（功能：楼宇管理员管理、学生管理、楼宇管理、宿舍管理、学生入住登记、学生寝室调换、学生迁出登记、学生缺勤记录、迁出记录、修改密码）
博客目录 Structs2宿舍管理系统实现功能截图系统功能以及流程图技术点总结代码写在最后 Structs2宿舍管理系统学生宿舍管理是当代学校中不可或缺的组成部分,在信息化飞速发展的今天, ...

Vue-学生管理功能实例

Vue-学生管理功能实例

难点

部分代码

Vue-学生管理功能实例相关推荐

最新文章

热门文章