SpringMVC_Bootstrap集成

最新推荐文章于 2023-05-19 23:08:01 发布

tellmeyesorno

最新推荐文章于 2023-05-19 23:08:01 发布

阅读量1k

点赞数

分类专栏： # SPRING_MVC 文章标签： java web

本文链接：https://blog.csdn.net/u010247166/article/details/105932571

版权

SPRING_MVC 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

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未渲染，直接显示源码

tellmeyesorno

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC_Bootstrap集成

文章目录1.Bootstrap1.1 Bootstrap引入1.2 登陆页面2.SpringMVC2.1后端框架简单搭建2.2 完善整个目录3.其他3.1 Bootstrap页面设计器1.Bootstrap中文官网1.1 Bootstrap引入1.本次，是把Bootstrap引入到springmvc中，先从官网下载2.把下载好的文件拷贝到项目制定目录，如图：3.编写一个前端网页，如...
复制链接

扫一扫

专栏目录