java配合前端实现进度条 javaweb实现前端显示数据

使用技术

前端：vue
异步：axios
后端：java、mybatis、jdbc

目标实现

1、查看数据库数据并创建实体和修改前端页面

数据库数据查看

前端页面修改

新增修改数据弹框

赋值表格数据

前端页面数据绑定使用的是vue的模型双向绑定
Student的作用就是添加数据时使用到的
tableData是绑定渲染表格的模型数据，下面写死一条数据主要是为了查看数据帮绑定效果

2、分页数据查询

实现步骤：
1、创建学生类实体
2、Dao层：分页数据查询,返回学生实体集合，查询所有数据的总数
3、Servic层：创建一个selectByPage类，调用分页查询的Dao层方法，返回一个封装的实体对象（分页数据）
4、Web层：调用Servic层控制器代码，获取到查询的分页数据，也是一个发生前端也面请求数据的中间件

1、创建学生实体

package com.zcl.pojo;

public class Student {
    private Integer id;
    private String studentName;
    private String sex;
    private String className;
    private String idCode;
    private String phone;
    private Integer status;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getStudentName() {
        return studentName;
    }

    public void setStudentName(String studentName) {
        this.studentName = studentName;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getClassName() {
        return className;
    }

    public void setClassName(String className) {
        this.className = className;
    }

    public String getIdCode() {
        return idCode;
    }

    public void setIdCode(String idCode) {
        this.idCode = idCode;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    @Override
    public String toString() {
        return "Student{" +
                "id=" + id +
                ", studentName='" + studentName + '\'' +
                ", sex='" + sex + '\'' +
                ", className='" + className + '\'' +
                ", idCode='" + idCode + '\'' +
                ", phone='" + phone + '\'' +
                ", status=" + status +
                '}';
    }
}

2、编写Dao层分页查询代码

Dao层的代码重新写了一个StudentMapper接口以及xml映射器

package com.zcl.mapper;

import com.zcl.pojo.Student;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.ResultMap;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface StudentMapper {
    /**
     * 分页查询数据
     * @param begin 开始页数
     * @param size 当前页条数
     * @return
     */
    @Select("select * from tb_student limit #{begin},#{size}")
    @ResultMap("stud")
    List<Student> selectByPage(@Param("begin") int begin, @Param("size") int size);

    /**
     * 查询总数据数
     * @return
     */
    @Select("select count(*) from tb_student")
    int selectTotalCount();
}

在前面第一张数据库信息查询表中可以发现我们数据库的字段与创建的Studeng实体类里的值是不一致的，这样就会导致一个数据查询结果空缺的情况，需要解决这个办法就要去到StudentMapper.xml映射文件里面生命一个resultMap来接受参数
需要注意的是resultMap 里的id是接口中@ResultMap("stud")的值

<?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">

<!--teacherMapper.xml数据库映射文件是与teacherMapper接口对映的-->
<mapper namespace="com.zcl.mapper.StudentMapper">
    <!--编写sql语句-->
    <resultMap id="stud" type="Student">
        <!--设置不同名的字段名称-->
        <result property="studentName" column="student_name" />
        <result property="className" column="class_name" />
    </resultMap>
</mapper>

3、Servic层控制器代码实现

具体的实现步骤：
1、创建一个新的实体分页对象PageStudent 2、在com.zcl.servic创建StudentService接口，创建一个接口方法selectByPage是一个分页查询返回的结果，返回PageStudent实体对象
3、在servic.impl包下创建studentServiceImpl实体类，实现StudentService接口，在里面实现分页信息的查询和返回的分页数据
4、封装PageStudent实体对象

package com.zcl.service.impl;

import com.zcl.mapper.StudentMapper;
import com.zcl.pojo.PageStudent;
import com.zcl.pojo.Student;
import com.zcl.service.StudentService;
import com.zcl.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import java.util.List;

public class studentServiceImpl implements StudentService {
    // 获取到工厂对象
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

    /**
     * 分页信息查询
     * @param currentPage
     * @param pagesize
     * @return
     */
    @Override
    public PageStudent<Student> selectByPage(int currentPage, int pagesize) {
        // 2、获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3、获取Student对象
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
        // 4、调用分页查询执行方法
        int begin = (currentPage-1) * pagesize;
        // 5、查询的条目数
        int size = pagesize;
        List<Student> students = mapper.selectByPage(begin, size);
        // 6、查询数据总数
        int count = mapper.selectTotalCount();
        // 7、封装方法返回分页数据
        PageStudent<Student> pageStudent = new PageStudent<>();
        pageStudent.setRows(students);
        pageStudent.setTotalCiunt(count);
        // 8、释放资源
        return pageStudent;
    }
}

4、Web层代码实现

实现步骤：
1、创建一个StudentServlet类需要继承BaseServlet来完成请求服务器名称转发到控制器
2、通过service层代码的StudentService接口以多态的形式创建studentServlet控制器方法，方便后期的调用
3、创建selectByPage方法，需要接受到request和response 4、将调用分页查询的数据转换成JSON对象返回给前端的页面接受并绑定到vue模型上（返回去的数据需要修改编码格式，防止乱码问题）

package com.zcl.webs.servlet;

import com.alibaba.fastjson.JSON;
import com.zcl.pojo.PageStudent;
import com.zcl.pojo.Student;
import com.zcl.service.StudentService;
import com.zcl.service.impl.studentServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/stud/*")
public class StudentServlet extends BaseServlet{
    // 通过接口的多态形式来创建对象，方便后期的修改代码
    private StudentService studentServlet = new studentServiceImpl();

    /**
     * 分页查询
     * @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查询
        PageStudent<Student> pageStudent = studentServlet.selectByPage(currentPage, pageSize);
        // 2、把对象转为JSON
        String jsonString = JSON.toJSONString(pageStudent);
        // 3、写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }
}

5、前端页面的请求数据接口

实现步骤：
1、使用axios插件的方法请求分页数据
2、通过get请求数据，并将页数以及每页的显示条数传递给控制器接受计算查询分页数据
3、返回结果返回给vue对于的tableData数据表格模型和totalCount总数据数

selectAll() {
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/JavaWebUltimateDemo/stud/selectByPage?currentPage='+this.currentPage+'&pageSize='+this.pageSize,
                    data:this.Student
                    // 使用箭头函数替换 _this
                }).then(resp => {
                    // 注意区分返回的数据格式，rows代表的是查询分页的数据，好友一个是总数据条数
                    this.tableData = resp.data.rows
                    console.log(resp.data.rows);
                    // 设置总记录数模型数据
                    this.totalCount = resp.data.totalCiunt;
                    console.log(resp.data.totalCiunt);
                });
            },

6、效果展示