AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

好好编程-物流项目08【整合静态资源文件】

2021-12-02 121
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： SSM框架我们已经整合好了，现在开始处理后台管理系统的页面。整合静态资源文件

文章目录


整合静态资源文件

1.获取资源文件

2.拷贝对应文件

3.Page控制器

4.测试


 SSM框架我们已经整合好了，现在开始处理后台管理系统的页面。

整合静态资源文件


1.获取资源文件


链接：https://pan.baidu.com/s/1Uby-aPIAa55tci-HjTXYzg

提取码：vm8v

解压后的目录：

20190320232019680.png


使用的时候我们需要将对应的html修改为jsp文件。


2.拷贝对应文件


 css和js图片资源直接放在webapp文件下即可，而jsp文件我们需要放到WEB-INF的jsp文件下，因为我们在SpringMVC的配置文件中配置了视图解析器：

20190319211448929.png

目录结构

2019032023220569.png


在jsp下创建main.jsp文件，同时将main.html中的内容拷贝进来

<%@ 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>
</head>
<frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0">
  <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frameset cols="187,*" frameborder="no" border="0" framespacing="0">
    <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="index.html" name="rightFrame" id="rightFrame" title="rightFrame" />
  </frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>


同时main.jsp页面中又引用了其他三个页面，这时我们也需要将其他三个创建改造出来：

20190320233955841.png

top.jsp

<%@ 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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){ 
  //顶部导航切换
  $(".nav li a").click(function(){
    $(".nav li a.selected").removeClass("selected")
    $(this).addClass("selected");
  })  
})  
</script>
</head>
<body style="background:url(images/topbg.gif) repeat-x;">
    <div class="topleft">
    <a href="main.html" target="_parent"><img src="images/logo.png" title="系统首页" /></a>
    </div>
    <ul class="nav">
    <li><a href="default.html" target="rightFrame" class="selected"><img src="images/icon01.png" title="工作台" /><h2>工作台</h2></a></li>
    <li><a href="imgtable.html" target="rightFrame"><img src="images/icon02.png" title="模型管理" /><h2>模型管理</h2></a></li>
    <li><a href="imglist.html"  target="rightFrame"><img src="images/icon03.png" title="模块设计" /><h2>模块设计</h2></a></li>
    <li><a href="tools.html"  target="rightFrame"><img src="images/icon04.png" title="常用工具" /><h2>常用工具</h2></a></li>
    <li><a href="computer.html" target="rightFrame"><img src="images/icon05.png" title="文件管理" /><h2>文件管理</h2></a></li>
    <li><a href="tab.html"  target="rightFrame"><img src="images/icon06.png" title="系统设置" /><h2>系统设置</h2></a></li>
    </ul>
    <div class="topright">    
    <ul>
    <li><span><img src="images/help.png" title="帮助"  class="helpimg"/></span><a href="#">帮助</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="login.html" target="_parent">退出</a></li>
    </ul>
    <div class="user">
    <span>admin</span>
    <i>消息</i>
    <b>5</b>
    </div>    
    </div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>


left.jsp

<%@ 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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){ 
  //导航切换
  $(".menuson li").click(function(){
    $(".menuson li.active").removeClass("active")
    $(this).addClass("active");
  });
  $('.title').click(function(){
    var $ul = $(this).next('ul');
    $('dd').find('ul').slideUp();
    if($ul.is(':visible')){
      $(this).next('ul').slideUp();
    }else{
      $(this).next('ul').slideDown();
    }
  });
})  
</script>
</head>
<body style="background:#f0f9fd;">
  <div class="lefttop"><span></span>通讯录</div>
    <dl class="leftmenu">
    <dd>
    <div class="title">
    <span><img src="images/leftico01.png" /></span>管理信息
    </div>
      <ul class="menuson">
        <li><cite></cite><a href="index.html" target="rightFrame">首页模版</a><i></i></li>
        <li class="active"><cite></cite><a href="right.html" target="rightFrame">数据列表</a><i></i></li>
        <li><cite></cite><a href="imgtable.html" target="rightFrame">图片数据表</a><i></i></li>
        <li><cite></cite><a href="form.html" target="rightFrame">添加编辑</a><i></i></li>
        <li><cite></cite><a href="imglist.html" target="rightFrame">图片列表</a><i></i></li>
        <li><cite></cite><a href="imglist1.html" target="rightFrame">自定义</a><i></i></li>
        <li><cite></cite><a href="tools.html" target="rightFrame">常用工具</a><i></i></li>
        <li><cite></cite><a href="filelist.html" target="rightFrame">信息管理</a><i></i></li>
        <li><cite></cite><a href="tab.html" target="rightFrame">Tab页</a><i></i></li>
        <li><cite></cite><a href="error.html" target="rightFrame">404页面</a><i></i></li>
        </ul>    
    </dd>
    <dd>
    <div class="title">
    <span><img src="images/leftico02.png" /></span>其他设置
    </div>
    <ul class="menuson">
        <li><cite></cite><a href="#">编辑内容</a><i></i></li>
        <li><cite></cite><a href="#">发布信息</a><i></i></li>
        <li><cite></cite><a href="#">档案列表显示</a><i></i></li>
        </ul>     
    </dd> 
    <dd><div class="title"><span><img src="images/leftico03.png" /></span>编辑器</div>
    <ul class="menuson">
        <li><cite></cite><a href="#">自定义</a><i></i></li>
        <li><cite></cite><a href="#">常用资料</a><i></i></li>
        <li><cite></cite><a href="#">信息列表</a><i></i></li>
        <li><cite></cite><a href="#">其他</a><i></i></li>
    </ul>    
    </dd>  
    <dd><div class="title"><span><img src="images/leftico04.png" /></span>日期管理</div>
    <ul class="menuson">
        <li><cite></cite><a href="#">自定义</a><i></i></li>
        <li><cite></cite><a href="#">常用资料</a><i></i></li>
        <li><cite></cite><a href="#">信息列表</a><i></i></li>
        <li><cite></cite><a href="#">其他</a><i></i></li>
    </ul>
    </dd>   
    </dl>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>


index.jsp

<%@ 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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    </ul>
    </div>
    <div class="mainindex">
    <div class="welinfo">
    <span><img src="images/sun.png" alt="天气" /></span>
    <b>Admin早上好，欢迎使用信息管理系统</b>(admin@uimaker.com)
    <a href="#">帐号设置</a>
    </div>
    <div class="welinfo">
    <span><img src="images/time.png" alt="时间" /></span>
    <i>您上次登录的时间：2013-10-09 15:22</i> （不是您登录的？<a href="#">请点这里</a>）
    </div>
    <div class="xline"></div>
    <ul class="iconlist">
    <li><img src="images/ico01.png" /><p><a href="#">管理设置</a></p></li>
    <li><img src="images/ico02.png" /><p><a href="#">发布文章</a></p></li>
    <li><img src="images/ico03.png" /><p><a href="#">数据统计</a></p></li>
    <li><img src="images/ico04.png" /><p><a href="#">文件上传</a></p></li>
    <li><img src="images/ico05.png" /><p><a href="#">目录管理</a></p></li>
    <li><img src="images/ico06.png" /><p><a href="#">查询</a></p></li> 
    </ul>
    <div class="ibox"><a class="ibtn"><img src="images/iadd.png" />添加新的快捷功能</a></div>
    <div class="xline"></div>
    <div class="box"></div>
    <div class="welinfo">
    <span><img src="images/dp.png" alt="提醒" /></span>
    <b>Uimaker信息管理系统使用指南</b>
    </div>
    <ul class="infolist">
    <li><span>您可以快速进行文章发布管理操作</span><a class="ibtn">发布或管理文章</a></li>
    <li><span>您可以快速发布产品</span><a class="ibtn">发布或管理产品</a></li>
    <li><span>您可以进行密码修改、账户设置等操作</span><a class="ibtn">账户管理</a></li>
    </ul>
    <div class="xline"></div>
    <div class="uimakerinfo"><b>查看Uimaker网站使用指南，您可以了解到多种风格的B/S后台管理界面,软件界面设计，图标设计，手机界面等相关信息</b>(<a href="http://www.uimaker.com" target="_blank">www.uimaker.com</a>)</div>
    <ul class="umlist">
    <li><a href="#">如何发布文章</a></li>
    <li><a href="#">如何访问网站</a></li>
    <li><a href="#">如何管理广告</a></li>
    <li><a href="#">后台用户设置(权限)</a></li>
    <li><a href="#">系统设置</a></li>
    </ul>    
    </div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>


但是因为这几个文件是在WEB-INF下是不能直接访问的。所以修改为如下:

2019032023430644.png

访问由控制器控制。


3.Page控制器


 为了访问main.jsp页面，我们需要写一个Controller类，通过访问Controller来间接访问main.jsp。我们定义的Controller类是PageController。如下图所示

/**
 * 页面控制器
 * @author 波波烤鸭
 *
 * dengpbs@163.com
 */
@Controller
public class PageController {
  /**
   * 跟目录就跳转到main.jsp页面
   * @return
   */
  @RequestMapping("/")
  public String showMain(){
    return "main";
  }
  /**
   * restful 风格
   *    传递的是什么数据就跳转到对应的页面
   * @param path
   * @return
   */
  @RequestMapping("/{path}")
  public String showTop(@PathVariable String path){
    return path;
  }
}


4.测试


 启动logistics-manager-web服务，访问查看效果。记得将其他几个项目重新install以下，因为本地仓库中的jar并没有更新！


页面样式没有出来

20190320234632501.png

原因是静态资源被拦截了，在web.xml文件中配置防止拦截操作。

20190320234656990.png

<!-- 防止资源文件被spring MVC拦截 -->
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.png</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.gif</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
  </servlet-mapping>


重启服务


搞定~


文章标签：
Java
JavaScript
前端开发
游客a74jvhcp7vclg
目录
相关文章
前端技术栈
|
7月前
|
前端开发
十分钟封装一个好用的axios，省时又省力他不香吗
十分钟封装一个好用的axios，省时又省力他不香吗
前端技术栈
86 1
wishCoding
|
7月前
|
JavaScript Java 测试技术
基于小程序的小区租拼车管理信息系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的小区租拼车管理信息系统+springboot+vue.js附带文章和源代码设计说明文档ppt
wishCoding
48 0
wishCoding
|
7月前
|
JavaScript Java 测试技术
基于小程序的传染病防控宣传系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的传染病防控宣传系统+springboot+vue.js附带文章和源代码设计说明文档ppt
wishCoding
50 0
热爱技术的小郑
|
4月前
|
前端开发 JavaScript 程序员
成功解决：尚硅谷中的谷粒商城前端项目运行依赖问题。【详细图解+问题说明+解决思路】
这篇文章介绍了如何解决尚硅谷谷粒商城前端项目中遇到的依赖问题，通过修改`package.json`和`package-lock.json`中的`node-sass`和`sass-loader`版本，成功解决了node版本与这些依赖的兼容性问题。
热爱技术的小郑
75 0
成功解决：尚硅谷中的谷粒商城前端项目运行依赖问题。【详细图解+问题说明+解决思路】
游客ot6eft3qn37ga
|
4月前
|
JavaScript 前端开发 程序员
JS小白请看！一招让你的面试成功率大大提高——规范代码
JS小白请看！一招让你的面试成功率大大提高——规范代码
游客ot6eft3qn37ga
45 5
wishCoding
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js的疫情期间高校人员管理附带文章和源代码设计说明文档ppt
基于springboot+vue.js的疫情期间高校人员管理附带文章和源代码设计说明文档ppt
wishCoding
41 6
不摸鱼的程序员
|
7月前
|
前端开发 JavaScript
前端综合练手小项目
前端综合练手小项目
不摸鱼的程序员
45 1
亚丁号
|
7月前
|
JavaScript 前端开发 关系型数据库
分享66个NodeJs系统源码总有一个是你想要的
分享66个NodeJs系统源码总有一个是你想要的
亚丁号
157 1
日星月云
|
前端开发
书城项目全部代码4
书城项目全部代码4
日星月云
53 0
日星月云
书城项目全部代码3
书城项目全部代码3
日星月云
87 0

热门文章

最新文章

  • 1
    测试开启MySQL performance_schema后对性能的影响
  • 2
    Github Pages+Hexo+阿里云域名绑定
  • 3
    从超模转职成为程序媛是一种怎样的体验
  • 4
    【Redis】redis安装与客户端redis-cli的使用(批量操作)
  • 5
    VMtools的安装
  • 6
    WCF分布式安全开发实践(8):消息安全模式之用户名身份验证:Message_UserName_WSHttpBinding
  • 7
    TechED2010与我（二）—— Windows Phone 7 Develop
  • 8
    github创建远程仓库和git常用命令
  • 9
    Zookeeper可以干什么？
  • 10
    Python中参数多个值的表示法
  • 1
    Navicat还原DMP文件步骤
    27
  • 2
    如何删除DMP文件
    24
  • 3
    IEPL与IPLC国际专线的区别介绍
    89
  • 4
    《C++与人工智能：照亮能源可持续发展之路》
    21
  • 5
    《C++与生物医学的智能融合：医疗变革新引擎》
    26
  • 6
    获取网页状态码[可指定地域]免费API接口教程
    16
  • 7
    查询域名WHOIS信息免费API接口教程
    15
  • 8
    icp备案查询免费API接口教程
    17
  • 9
    负载开关IC：简化电源管理与提升系统稳定性的关键
    19
  • 10
    获取指定网页基础信息【TDK】免费API接口教程
    14

    • 相关课程

    更多
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • Java面试疑难点解析 - 系统架构及项目设计
  • 线上Linux服务器优化经验
  • 软件供应商进阶管理实操

    • 相关电子书

    更多
  • 去哪儿网qp热更新技术的架构与实践
  • 阿里云栖开发者沙龙PHP技术专场-静态扫描为你的项目上线保驾护航-周梦康
  • Java应用提速（速度与激情）

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月