第一天

1.介绍

2.技术介绍

软件环境：JDK 11，MySQL 5.6，Tomcat 7.X；
开发工具：IDEA 2019；
项目构建及管理工具：Maven；
前端：jQuery + Bootstrap3；
页面引擎：FreeMarker；
控制层：Spring MVC；
业务层：Spring；
持久层：MyBatis；
数据库连接池：Druid。

3.Bootstrap

<!doctype html>
<html lang="zh-CN">
  <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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

表格

栅格

按钮，图标，模态框啥的

AdminLTE整合了bootstrap

4.FreeMarker

4.1.添加依赖

<!-- FreeMarker -->
<dependency>
    <groupId>org.freemarker</groupId>
    <artifactId>freemarker</artifactId>
    <version>2.3.30</version>
</dependency>

4.2.常用指令

include 指令
在当前模板文件中引入另一个模板文件。

<#-- FreeMarker 引入模板文件 之前已经配置了模板路径为 /WEB-INF/views/ 这里就不需要写了 -->
<#include "/common/link.ftl" >

assign 指令
使用该指令可以在当前模板中创建一个新的变量或者替换一个已经存在的变量。

<#-- 创建变量 currentMenu 并赋值 -->
<#assign currentMenu="department"/>

<#-- 可使用 ${} 获取该变量 -->
${currentMenu}

list 指令
用于循环遍历序列。

<#list pageResult.data as department>
    <tr>
        <td>${department_index+1}</td>
        <td>${department.name}</td>
        <td>${department.sn}</td>
    </tr>
<#/list>

if 指令
用于条件判断。condition：将被计算成布尔值的表达式，其中 elseif 和 else 是可选的。

<#if condition>
    ...
<#elseif condition2>
    ...
<#elseif condition3>
    ...
<#else>
    ...
</#if>

4.3.springMVC使用

依赖

<!-- 将 FreeMarker 等第三方库整合进 Spring 应用上下文的依赖 -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context-support</artifactId>
    <version>${spring.version}</version> 
</dependency>

配置

<!-- 注册 FreeMarker 配置类   可以找到模板的位置 -->
<bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> 
    <!-- 配置 FreeMarker 的文件编码 -->
    <property name="defaultEncoding" value="UTF-8" />
    <!-- 配置 FreeMarker 寻找模板的路径 -->
    <property name="templateLoaderPath" value="/WEB-INF/views/" />
    <property name="freemarkerSettings">
        <props>
            <!-- 兼容模式，配了后不需要另外处理空值问题，时间格式除外 -->
            <prop key="classic_compatible">true</prop>
        </props>
    </property>
</bean>

<!-- 注册 FreeMarker 视图解析器 -->
<bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">  
    <!-- 是否把 session 中的 attribute 复制到模板的属性集中，可以使用 FreeMarker 的表达式来访问并显示 -->   
    <property name="exposeSessionAttributes" value="true" /> 
    <!-- 配置逻辑视图自动添加的后缀名 --> 
    <property name="suffix" value=".ftl" />   
    <!-- 配置响应头中 Content-Type -->  
    <property name="contentType" value="text/html;charset=UTF-8" />
</bean>

5.分页

5.1.前端

<div style="text-align: center;">
    <ul id="pagination" class="pagination"></ul>
</div>
<script>
    //分页
    $(function () {
        $("#pagination").twbsPagination({
            totalPages: ${pageInfo.pages} || 1,
            startPage: ${pageInfo.pageNum} || 1,
            visiblePages: 5,
            first: "首页",
            prev: "上页",
            next: "下页",
            last: "尾页",
            initiateStartPageClick: false,
            onPageClick: function (event, page) {
                $("#currentPage").val(page);
                $("#searchForm").submit();
            }
        });
    })
</script>

5.2.后端

添加依赖

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.1.2</version>
</dependency>

在applicationContext.xml配置插件

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <!-- 注意其他配置 -->
    <property name="plugins">
        <array>
            <bean class="com.github.pagehelper.PageInterceptor">
                <property name="properties">
                    <!--使用下面的方式配置参数，一行配置一个，下面配的是合理化分页 -->
                    <value>
                        pageSizeZero=true
                        reasonable=true
                    </value>
                </property>
            </bean>
        </array>
    </property>
</bean>

6.模态框

弹出模态框

$('#模态框的id').modal('show'); //官方文档中表示通过该方法即可弹出模态框

模态框例子

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="/department/saveOrUpdate" method="post">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">部门编辑</h4>
            </div>
            <input type="hidden" name="id" id="id">
            <div class="modal-body">

                    <div class="form-group">
                        <label for="name">部门名称</label>
                        <input type="text" name="name" class="form-control" id="name" placeholder="部门名称">
                    </div>
                    <div class="form-group">
                        <label for="sn">部门缩写</label>
                        <input type="text" name="sn" class="form-control" id="sn" placeholder="部门简称">
                    </div>


            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

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

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

返回课程体系

posted @ 2021-05-07 18:58 LinkYup 阅读(51) 评论(0) 编辑收藏举报

刷新页面返回顶部

LinYup

LinkYup01

第一天