Yii2如何将搜索过滤参数从查询字符串转为美化URL路径参数

问题原因排查 #

当前配置未生效主要涉及2个核心原因：

1. 浏览器默认GET表单提交行为会自动把参数拼接为?key=value格式的查询字符串，不会主动触发Yii的URL规则生成路径格式的URL
2. 现有URL规则未添加参数匹配约束，特殊场景下会出现匹配失效，同时如果存在参数为空的场景，固定5参数的规则无法命中

解决步骤 #

步骤1：优化URL规则配置 #

给规则添加参数正则约束，提升匹配精准度，同时可按需添加多参数兼容规则：

'urlManager' => [
    'enablePrettyUrl' => true,
    'showScriptName' => false,
    'rules' => [
        // 5个参数全匹配规则
        'listing/search/<select1:[\w\s+]+>/<select2:[\w\s+]+>/<keyword:[\w\s+]+>/<select3:\d+>/<select4:\d+>' => 'listing/search',
        // 可选：少参数兼容规则，按参数数量从多到少排列
        'listing/search/<select1:[\w\s+]+>/<select2:[\w\s+]+>/<keyword:[\w\s+]+>/<select3:\d+>' => 'listing/search',
        'listing/search/<select1:[\w\s+]+>/<select2:[\w\s+]+>/<keyword:[\w\s+]+>' => 'listing/search',
        'landlord' => 'site/landlord'
    ],
],

步骤2：解决表单提交自动转美化URL的问题 #

以下方案二选一即可：

方案A：JS拦截表单提交手动拼接URL

给搜索表单添加提交事件拦截，阻止默认提交行为，手动拼接美化路径跳转：

// 假设你的搜索表单ID为search-form
document.querySelector('#search-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const select1 = encodeURIComponent(document.querySelector('[name="select1"]').value);
    const select2 = encodeURIComponent(document.querySelector('[name="select2"]').value);
    const keyword = encodeURIComponent(document.querySelector('[name="keyword"]').value);
    const select3 = encodeURIComponent(document.querySelector('[name="select3"]').value);
    const select4 = encodeURIComponent(document.querySelector('[name="select4"]').value);
    window.location.href = `/listing/search/${select1}/${select2}/${keyword}/${select3}/${select4}`;
});

方案B：控制器层做重定向中转

在ListingController的actionSearch开头添加重定向逻辑，自动把查询参数格式的请求跳转到美化URL格式：

public function actionSearch($select1 = null, $select2 = null, $keyword = null, $select3 = null, $select4 = null)
{
    // 检测是否为查询字符串格式的请求
    if (!empty(\Yii::$app->request->getQueryString()) && \Yii::$app->request->get('select1') !== null) {
        $url = \yii\helpers\Url::to([
            'listing/search',
            'select1' => $select1 ?? \Yii::$app->request->get('select1'),
            'select2' => $select2 ?? \Yii::$app->request->get('select2'),
            'keyword' => $keyword ?? \Yii::$app->request->get('keyword'),
            'select3' => $select3 ?? \Yii::$app->request->get('select3'),
            'select4' => $select4 ?? \Yii::$app->request->get('select4'),
        ]);
        // 301永久重定向有利于SEO，临时跳转用302即可
        return $this->redirect($url, 301);
    }

    // 原有搜索业务逻辑
}

步骤3：确认Web服务器重写规则配置 #

如果上述配置后仍出现404，需要确认服务器的伪静态规则配置正确：

• Apache环境：根目录添加.htaccess文件，开启mod_rewrite

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php

• Nginx环境：站点配置中添加如下规则

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

内容的提问来源于stack exchange，提问作者NerdBiz