Day29SSM之CRUD开发版本3bootstrap的部门增删改查

css

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

bootstrap

  • (1) bootstrap是什么?

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架

  • (2) bootstrap特点是什么?
    简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

下载

在这里插入图片描述

使用bootstrap

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

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>

springmvc.xml

  <!--过滤静态资源   .js .css png-->
    <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/

add_v3.jsp

在这里插入图片描述

<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>
                <div class="form-group">
                    <label for="dname">部门名称</label>
                    <input type="text" class="form-control" id="dname" placeholder="部门名称">
                </div>

                <button type="submit" class="btn btn-default">保存</button>
            </form>
        </div>
    </div>


</div>
</body>

addUIV3

  @RequestMapping(path="/addUIV3",method = RequestMethod.GET)
    public String addUIV3(){
        return "add_v3";
    }

复制修改出部门编辑页面

在这里插入图片描述

edit_v3.jsp

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

editUIV3

 @RequestMapping(path="/editUIV3",method = RequestMethod.GET)
    public String editUIV3(){
        return "edit_v3";
    }

查询功能的列表与导航条

所有都是复制粘贴与修改
在这里插入图片描述

list_v3.jsp

<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>
                <tr>
                    <td>1</td>
                    <td></td>
                    <td>jack</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>

            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6" >当前共有100条记录,共20页</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>
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">上一页</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">下一页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">末页</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

listUIV3

    @RequestMapping(path="/listUIV3",method = RequestMethod.GET)
    public String listUIV3(){
        return "list_v3";
    }
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页