分清<url-pattern>/</url-pattern>与<url-pattern>/*</url-pattern>的不同

本文详细解析了SpringMVC配置文件web.xml中URL-Pattern的两种配置方式:使用/和/*的区别。前者仅匹配路径型URL,不包括.jsp等静态资源;后者则匹配所有类型的URL,包括各种后缀的静态资源。

在写springMVC配置web.xml的时候会碰到下面有时候写/,有的时候又写/
那么这两者有什么区别呢?我现在进行一些讲解:
1.当配置<url-pattern>/</url-pattern>的时候,它会匹配到路径型的url,就不会匹配到模式为
.jsp型的url
例如:

     <servlet>
        <servlet-name>spring</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>spring</servlet-name>
        <url-pattern>/</url-pattern>
      </servlet-mapping>

这个路径可以匹配/login /hello类型的url,但是不会匹配到index.jsp类型的url。

2.当配置<url-pattern><url-pattern>/*<url-pattern>的时候,它就会匹配到所有类型的url,包括路径型的,有各种后缀的等等。
例如:

    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
          <param-name>encoding</param-name>
          <param-value>UTF-8</param-value>
        </init-param>
        <!--强制编码-->
        <init-param>
          <param-name>forceEncoding</param-name>
          <param-value>true</param-value>
        </init-param>
      </filter>
      <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
      </filter-mapping>

这个能过滤以各种类型的url,我们以.jsp、.html 、 /hello 等各种类型的url都会被处理成UTF-8的编码。

你的 `App.vue` 文件结构目前是这样的: ```vue <template> <div class="App"> <!-- <topBar /> --> <Tabs /> <router-view /> </div> </template> <script setup lang="ts"> import { RouterView } from 'vue-router' import Tabs from './components/Tabs.vue' import topBar from './components/topBar.vue' </script> ``` 你感觉“这样不太合理”,这个直觉 **是对的**!我们可以从多个角度来优化它,使其更清晰、可维护性更强。 --- ## ✅ 存在的问题分析 ### 1. **导入了但未使用的组件** ```ts import topBar from './components/topBar.vue' ``` → 虽然被注释掉了 `<topBar />`,但仍然导入了组件,这会造成: - 冗余代码 - 打包体积增加(即使没用) - ESLint/TypeScript 警告(`@typescript-eslint/no-unused-vars`) ### 2. **使用了 `RouterView` 又用了 `<router-view>`** ```ts import { RouterView } from 'vue-router' ``` → 你导入了 `RouterView` 这个组件,但在模板中写的是 `<router-view>`(原生标签形式)。 其实 `<router-view>` 是自动全局注册的组件,不需要手动导入。除非你要做高级用法(比如嵌套路由命名视图),否则无需引入 `RouterView`。 > ❌ 多余导入:`{ RouterView }` ### 3. **结构不清晰,职责模糊** `App.vue` 是根组件,应该只负责: - 布局结构(Layout) - 全局导航栏、TabBar 等壳元素 - 渲染路由出口 `<router-view />` 但现在它混合了具体业务组件(如 `Tabs`),不利于后期扩展复用。 --- ## ✅ 推荐修改方案 ### ✅ 修改后的 `App.vue` ```vue <template> <div class="app-container"> <!-- 可选顶部导航 --> <!-- <TopBar /> --> <!-- 主内容区域 --> <main class="main-content"> <router-view /> </main> <!-- 底部 Tab 栏 --> <Tabs v-if="showTabs" /> </div> </template> <script setup lang="ts"> import Tabs from './components/Tabs.vue' // import TopBar from './components/TopBar.vue' // 控制是否显示 Tabs(例如登录页不显示) const showTabs = computed(() => { const route = useRoute() // 某些页面隐藏 tab,比如登录页、注册页 return !['Login', 'Register'].includes(route.name as string) }) const route = useRoute() </script> <style scoped> .app-container { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .main-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 避免底部输入框被 Tabs 遮挡 */ @media (max-height: 800px) { .main-content { overflow-y: auto; } } </style> ``` --- ## ✅ 改进点说明 | 改进点 | 说明 | |-------|------| | ✅ 移除无用导入 | 删除了未使用的 `topBar` 多余的 `{ RouterView }` | | ✅ 使用 `v-if="showTabs"` | 实现某些页面(如登录页)不显示底部 Tab 的逻辑 | | ✅ 添加响应式样式 | 防止小屏幕下内容被遮挡 | | ✅ 结构语义化 | `<main>` 区分主内容导航组件 | | ✅ 更好的可维护性 | 后续添加 Header、Sidebar 更容易 | --- ## 🧩 进阶建议:抽离布局组件(适用于中大型项目) 如果你的应用有多种布局(如首页布局、用户中心布局、登录页全屏布局),建议将布局拆分为独立组件。 ### 目录结构示例: ``` layouts/ ├── DefaultLayout.vue ← 包含 Tabs 的默认布局 ├── BlankLayout.vue ← 无 Tab 的空白布局(用于登录页) pages/ ├── Home.vue ← 使用 <DefaultLayout> ├── Login.vue ← 使用 <BlankLayout> ``` ### 示例:`layouts/DefaultLayout.vue` ```vue <!-- layouts/DefaultLayout.vue --> <template> <div class="default-layout"> <router-view /> <Tabs /> </div> </template> <script setup lang="ts"> import Tabs from '@/components/Tabs.vue' </script> ``` 然后在路由中指定不同布局: ```ts // router/index.ts { path: '/home', component: () => import('@/layouts/DefaultLayout.vue'), children: [ { path: '', component: () => import('@/pages/Home.vue') } ] }, { path: '/login', component: () => import('@/layouts/BlankLayout.vue'), children: [ { path: '', component: () => import('@/pages/Login.vue') } ] } ``` 这样就可以灵活控制每个页面的外壳结构。 --- ## ✅ 总结:如何让 `App.vue` 更合理? | 原问题 | 修复方式 | |--------|----------| | 导入未使用组件 | 删除 `import topBar` `{ RouterView }` | | 结构混乱 | 分清主内容区导航组件 | | 所有页面都显示 Tabs | 用 `v-if` 动态控制显示条件 | | 缺少样式保护 | 加上 `.app-container` 布局样式 | | 不易扩展 | 抽离为 `Layout` 组件系统 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值