Day29 SSM之CRUD（页面美化）bootstrap的部门增删改查

最新推荐文章于 2023-06-20 10:54:00 发布

信仰G

最新推荐文章于 2023-06-20 10:54:00 发布

阅读量744

点赞数 1

文章标签： bootstrap java css html web

本文链接：https://blog.csdn.net/qq_43639081/article/details/109323027

版权

**源码地址：**https://github.com/BigAnt-cyl/ssm_zhenghe_shili_ajax_bootstrap

bootstrap

（1） bootstrap是什么？
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
（2） bootstrap特点是什么？
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
官网下载后，解压
引入bootstrap的页面可以去官网找样式添加修改即可。

一、ssm搭建

1、复制模块

在原工程ssm目录下，复制搭建好的ssm03_crud_ajax，粘贴为ssm04_crud_bootstrap
修改ssm04_crud_bootstrap中的pom.xml

  <artifactId>ssm04_crud_bootstrap</artifactId>
  <packaging>war</packaging>

  <name>ssm04_crud_bootstrap Maven Webapp</name>

修改工程ssm中的pom.xml

  <modules>
    <module>ssm01</module>
    <module>ssm02_crud</module>
    <module>ssm03_crud_ajax</module>
    <module>ssm04_crud_bootstrap</module>
  </modules>

执行一下以上两个pom.xml

二、使用bootstrap

1、复制bootstrap的内容到webapp文件夹

在这里插入图片描述

2、设置spring-mvc的静态资源拦截规则

src\main\resources\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/**" />

3、制定一个模板（之后的页面都是复制此模板修改）

src\main\webapp\WEB-INF\pages\temp.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <!--兼容IE浏览器-->
    <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>Bootstrap 101 Template</title>
</head>
<body>
<div class="container">
    <h1>你好，世界！</h1>
    <button type="button">你好我是普通按钮</button>
    <button class="bg-primary" type="button" >你好我是bootstrap按钮</button>
</div>
</body>
</html>

写个控制器方法测试

src\main\java\cn\cyl\controller\DepartmentV3Controller.java

//-----------bootstrap
    @RequestMapping(path = "/tempUI",method = RequestMethod.GET)
    public String tempUI(){
        return "temp";
    }

在这里插入图片描述

三、添加

1、前台代码

<body>
    <!--container表示容器，所有内容放进这个容器-->
    <div class="container">
        <!--row表示一行的宽度，一行分12份-->
        <div class="row">
            <!--col-md-4 表示使用一行的4/12宽度-->
            <div class="col-md-4">
                <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="email" 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>

2、后台代码

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

3、运行结果

在这里插入图片描述

三、修改

1、前台代码

<body>
    <!--container表示容器，所有内容放进这个容器-->
    <div class="container">
        <!--row表示一行的宽度，一行分12份-->
        <div class="row">
            <!--col-md-4 表示使用一行的4/12宽度-->
            <div class="col-md-4">
                <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>

2、后台代码

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

3、运行结果

在这里插入图片描述

三、列表

1、前台代码

<body>
    <!--container表示容器，所有内容放进这个容器-->
    <div class="container" >
        <!-- row表示 一行的宽度-->
        <div class="row">
            <!--col-md-4 表示使用一行的4/12宽度 -->
            <div class="col-md-4" >
                <h1>部门列表</h1>
            </div>
        </div>
        <div class="row">
            <!-- offset表示不占左边八格，从第九开始-->
            <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>
</body>

2、后台代码

@RequestMapping(path = "listUIV3",method = RequestMethod.GET)
    public String listUIV3(){
        return "list_v3";
    }

3、运行结果

在这里插入图片描述

信仰G

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Day29 SSM之CRUD（页面美化）bootstrap的部门增删改查

bootstrap（1） bootstrap是什么？Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。（2） bootstrap特点是什么？简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。官网下载后，解压一、ssm搭建1、复制模块在原工程ssm目录下，复制搭建好的ssm03_crud_ajax，粘贴为ssm04_crud_boots
复制链接

扫一扫