您的位置:首页 > 编程学习 > > 正文

vue 中后台管理系统(Vue实现学生管理功能)

更多 时间:2021-10-23 10:18:13 类别:编程学习 浏览量:2038

vue 中后台管理系统

Vue实现学生管理功能

本文实例为大家分享了Vue实现学生管理的具体代码,供大家参考,具体内容如下

vue 中后台管理系统(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 学生管理
    您可能感兴趣