servlet中输出html页面,为何js,css都失效了?

hunterOrc 2019-02-26 10:58:36
这个问题困扰好几天了。
servlet doget方法:
protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
resp.setContentType("text/html");
ContentHtml contenHtml = new HtmlCreater.InitHtmlContent();
PrintWriter w = resp.getWriter();
w.println(contentHtml.getHtmlpage()); //输出a.html页面
}



a.html 部分:
<script src="/abc/js/jquery/jquery.1.11.1.min.js"></script>
<script src="/abc/js/jquery/jquery.serialize-object.min.js"></script>
<link rel="stylesheet" href="/abc/css/bootstrap/bootstrap-theme.min.css">



容器为 tomcat, 项目名为abc;
单独输出a.html 页面没有任何问题;
但通过 servlet 输出a.html 时,页面中引入的 js,css文件全都不能识别(js 文件内容没有问题),都指向了a.html页面.
运行时报如下错误:

Uncaught SyntaxError: Unexpected token < jquery.serialize-object.min.js:1
Uncaught SyntaxError: Unexpected token < jquery.1.11.1.min.js:1

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/abc/css/bootstrap/bootstrap.min.css".

...全文
525 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
引用 3 楼 Dkodak 的回复:
加绝对路径吧 ${pageContext.request.contextPath}/

亲测有效,谢谢大佬
Dkodak 2019-03-06
  • 打赏
  • 举报
回复
加绝对路径吧 ${pageContext.request.contextPath}/
hunterOrc 2019-03-01
  • 打赏
  • 举报
回复
不用回复了。问题原因是,web.xml里面配置的servlet选项有问题,导致页面中的静态资源都被过滤掉了。关于怎么处理这个问题,网上已经有很多答案了。
freekaiQaQ 2019-03-01
  • 打赏
  • 举报
回复
Uncaught SyntaxError: Unexpected token < jquery.serialize-object.min.js:1 F12 看下js的路径是否正确。 Resource interpreted as Stylesheet but transferred with MIME ty ... 看下web.xml中 filter的配置。
超市管理系统: 1.数据库设计: smbms_user 超市的工作人员 每个工作人员都有角色 smbms_role 人员的角色 3种: 系统管理员: 经理 : 普通员工: smbms_bill 超市账单 账单属于某个供应商 smbms_provider 供应商 2.项目框架设计: myeclipse+mysql+java web(servlet|jsp) 3.开发模式: MVC开发模式 注意: (1)创建项目与数据库时,采用UTF-8的编码. EncodingFilter (2)项目搭建 smbms src source folder com.hfxt.entity com.hfxt.controller UserServlet ProviderServlet BillServlet ... com.hfxt.filter com.hfxt.listener com.hfxt.service com.hfxt.service.impl com.hfxt.dao com.hfxt.dao.impl com.hfxt.util ... resources source folder db.properties test source folder WebRoot/ commom/存放公共页面 css/ img/ js/ /WEB-INF/admin(存放jsp) (3)jsp:建议放在WEB-INF下 html-》jsp:后缀名+page头部声明 jsp的资源引用: 绝对路径: ①${pageContext.request.contextPath }/css/style.css 或者 ②<%=request.getContextPath()%> ③ 可以使用${path}来获取 相对路径时相对于url(不建议) 统一: /admin/user/* /admin/provider/* ... /admin/* <> 如何处理登录问题? ①方式1 login.jsp放在WEB-INF /admin/user/toLogin->login.jsp /admin/user/login->点击登录时的处理 在过滤器,if(url.indexOf("/toLogin") != -1 ||...){ //放行 chain.doFilter(request,response); return; } ②方式2 单独放置登录页面 login.html login.jsp 4.项目周期 1周时间 项目答辩时间: 5.项目分析: (1)登录功能: ①根据用户名查询数据库, 将用户输入的密码加密, 与数据库查询出的密码进行比对. 加密方法: String p2 = Base64.encode(p.getBytes() );//Base64方式加密 或者 String password = DigestUtils.md5Hex(value);//MD5方式加密 ②登录 public User login(String us,String ps){} public String login(String username){ //根据username查询密码p1 | 根据p1和输入的密码p1比较 | ------------------- |后台 | 相等,登录 否则,登录失败 } (2)控制器使用Servlet分发请求控制,实现一个Servlet处理多个请求 (3)根据用户角色id,来判断是否显示哪些管理模块, 或者是否显示删除、增加和修改图标 (4)页面提取: 首页等页面的头部,左侧导航,底部 等都可以单独的提取到JSP. 在源页面上进行引用. <%@include file=""%> <jsp:include page="">等 (百度搜索iframe的使用) (5)账单,供应商,用户查询列表带分页。 该分页查询还需带条件。 条件查询: 支持模糊查询。 条件在查询之后, 要继续回显到页面上。 (6)供应商下拉列表: 1.在准备跳转目标页面servlet,查询所有供应商信息. 传到页面上 2.在JSP页面上, 拿到传递来的供应商信息.动态展示在下拉列表. (7)账单,供应商,用户新增修改时: 1.页面必须有JS客户端验证. 2.Servlet服务端获取页面参数时,必须要有服务端验证. 例如判空 3.新增的成功失败给出提示. 4.用户新增时,注意界面使用的日期控件.和新增前,密码加密存储. (8)用户查询: 管理员可以查看所有用户列表. 经理与普通用户只能查看自身信息,没有权限查看所有用户,无需显示用户列表,值显示自己信息即可。 (9)账单,供应商,用户修改功能: 主键编号等不让改.修改页面依然需要JS验证. 服务端验证. 修改成功,失败给出提示. 用户修改: 权限修改. 只提供给管理员,用来修改普通用户与经理. (10)账单,供应商,用户删除功能: 需要弹窗提示.也可以自己编写界面 确认删除之后,成功失败给出提示. 供应商删除: 检查当有所属未支付账单时,给出提示,不允许删除.如果没有,则删除该供应商的所有账单 用户删除: 不允许删除自身. (11)密码修改功能: 1.修改密码页面,必须有JS验证.服务端验证. 2.旧密码必须与当前登录账号的密码相同. 3.新密码修改时,加密存储. 4.修改密码失败,在当前页面给出提示.修改成功,提示请重新登录,自动退出并跳往登录页,保证session失效 (12)访问权限控制: 1.增加过滤器. 登录页面可直接访问. 如果访问不是登录地址,则根据session判断是否登录. 如果已经登录,核心页面直接显示; 如果没有登录,跳转到登录页面; 如果已经登录,访问登录页面,跳转到核心页面 (13)错误页配置: 1.编写错误页. 2. 在web.xml配置: 404 /404Error.jsp 500 /500Error.jsp
本工程旨在演示如何在java Web使用KindEditor、如何使用Servlet获取到该文本编辑域的值以及如何从数据库取出值并在jsp页面显示出来。 说明:本工程的KindEditor保留了上传图片的功能,所以是一个“重量级”的KindEditor,“轻量级”的KindEditor的应用请参考另一个例子。 本工程编码方式:UTF-8。 使用的数据库:MySQL; 数据库创建:CREATE DATABASE `test`; USE `test`; 建表SQL语句:create table `testtable` ( `uuid` char(36) not null comment '主键', `content` blob, primary key (`uuid`) ) engine=innodb default charset=utf8; 说明: 1、本工程对js\kindeditor\plugins\image\image.js文件做了修改,以实现对上传图片时自由的决定是否需要“网络图片”功能,修改如下: line 13 新增了allowImageRemote = K.undef(self.allowImageRemote, true), line 296 将“showRemote : true,”改为“showRemote : allowImageRemote,”。 使用方法:初始化的时候,设置allowImageRemote的值,为true则需要“网络图片”功能,为false则不需要“网络图片”功能。 2、将本工程js\kindeditor\plugins\code\prettify.js文件名改为了“prettify.js.bak”,即废除了该文件,应为该文件出错。 注意: 1、该文本编辑器所使用的页面css层叠样式不能出现“ul,ol,div,h3,.ul4 li{zoom:1;}”否则文本编辑器上传单个图片的功能失效;

81,094

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧