vue 中后台管理系统(Vue实现学生管理功能)
类别:编程学习 浏览量:2038
时间:2021-10-23 10:18:13 vue 中后台管理系统
Vue实现学生管理功能本文实例为大家分享了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>
显示分页学生信息
// Servlet String 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 @Override public 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中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- vue中的定时函数(vue计时器的实现方法)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue项目做过哪些打包优化(Vue项目优化的一些实战策略)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vue怎么实现倒计时(Vue计时器的用法详解)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue 网页打印(vue打印功能实现的两种方法总结)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
热门推荐
- laravel框架两表联查(Laravel 使用查询构造器配合原生sql语句查询的例子)
- 如何使用HttpModule实现sql防注入
- docker-compose启动单个容器(docker-compose快速搭建docker私有仓库的步骤)
- iis搭建web服务器和ftp教程(Windows实例通过IIS如何搭建多个FTP站点?)
- mysql和utf8哪个好(为什么在MySQL中不建议使用UTF-8)
- Docker 部署单机版 Pulsar 和集群架构 Redis(开发神器)的方法(Docker 部署单机版 Pulsar 和集群架构 Redis开发神器的方法)
- linux安装nacos教程(Nacos配置MySQL8的方法)
- python语句三元运算符(Python中三元表达式的几种写法介绍)
- .NET中pdb文件的作用
- ASP.NET中Partial Class部分类
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9