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中router的具体用法(vue-router中hash模式与history模式的区别)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vueassets文件路径(vue如何根据url下载非同源文件)
- vue插槽实例(Vue中插槽slot的使用方法与应用场景详析)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue渲染数据的过程(Vue前端高效开发之列表渲染指令)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- 做网红真的很能赚钱吗(做网红真的很能赚钱吗)
- 10句英语常用(英语常用900句)
- 爱情能当饭吃吗(爱情能当饭吃吗说说)
- 白T恤穿法(白t恤)
- 你怎么忘了是说先爱我(你怎么忘了如何爱我)
- 做技术难吗(技术难不难)
热门推荐
- php加密平台(PHP7实现和CryptoJS的AES加密方式互通示例AES-128-ECB加密)
- mysql8.0.20安装教程图解(mysql 8.0.24 安装配置方法图文教程)
- docker查看运行容器参数(Docker容器时区调整操作)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- css3渐变放大功能(CSS3 渐变Gradients之CSS3 线性渐变)
- js实现商品添加(js实现购物网站放大镜功能)
- 常见的web应用服务器有哪些(常用的web服务器软件整理)
- 如何设置nginx使用ip访问(nginx基于域名,端口,不同IP的虚拟主机设置的实现)
- javascript 函数生命周期(JavaScript sleep睡眠函数的使用)
- netcore连什么数据库好(.Net Core导入千万级数据至Mysql的步骤)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9