JavaWeb综合案例(对学生信息的管理的功能展示）

6、查询所有（查询所有品牌数据）

新增品牌（增加新的品牌数据）

修改品牌（修改品牌数据）

删除品牌（删除品牌数据）

批量删除（删除多条品牌数据）

分页查询（分页展示品牌数据）

条件查询（通过条件精确查询品牌数据）

整体流程：
(1) 前端student.html页面加载完成后，通过表单发送异步请求给Web层的StudentServlet
(2) StudentServlet接收到请求后，调用Service层完成查询所有功能
(3) 在Service层需要编写StudentServiceImpl类，在类中实现List < Student > selectAll()方法，方法中调用Dao层的StudentMapper。编写StudentService接口，声明查询所有的List < Student > selectAll()方法
(4) 在StudentMapper接口中，声明一个查询所有的方法
(5) Dao层把数据查询出来以后，将返回数据封装到Student对象，将对象交给Service层
(6) Service层将数据返回给Web层
(7) Web层获取到Student对象后，将数据转为JSON，响应JSON数据
(8) 前端student.html获取列表数据，展示获取的数据

6.1 后端实现

dao方法实现：
在java目录下的 com.itlii.mapper.StudentMapper 接口中定义抽象方法，
并在StudentMapper.xml中书写sql语句

public interface StudentMapper {
    /**
     * 查询所有
     * @return
     */
    /*@Select("select * from tb_student")*/
//    @ResultMap("studentResultMap")
    List<Student> selectAll();

    /**
     * 添加数据
     * @param student
     */
    void add(Student student);

    /**
     * 删除
     * @param id
     */
    void deleteById(int id);

    /**
     * 修改
     * @param student
     */
//    @Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},status = #{status} where id = #{id}")
    void updateById(Student student);


    /**
     * 批量删除
     * @param ids
     */
    void deleteByIds(@Param("ids") int[] ids);

    /**
     * 分页查询
     * @param begin
     * @param size
     * @return
     */
    List<Student> selectByPage(@Param("begin")int begin,@Param("size")int size);

    /**
     * 查询总记录数
     * @return
     */
    int selectTotalCount();

    /**
     * 分页条件查询
     * @param begin
     * @param size
     * @return
     */
    List<Student> selectByPageAndCondition(@Param("begin")int begin,@Param("size")int size,@Param("student")Student student);

    /**
     * 根据条件查询总记录数
     * @return
     */
    int selectTotalCountByCondition(Student student);

}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itli.mapper.StudentMapper">

    <resultMap id="studentResultMap" type="student">

    </resultMap>
    <insert id="add">
        insert into db1.tb_student values (null,#{roomName},#{roomId},#{className},#{studentId},#{studentName},#{description},#{status})
    </insert>

    <update id="updateById">
        update db1.tb_student set roomName=#{roomName},roomId=#{roomId},className=#{className},studentId=#{studentId},studentName=#{studentName},description=#{description},status=#{status} where id=#{id}
    </update>

    <select id="selectAll" resultType="com.itli.pojo.Student">
        select * from db1.tb_student;
    </select>

    <select id="selectByPage" resultType="com.itli.pojo.Student">
        select * from db1.tb_student limit #{begin},#{size}
    </select>

    <select id="selectTotalCount" resultType="java.lang.Integer">
        select count(*) from db1.tb_student
    </select>

    <!--查询满足条件的数据并进行分页-->
    <select id="selectByPageAndCondition" resultType="com.itli.pojo.Student">
        select *
        from db1.tb_student
        <where>
            <if test="student.roomName != null and student.roomName  != '' ">
                and  roomName like #{student.roomName}
            </if>

            <if test="student.studentId!= null and student.studentId != '' ">
                and  studentId like #{student.studentId}
            </if>

<!--            <if test="student.className!= null and student.className != '' ">-->
<!--                and  className like #{student.className}-->
<!--            </if>-->

            <if test="student.status != null">
                and  status = #{student.status}
            </if>
        </where>
        limit #{begin} , #{size}
    </select>

    <!--查询满足条件的数据条目数-->
    <select id="selectTotalCountByCondition" resultType="java.lang.Integer">
        select count(*)
        from db1.tb_student
        <where>
            <if test="roomName != null and roomName  != '' ">
                and  roomName like #{roomName}
            </if>

            <if test="studentId!= null and studentId != '' ">
                and  studentId like #{studentId}
            </if>

<!--            <if test="className!= null and className != '' ">-->
<!--                and  className like #{className}-->
<!--            </if>-->

            <if test="status != null">
                and  status = #{status}
            </if>
        </where>
    </select>

    <delete id="deleteByIds">
        delete from db1.tb_student where id in
        <foreach collection="ids" item="id" separator="," open="(" close=")">
            #{id}
        </foreach>
    </delete>

    <delete id="deleteById">
        delete from db1.tb_student where id=#{id}
    </delete>
</mapper>

service方法实现：

在java目录下的 com.itli.service 下再创建 impl 包；impl 表示是放 service 层接口的实现类的包。 在该包下创建名为 StudentServiceImpl 类

public class StudentServiceImpl implements StudentService{
   //1、创建 SqlSessionFactory 工厂对象
    SqlSessionFactory factory= SqlSessionFactoryUtils.getSqlSessionFactory();

    @Override
    public List<Student> selectAll() {
        //2、获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3、获取StudentMapper
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
        //4、调用方法
        List<Student> students=mapper.selectAll();
        //5、释放资源
        sqlSession.close();
        return students;
    }

    @Override
    public void add(Student student) {
        //2、获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3、获取StudentMapper
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
        //4、调用方法
        mapper.add(student);
        sqlSession.commit();//提交事务
        //5、释放资源
        sqlSession.close();

    }

    @Override
    public void deleteById(int id) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);

        //4. 调用方法
        mapper.deleteById(id);

        sqlSession.commit();//提交事务

        //5. 释放资源
        sqlSession.close();
    }

    @Override
    public void updateById(Student student) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);

        //4. 调用方法
        mapper.updateById(student);

        sqlSession.commit();//提交事务

        //5. 释放资源
        sqlSession.close();
    }


    @Override
    public void deleteByIds(int[] ids) {
        //2、获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3、获取StudentMapper
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
        //4、调用方法
        mapper.deleteByIds(ids);
        sqlSession.commit();//提交事务
        //5、释放资源
        sqlSession.close();

    }

    @Override
    public PageBean<Student> selectByPage(int currentPage, int pageSize) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
        //4. 计算开始索引
        int begin = (currentPage - 1) * pageSize;
        // 计算查询条目数
        int size = pageSize;
        //5. 查询当前页数据
        List<Student> rows = mapper.selectByPage(begin, size);
        //6. 查询总记录数
        int totalCount = mapper.selectTotalCount();
        //7. 封装PageBean对象
        PageBean<Student> pageBean = new PageBean<>();
        pageBean.setRows(rows);
        pageBean.setTotalCount(totalCount);

        //8. 释放资源
        sqlSession.close();
        return pageBean;
    }

    @Override
    public PageBean<Student> selectByPageAndCondition(int currentPage, int pageSize, Student student) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);


        //4. 计算开始索引
        int begin = (currentPage - 1) * pageSize;
        // 计算查询条目数
        int size = pageSize;

        // 处理student条件，模糊表达式
        String roomName = student.getRoomName();
        if ( roomName!= null && roomName.length() > 0) {
            student.setRoomName("%" + roomName + "%");
        }

        String studentId = student.getStudentId();
        if (studentId != null && studentId.length() > 0) {
            student.setStudentId("%" + studentId + "%");
        }

//        String className = student.getClassName();
//        if (className != null && className.length() > 0) {
//            student.setClassName("%" + className + "%");
//        }

        //5. 查询当前页数据
        List<Student> rows = mapper.selectByPageAndCondition(begin, size, student);

        //6. 查询总记录数
        int totalCount = mapper.selectTotalCountByCondition(student);

        //7. 封装PageBean对象
        PageBean<Student> pageBean = new PageBean<>();
        pageBean.setRows(rows);
        pageBean.setTotalCount(totalCount);

        //8. 释放资源
        sqlSession.close();
        return pageBean;
    }
}

servlet方法实现：

在java目录下的 com.itli.web.servlet 包下定义一个通用的 servlet 类，在定义其他的 servlet 是不需要继承 HttpServlet，而继承定义的 BaseServlet，在 BaseServlet 中调用具体 servlet（如StudentServlet）中的对应方法。从而方便管理和编写web层的 servlet

public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 获取请求路径
        String uri = req.getRequestURI(); // 例如路径为：/studentRoom-demo/student/selectAll
        //2. 获取最后一段路径，方法名
        int index = uri.lastIndexOf('/');
        String methodName = uri.substring(index + 1); //  获取到资源的二级路径  selectAll

        //2. 执行方法
        //2.1 获取StudentServlet /UserServlet 字节码对象 Class

        Class<? extends BaseServlet> cls = this.getClass();
        //2.2 获取方法 Method对象
        try {
            Method method = cls.getMethod(methodName,HttpServletRequest.class,HttpServletResponse.class);
            //4,调用该方法
            method.invoke(this,req,resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }
}

在java目录下的 com.itli.web.servlet 包下定义名为 StudentServlet 的查询所有的 servlet。该 servlet 逻辑如下：

1)调用service的 selectAll() 方法查询所有的品牌数据，并接口返回结果
2)将返回的结果转换为 json 数据
3)响应 json 数据

@WebServlet("/student/*")
public class StudentServlet extends BaseServlet {
    private StudentService studentService = new StudentServiceImpl();

    public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. 调用service查询
    List<Student> students = studentService.selectAll();
    //2. 转为JSON
    String jsonString = JSON.toJSONString(students);
    //3. 写数据
        response.setContentType("text/json;charset=utf-8"); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码
        response.getWriter().write(jsonString);
}

    public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、接收学生数据
        BufferedReader br=request.getReader();
        String params= br.readLine();//json字符串
        //转为Student对象
        Student student=JSON.parseObject(params,Student.class);
        //2、调用service添加
        studentService.add(student);
        //3、响应成功的标识
        response.getWriter().write("success");

    }

    /**
     * 删除
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        //转为 int
        int id = JSON.parseObject(params,int.class);


        //2. 调用service添加
        studentService.deleteById(id);

        //3. 响应成功的标识
        response.getWriter().write("success");
    }

    /**
     * 修改
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void updateById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        //转为 int
        Student student = JSON.parseObject(params, Student.class);


        //2. 调用service添加
        studentService.updateById(student);

        //3. 响应成功的标识
        response.getWriter().write("success");
    }

    /**
     * 批量删除
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收数据 json  [1,2,3]
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串
        //转为 int[]
        int[] ids = JSON.parseObject(params, int[].class);
        //2. 调用service添加
        studentService.deleteByIds(ids);
        //3. 响应成功的标识
        response.getWriter().write("success");
    }

    /**
     * 分页查询
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收 当前页码 和 每页展示条数    url?currentPage=1&pageSize=5
        String _currentPage = request.getParameter("currentPage");
        String _pageSize = request.getParameter("pageSize");

        int currentPage = Integer.parseInt(_currentPage);
        int pageSize = Integer.parseInt(_pageSize);

        //2. 调用service查询
        PageBean<Student> pageBean = studentService.selectByPage(currentPage, pageSize);

        //2. 转为JSON
        String jsonString = JSON.toJSONString(pageBean);
        //3. 写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    /**
     * 分页条件查询
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */

    public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收 当前页码 和 每页展示条数    url?currentPage=1&pageSize=5
        String _currentPage = request.getParameter("currentPage");
        String _pageSize = request.getParameter("pageSize");

        int currentPage = Integer.parseInt(_currentPage);
        int pageSize = Integer.parseInt(_pageSize);

        // 获取查询条件对象
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        //转为 Brand
        Student student= JSON.parseObject(params, Student.class);


        //2. 调用service查询
        PageBean<Student> pageBean = studentService.selectByPageAndCondition(currentPage,pageSize,student);

        //2. 转为JSON
        String jsonString = JSON.toJSONString(pageBean);
        //3. 写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }
}

6.2 前端实现

前端需要在页面加载完毕后发送 ajax 请求，所以发送请求的逻辑应该放在 mounted() 钩子函数中。而响应回来的数据需要赋值给表格绑定的数据模型tableData

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="student" class="demo-form-inline">

        <el-form-item label="状态">
            <el-select v-model="student.status" placeholder="状态">
                <el-option label="在" value="1"></el-option>
                <el-option label="不在" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="宿舍楼名">
            <el-select v-model="student.roomName" placeholder="宿舍楼名">
                <el-option label="1号楼" value="1" ></el-option>
                <el-option label="2号楼" value="2"></el-option>
                <el-option label="3号楼" value="3"></el-option>
                <el-option label="4号楼" value="4"></el-option>
                <el-option label="5号楼" value="5"></el-option>
                <el-option label="6号楼" value="6"></el-option>
            </el-select>
        </el-form-item>

        <!--        <el-form-item label="寝室号">-->
        <!--            <el-input v-model="student.roomId" placeholder="寝室号"></el-input>-->
        <!--        </el-form-item>-->

<!--                <el-form-item label="班级">-->
<!--                    <el-input v-model="student.classRoom" placeholder="班级"></el-input>-->
<!--                </el-form-item>-->

                <el-form-item label="学号">
                    <el-input v-model="student.studentId" placeholder="学号"></el-input>
                </el-form-item>

        <!--        <el-form-item label="姓名">-->
        <!--            <el-input v-model="student.studentName" placeholder="姓名"></el-input>-->
        <!--        </el-form-item>-->


        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->

    <el-row>

        <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑学生信息"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="student" label-width="80px">
<!--            <el-form-item label="宿舍楼名">-->
<!--                <el-input v-model="student.roomName"></el-input>-->
                <el-form-item label="宿舍楼名">
                    <el-select v-model="student.roomName" placeholder="请选择楼宇">
                        <el-option label="1号楼" value="1号楼"></el-option>
                        <el-option label="2号楼" value="2号楼"></el-option>
                        <el-option label="3号楼" value="3号楼"></el-option>
                        <el-option label="4号楼" value="4号楼"></el-option>
                        <el-option label="5号楼" value="5号楼"></el-option>
                        <el-option label="6号楼" value="6号楼"></el-option>
                    </el-select>
                </el-form-item>

            <el-form-item label="寝室号">
                <el-input v-model="student.roomId"></el-input>
            </el-form-item>

            <el-form-item label="班级">
                <el-select v-model="student.className" placeholder="请选择班级">
                    <el-option label="奇迹1班" value="奇迹1班"></el-option>
                    <el-option label="奇迹2班" value="奇迹2班"></el-option>
                    <el-option label="奇迹3班" value="奇迹3班"></el-option>
                    <el-option label="神奇1班" value="神奇1班"></el-option>
                    <el-option label="神奇2班" value="神奇2班"></el-option>
                    <el-option label="神奇3班" value="神奇3班"></el-option>
                    <el-option label="奋进1班" value="奋进1班"></el-option>
                    <el-option label="奋进2班" value="奋进2班"></el-option>
                    <el-option label="奋进3班" value="奋进3班"></el-option>
                    <el-option label="奋进4班" value="奋进4班"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学号">
                <el-input v-model="student.studentId"></el-input>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input v-model="student.studentName"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="student.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="student.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="addStudent">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

<!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
                :data="tableData"
                height="500"
                broder
                style="width:100%"><!-- 固定表头 -->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="roomName"
                    label="宿舍楼名"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="roomId"
                    label="寝室号"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="className"
                    label="班级"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="studentId"
                    label="学号"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="studentName"
                    label="姓名"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    prop="description"
                    label="备注"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    prop="statusStr"
                    align="center"
                    label="状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">
<!--                    <el-button type="primary" round>修改</el-button>-->
<!--                    <el-button type="danger" round>删除</el-button>-->
                    <el-button type="primary" plain @click="updateById(scope.$index, scope.row)">修改</el-button>
                    <el-button type="danger" plain @click="deleteById(scope.$index,scope.row)">删除</el-button>
                    <!--修改数据的对话框表单-->
                    <el-dialog
                            title="修改品牌信息"
                            :visible.sync="centerVisible"
                            width="30%"
                    >
                        <el-form ref="form" :model="student" label-width="80px">
<!--                            <el-form-item label="宿舍楼名">-->
<!--                                <el-input v-model="student.roomName"></el-input>-->
<!--                            </el-form-item>-->
                            <el-form-item label="宿舍楼名">
                                <el-select v-model="student.roomName" placeholder="请选择楼宇">
                                    <el-option label="1号楼" value="1号楼"></el-option>
                                    <el-option label="2号楼" value="2号楼"></el-option>
                                    <el-option label="3号楼" value="3号楼"></el-option>
                                    <el-option label="4号楼" value="4号楼"></el-option>
                                    <el-option label="5号楼" value="5号楼"></el-option>
                                    <el-option label="6号楼" value="6号楼"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="寝室号">
                                <el-input v-model="student.roomId"></el-input>
                            </el-form-item>

<!--                            <el-form-item label="班级">-->
<!--                                <el-input v-model="student.className"></el-input>-->
<!--                            </el-form-item>-->
                            <el-form-item label="班级">
                                <el-select v-model="student.className" placeholder="请选择班级">
                                    <el-option label="奇迹1班" value="奇迹1班"></el-option>
                                    <el-option label="奇迹2班" value="奇迹2班"></el-option>
                                    <el-option label="奇迹3班" value="奇迹3班"></el-option>
                                    <el-option label="神奇1班" value="神奇1班"></el-option>
                                    <el-option label="神奇2班" value="神奇2班"></el-option>
                                    <el-option label="神奇3班" value="神奇3班"></el-option>
                                    <el-option label="奋进1班" value="奋进1班"></el-option>
                                    <el-option label="奋进2班" value="奋进2班"></el-option>
                                    <el-option label="奋进3班" value="奋进3班"></el-option>
                                    <el-option label="奋进4班" value="奋进4班"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学号">
                                <el-input v-model="student.studentId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="student.studentName"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input type="textarea" v-model=" student.description"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-switch v-model="student.status"
                                           active-text="在"
                                           inactive-text="不在"
                                           active-value="1"
                                           inactive-value="0">
                                </el-switch>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="edit">提交</el-button>
                                <el-button @click="centerVisible = false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        mounted(){
            //当页面加载完成后，发送异步请求，获取数据
            this.selectAll();
        },

        methods: {
            // 查询分页数据
            selectAll(){
                // var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/studentRoom-demo/student/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize=" + this.pageSize,
                    data:this.student
                }).then(resp =>{
                    //设置表格数据
                    this.tableData = resp.data.rows; // {rows:[],totalCount:100}
                    //设置总记录数
                    this.totalCount = resp.data.totalCount;
                })
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                // console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                // console.log(this.student);
                this.selectAll();
            },
            // 添加数据
            addStudent() {
                var _this=this;
                // 发送ajax请求，添加数据
                axios({
                    method:"post",
                    url:"http://localhost:8080/studentRoom-demo/student/add",
                    data:_this.student
                }).then(function (resp) {
                    if(resp.data == "success"){
                        //添加成功
                        //关闭窗口
                        _this.dialogVisible = false;
                        // 重新查询数据
                        _this.selectAll();
                        // 弹出消息提示
                        _this.$message({
                                message: '恭喜你，添加成功',
                                type: 'success'
                        });
                    }
                })
            },

            //分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                //重新设置每页显示的条数
                this.pageSize=val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                //重新设置当前页码
                this.currentPage=val;
                this.selectAll();
            },

            // 删除
            deleteById(index, row){

                // 弹出确认提示框

                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮

                    //2. 发送AJAX请求
                    var _this = this;

                    // 发送ajax请求，添加数据
                    axios({
                        method:"post",
                        url:"http://localhost:8080/studentRoom-demo/student/deleteById",
                        data:row.id
                    }).then(function (resp) {
                        if(resp.data == "success"){
                            //删除成功

                            // 重新查询数据
                            _this.selectAll();
                            // 弹出消息提示
                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {
                    //用户点击取消按钮

                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            updateById(index, row) {
                this.student.id = row.id;
                this.centerVisible = true;
            },
            //修改数据的部分内容
            edit() {
                var _this = this;
                //发送ajax异步请求，添加数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/studentRoom-demo/student/updateById",
                    data: _this.student
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //关闭窗口
                        _this.centerVisible =false;
                        // student=null;
                        //查询一次
                        _this.selectAll();
                        _this.$message({
                            message: '恭喜你，修改数据成功',
                            type: 'success'
                        });
                    } else {
                        _this.$message.error('修改数据失败');
                    }
                })
            },

            // 批量删除
            deleteByIds(){
                // 弹出确认提示框
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮
                    //1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = selectionElement.id;
                    }
                    //2. 发送AJAX请求
                    var _this = this;
                    // 发送ajax请求，添加数据
                    axios({
                        method:"post",
                        url:"http://localhost:8080/studentRoom-demo/student/deleteByIds",
                        data:_this.selectedIds
                    }).then(function (resp) {
                        if(resp.data == "success"){
                            //删除成功
                            // 重新查询数据
                            _this.selectAll();
                            // 弹出消息提示
                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

        },
        data() {
            return {
                //每页显示的条数
                pageSize:5,
                //总记录数
                totalCount:100,
                // 当前页码
                currentPage: 1,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                centerVisible: false,

                // 学生信息数据
                student: {
                    status: '',
                    roomName: '',
                    roomId: '',
                    className:"",
                    studentId:'',
                    studentName:"",
                },
                //被选中的id数组
                selectedIds:[],
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
                    roomName:'1号楼',
                    roomId:'101',
                    className:"奇迹221",
                    studentId:'22100001',
                    studentName:'张三',
                    status: '1'
                }, {
                    roomName:'1号楼',
                    roomId:'101',
                    className:"奇迹221",
                    studentId:'22100001',
                    studentName:'张三',
                    status: '1'
                }, {
                    roomName:'1号楼',
                    roomId:'101',
                    className:"奇迹221",
                    studentId:'22100001',
                    studentName:'张三',
                    status: '1'
                }, {
                    roomName: '1号楼',
                    roomId: '101',
                    className: "奇迹221",
                    studentId: '22100001',
                    studentName: '张三',
                    status: '1'
                }, {
                    roomName: '1号楼',
                    roomId: '101',
                    className: "奇迹221",
                    studentId: '22100001',
                    studentName: '张三',
                    status: '1'
                },{
                    roomName:'1号楼',
                    roomId:'101',
                    className:"奇迹221",
                    studentId:'22100001',
                    studentName:'张三',
                    status: '1'
                }]
            }
        }
    })

</script>

</body>
</html>