SpringMVC_Bootstrap集成

1.Bootstrap

中文官网

1.1 Bootstrap引入

1.本次,是把Bootstrap引入到springmvc中,先从官网下载
在这里插入图片描述
2.把下载好的文件拷贝到项目制定目录,如图:
在这里插入图片描述
3.编写一个前端网页,如图:

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>测试</title>
    <script type="text/javascript"
            src="static/js/jquery-1.12.4.min.js"></script>
    <link
            href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <script
            src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <button class="btn btn-success" >按鈕</button>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
注意:访问的时候,因为还没有用到springmvc功能,先把有关springmvc的配置都注释掉,不然访问后不会显示页面,而是显示页面代码

1.2 登陆页面

1.官网查看
在这里插入图片描述

2.或者去网上搜索
bootstrapdenglu

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>测试</title>

    <script type="text/javascript"
            src="static/js/jquery-1.12.4.min.js"></script>
    <link
            href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <script
            src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body style=" background: url(static/bootstrap-3.3.7-dist/img/background.jpg) no-repeat center center fixed; background-size: 100%;">
<div class="modal-dialog" style="margin-top: 10%;">
    <div class="modal-content">
        <div class="modal-header">

            <h4 class="modal-title text-center" id="myModalLabel">登录</h4>
        </div>
        <div class="modal-body" id = "model-body">
            <div class="form-group">

                <input type="text" class="form-control"placeholder="用户名" autocomplete="off">
            </div>
            <div class="form-group">

                <input type="password" class="form-control" placeholder="密码" autocomplete="off">
            </div>
        </div>
        <div class="modal-footer">
            <div class="form-group">
                <button type="button" class="btn btn-primary form-control">登录</button>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default form-control">注册</button>
            </div>

        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->

</body>
</html>

在这里插入图片描述
在这里插入图片描述
注意:若修改后,还是没有效果,那么最好是maven重新编译一般,然后再重新启动一下tomcat

2.SpringMVC

2.1后端框架简单搭建

SpringMVC环境简单搭建 参考搭建如下后端环境

在这里插入图片描述

2.2 完善整个目录

后续更新

3.其他

3.1 Bootstrap页面设计器

hlayoutit :这个页面可以提供最精简的html代码
build :这个页面可以提供代码和样式都提供出来

3.2 JSP返回源码

解决:将项目的web.xml中 < servlet-mapping> 下的< url-pattern>/*</ url-pattern>改为< url-pattern>/</ url-pattern>

因为/*的话,我们后台处理后,会重新跳转到 **.jsp,但是 **.jsp这种请求会再次被DispatcherServlet接收到,然后它会再向后台control找对应类,找不到会报404,若我们配置了<mvc:default-servlet-handler />,那么DispatcherServlet处理不掉的,就又拿给tomcat处理,tomcat看到这个请求就当静态资源处理,然后就会返回成源码了
Spring MVC学习遇到的问题:JSP未渲染,直接显示源码

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值