全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 后端
  3. Java
  4. 正文

全栈前端之javaweb学习过程中总结的技巧

2020年6月26日 860点热度 0人点赞 0条评论

一、javaweb项目中,jsp文件无法读取相关的css,js文件的问题解决

在学习做p2p项目的过程中,项目初始页面搭建好了,但是启动tomcat过后,访问却出现406报错,一致不知道是什么原因,后来查到了,原来是因为我的页面时html格式的,在javaweb项目中,使用html的话要做一些配置,但是使用jsp就没有问题,于是改为jsp ,页面就可以正常访问了。

虽然页面此时可以正常访问了,但是页面却没有样式,感觉样式都没有加载进来,我也按照相关提示,使用了相对路径来引入这些css和js文件,依旧没有用:

javaweb配置

如图使用的是相对引用,页面还是没有效果。

后来查阅google得知:

这是因为 servlet 有个 url-pattern,将 css、js 的路径当做 servlet 处理了

url-pattern有5种配置模式:

(1)/xxx:完全匹配/xxx的路径

(2)/xxx/*:匹配以/xxx开头的路径,请求中必须包含xxx。

(3)/*:匹配/下的所有路径,请求可以进入到action或controller,但是转发jsp时再次被拦截,不能访问jsp界面。

(4).xx:匹配以xx结尾的路径,所有请求必须以.xx结尾,但不会影响访问静态文件。

(5)/:默认模式,未被匹配的路径都将映射到刺servlet,对jpg,js,css等静态文件也将被拦截,不能访问。

后来查看别的正常的项目发现,在application.xml文件中有这样一行配置:

<!--2.对静态资源扫描-->
<mvc:default-servlet-handler/>

这应该就是防止这种情况出现而配置的吧,于是把这段配置拷贝到了有问题的项目中,问题果然解决了。

 

二、在idea里面,把普通java项目变成javaweb项目的方法

首先要在项目的根目录下创建一个创建webapp目录,然后在webapp目录下创建WEB-INF目录,web.xml文件,然后前往projectStructure里面找到modules,添加web.xml的目录即可:

普通java项目变成javaweb项目

 

三、页面中添加进度条并且自定义颜色

示例代码如下:

<!DOCTYPE html>
<style media="screen">
    .pr {
        width: 106px;
        height: 10px;
        background: #ededed;
        border-radius: 8px;
    }
    progress::-webkit-progress-bar {
        background: #ededed;
        border-radius: 8px;
    }
    progress::-webkit-progress-value {
        background: #FADAA1;
        border-radius: 8px;
    }
    .pr.alert::-webkit-progress-value {
        background: red;
    }
</style>
​
<body>
<progress class="pr" value="50" max="100"></progress>
</body>
​
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript">
    var value = 50;
​
    if (value<15) {
        $('.pr').addClass('alert');
    }
</script>
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 备忘 经验总结
最后更新:2020年6月26日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号