SSM高级整合日记（二）

最新推荐文章于 2020-06-15 12:03:21 发布

还能学

最新推荐文章于 2020-06-15 12:03:21 发布

阅读量229

点赞数

分类专栏： Spring

本文链接：https://blog.csdn.net/sinat_18619901/article/details/90935981

版权

Spring 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

继上次已经搭建了环境之后，现在正是开始业务逻辑代码的实现。但在实现之前，我们需要进行一个网站页面的规划，这里按视频教学走的话，是采用了bootstrap框架，比较简洁。开始了：

一。网站的最终设计样式

图贴出来了，就把大致的路线说一下，需要创建两个jsp文件，static 存放静态资源文件：

直接贴代码：

1.网页代码（index.jsp）:

<%--
  Created by IntelliJ IDEA.
  User: 97506
  Date: 2019/6/3
  Time: 19:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
</head>
<body>
<jsp:forward page="/emps"/>
</body>
</html>

说明：这是项目默认打开的网页，所以这里就直接请求所有员工信息，通过
<jsp:forward page="/emps"/>
在controller包下有一个与之对应的员工控制器，用来接收/emps请求，并将所有的员工信息发给前端浏览器解析。

2.员工信息展示页面也就是上面那张图的网页代码：

<%--
  Created by IntelliJ IDEA.
  User: 97506
  Date: 2019/6/4
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <title>员工列表</title>
    <script src="${APP_PATH}/static/js/jquery-3.4.1.min.js"></script>
    
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<!--搭建显示页面-->
<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-lg-12">
            <h1>员工信息管理系统</h1>
        </div>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-lg-4 col-lg-offset-10">
            <button type="button" class="btn btn-info">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
    </div>
    <!--显示表格数据-->
    <div class="row" style="margin-top: 20px">
        <div class="col-lg-12">
            <table class="table table-hover table-bordered">
                <tr>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                    <th></th>
                </tr>

                <c:forEach items="${emps.list}" var="emp">
                    <tr>
                        <th>${emp.empId}</th>
                        <th>${emp.epmName}</th>
                        <th>${emp.gender=='男'?'男':'女'}</th>
                        <th>${emp.email}</th>
                        <th>${emp.department.deptName}</th>
                        <th>
                            <button type="button" class="btn btn-warning btn-sm" aria-label="Left Align">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                            </button>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <button type="button" class="btn btn-danger btn-sm" aria-label="Left Align">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                            </button>
                        </th>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <!--分页-->
    <div class="row">
        <!--分页信息-->
        <div class="col-lg-6">
            当前为<kbd>${emps.pageNum}</kbd>页，总共<kbd>${emps.pages}</kbd>页，总记录为<kbd>${emps.total}</kbd>项。
        </div>
        
        <!--分页条-->
        <div class="col-md-6">
            
            <nav aria-label="Page navigation">
                
                <ul class="pagination">
                    
                    <li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
                    
                    <c:if test="${emps.hasPreviousPage}">
                        <li>
                            <a href="${APP_PATH}/emps?pn=${emps.pageNum-1}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>


                    <c:forEach items="${emps.navigatepageNums}" var="index">
                        <c:if test="${index == emps.pageNum}">
                            <li class="active"><a href="${APP_PATH}/emps?pn=${index}">${index}</a></li>
                        </c:if>
                        <c:if test="${index != emps.pageNum}">
                            <li><a href="${APP_PATH}/emps?pn=${index}">${index}</a></li>
                        </c:if>
                    </c:forEach>
                    
                    <c:if test="${emps.hasNextPage}">
                        <li>
                            <a href="${APP_PATH}/emps?pn=${emps.pageNum+1}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </c:if>
                    
                    <li><a href="${APP_PATH}/emps?pn=${emps.pages}">尾页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>

说明：

1.这里可以将context路径添加到app_path中。方便调用

2.引入bootstrap的js css文件

3.引入taglib标签，在分页条那里会用到。判断页码的情况。

页面写完之后，我们可以写控制器了（这里顺序有点问题，还是先写控制器吧！）。

二。编写业务代码，以及控制器的实现

直接贴代码：

EmployeeService.java:

package com.zhaowenhao.service;

import com.zhaowenhao.bean.Employee;
import com.zhaowenhao.dao.EmployeeMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Description:
 * User: zwh
 * Date: 2019-06-04
 * Time: 21:06
 */
@Service
public class EmployeeService {

    @Autowired
    EmployeeMapper employeeMapper;

    /**
     * @Description: 获取所有员工信息
     * @Param: []
     * @return: java.util.List
     * @Author: zwh
     * @Date: 2019/6/4
     */
    public List getAll() {
        List<Employee> employees = employeeMapper.selectByExampleWithDept(null);
        return employees;
    }
}

说明：为什么是参数null，因为这里传入的是匹配条件，但是我们要查询所有的信息，所以不需要有匹配条件。

EmployeeController.java:

package com.zhaowenhao.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.zhaowenhao.bean.Msg;
import com.zhaowenhao.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * Description:处理员工增删改查
 * User: zwh
 * Date: 2019-06-04
 * Time: 21:03
 */
@Controller
public class EmployeeController {

    @Autowired
    EmployeeService employeeService;

    //@RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
        //引入分页插件pagehelper
        //传入页码，以及分页大小
        PageHelper.startPage(pn, 5);
        //startpage后面紧跟的查询就是一个分页查询
        List all = employeeService.getAll();
        //使用 pageinfo封装数据信息
        PageInfo pageInfo = new PageInfo(all, 5);
        return Msg.success().addExtend("emps", pageInfo);
    }

    /**
     * @Description: 展示所有员工信息
     * @Param: []
     * @return: java.lang.String
     * @Author: zwh
     * @Date: 2019/6/4
     */
    @RequestMapping("/emps")
    public String getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
        //引入分页插件pagehelper
        //传入页码，以及分页大小
        PageHelper.startPage(pn, 10);
        //startpage后面紧跟的查询就是一个分页查询
        List all = employeeService.getAll();
        //使用 pageinfo封装数据信息
        PageInfo pageInfo = new PageInfo(all, 5);
        //将数据加入model
        model.addAttribute("emps", pageInfo);
        return "list";
    }

}

说明：为什么这里有两个方法嘞？

先看第二个方法：

pageHelper是一个分页插件，可以指定分页的大小就是指在一页上可以显示多少条数据。

pageInfo作用就是封装一些查询结果的信息，通过它我们可以很方便的按照我们的要求将查询的结果进行封装，例如查询的页数，总的项目条数，当前页数是否为第一页或者最后一页，是否具有前一页或者后一页。

最终将结果添加到model中或者map中，request携带该信息跳转到list.jsp页面进行展示。

结合之前的list.jsp页面可以知道大概的流程。

下面解释第一个方法：

第一个方法，我们想通过引入@ResponseBody注解，通过该注解，我们可以将pageinfo转变为json数据发给前端浏览器，前端通过解析json数据，并通过DOM操作，将数据像是在网页上。但是直接将数据返回给前端可能会有一些问题，加入出错了怎么办或者是其他问题。所以可以创建一个消息bean (Msg.java)来把pageinfo进行一个修饰，并在这个bean中，构建状态码，状态消息字段，附加数据字段。

我们可以在控制器中返回一个Msg对象给前端，如果业务成功的话，我们可以把pageinfo数据加到map中，由前端来解析。如果失败，我们就可以返回一个错误的状态码给前端。

这里需要添加两个依赖的pom:
        
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.9</version>
        </dependency>

        
        
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
            <scope>compile</scope>
        </dependency>

所以上面的解释完之后，决定采取第一个函数的方式，不采用第二种方式。

未完继续。。。。。。。。点击SSM高级整合日记（三）

还能学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SSM高级整合日记（二）

继上次已经搭建了环境之后，现在正是开始业务逻辑代码的实现。但在实现之前，我们需要进行一个网站页面的规划，这里按视频教学走的话，是采用了bootstrap框架，比较简洁。开始了：一。网站的最终设计样式图贴出来了，就把大致的路线说一下，需要创建两个jsp文件，static 存放静态资源文件：直接贴代码：1.网页代码（index.jsp）:<%-- Created...
复制链接

扫一扫

专栏目录