Day29 ssm框架之bootstrap的CRUD

css

  • 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
  • CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

bootstrap

  • Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架
  • 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单
  • https://v3.bootcss.com/下载文件

(1)复制bootstrap的内容到webapp文件夹
(2)在页面引入
(3)使用项目访问路径 ${path}
(4)设置spring-mvc的静态资源拦截规则

springmvc配置

    <mvc:resources location="/css/" mapping="/css/**" />
    <mvc:resources location="/images/" mapping="/images/**" />
    <mvc:resources location="/js/" mapping="/js/**" />
    <mvc:resources location="/fonts/" mapping="/fonts/**" />
可以去网站复制粘贴模板
https://v3.bootcss.com/javascript/
https://v3.bootcss.com/css/
https://v3.bootcss.com/components/

下面是查看页面代码

jsp

  • add_v3.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <% pageContext.setAttribute("path",request.getContextPath()); %>
    <link href="${path}/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="${path}/js/jquery-1.11.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${path}/js/bootstrap.min.js"></script>
    <title>Title</title>
</head>
<body>
<div class="container" >
    <!-- container 表示容器,所有内容放进这个容器-->
    <div class="row">
        <!-- row表示 一行的宽度-->
        <div class="col-md-4" >
            <!--col-md-4 表示使用一行的4/12宽度 -->
            <h1>添加部门</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" >
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="dname" class="col-sm-2 control-label">部门名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="dname" placeholder="部门名称">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>
</body>
</html>

  • edit_v3.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <% pageContext.setAttribute("path",request.getContextPath()); %>
    <link href="${path}/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="${path}/js/jquery-1.11.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${path}/js/bootstrap.min.js"></script>
    <title>部门编辑</title>
</head>
<body>
<div class="container" >
    <!-- container 表示容器,所有内容放进这个容器-->
    <div class="row">
        <!-- row表示 一行的宽度-->
        <div class="col-md-4" >
            <!--col-md-4 表示使用一行的4/12宽度 -->
            <h1>修改部门</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" >
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="did" class="col-sm-2 control-label">部门编号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="did" disabled="disabled" value="1">
                    </div>
                </div>

                <div class="form-group">
                    <label for="dname" class="col-sm-2 control-label">部门名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="dname" placeholder="部门名称" value="测试部门">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">保存修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>
</body>
</html>

  • temp.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
   <% pageContext.setAttribute("path",request.getContextPath()); %>
   <link href="${path}/css/bootstrap.min.css" rel="stylesheet">
   <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
   <script src="${path}/js/jquery-1.11.0.min.js"></script>
   <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
   <script src="${path}/js/bootstrap.min.js"></script>
   <title>Title</title>
</head>
<body>
<div class="container">
   <h1>你好,世界!</h1>
   <button type="button">你好我是普通按钮</button>
   <button class="bg-primary" type="button" >你好我是bootstrap按钮</button>
</div>
</body>
</html>

  • list_v3.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <% pageContext.setAttribute("path", request.getContextPath()); %>
    <link href="${path}/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="${path}/js/jquery-1.11.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${path}/js/bootstrap.min.js"></script>
    <title>部门列表页面</title>
</head>
<body>
<%--${pi}--%>
<div class="container">
    <!-- container 表示容器,所有内容放进这个容器-->
    <div class="row">
        <!-- row表示 一行的宽度-->
        <div class="col-md-4">
            <!--col-md-4 表示使用一行的4/12宽度 -->
            <h1>部门列表</h1>
        </div>
    </div>
    <div class="row">
        <%--        <div class="col-md-8" ></div>--%>
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
            </button>
        </div>
    </div>
    <div class="row">

        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <th>部门编号</th>
                    <th></th>
                    <th>部门名称</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${pi.list}" var="dept">
                    <!--将一行循环指定的次数 -->
                    <tr>
                        <td>${dept.did}</td>
                        <td></td>
                        <td>${dept.dname}</td>
                        <td>
                            <button class="btn btn-danger"><span class="glyphicon glyphicon-trash"
                                                                 aria-hidden="true"></span> 删除
                            </button>
                            <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"
                                                               aria-hidden="true"></span> 修改
                            </button>
                        </td>
                    </tr>
                </c:forEach>


            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">当前共有${pi.total}条记录,共${pi.pages}页</div>
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>
                    <c:if test="${pi.hasPreviousPage}">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                    </c:if>
                    <%--                    <li class="active"><a href="#">1</a></li>--%>
                    <c:forEach items="${pi.navigatepageNums}" var="num">
                        <c:if test="${num == pi.pageNum}">
                            <li class="active"><a href="#">${num}</a></li>
                        </c:if>
                        <c:if test="${num != pi.pageNum}">
                            <li><a href="#">${num}</a></li>
                        </c:if>
                    </c:forEach>

                    <c:if test="${pi.hasNextPage}">

                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>

                    </c:if>
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">末页</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>

controller层代码

@Controller
@RequestMapping("/dept3")
public class DepartmentController {
    private static final Logger l= LoggerFactory.getLogger(DepartmentController.class);
    @Autowired
    IDepartmentService service;
    @RequestMapping(path = "/tempUI",method = RequestMethod.GET)
    public String tempUI(){
        return "temp";
    }
    @RequestMapping(path = "/addUIV3",method = RequestMethod.GET)
    public String addUIV3(){
        return "add_v3";
    }
    @RequestMapping(path = "/editUIV3",method = RequestMethod.GET)
    public String editUIV3(){
        return "edit_v3";
    }
    @RequestMapping(path = "/listUIV3",method = RequestMethod.GET)
    public String listUIV3(){
        return "list_v3";
    }

pagehelper分页插件介绍

  • 针对Mybatis提供分页插件,将分页查询简化
  • 依赖配置 pagehelper
  • 配置插件plugin

导入依赖pom.xml

<!--引入pageHelper分页插件 -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.0.0</version>
    </dependency>

配置applicationContext.xml

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="typeAliasesPackage" value="com.dsf.domain"/>
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <!--使用下面的方式配置参数,一行配置一个 -->
                        <!-- pageNum<=0 时会查询第一页 -->
                        <!-- 指定数据库方言 -->
                        <value>
                            reasonable=true
                            helperDialect=mysql
                        </value>
                    </property>
                </bean>
            </array>

        </property>
    </bean>

controller层代码

由于拦截器会使用全查语句拼接limit分页,所以每个sql建议不要写 ;
先调用PageHelper.startPage(currPage,pageSize)再调用全查,才能自动分页

   @RequestMapping(path = "/pageUI",method = RequestMethod.GET)
    public String pageUI(Model model, Integer currPage, Integer pageSize){
        l.info("page currPage="+currPage);
        l.info("page pageSize="+pageSize);
        if (currPage==null){
            currPage=1;
        }
        if (pageSize==null){
            pageSize=5;
        }
        PageHelper.startPage(currPage,pageSize);
        List<Department> list=service.findAllDepartments();
        PageInfo<Department> pi=new PageInfo<>(list);
        model.addAttribute("pi",pi);
        return "list_v3";
    }

list_v3.jsp(上面)

要导入标签库
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页