的mvc_CPT203 lab:SpringBoot 的 MVC 架构

转载于:

SpringBoot微服务架构下的MVC模型总结 - 畅玩博客 - 博客园​www.cnblogs.com
1a56b5606ae5660f09f7b1f3748b6596.png

SpringBoot 的 MVC 架构

SpringBoot 框架下有着完善的 MVC 设计模型支持,其在 SpringMVC4.x 基础上进行了简化操作,对于项目的配置工作采用自动化配置的方式,使得

在 SpringBoot 环境下进行 MVC 模式的开发变得尤为简单。

SpringBoot 下 的 MVC 基 本 由 Controller + Thymeleaf+Model 组成,Controller 控制器 起 到 在View 和 Model 间 衔 接 作 用 ,Thymeleaf 是 View,

Model 有专门的类与其对应,对于数据的操作则完全通过 Model 来完成。下面我们详细的介绍 MVC 各个组成部分。

1be6a64ef3ee49aac48e7103133449ce.png

1. 视图层 Thymeleaf (百叶窗)

e7a908791995067f7f22bc0c6d92cb5c.png
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>H+ 后台主题UI框架 - 主页</title>

<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
    content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术">

<!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->

<link rel="shortcut icon" href="favicon.ico">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/animate.min.css" rel="stylesheet">
<link href="../css/style.min.css" rel="stylesheet">
</head>

<body class="fixed-sidebar full-height-layout gray-bg"
    style="overflow: hidden">
    <div id="wrapper">
        <!--左侧导航开始-->
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="nav-close">
                <i class="fa fa-times-circle"></i>
            </div>
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                            <span><img alt="image" class="img-circle"
                                src="../image/1.jpg" /></span> <a data-toggle="dropdown"
                                class="dropdown-toggle" href="#"> <!-- <span class="clear">
                                        <span class="block m-t-xs"><strong class="font-bold">admin</strong></span>
                                    <span class="text-muted text-xs block">超级管理员<b class="caret"></b></span>
                                    </span> -->
                            </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">

                                <li class="divider"></li>
                                <li><a href="login.html">安全退出</a></li>
                            </ul>
                        </div>
                        <div class="logo-element">PRAS</div>
                    </li>

                    <li><a href="#"> <i class="fa fa-database"></i> <span
                            class="nav-label">对比库管理</span> <span class="fa arrow"></span>
                    </a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="form_file_upload.html"
                                th:href="@{/page/form_file_upload}">政策添加</a></li>
                            <li><a class="J_menuItem" href="policy/table_basic.html"
                                th:href="@{/policy/list}">政策列表</a></li>
                        </ul></li>
                    
                    <li><a href="#"> <i class="fa fa-balance-scale"></i> <span
                            class="nav-label">部门管理</span> <span class="fa arrow"></span>
                    </a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem"
                                href="department/department_list1.html"
                                th:href="@{/department/list}">部门列表</a></li>
                        </ul></li>
                
                    <li><a href="#"> <i class="fa fa-gg-circle"></i> <span
                            class="nav-label">政策审查</span> <span class="fa arrow"></span>
                    </a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href=""
                                th:href="@{/page/analysis_add}">系统审查</a></li>
                            <li><a class="J_menuItem" href=""
                                th:href="@{/reviewlegitimacy/list}">审查列表</a></li>

                        </ul></li>
                    <li>
                     <a href="#">
                            <i class="fa fa-search"></i> <span class="nav-label">政策对比</span>
                            <span class="fa arrow"></span>
                    </a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href=""
                                th:href="@{/page/review_add}">文件对比</a></li>
                            <li><a class="J_menuItem" href=""
                                th:href="@{/policycompare/list}">对比列表</a></li>
                        </ul>

                    </li>
                    <li>
                         <a href="#">
                            <i class="fa fa-bar-chart"></i> <span class="nav-label">分析查找</span>
                            <span class="fa arrow"></span>
                    </a>
                        <ul class="nav nav-second-level">
                             <li>
                            <a class="J_menuItem" href="graph_echarts.html" th:href="@{/page/graph_echarts}">执行效果查看</a>
                        </li>
                        <li>
                            <a class="J_menuItem" href="relationship/timeline_v2.html" th:href="@{/page/timeline_v2}">历史政策查询</a>
                        </li>
                        <li>
                            <a class="J_menuItem" href="graph_relative.html" th:href="@{/EsPolicy/findByPage}"
                            >政策条款查询</a>
                        </li>


                        </ul>

                    </li>
                    
                    <li><a href="#"> <i class="fa fa-briefcase"></i> <span
                            class="nav-label">系统管理</span> <span class="fa arrow"></span>
                    </a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="User/clients.html"
                                th:href="@{/user/findByPage}">用户列表</a></li>
                            <li><a class="J_menuItem" href="#"
                                th:href="@{/sensitive/list}">敏感词列表</a></li>
                        </ul></li>
                </ul>
            </div>
        </nav>
        <!--左侧导航结束-->
        <!--右侧部分开始-->
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation"
                    style="margin-bottom: 0">
                    <div class="navbar-header">
                        <a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
                            href="#"><i class="fa fa-bars"></i> </a>
                        <form role="search" class="navbar-form-custom" method="post"
                            action="search_results.html">
                            <div class="form-group">
                                <input type="text" placeholder="请输入您需要查找的内容 …"
                                    class="form-control" name="top-search" id="top-search">
                            </div>
                        </form>
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li class="dropdown"><a class="dropdown-toggle count-info"
                            data-toggle="dropdown" href="#"> <i class="fa fa-envelope"></i>
                                <span class="label label-warning">16</span>
                        </a></li>


                    </ul>
                </nav>
            </div>
            <div class="row content-tabs">
                <button class="roll-nav roll-left J_tabLeft">
                    <i class="fa fa-backward"></i>
                </button>
                <nav class="page-tabs J_menuTabs">
                    <div class="page-tabs-content">
                        <a href="javascript:;" class="active J_menuTab"
                            data-id="index_v2.html">首页</a>
                    </div>
                </nav>
                <button class="roll-nav roll-right J_tabRight">
                    <i class="fa fa-forward"></i>
                </button>
                <div class="btn-group roll-nav roll-right">
                    <button class="dropdown J_tabClose" data-toggle="dropdown">
                        关闭操作<span class="caret"></span>

                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                        <li class="J_tabShowActive"><a>定位当前选项卡</a></li>
                        <li class="divider"></li>
                        <li class="J_tabCloseAll"><a>关闭全部选项卡</a></li>
                        <li class="J_tabCloseOther"><a>关闭其他选项卡</a></li>
                    </ul>
                </div>
                <a href="login_v2.html" th:href="@{/user/logout}"
                    class="roll-nav roll-right J_tabExit"><i
                    class="fa fa fa-sign-out"></i> 退出</a>
            </div>
            <div class="row J_mainContent" id="content-main">
                <iframe class="J_iframe" name="iframe0" width="100%" height="100%"
                    src="index_v2.html" frameborder="0" data-id="index_v2.html"
                    seamless></iframe>
            </div>
            <div class="footer">
                <div class="pull-right">© 科技政策审查</div>
            </div>
        </div>
        <!--左侧部分结束-->

    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/hplus.min.js"></script>
    <script type="text/javascript" src="../js/contabs.min.js"></script>
    <script src="../js/plugins/pace/pace.min.js"></script>
</body>

</html>

代码说明:

● ${...} 变量表达式

● *{...} 选择变量表达式

● #{...} 消息表达式

● @{...} 链接 url 表达式

● Thymeleaf 是嵌入到 Html 的标签当中,引入标识是 th:开头。

● <th th:text="# {msgs.headers.name}">Name</th>:是将由后台传递过来的信息头中的 name 属性值显示在<th>标签中

● <tr th:each="prod: ${allProducts}">:是准备

将后台对象 allProducts 的内容进行循环遍历,每次循环遍历的对象为 prod。<tr>下面的标签为循环体内容,本例中其下面包括了两个<td>标签

● <td th:text="${prod.name}">Oranges</td>:同样是循环体中的内容,在这个<td>标签中将输出本次循环对象 prod 的 name 属性。

2控制器 Controller、RestController

当我们设计了前端视图后,需要将前端用户的请求进行处理、响应时,视图需要将请求内容提交给后台服务器,接收该内容的即是 MVC 中的”C”控制

器,Controller 是在 Model 和 View 之间进行交流的中央枢纽,当 View 传递信息给 Model 时,或者

Model 将处理结果传递给 View 时,都是通过

Controller 来中转,调度,处理的。

(1)Controller 简介

在 SpringBoot 框架中,Controller 完全由代码注释的形式存在(如果大家习惯了配置文件的方式,需要去了解下 Java 的注释技术及 Spring 的注释配置技术,此文不做详解)。

分类:在 SpringBoot 框架下,主要包括两种

Controller,分别如下:

● Controller:基本的控制器,用于接收、传输纯字符串信息,调用业务模型处理信息,也是SpringBoot 主要的控制器,它可以完成大部分 MVC

● RestController:该控制器是 SpringBoot 将WebService 技术与常用的数据封装格式整合在一起,通过一定的技术规则,将原来较为复杂的数据封装 技 术 简 化 为 十 分 方 便 的 几 个 步 骤 来 实 现

WebService 功能,常用的数据封装格式(例如:Json、Xml)在 RestController 中均有支持。该控制器常常用在各类移动 App 的数据业务和大型综合信息系统

的数据统一管理平台中使用。随着移动 App 和大数据时代的来临,以 WebService 方式的数据提供、管理模式得到了更多的企业和应用的喜悦。

30495a9fa26cf765b8d453174bd139e5.png

3. 模型 Model

(1)Model 的作用

Model 是 MVC 设计模型中的重要组成部分,其主要的工作是解决实际的业务需求,例如:数据的增加、插入、修改、删除;各类业务的逻辑和算数

运算;项目外各类网络接口的调用;服务器端硬件资源的调度等等。

(2)Model 的存在形式

Model 的存在形式在 SpringBoot 框架中是采用面向对象的理念,将 Model 主要完成的任务进行类化封装,每个类对应一个功能完整的模型,类中的各

个方法对应模型的某一个功能点,当 Controller 需要调用 Model 解决实际的业务需求时,只需要调用Model 对应的类,创建对象,调用方法即可实现。

(3)Model 类

在 SpringBoot 框架中设置了一个专门的模型类Model,用于向 View 传递信息,下面我们可以通过一段代码来展示 Model 类的使用方式。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值