本节主要讲解常用的管理后台框架 —— EasyUI。
先去官网下载 EasyUI：http://www.jeasyui.net 在右上角的顶部的菜单，找到“EasyUI下载”
对于初学者，我们选择：EasyUI for jQuery，免费版。1M 左右而已。我们下载 1.7.0 版本。
可以下载龟速慢，可以下载网盘的：https://pan.baidu.com/s/1Wdc6UfB8YWW4XgeT9enwfA 提取码: wbax
下载完毕，解压到本地硬盘。
把解压的文件夹复制、粘贴到我们的项目中。我们先在 resources 目录下创建 static 目录，用来存放一些静态的文件（如图片、css 、js等）。
然后把解压的 EasyUI 文件复制、粘贴到 static 目录下，过程需要十几秒钟，文件比较多，还有官方提供的 demo（例子）。
OK，现在我们在打造后台管理页面：main.html 完整代码如下：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>好来屋在线影院管理页面</title>
<!-- EasyUI 主题样式引入 -->
<link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.7.0/themes/default/easyui.css"></link>
<!-- 小图标 css 样式引入 -->
<link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.7.0/themes/icon.css"></link>
<script type="text/javascript" src="/static/jquery-easyui-1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<!-- 本地化中文的js -->
<script type="text/javascript" src="/static/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
var url;
//打开选项卡的函数，如果存在，则刷新。
function openTab(text,url,iconCls){
if($("#tabs").tabs("exists",text)){
$("#tabs").tabs("select",text);
}else{
//选项卡的内容，src 是 html 文件的路径，需要创建一个 html 目录来存放它们，且属于静态资源，无需访问权限
var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:99%' " +
"src='/static/html/"+url+"'></iframe>";
$("#tabs").tabs("add",{
title:text,
iconCls:iconCls,
closable:true,
content:content
});
}
}
//退出系统
function logout(){
$.messager.confirm("系统提示","您确定要退出系统吗？",function(flag){
if(flag){
window.location.href='/logout';
}
});
}
</script>
</head>
<!-- 引用 EasyUI 的布局 -->
<body class="easyui-layout">
<!-- 顶部设计：north -->
<div region="north" style="height: 96px;background-color: #E0ECFF">
<table style="padding: 3px" width="100%">
<tr>
<td width="50%" height="85px">
<img alt="logo" src="/static/images/logo.png"></img>
</td>
<td valign="bottom" align="right" width="50%">
<font size="3"><strong>欢迎您：</strong>
<span th:text="${session.currentUser}"></span>
</font>
</td>
</tr>
</table>
</div>
<!-- 中间的布局 -->
<div region="center">
<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="首页" data-options="iconCls:'icon-home'">
<div align="center" style="padding-top: 100px"><font color="red" size="8">欢迎您使用“好来屋在线影院”管理后台</font></div>
</div>
</div>
</div>
<!-- 西部（左边）的布局 -->
<div region="west" style="width: 200px" title="导航菜单" split="true">
<div style="padding-top: 10px;padding-left: 10px;">
<!-- 子菜单的信息，以及打开后选项卡的信息 -->
<a href="javascript:openTab('添加电影信息','addMovie.html','icon-add')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" style="width: 150px;">添加电影信息</a>
<a href="javascript:openTab('电影动态管理','movieDynamic.html','icon-edit')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" style="width: 150px;">电影动态管理</a>
<a href="javascript:openTab('电影信息管理','movieManage.html','icon-large-smartart')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-large-smartart'" style="width: 150px;">电影信息管理</a>
<a href="javascript:logout()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-back'" style="width: 150px;">退出系统</a>
</div>
</div>
<!-- 底部的布局，一般是公司的信息或者版权 -->
<div region="south" style="height: 30px;padding: 5px" align="center">
Copyright © biandan 版权所有。仅供学习使用，禁止商用。
</div>
</body>
</html>说明：
1、在头部引入的样式、js 文件，如果不确定路径是否正确，可以在文件路径上，摁住 Ctrl+鼠标左键，如果有信息提示，则说明路径正确。
注意：我们还需要在 static 目录下创建一个 html 目录，用来存放项目里所有的 html 文件，属于静态资源，无需权限访问。
2、还需要在后台增加一个退出系统的接口：logout。此接口在左边的菜单“退出系统”处调用。
子菜单里如截图的地方，就是我们将要增加的 html 页面，存放的路径保持与 JavaScript 方法里的一致。
3、顶部的 logo 图，需要在 static 目录下创建一个 images 目录，然后放入一张 logo.png 图。注意 logo 图的尺寸不要太大（350 × 80 像素为佳）。
src="/static/images/logo.png"提供一个在线制作 logo 的网址：http://www.uugai.com/ 或者使用下面提供的这张 logo 图。
4、子菜单的小图标也可以设置，如何找到 icon 的图标样式？这里有个诀窍：
①先去 themes 主题下找到 icons 目录。把喜欢的图标的名称复制出来。
②在 themes 下找到 icon.css 文件，然后在此样式文件里找到刚才复制的文件名。
③找到对应的样式，复制，粘贴到代码中。比如：data-options="iconCls:'icon-add'"。搞定！
④如果不用 EasyUI 提供的图标，可以自己设计。然后写 css 样式即可。最好是区分 EasyUI 原有的 icon.css 样式文件！自己创建一个新的样式文件。
5、${session.currentUser} 是获取 session 里的值，通过 currentUser 作为 key 来获取，因此 API 接口需要返回这个值。
接下来，我们需要在 application.yml 配置文件里，增加“静态资源的访问过滤”。问什么需要过滤呢？因为如果拦截静态资源的话，前端页面就无法访问得到了。
spring:
mvc:
static-path-pattern: /static/**完整的 application.yml 配置文件如下：
# 配置服务相关信息
server:
# 端口号
port: 8080
# 服务名称和数据源配置
spring:
mvc:
static-path-pattern: /static/**
application:
name: haolaiwu
datasource:
# 使用阿里巴巴的 druid 数据源
druid:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/movie?characterEncoding=utf-8
username: root
password: 123456
# mybatis 配置
mybatis:
# Mybatis扫描的mapper文件
mapper-locations: classpath:mapper/*.xml
# 扫描哪个包下的对象
type-aliases-package: com.movie.entity
# Mybatis配置文件
config-location: classpath:mybatis-config.xml
OK，万事俱备，我们重启一下服务，浏览器地址输入：http://localhost:8080/login 输入数据库正确的账号、密码。
登录成功，如下截图。注意：这时候只是一个没有任何业务逻辑的管理页面，只是为了看下后台管理的效果。
如果没看到此界面，或者界面的布局凌乱，则是静态资源的无法访问到。如下图
浏览器进入调试模式（按 F12），会看到 404 报错信息。
这时候只要把配置文件修改一下，增加静态资源的过滤即可。
spring:
mvc:
static-path-pattern: /static/**
最后，我们在 LoginController 类里增加一个退出系统的方法：logout
//用户退出登录
@RequestMapping("/logout")
public String logout(HttpSession session)throws Exception{
session.invalidate();//调用方法使 session 无效
return "redirect:/login";//重定向到 login 接口，跳转到登录界面
}重启服务，验证一下能否正常退出系统。
选择 确定 ，返回到登陆页面了。说明我们的退出系统成功。
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
