第4章 用户课程管理

1、课程分页

本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数是键值对形式 后台响应数据格式使用json数据格式。

请求参数包括页码、每页显示记录数、查询条件。

请求参数的键值对格式为：currentPage:1,pageSize:10,Course_Username:''adm''

后台响应数据包括总记录数、当前页、每页显示条数、需要展示的数据集合。

响应数据的json格式为：

{

"currentPage":1, ​ "pageSize":3, ​ "totalCount":8, ​ "totalPage":3, ​ "list":[{课程1},{课程2}..]

}

如下图：

前端页面：

1.1创建用户课程管理模块实体类

package com.ujiuye.entity;
​
​
public class CourseUser {
​
  private int id;
  private int cid;//课程编号
  private int uid;//用户编号
​
  private Course course;//课程对象
  private User user;//用户对象
​
  public CourseUser() {
  }
​
  public CourseUser(int id, int cid, int uid, Course course, User user) {
    this.id = id;
    this.cid = cid;
    this.uid = uid;
    this.course = course;
    this.user = user;
  }
​
  public Course getCourse() {
    return course;
  }
​
  public void setCourse(Course course) {
    this.course = course;
  }
​
  public User getUser() {
    return user;
  }
​
  public void setUser(User user) {
    this.user = user;
  }
​
  public int getId() {
    return id;
  }
​
  public void setId(int id) {
    this.id = id;
  }
​
​
  public int getCid() {
    return cid;
  }
​
  public void setCid(int cid) {
    this.cid = cid;
  }
​
​
  public int getUid() {
    return uid;
  }
​
  public void setUid(int uid) {
    this.uid = uid;
  }
​
}
​

1.2 完善页面

1.2.1 定义分页相关模型数据

tableData: [],//当前页要展示的分页列表数据
search: '',//查询条件
pageSize: 3,//每页显示的记录数
currentPage: 1,//当前页码
totalCount: '',//总记录数

1.2.2 定义分页方法

在页面中提供了findAllByPage方法用于分页查询，为了能够在/Course_User_user/index.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findAllByPage方法

实现步骤：

1. 初始化请求参数

   如果有查询条件，就携带查询条件查询符合条件的当前页数据

2. 封装请求参数

   当前页、默认每页记录数、查询条件

3. 发送axios请求，处理回调

   把数据集和总记录数等数据重新赋值给模型

/*加载数据*/
created() {
    this.findAllByPage();
}

/* 分页查询 */
 /* 分页方法 */
findAllByPage() {
     var params=  new URLSearchParams()
     params.append("currentPage",this.currentPage)
     params.append("pageSize",this.pageSize)
    //发送请求
    axios.post("http://localhost/education/c_u?method=findPages",params).then(resp=>{
​
        this.tableData=resp.data.list
        this.currentPage=resp.data.currentPage
        this.pageSize=resp.data.pageSize
        this.totalCount=resp.data.totalCount
        this.totalPage=resp.data.totalPage
​
    })
},

注意此次用的组合条件方式是直接前台对从数据库中得到的数据之间筛选 具体代码请看：

1.2.3 完善分页方法执行时机

除了在created钩子函数中调用findAllByPage方法查询分页数据之外，当用户输入完查询条件后分也需要调用findAll方法重新发起查询请求。

为查询按钮绑定离开焦点事件，调用findAllByPage方法

<template slot="header" slot-scope="scope">
    <el-input v-model="search" size="mini" placeholder="输入选课人搜索" />
</template>

为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="currentPage" :page-sizes="[3, 4, 5, 6]" :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
</el-pagination>

定义handleCurrentChange方法

handleCurrentChange: function (currentPage) {
    this.currentPage = currentPage;
    this.findAllByPage()
}

定义handleSizeChange方法

// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
    this.pageSize = size;
    this.findAllByPage()
},

1.3 后台代码

1.3.1 servlet

修改education工程，在Course_UserServlet中增加分页查询方法

public void findByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //获取想看的页码
    String currentPage = request.getParameter("currentPage");
    //获取每页显示条数
    String pageSize = request.getParameter("pageSize");
    //调用业务组装PageBean
    PageBean<CourseUser> pb = service.findByPage(currentPage, pageSize);
    //转json
    String asString = JsonUtils.toJson(pb, response);
    response.getWriter().print(asString);
}

1.3.2 service类

修改com.ujiuye.service，在Course_UserService实现类中扩展分页查询方法

    CourseUserDao dao= new CourseUserDao();
    UserDao userDao = new UserDao();
    CourseDao courseDao = new CourseDao();
    public PageBean<CourseUser> findPages(String currentPage, String pageSize) {
​
        int cpage = Integer.parseInt(currentPage);
        int size = Integer.parseInt(pageSize);
​
        PageBean<CourseUser> pb = new PageBean<>();
​
        pb.setCurrentPage(cpage);
        pb.setPageSize(size);
        //查询总条数
        String sql = "select * from course_user";
        //查询总条数
        int totalCount = dao.getListEntity(sql, CourseUser.class).size();
        pb.setTotalCount(totalCount);
        //计算总页数
        int totalPage =totalCount%size==0?totalCount/size:totalCount/size+1;
        pb.setTotalPage(totalPage);
​
        //查询想看的数据
        sql = "select * from course_user limit ?,?";
        List<CourseUser> courseUserList = dao.getListEntity(sql, CourseUser.class, (cpage - 1) * size, size);
​
        for (CourseUser courseUser : courseUserList) {
            //获取每个人选择的课程信息 courseUser
            //根据用户uid获取用户对象
            User user = userDao.getEntity("select * from user where uid =?", User.class, courseUser.getUid());
            courseUser.setUser(user);
            //根据课程cid获取课程对象
            Course course = courseDao.getEntity("select * from course where cid =?", Course.class, courseUser.getCid());
            courseUser.setCourse(course);
        }
​
        pb.setList(courseUserList);
        return pb;
    }

2. 批量删除用户课程信息

2.1 完善页面

为了防止用户误操作，点击删除按钮时需要弹出确认删除的提示，用户点击取消则不做任何操作，用户点击确定按钮再提交删除请求。

2.1.1 全选全不选功能实现

当点击页面中表头上的复选框后、当前页面中所有的复选框将会选中并收集选中行的课程id放入数组中、反之则不选中

//批量删除被选中的复选框
handleSelectionChange(val) {
    this.multipleSelection = val;
},

2.1.2 绑定单击事件

需要为删除选中按钮绑定单击事件，并且所选行数据作为参数传递给处理函数

<el-button type="warning" @click="delAll()">删除选中</el-button>

用户点击删除按钮会执行delAll方法，此处需要完善delAll方法，弹出确认提示信息。ElementUI提供了$confirm方法来实现确认提示信息弹框效果

2.1.3 发送请求

如果用户点击确定按钮就需要发送ajax请求，并且将当前课程用户的id作为参数提交到后台进行删除操作

实现步骤：

1. 提示是否删除

2. 确认删除，发送axios请求，进行回调处理

   1. 删除成功，弹出消息, 提示服务器返回的正常消息，刷新当前页面

   2. 删除失败，弹出消息, 提示服务器返回的错误消息

/* 批量删除 */
delAll() {
    this.$confirm("确认删除当前选中的记录吗?", "提示", { type: 'warning' }).then(() => {
        const length = this.multipleSelection.length;
        for (let i = 0; i < length; i++) {
            this.delarr.push(this.multipleSelection[i].id);
        }
        //发送axios请求
        let url = "http://localhost/education/cs?method=delAll&ids=" + this.delarr
​
        axios.get(url).then(resp => {
            if (resp.data.code == 200) {
                this.$message({
                    showClose: true,
                    message: resp.data.message,
                    type: 'success'
                });
​
            }else{
                this.$message({
                    message:resp.data.message,
                    type:'warning'
                })
            }
            window.setTimeout("window.location='index.html'",1000)
        })
​
​
    }).catch(()=>{
        alert("取消删除")
    })
​
}

2.2 后台代码

2.2.1 servlet

修改education工程，在Course_UserServlet中增加批量删除用户课程方法

public void delAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
    String ids = request.getParameter("ids");
    int row = service.delAll(ids);
    if (row > 0) {
        vo = new ResultVO(200, "批量删除成功", null);
    } else {
        vo = new ResultVO(500, "批量删除成功", null);
    }
    String asString =JsonUtils.toJson(vo,response);
    response.getWriter().print(asString);
}

2.2.2 service类

修改com.ujiuye.service，在Course_UserService实现类中扩展方法实现

public int delAll(String ids) {
    String[] arr = uids.split(",");
    int index =0;
    for (String id : arr) {
        int row = dao.update(id);
        if(row>0){
            index++;
        }
    }
    return index;
}

3. 编辑用户课程

3.1 完善页面

用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。

3.1.1 绑定单击编辑按钮事件

需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数

<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>

    /* 修改的回显 */
    handleEdit(index, row) {
        //给修改表单中的user.name  和user.phone取值使用
        this.ruleForm.user=row.user
        //将当前行id保留
        this.id=row.id
        //为了让我们当前课程的名称自动回显
        this.ruleForm.cid=row.course.cid
        //表单中所有的课程数据
        this.findAllCourse()
        this.dialogFormVisible1=true

    },
    findAllCourse(){
        //发送ajax
        axios({
            url:"http://localhost/education/courses?method=findAllCourse&uid="+this.ruleForm.user.uid,
            method:"get"
        }).then(resp=>{
           this.courseNames= resp.data
        })
    },

3.1.2 发送请求

在编辑窗口中修改完成后，点击确定按钮提交请求，所以需要为确定按钮绑定事件并提供处理函数submitForm

实现步骤：

1. 表单验证成功，发送axios请求，进行回调处理

   2.编辑成功，弹出成功提示，显示服务返回的消息

   3.编辑失败，弹出错误提示，显示服务返回的消息

   4.无论执行结果如何,隐藏编辑窗口, 重新发送请求查询分页数据

<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>

/* 修改提交 */
submitForm(formName) {
  this.$refs[formName].validate((valid)=>{
      if(valid){
        //组装数据
        var params= new URLSearchParams()
        params.append("cid",this.ruleForm.cid)
        params.append("uid",this.ruleForm.user.uid)
        params.append("id",this.id)

        axios.post("http://localhost/education/c_u?method=update",params).then(resp=>{
            if(resp.data.code==200){
                //提示
                this.$message.success(resp.data.message)
                this.currentPage=1
                //重新查询
                this.findAllByPage()
                //关闭对话框
                this.dialogFormVisible1=false
            }else{
                this.$message.warning(resp.data.message)
            }
        })
      }else{
        this.$message.warning(`表单校验失败`)
      }
  })
}
},

3.2 后台代码

3.2.1 servlet

修改education工程，在Course_UserServlet中增加更新用户课程方法

  public void update(HttpServletRequest request, HttpServletResponse response) {
        //接受请求参数
        String cid = request.getParameter("cid");
        String uid = request.getParameter("uid");
        String id = request.getParameter("id");
        //调用业务
       int row = service.updateCourseUser(cid,uid,id);
        //响应处理结果
        if (row>0) {
            vo = new ResultVo(200, "修改选课成功", null);
        }else{
            vo = new ResultVo(500, "修改选课失败", null);
        }

        JsonUtils.objToJson(vo,response);
    }

3.2.3 service类

修改com.ujiuye.service，在Course_UserService实现类中扩展方法实现

    public int updateCourseUser(String cid, String uid, String id) {

        String sql = "update course_user set cid =?,uid=? where id =?";

        return dao.update(sql,cid,uid,id);
    }

5.详情课程

5.1 完善页面

用户点击详情按钮时，需要弹出详情窗口并且将当前记录的数据赋值给ruleForm数组进行回显

5.1.1 绑定单击详情按钮事件

需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数

<el-button size="mini" type="danger" @click="handleLook(scope.$index, scope.row)">详情</el-button>

/*  详情回显 */
handleDelete(index, row) {
    //打开详情对话框
    this.dialogFormVisible2 = true;
    this.ruleForm = row;
}