学生管理系统 Vue前端+Mybatis+mysql 需源码私

前端

	对应的前端
		Vue异步  使用的是axios 插件 本质上是AJAX
		引用方法   cdn引入配置
			  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

对应的前端样式 是Element-UI组件 同样是用 cdn引入配置

此处应该注意在引入是注意Vue和element-ui组件的引入顺序

后端

Mybatis访问数据库  分页操作用的是PageHelper插件  其他的都是常规操作  

项目结构

对应的Mybatis配置 且需要引入pageHelper的jar包
mybtais配置

    <settings>
        <setting name="logImpl" value="log4j"/>
        <!-- 使全局的映射器启用或禁用缓存。 -->
        <setting name="cacheEnabled" value="true"/>
        <!-- 全局启用或禁用延迟加载。当禁用时，所有关联对象都会即时加载。 -->
        <setting name="lazyLoadingEnabled" value="true"/>
        <!-- 当启用时，有延迟加载属性的对象在被调用时将会完全加载任意属性。否则，每种属性将会按需要加载。 -->
        <setting name="aggressiveLazyLoading" value="true"/>
        <!-- 是否允许单条sql 返回多个数据集  (取决于驱动的兼容性) default:true -->
        <setting name="multipleResultSetsEnabled" value="true"/>
        <!-- 是否可以使用列的别名 (取决于驱动的兼容性) default:true -->
        <setting name="useColumnLabel" value="true"/>
        <!-- 允许JDBC 生成主键。需要驱动器支持。如果设为了true，这个设置将强制使用被生成的主键，有一些驱动器不兼容不过仍然可以执行。  default:false  -->
        <setting name="useGeneratedKeys" value="true"/>
        <!-- 指定 MyBatis 如何自动映射 数据基表的列 NONE：不隐射　PARTIAL:部分  FULL:全部  -->
        <setting name="autoMappingBehavior" value="PARTIAL"/>
        <!-- 这是默认的执行类型  （SIMPLE: 简单； REUSE: 执行器可能重复使用prepared statements语句；BATCH: 执行器可以重复执行语句和批量更新）  -->
        <setting name="defaultExecutorType" value="SIMPLE"/>
        <!-- 使用驼峰命名法转换字段。 -->
        <setting name="mapUnderscoreToCamelCase" value="true"/>
        <!-- 设置本地缓存范围 session:就会有数据的共享  statement:语句范围 (这样就不会有数据的共享 ) defalut:session -->
        <setting name="localCacheScope" value="SESSION"/>
        <!-- 设置但JDBC类型为空时,某些驱动程序 要指定值,default:OTHER，插入空值时不需要指定类型 -->
        <setting name="jdbcTypeForNull" value="NULL"/>
    </settings>

mybatis中引入pagehelper

    <plugins>
        <plugin interceptor="com.github.pagehelper.PageHelper">
            <property name="dialect" value="mysql"/>
            <property name="offsetAsPageNum" value="false"/>
            <property name="rowBoundsWithCount" value="false"/>
            <property name="pageSizeZero" value="true"/>
            <property name="reasonable" value="false"/>
            <property name="supportMethodsArguments" value="false"/>
            <property name="returnPageInfo" value="none"/>
        </plugin>
    </plugins>

Mybatis中对应的映射配置文件

    <mappers>
        <package name="mapper"/>
    </mappers>

配置文件 剩下都是 常规操作
对应配置jdbc.properties和log4j.properties

对应的jdbc中 url 对应的mysql数据库 版本过高的需要加时区

过滤器 LoginFilter

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        try {
            // 将请求和响应对象转换为和HTTP协议相关
            HttpServletRequest request = (HttpServletRequest) servletRequest;
            HttpServletResponse response = (HttpServletResponse) servletResponse;

            // 获取会话域对象中数据
            Object username = request.getSession().getAttribute("username");

            // 判断用户名  如果用户名为空                 // 重定向到 登录页面
            if(username == null || "".equals(username)){
                // 动态获得虚拟目录
                response.sendRedirect(request.getContextPath()+"/login.html");
                return;
            }
            // 放行
            filterChain.doFilter(request,response);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

登录页面前端效果

上图实现对应的前端代码

            rules: { //校验规则
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ]
            }

之后就是控制层调用service ，Mybatis进行查表 将最后的查询结果进行返回

    @Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")
    public abstract List<User> login(User user);

对应后台登录中的代码 通过后台返回的集合长度 进行判断是否登录成功

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        String username = req.getParameter("username");
        String password = req.getParameter("password");
        User user = new User(username,password);

        List<User> list = service.login(user);

        if(list.size() != 0) {
            //将用户名存入会话域当中  给过滤器进行判断
            req.getSession().setAttribute("username",username);
            resp.getWriter().write("true");
        }else {
            resp.getWriter().write("false");
        }
    }

下来就是常规的增删改查

用这段代码 进行区分对应前端调用的方法

                String method = req.getParameter("method");

                if(method.equals("selectByPage")) {
                        //分页查询功能
                        selectByPage(req,resp);
                }else if(method.equals("addStu")){
                        addStu(req,resp);
                }else if(method.equals("updateStu")){
                        updateStu(req,resp);
                }else if(method.equals("deleteStu")){
                        deleteStu(req,resp);
                }

MyBatis注解 进行查询数据库

    @Select("SELECT * FROM student")
    public abstract List<Student> selectAll();

    @Insert("INSERT INTO student VALUES (#{id},#{name},#{age})")
    public abstract void addStu(Student stu);

    @Update("UPDATE student SET id=#{id},name=#{name},age=#{age} WHERE id=#{id}")
    public abstract void updateStu(Student stu);

    @Delete("DELETE FROM student WHERE id=#{id}")
    public abstract void deleteStu(String id);

本文最大的难点就是分页查询

对应前端Vue分页展示

对于分页前端Vue 传入两个值 给后端 分别是currentPage 和 pageSize 当前页面 以及页面显示数目的大小
Vue前台代码

      selectByPage() {
        axios.post("studentServlet", "method=selectByPage&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize).then(resp => {
          success :data =>{
            console.info(data)
          }
          this.tableData = resp.data.list;
          this.pagination.currentPage = resp.data.pageNum;
          this.pagination.total = resp.data.total;
        });
      },

后端对于分页操作的代码
对参数进行非空处理避免 服务器 报异常

           String currentPage = req.getParameter("currentPage");
           String pageSize = req.getParameter("pageSize");

		   if (currentPage == null || "".equals(currentPage.trim())) {
                        currentPage = "1";
                }

           if (pageSize == null || "".equals(pageSize.trim())) {
                        pageSize = "3";
                }
 		  List<Student> all = service.selectByPage(Integer.parseInt(currentPage), Integer.parseInt(pageSize));
 		  PageInfo<Student> pageInfo = new PageInfo<Student>(all);
          	try {
                      String json = new ObjectMapper().writeValueAsString(pageInfo);
                      resp.getWriter().write(json);
              } catch (Exception e) {
                      e.printStackTrace();
              }

对应ServiceImpl实现类 使用的是 Pagehelper插件
	将查询的结果传递给 List<Student> stu；将其返回给控制层 使用PageInfo来封装查询的数据  实例化PageInfo 
	
	PageInfo<Student> pageInfo = new PageInfo<Student>(all);
	
	//   PageHelper.startPage中   第一个参数表示从第几页开始，第二个参数表示一页多少条记录，第三个参数表示是否返回总的真实记录数

           page = PageHelper.startPage(currentPage, pageSize,true);
           stu = mapper.selectAll();