返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue实现学生管理功能
  • 667
分享到

Vue实现学生管理功能

2024-04-02 19:04:59 667人浏览 安东尼
摘要

本文实例为大家分享了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
 
    @Select("SELECT * FROM student")
    List<Student> showStudent();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Vue实现学生管理功能

本文链接: https://lsjlt.com/news/129073.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue实现学生管理功能
    本文实例为大家分享了Vue实现学生管理的具体代码,供大家参考,具体内容如下 难点 学生新建与学生编辑功能都用的一个组件,如何对其进行判断校验。 对用户输入进行校...
    99+
    2024-04-02
  • Python实现功能全面的学生管理系统
    本文实例为大家分享了Python实现学生管理系统的具体代码,供大家参考,具体内容如下 功能描述 1.分为两个界面:(1)登录和注册界面 (2)学生管理系统界面2.登录功能和之前发布的...
    99+
    2024-04-02
  • Java 实现完整功能的学生管理系统实例
    目录一、前言二、学生管理系统主要功能在学生类下在学生总部类下:main方法:登录密码验证:打印菜单:增加学生信息:查看学生信息:删除学生信息:修改学生信息:查找学生信息:代码效果演示...
    99+
    2024-04-02
  • Python如何实现功能全面的学生管理系统
    本文小编为大家详细介绍“Python如何实现功能全面的学生管理系统”,内容详细,步骤清晰,细节处理妥当,希望这篇“Python如何实现功能全面的学生管理系统”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。功能描述分...
    99+
    2023-06-30
  • Android实现学生管理系统
    本文实例为大家分享了Android实现学生管理系统的关键性代码,供大家参考,具体内容如下 局部效果图:   实现代码: 1、布局 <?xml ver...
    99+
    2022-06-06
    学生管理系统 系统 Android
  • node.js实现学生档案管理
    本文实例为大家分享了node.js实现学生档案管理的具体代码,供大家参考,具体内容如下 学生档案管理 目标:模板引擎应用,强化node.js项目制作流程 知识点:http请求响应、数...
    99+
    2024-04-02
  • springboot实现学生管理系统
    本文实例为大家分享了SpringBoot实现学生管理系统,供大家参考,具体内容如下 一、创建springboot项目 点击下一步 点击下一步,选择要添加的依赖 点击下一步,...
    99+
    2024-04-02
  • C#实现学生管理系统
    本文实例为大家分享了C#实现学生管理系统的具体代码,供大家参考,具体内容如下 添加3个类,分别实现 IComparer接口,实现对Student类的三个字段的排序。 1、学生类:学号...
    99+
    2022-11-13
    C#学生管理系统 C#学生系统 C#学生管理
  • JavaWeb实现学生管理系统
    JavaWeb实现学生管理系统 一、项目介绍二、项目结构三、前期准备1.配置maven环境,在pom.xml配置文件中配置项目所依赖的jar包2.在MySql数据库中,创建登录注册表login和学生信息表student(1)登录注册...
    99+
    2023-08-16
    servlet java 数据库
  • python编写学生成绩管理系统的逻辑结构及功能实现
    目录学生信息系统一、功能界面 二 、主函数 三 、学生信息录入功能四 、学生信息查找功能五 、删除学生信息六 、学生信息修改功能七 、学生成绩排序八 、 学生人数...
    99+
    2024-04-02
  • python实现学生管理系统源码
    本文实例为大家分享了python实现学生管理系统的具体代码,供大家参考,具体内容如下 一.面向过程版 import os stu_list = [] def show_me...
    99+
    2024-04-02
  • Java实现学生成绩管理系统
    本文实例为大家分享了Java实现学生成绩管理系统的具体代码,供大家参考,具体内容如下 新手练手小项目,主要练习面向对象、循环、数组、排序等等。 本人也是自学练手,代码有不正确的或不完...
    99+
    2024-04-02
  • Java实现学生信息管理界面
    本文实例为大家分享了Java实现学生信息管理界面的具体代码,供大家参考,具体内容如下 主类 package 学生信息管理系统; public class Main { pu...
    99+
    2024-04-02
  • JavaSwing实现小型学生管理系统
    本文实例为大家分享了JavaSwing实现小型学生管理系统的具体代码,供大家参考,具体内容如下 在项目中建立四个包,分别是com.wu.JavaBean、com.wuJavaDao、...
    99+
    2024-04-02
  • Java实现学生管理系统(IO版)
    本文实例为大家分享了Java实现学生管理系统的具体代码,供大家参考,具体内容如下 图解:  cade:  student.java public class ...
    99+
    2024-04-02
  • C++实现学生住宿管理系统
    本文实例为大家分享了C++实现学生住宿管理系统的具体代码,供大家参考,具体内容如下 功能 (1)学生信息包括:姓名、学号、年龄、性别、学院、年级等 (2)宿舍信息包括:宿舍编号、宿舍...
    99+
    2024-04-02
  • C++实现学生宿舍管理系统
    本文实例为大家分享了C++实现学生宿舍管理系统的具体代码,供大家参考,具体内容如下 非常简易,完成个作业够用,仅供初学者参考,不喜勿喷。 #include<stdio.h>...
    99+
    2024-04-02
  • C++实现简单学生管理系统
    本文实例为大家分享了C++实现简单学生管理系统的具体代码,供大家参考,具体内容如下 实现学生管理,其中关键字可以自行替换。经过Visual C++6.0验证可执行成功。 #inclu...
    99+
    2024-04-02
  • C++实现学生档案管理系统
    本文实例为大家分享了C++实现学生档案管理系统的具体代码,供大家参考,具体内容如下 课题描述: 1.为学生档案管理人员编写一个学生档案管理系统 ,用菜单选择方式完成下列功能: 2.学...
    99+
    2024-04-02
  • Java怎么实现学生管理系统
    这篇文章给大家分享的是有关Java怎么实现学生管理系统的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、前言我们前面写了通讯录管理系统,现在我们来写个学生管理系统,其实主干代码都一 不过,在学生管理系统中我添加和...
    99+
    2023-06-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作