Web 项目 tiger 开始 之1 引入资源

本文导读

  • 现在使用Spring Boot来开发一个实际开发中功能全面项目,它可以将前面学到真知识进行一个整合
  • 因为篇幅较长,采用每个功能一篇文章的方法进行,所以这会是一个系列

新建 web 项目

引入静态资源

  • 前端开发人员写好html页面之后,同时会伴随着一些静态资源,如css、js文件,以及可能的各种图片、音视频等,这时都需要导入进项目中,可以参考《Spring Boot Web开发简介及webajrs 和 静态资源映射规则》
  • 如下导入所示 index.html 就会是项目默认的首页,至于index.html依赖的静态文件的具体内容这不是重点,哪怕是自己写都是可以的,这里只强调方法

application.properties

server.servlet.context-path=/tiger

index.html

<!DOCTYPE html>
<!--xmlns写上之后 Thymeleaf就会有提示,更加方便-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Signin Template for Bootstrap</title>
    <!-- Bootstrap core CSS
    如果没有导入bootstrap的webjars包,则不要使用th:href覆盖掉原来静态文件夹目录下的文件-->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <!-- Custom styles for this template
    理解原来之后就知道,下面th:href取值就是覆盖掉默认的href属性值,好处是可以不和前端人员代码发生冲突
    thymeleaf的@{}表达式会自动加上"/应用上下文路径"前缀,这就避免了传统jsp中的${request.context.path}这种操作了
    -->
    <link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" method="post">
    <!-- 取值替换原来默认的值-->
    <img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" alt=""
         width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
    <label class="sr-only" >Username</label>
    <input type="text" name="username" class="form-control" placeholder="Username"
           required="" autofocus="">
    <label class="sr-only" >Password</label>
    <input type="password" name="password" class="form-control" placeholder="Password"
           required="">

    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"/> Remember me
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>
    <p class="mt-5 mb-3 text-muted">© 2017-2018</p>
    <a class="btn btn-sm">中文</a>
    <a class="btn btn-sm">English</a>
</form>
</body>

</html>

运行测试

猜你喜欢

转载自blog.csdn.net/wangmx1993328/article/details/81189948
今日推荐