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插槽的分类(vue具名插槽的基本使用实例)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- vue点击导航进行内容切换(vue实现顶部左右滑动导航)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue组件详解(Vue的方法和属性案例详解)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue应用转flutter(Vue和Flask通信的实现)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vuefor指令使用教程(Vue必学知识点之forEach的使用)
- vue集成文件上传插件(vue 实现上传组件)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9