GVKun编程网logo

一种避免Apache Aliaspath包含CSS资源之类的HTML资源的方法

21

本篇文章给大家谈谈一种避免ApacheAliaspath包含CSS资源之类的HTML资源的方法，同时本文还将给你拓展04-webpack打包css资源、ApacheCamel调度到本地JaxRs资源实

本篇文章给大家谈谈一种避免Apache Aliaspath包含CSS资源之类的HTML资源的方法，同时本文还将给你拓展04- webpack打包css资源、Apache Camel调度到本地JaxRs资源实现、Apache proxypass无法解析图像和CSS等资源的url、Apache下开启SSI配置使html支持include包含的方法等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

一种避免Apache Aliaspath包含CSS资源之类的HTML资源的方法

一种避免Apache Aliaspath包含CSS资源之类的HTML资源的方法

这里有一个问题，因为我目前的解决scheme是不是真的让我满意以下问题：

我有一个自己的PHP框架在开发MVC模式。 而我的路由器工作完美，所有，但我有一个问题，我找不到解决scheme。

那么我路由每个传入的请求index.PHP文件位于我的框架的基path。 当然，在包含css的时候使用相对path是没问题的，例如：

<link rel="stylesheet" type="text/css" href="style/include/css/style.css" />

这在浏览器中是完美的。 当然，我在URL中input的内容并不重要，因为每个请求都会按照上面所述的方式redirect到索引，从而使合理的路由成为可能。

Apacheredirect问题.htaccess中

用SetEnv重写

URL重写（SLUG）和URLredirect（htaccess）

删除index.PHP url重写.htaccess

PHP的htaccessredirect的URL与查询string从大写到小写

然而，当我的url包含多个斜杠看起来像子文件夹，例如：“/手册/细节/ 1_2”，然后我得到一个正常的路由过程，但浏览器找不到的CSS文件，除非我加“../” “在我的url映射回我的基path。

例如，对于上面的URL，这将工作，而不是：

<link rel="stylesheet" type="text/css" href="../../style/include/css/style.css" />

我的解决scheme：

我在我的Routing类中编写了一个PHP函数，用于确定所需的“../”模式的数量，并且在执行资源之前总是先执行该函数，以随时构build精确的path。

例：

<link rel="stylesheet" type="text/css" href="<?=Router::getInstance()->getsubdirectoryPrefix()?>style/include/css/style.css" />

不用说，这是非常不方便的，如果你忘记放置这个function，也很糟糕。 如果你的路线改变了，或者你忘记了你在一个子目录下，你会想知道为什么你的资源找不到。

我也知道如何在Apache的虚拟主机configuration中添加一个别名（如Alias / public style /），但是我希望find另一个项目和PHP的内部方式，而不需要一个不方便的废话，例如一直粘贴别名函数设置一个虚拟主机选项，这样框架可以保持轻量级，不需要任何讨厌的外部选项，如修改虚拟主机。

我很想听听你的解决scheme，最好是.htacces – 哦，通过谈论它，我离开我的.htaccess代码在这里：

RewriteEngine On Options -Indexes RewriteCond %{REQUEST_FILENAME} !-f RewriteRule .* index.PHP [L]

预先感谢您的帮助〜

如何从根redirect到子文件夹，重写子文件夹链接看起来像根，然后在htaccess中添加一些例外？

.htaccess的子域名重写

仅在文件不存在时重写

Codeigniter URL重写删除index.PHP

我怎样才能使用mod_rewrite删除后的一切？ （问号）在一个URL？

您必须使用绝对路径，而不是相对路径为您的HTML链接（CSS，JavaScript，图像等）。

例如：

<link rel="stylesheet" type="text/css" href="/style/include/css/style.css" />

引导斜杠（ style之前）意味着从文档根文件夹开始，然后进入style文件夹，依此类推…（如果文件夹不在根文件夹中，则可能有另一个前缀目录）

你有一些问题，因为你的一些规则可以创建虚拟目录（例如： http://domain.com/some/directory/subdirectory/etc/ : http://domain.com/some/directory/subdirectory/etc/ ）。

另外，在你的htaccess中，使用前导斜杠（或RewriteBase ）

Options -Indexes RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule .* /index.PHP [L]

或者（都是一样的）

Options -Indexes RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteRule .* index.PHP [L]

04- webpack打包css资源

04- webpack打包css资源

  1. 下载两个loader插件
    npm i css-loader style-loader -D
  • css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
  • style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里，就是内联样式
  • 如果rules只用一个loader, 就use:[] 写成loader: “css-loader”
  1. 使用插件
const {resolve} = require("path")   //从path中接收resolve方法
const htmlWebpackPlugin = require("html-webpack-plugin")      //引入html打包插件
module.exports={
    entry: {
        vendor: ["./src/js/jq.js","./src/js/common.js"],
        index: "./src/js/index.js",
        cart: "./src/js/chart.js"
    },
    output: {
        path: resolve(__dirname, "./build"),    //输出路径
        filename: "[name].js"    //输出文件名
    },
    mode: "development",       //webpack使用相应的模式配置
    module: {                  //css打包规则
        rules: [{
            test: /\.css$/,      //把项目中所有以.css结尾的文件打包,插入到html里
            use: ["style-loader","css-loader"]  
            // use数组中loader执行顺序：从右到左，从下到上 依次执行
            //style-loader 创建style标签，将js中的样式资源插入进行，添加到head中生效
            //css-loader 将css文件变成commonjs模块加载js中，里面内容是样式字符串
        }]
    },
    plugins: [
        //默认创建一个空的html，目的就是自动引入打包的资源js/css
        new htmlWebpackPlugin({              //引用插件
            template: "./src/index.html",           //index.html不用加script，也可以自动引入js文件
            filename: "index.html",           //输出的打包的文件名
            chunks: ['index','vendor'],
            // 压缩HTML代码
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComments: true

            }
        }),
        new htmlWebpackPlugin({              //引用插件
            template: "./src/chart.html",           //index.html不用加script，也可以自动引入js文件
            filename: "chart.html",           //输出的打包的文件名
            chunks: ['cart','vendor']
        })
    ]
}
  1. 目录结构

    在这里插入图片描述

    style.css
body {
    margin: 0;
    padding: 0;
}
p {
    color: red;
    font-size: 25px;
}
h1 {
    color: blue;
    font-size: 88px;
}
.Box {
    width: 100px;
    height: 150px;
    background-color: bisque;
    color: blueviolet;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商城首页~~~~~~</h1>
<p>打包css</p>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
    this is a Box1
</div>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box2">
    this is a Box2
</div>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box3">
    this is a Box3
</div>
</body>
</html>

index.js

//引入css文件（commonjs）
require("../css/style.css")
//也可以使用ES6的模块引入
//import "../css/style.css"
console.log("首页专用js文件");
  1. 执行webpack

    在这里插入图片描述

    css以内联样式插入到html文件里

    在这里插入图片描述

Apache Camel调度到本地JaxRs资源实现

Apache Camel调度到本地JaxRs资源实现

这实际上是一个非常棘手的问题。一方面，即使您在Google上搜索，也无法获得直接答案。经过网络冲浪的永恒，感觉骆驼路线通过转发到新服务来调用jx-rs资源方法似乎是大地的法则。 是的，这就像to("bean:MyJxRsImplemantion")旨在忽略jax-rs注释一样。因此，我认为这是不可能的。抱歉。

Apache proxypass无法解析图像和CSS等资源的url

Apache proxypass无法解析图像和CSS等资源的url

如何解决Apache proxypass无法解析图像和CSS等资源的url？

经过大量的反复试验，我找到了解决问题的两种不同方法。

  1. 使用mod_rewrite和proxypass的一些更改：
        <VirtualHost *:80>
        ProxyPreserveHost On
        ProxyPass /app http://localhost:8080/ui/
        ProxyPassReverse /app http://localhost:8080/ui/

        #since in java web app the context started with /ui the js src had /ui in the beginning
        #this resulted in 404 so I had to rewrite all request to /ui to forward to /app

        RewriteEngine on
        RewriteRule    "^/ui(.+)"  "/app$1"  [R,L]

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
    </VirtualHost>
  1. 在webapp文件夹中创建到已部署应用程序的链接/快捷方式，并将shorcut命名为app在linux中，命令是（来自webapp文件夹中） ln -s ui app

现在，apache配置为：

    <VirtualHost *:80>
            ProxyPreserveHost On

            <Location /app>
                ProxyPass  ajp://localhost:8019/app/
                ProxyPassReverse ajp://localhost:8019/app/
                SetoutputFilter  proxy-html
                ProxyHTMLExtended On
                ProxyHTMLURLMap /app /app
                RequestHeader    unset  Accept-Encoding
            </Location>

            ErrorLog ${APACHE_LOG_DIR}/error.log
            CustomLog ${APACHE_LOG_DIR}/access.log combined
    </VirtualHost>

在第一种解决方案中，重写mod导致请求在重定向到正确的url之前返回304。这就是默认情况下的工作方式。

在第二种解决方案中，由于两个处理程序都是相同的（/ app），因此无需重新定向，并且URL正确映射。

解决方法

我需要将路径映射到我的tomcat Web应用程序。我为此使用了proxypass。这是apache2中的当前配置

    <VirtualHost *:80>
            ServerName localhost:80
            ProxyPass /app http://localhost:8088/ui/
            ProxyPassReverse /app http://localhost:8088/ui/


            ErrorLog ${APACHE_LOG_DIR}/error.log
            CustomLog ${APACHE_LOG_DIR}/access.log combined
    </VirtualHost>

这是从tomcat获取HTML，但是形成的css
url错误。而不是http://localhost/app/css/style.cssurl被映射为http://localhost/ui/css/style.css。

我尝试使用重写，但是没有用。

RewriteEngine on
RewriteRule ^/ui/ /app/

我需要找到正确的方法来更正URL。任何帮助将不胜感激！提前致谢。

Apache下开启SSI配置使html支持include包含的方法

Apache下开启SSI配置使html支持include包含的方法

写页面的同学通常会遇到这样的烦恼，就是页面上的 html 标签越来越多的时候，寻找指定的部分就会很困难，那么能不能像 javascript 一样写在不同的文件中引入呢？答案是有的，apache 能做到。

举个简单的例子，比如有如下的 html 文件（命名为 index.html）：

<input type=''text'' />
<input type=''button'' value=''press'' />

一个简单的文本框和按钮，我现在想把按钮部分的 html 写在另一个 .html 的文件中（比如说叫 btn.html）然后引入到 index.html 中，要怎么做呢？

1、加载 ssi 模块

首先要加载 ssi 模块。打开 apache 的配置文件 httpd.conf，这个文件应该都已经很熟悉了，前面的文章中多次提到。找到这么一行 LoadModule ssl_module modules/mod_ssl.so，把前面的注释(#)去掉。

2016.01.11 更:

经本地测试，此步骤并不是必须的，多谢 whuper 指出。

2、添加需要的文件类型

同样在 httpd.conf 文件下找到如下两行代码：

AddType text/html .shtml 
AddOutputFilter INCLUDES .shtml

有注释的话一样去掉注释。因为使用 ssi 技术的默认文件名为 .shtml，所以我们需要在配置文件中对 .shtml 后缀名进行设置，并按自己的需求设置需要对 ssi 技术进行解析的文件类型设置。

比如这里我要用 .html 的文件进行操作，所以可以在上面两行代码末添加，比如这样：

AddType text/html .shtml .html
AddOutputFilter INCLUDES .shtml .html

3、添加 INCLUDES
还是在 httpd.conf 文件中，找到这样一行 Options Indexes FollowSymLinks，在后面添加 INCLUDES，变成这样：

Options Indexes FollowSymLinks INCLUDES

需要注意的是，ssi 可以利用 shell 来执行命令，因此这个功能是有危险的，它会执行任何包含在 exec 标记中的命令，如果你的用户有权限修改你的网页内容，建议把该功能关闭。当然你还可以加上IncludesNOEXEC 参数，来关闭 exec 功能，同时又保留 SSI 。此时改为: Options Indexes FollowSymLinks INCLUDES IncludesNOEXEC

4、重启 apache

最后一点，重启 apache 千万不能忘记，有些童鞋刚开始配置 apache 的时候，经常会说怎么不起作用啊，很多时候就是忘记重启了。

5、实践
通过这样的配置我们就能在 html 页面中引入 html 文件了，比如这样:

<input type=''text'' />
<!--#include virtual="btn.html" -->

也可以用 file 参数：

<input type=''text'' />
<!--#include file="btn.html"-->

有什么区别呢...

include 元素能按 file 属性或 virtual 属性判断应该包含的文件。file 属性是一个相对于当前目录的文件路径，即不能是一个绝对路径(以 "/" 开头)或包含 "../" 的路径，也就是说被包含文件可以在同一级目录或其子目录中，但不能在上一级目录中。virtual 属性可能更有用，它是一个相对于被提供的文档的URL ，可以以 "/" 开头，但必须与被提供的文档位于同一服务器上，virtual 文件名是 Web 站点上的虚拟目录的完整路径。

通俗地说，virtual 相当于绝对路径（从服务器根目录出发），而 file 相当于相对路径（而且文件还不能在上级目录）。所以一般用 virtual 就 ok 了。

参考：

让Apache支持SHTML(SSI)的配置方法

您可能感兴趣的文章:
  • Apache默认是不支持SSI如何给Apache增加SSI支持
  • apache SHTML网页SSI使用详解
  • 让Apache支持cgi、SSI、shtml的配置方法
  • HTML静态页面引入公共html文件(ssi服务器端指令详解)
  • Apache、Nginx 服务配置服务器端包含（SSI）
  • phpstudy apache开启ssi使用详解

关于一种避免Apache Aliaspath包含CSS资源之类的HTML资源的方法的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于04- webpack打包css资源、Apache Camel调度到本地JaxRs资源实现、Apache proxypass无法解析图像和CSS等资源的url、Apache下开启SSI配置使html支持include包含的方法等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇获取没有tmp文件的git commit的文件大小（git获取某个文件夹）

下一篇在附加到NotifyIcon的ContextMenu中延迟单击事件

相关文章