纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue学生管理功能 Vue实现学生管理功能

影修   2021-06-24 我要评论
想了解Vue实现学生管理功能的相关内容吗影修在本文为您仔细讲解Vue学生管理功能的相关知识和一些Code实例欢迎阅读和指正我们先划重点: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();

相关文章

猜您喜欢

  • feign接口返泛型属性为null 解决feign接口返回泛型设置属性为null的问题

    想了解解决feign接口返回泛型设置属性为null的问题的相关内容吗PolarisHuster在本文为您仔细讲解feign接口返泛型属性为null的相关知识和一些Code实例欢迎阅读和指正我们先划重点:feign接口,返回泛型,设置属性null下面大家一起来学习吧..
  • Python设计模式 详解Python为什么不用设计模式

    想了解详解Python为什么不用设计模式的相关内容吗有数可据在本文为您仔细讲解Python设计模式的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Python设计模式的弊端,Pythpn设计模式下面大家一起来学习吧..

网友评论

Copyright 2020 www.gamerfx.net 【游戏天空】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式