很多人做管理系统第一反应就是Vue Element Plus Spring Boot这套组合专利查询与发布系统也不例外。但真正动手之后才发现专利数据查询这种场景和普通增删改查的管理后台差别还挺大的——检索逻辑复杂、字段多、关联关系深而且发布环节还要考虑申请人、发明人、法律状态这些专利特有的数据模型。这篇文章就从一个实际落地的项目出发完整拆解一个基于Vue的专利查询与发布系统设计与实现过程包括路由设计、状态管理、数据请求封装、检索交互、发布表单处理以及最后怎么在服务器上通过Nginx把打包好的前端部署起来。做后端的朋友可以直接跳过Vue基础部分重点看前后端接口约定和部署环节刚接触Vue不久的朋友建议把组件通信、路由守卫这些实操细节也过一遍都是项目里真实用到的写法。1. 系统整体设计与技术选型1.1 为什么选Vue作为前端框架专利查询与发布系统这类项目核心痛点是数据交互频繁、页面状态复杂、检索条件多变。如果用传统的jQuery或者纯HTML方式开发光是维护检索表单和结果列表之间的状态同步就能让人崩溃。Vue的响应式数据绑定天然适合这种场景——你只需要维护数据源视图会自动更新。目前Vue有选项式Options API和组合式Composition API两种写法。这个项目里我选择的是组合式写法主要原因有三个一是逻辑复用更灵活检索相关的功能可以抽成独立的composable二是代码组织更清晰同一块业务逻辑的变量和方法放在一起不像选项式那样分散在data、methods、computed多个块里三是Vue 3对TypeScript的支持更友好虽然这个小项目没用TS但后续如果要扩展组合式API的迁移成本更低。提醒一句如果团队里大部分人习惯的是Vue 2的选项式写法直接上组合式会有学习成本。但如果是新项目我还是建议直接上Vue 3 组合式Vue 2已经在2023年底停止维护了。项目还引入了Element Plus作为UI组件库。专利查询系统的页面结构比较固定——检索区、结果列表、详情弹窗、发布表单这些在Element Plus里都有现成的组件比如el-form、el-table、el-pagination、el-dialog能省掉大量写样式和交互逻辑的时间。不过要特别注意Element Plus的按需自动导入配置配置不对会出现组件样式丢失甚至直接报错的问题后面第5节会详细说。1.2 前后端分离架构下的模块划分这个系统采用的是Spring Boot Vue的前后端分离架构前端负责页面渲染和用户交互后端负责专利数据的存储、检索引擎和业务逻辑。前端项目内部的模块划分如下src/ ├── api/ # API请求封装 │ ├── patent.js # 专利查询相关接口 │ ├── user.js # 登录认证相关接口 │ └── request.js # Axios实例封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 │ ├── PatentCard.vue # 专利卡片组件 │ ├── PatentFilter.vue # 检索条件组件 │ └── StatusTag.vue # 法律状态标签组件 ├── router/ # 路由配置 │ └── index.js ├── store/ # 状态管理Pinia │ └── modules/ │ ├── user.js # 用户状态 │ └── patent.js # 专利搜索条件、列表状态 ├── views/ # 页面组件 │ ├── SearchView.vue # 搜索页面 │ ├── PatentDetail.vue # 专利详情页 │ ├── PublishView.vue # 专利发布页面 │ └── LoginView.vue # 登录页面 ├── utils/ # 工具函数 │ └── format.js # 日期、状态码格式化 └── App.vue模块划分的核心原则是页面组件只负责组合和交互业务逻辑放在api层和store层工具函数抽到utils里。这样做的直接好处是如果后端接口路径变了只需要改api层的一个文件如果多个页面都要显示专利状态直接调用StatusTag组件就行不用每个页面复制一遍判断逻辑。从实际开发体验来说前端项目最怕的就是组件乱嵌套、接口地址散落在各个页面里。把组件和请求统一管理之后后面加功能或者改bug都会轻松很多。2. 路由设计与权限控制实现2.1 路由表的配置与动态加载专利查询与发布系统的路由体系分为两层一是用户可见的页面路由二是某些页面内部的操作权限路由。直接使用Vue Router的静态路由动态路由组合方式。静态路由包括首页搜索、专利详情、登录这些公开页面不需要登录就能访问。动态路由则是需要登录后才有权限访问的页面比如发布专利、个人中心、后台管理。// router/index.js import { createRouter, createWebHistory } from vue-router import { useUserStore } from ../store/modules/user const routes [ { path: /login, name: Login, component: () import(../views/LoginView.vue), meta: { title: 登录, public: true } }, { path: /search, name: Search, component: () import(../views/SearchView.vue), meta: { title: 专利检索, public: true } }, { path: /patent/:id, name: PatentDetail, component: () import(../views/PatentDetail.vue), meta: { title: 专利详情, public: true } }, { path: /publish, name: Publish, component: () import(../views/PublishView.vue), meta: { title: 发布专利, requiresAuth: true } }, { path: /admin, name: Admin, component: () import(../views/AdminDashboard.vue), meta: { title: 后台管理, requiresAuth: true, requiresAdmin: true } } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const userStore useUserStore() if (to.meta.requiresAuth !userStore.isLoggedIn) { next({ path: /login, query: { redirect: to.fullPath } }) return } if (to.meta.requiresAdmin userStore.role ! admin) { next({ path: /search, query: { noPermission: true } }) return } document.title to.meta.title ? ${to.meta.title} - 专利查询与发布系统 : 专利查询与发布系统 next() })几个关键点说明一下路由懒加载。用() import()的方式来定义组件这样浏览器首屏不会一次性加载所有页面的代码而是访问到对应路由时才加载对应的JS文件。专利详情页这种依赖大量组件的页面懒加载能明显缩短首屏白屏时间。路由守卫。beforeEach里做了两件事权限校验和页面标题设置。权限校验的逻辑比较简单——如果目标路由需要登录而用户未登录就跳转到登录页并且把原始目标地址存在query.redirect里登录成功后再跳回来。这里用Pinia的useUserStore来获取登录状态刷新页面时Pinia的数据会丢失所以需要在main.js里做持久化处理比如从localStorage里恢复用户状态或者刷新时重新请求用户信息接口。2.2 参数传递的三种方式和适用场景Vue Router传参是开发中用到最频繁的功能之一专利查询系统里三种传参方式都用到了。第一种是query方式适合传非敏感的筛选条件。比如专利检索页跳转详情页时带上来源标记// 跳转方式 router.push({ path: /search, query: { keyword: 人工智能, page: 2 } })这种情况下刷新页面后参数还在URL里可以分享链接给别人非常方便。第二种是paramsname方式适合传ID这种标识性参数。比如从列表页进详情页router.push({ name: PatentDetail, params: { id: patentId } })需要注意用params方式传参时页面刷新后参数会丢失因为Vue Router不推荐把参数持久化到URL中。如果需要在详情页刷新后还能拿到ID建议设计路由时就把ID放到路径里// 路径定义 { path: /patent/:id, name: PatentDetail, component: () import(../views/PatentDetail.vue) } // 跳转时 router.push({ path: /patent/${patentId} })第三种是Vuex/Pinia中存储跨页面数据。比如检索页面设置的复杂的筛选条件跳转详情页再返回时筛选条件不应该丢失。把筛选条件存到Pinia的patent模块里从详情页返回时组件重新挂载从store中恢复条件即可。三种传参方式各有适用场景我一般的原则是刷新后还必须保留的用query或路径参数临时传递的数据用params或store要在多页面间共享且频繁读写的数据用store。3. 专利检索功能的架构与实现3.1 检索交互与状态管理专利检索是整个系统的核心功能交互上分为三个部分顶部的关键词搜索栏、中间的筛选条件面板、底部的检索结果列表。三者之间状态联动任何一个条件的变更都要触发列表更新。这个联动如果用组件内部的data来管理很快会陷入状态爆炸——关键词、申请人、发明人、申请日期范围、法律状态、专利类型、分页页码每个都是可变的而且它们之间还有组合关系。我用Pinia把检索状态抽成了独立模块// store/modules/patent.js import { defineStore } from pinia import { searchPatents } from ../../api/patent export const usePatentStore defineStore(patent, { state: () ({ keyword: , applicants: [], inventors: [], patentType: , legalStatus: , dateRange: [], currentPage: 1, pageSize: 10, total: 0, results: [], loading: false }), actions: { async fetchResults() { this.loading true try { const params { keyword: this.keyword, applicants: this.applicants, inventors: this.inventors, patentType: this.patentType, legalStatus: this.legalStatus, startDate: this.dateRange?.[0], endDate: this.dateRange?.[1], page: this.currentPage, pageSize: this.pageSize } const res await searchPatents(params) this.results res.data.records this.total res.data.total } finally { this.loading false } }, // 重置所有检索条件 resetFilters() { this.keyword this.applicants [] this.inventors [] this.patentType this.legalStatus this.dateRange [] this.currentPage 1 } } })这样做的好处是检索组件、列表组件、分页组件都从同一个store读写状态任何一方触发的更新其他组件都能自动感知。比如在筛选面板里选中了“发明专利”列表组件不通过props传递也能拿到这个值因为大家共享的是同一个store实例。3.2 搜索结果高亮与分页加载专利列表的展示采用卡片式布局每张卡片显示专利名称、申请号、申请人、申请日期、法律状态等关键字段。检索结果里的关键词高亮是个常见需求实现思路不复杂——前端拿到后端返回的结果对匹配关键词的文本片段做标记// utils/highlight.js export function highlightText(text, keyword) { if (!keyword) return text const escapedKeyword keyword.replace(/[.*?^${}()|[\]\\]/g, \\$) const regex new RegExp((${escapedKeyword}), gi) return text.replace(regex, mark classhighlight$1/mark) }在模板中用v-html渲染时要注意如果文本内容本身包含用户提交的HTML代码直接渲染会有XSS风险。稳妥的做法是先把文本中的HTML标签转义掉再做关键词替换。这个细节在真实项目中非常容易被忽略。分页加载上我用的是Element Plus的el-pagination组件页码变化时调用store里的fetchResults方法重新请求数据。这里有个交互细节如果用户在第8页点击了一个专利详情返回列表时应该还是第8页而不是回到第1页。靠Pinia保存当前页码就能实现这个效果不需要额外处理。经验分享专利检索的后端接口一次性返回几千条数据是很常见的。前端千万别把全量数据拉到本地再分页那样页面直接卡死。一定要用后端分页前端只维护当前页和每页条数。4. 专利发布流程与表单处理4.1 发布表单的核心校验逻辑专利发布界面是整个系统里表单最复杂的部分涉及专利基本信息、申请人信息、发明人信息、技术领域分类、摘要、权利要求书等多个区块。直接用el-form的表单校验功能配合自定义校验函数处理特殊规则。先说基本配置方式。每个表单控件绑定一个prop在rules里定义校验规则const rules { title: [ { required: true, message: 请输入专利名称, trigger: blur }, { min: 5, max: 100, message: 专利名称长度需在5到100个字符之间, trigger: blur } ], applicationNumber: [ { required: true, message: 请输入申请号, trigger: blur }, { validator: (rule, value, callback) { const prefix value.substring(0, 2) const year value.substring(2, 6) if (!/^[0-9]{2}$/.test(prefix) || !/^[0-9]{4}$/.test(year)) { callback(new Error(申请号格式不正确应包含国家代码和申请年份)) } else { callback() } }, trigger: blur } ], applicationDate: [ { required: true, message: 请选择申请日期, trigger: change } ], claimCount: [ { type: number, min: 1, max: 50, message: 权利要求项数需在1到50之间, trigger: blur } ] }申请号这种有固定格式的字段纯靠Element Plus自带规则没法实现必须写自定义validator。我还遇到过一个需求——日历选择器中当前月份以后的日期不能选。这是专利实际业务场景中的常见限制直接在日期选择器上设置disabled-date属性el-date-picker v-modelform.applicationDate typedate placeholder请选择申请日期 :disabled-date(date) date.getTime() Date.now() /4.2 动态表单的实现——发明人列表专利发布的发明人数量是不固定的可能是一个人也可能是多个人。这时候用动态表单比较合适——用户可以点击“添加发明人”按钮新增一行输入框也可以删除某一行。动态表单在Element Plus中通过v-for循环生成字段校验规则也需要动态设置el-form-item v-for(inventor, index) in form.inventors :keyindex :label发明人${index 1} :propinventors.${index}.name :rules{ required: true, message: 请输入发明人姓名, trigger: blur } el-input v-modelinventor.name placeholder请输入姓名 / el-button typedanger clickremoveInventor(index)删除/el-button /el-form-item el-button typeprimary clickaddInventor添加发明人/el-button这里有个坑prop必须写成inventors.${index}.name这样的路径格式不然el-form找不到对应的校验字段整个表单验证会静默失败。我第一次做动态表单时就在这里栽过跟头怎么点提交都提示校验不通过排查了半天才发现是prop路径写错了。4.3 富文本编辑器集成与内容清洗专利的摘要、技术方案、实施方式这些长文本内容需要用富文本编辑器来录入。我选了WangEditor 5相比老牌的UEditor和Quill它更轻量、API更现代而且对Vue 3的支持很友好。import wangeditor/editor/dist/css/style.css import { onBeforeUnmount, ref, shallowRef } from vue import { Editor, Toolbar } from wangeditor/editor-for-vue const editorRef shallowRef() const toolbarConfig {} const editorConfig { placeholder: 请输入内容..., MENU_CONF: { uploadImage: { // 图片上传接口 server: /api/upload/image, // 自定义上传参数 fieldName: file, maxFileSize: 2 * 1024 * 1024, allowedFileTypes: [image/jpeg, image/png, image/gif] } } } const handleCreated (editor) { editorRef.value editor } onBeforeUnmount(() { if (editorRef.value) { editorRef.value.destroy() } })集成编辑器后遇到的一个典型问题是编辑器生成的HTML带有大量内联样式和pbr/p这种空标签直接提交到后端会造成数据冗余。我的做法是提交前用HTMLParser对内容做一次清洗去掉冗余的空标签和>// api/request.js import axios from axios import { ElMessage } from element-plus import { useUserStore } from ../store/modules/user import router from ../router const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 15000 }) // 请求拦截器携带token request.interceptors.request.use( config { const userStore useUserStore() if (userStore.token) { config.headers[Authorization] Bearer ${userStore.token} } return config }, error Promise.reject(error) ) // 响应拦截器统一处理业务错误 request.interceptors.response.use( response { const res response.data // 如果后端自己封装了code字段 if (res.code ! undefined res.code ! 200) { ElMessage.error(res.message || 请求失败) // 401token失效跳转登录页 if (res.code 401) { const userStore useUserStore() userStore.logout() router.push({ path: /login }) } return Promise.reject(new Error(res.message || 请求失败)) } return res }, error { // HTTP层面的错误 if (error.response) { switch (error.response.status) { case 401: ElMessage.error(登录已过期请重新登录) router.push({ path: /login }) break case 403: ElMessage.error(没有权限访问此资源) break case 404: ElMessage.error(请求的资源不存在) break case 500: ElMessage.error(服务器内部错误) break default: ElMessage.error(网络异常请稍后重试) } } else { ElMessage.error(网络连接失败) } return Promise.reject(error) } ) export default request上面的写法里有一个关键点把HTTP状态码错误和业务码错误分开处理。HTTP 200不代表业务一定成功后端可能在响应体里返回code: 500表示业务逻辑出错。如果只盯着HTTP状态码很多业务错误会被淹没。还有一个细节超时时间根据接口特性设置。专利检索接口因为后端要执行复杂的查询耗时较长可以单独在具体接口里覆盖超时时间// api/patent.js export function searchPatents(params) { return request({ url: /patents/search, method: get, params, timeout: 30000 // 覆盖默认的15秒 }) }5.2 与Spring Boot后端联调的两种模式前后端分离项目的联调阶段最常见的两个痛点是跨域和接口路径不一致。跨域问题通常有两种解决方案。第一种方案是代理模式适合开发环境。在Vite的配置里设置dev server代理// vite.config.js export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } })这样前端代码里请求/api/patents/search时开发服务器会把请求转发到http://localhost:8080/patents/search浏览器视角下没有跨域问题。这种方案不修改后端代码前后端各自独立启动推荐日常联调使用。第二种方案是后端直接开启CORS适合生产环境同域部署或测试环境快速联调Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }CORS方案在后端开启后前端不需要代理配置直接用完整地址请求即可。但要注意生产环境开放所有域名跨域是有安全风险的建议上线前把addAllowedOriginPattern收敛为实际部署的域名。联调经验经常看到前后端各自本地跑得好好的一联调就各种问题。其实高频问题就三个——接口路径对不上、参数名大小写不一致、日期格式不统一。联调前先把自己这边的接口文档对齐能省很多时间。5.3 接口文档约定的几个重要规范多次联调踩坑之后我总结出了几条接口约定规范分享给大家第一所有日期字段统一用yyyy-MM-dd格式传输时间戳类型的字段用毫秒级。前后端各自做格式化转换避免出现前端传的是时间戳、后端解析成字符串这种问题。第二分页接口统一返回recordstotal的结构。使用MyBatis-Plus的分页插件天然就是这样返回的前端拿到后直接用就行。第三错误信息要有业务可读性。后端返回的message不要写系统错误这种废话而要说明具体原因比如申请号已存在请勿重复发布。第四敏感信息比如用户手机号在列表接口中用***脱敏返回。前端展示明细时再调详情接口获取完整数据。6. 组件通信与状态共享的实战写法6.1 组件通信七种方式的使用场景Vue组件通信是面试必问、工作必用的知识点。专利查询系统里用到的通信方式有这些我把高频的几种整理出来props / emit。父子组件之间最简单直接的通信方式。比如专利筛选组件PatentFilter.vue它接收父组件传入的初始筛选条件用户在面板上修改后通过emit把变化告知父组件。这种单向数据流的写法容易调试数据流向清晰。v-model。本质上是props emit的语法糖适合表单类组件的双向绑定。我在封装PatentCard.vue的选中状态时用的就是v-model:selected的写法。PiniaVuex。跨页面、跨组件层级的全局状态。之前提到的检索条件、用户登录状态都属于这一类。ref / reactive。在组合式API中父子组件间还可以用defineExpose配合ref获取子组件的实例和内部方法。!-- 父组件 -- template PatentFilter reffilterRef / /template script setup import { ref } from vue import PatentFilter from ./components/PatentFilter.vue const filterRef ref() // 调用子组件暴露的方法 function resetFilters() { filterRef.value.resetForm() } /script!-- 子组件 PatentFilter.vue -- script setup defineExpose({ resetForm }) /scriptprovide / inject。跨多级组件传递数据时特别好用不用一层层props传递。比如在专利详情页的根组件里provide一个patentId树形结构内部任意层级的组件都能inject获取。mitt事件总线。Vue 3移除了$on/$emit实例方法引入mitt作为替代。适合完全没有嵌套关系的组件之间通信。专利系统里有个场景是搜索结果列表需要通知顶栏的收藏按钮更新状态两个组件没有直接的嵌套关系用mitt就比层层传递props方便。// utils/eventBus.js import mitt from mitt export default mitt()// 某个组件中发送事件 import eventBus from ../utils/eventBus eventBus.emit(favorite-changed, patentId)// 另一个组件中监听事件 import eventBus from ../utils/eventBus eventBus.on(favorite-changed, (patentId) { // 更新收藏状态 })6.2 组合式API中组件逻辑复用的正确姿势如果组件里同一套逻辑被多个页面使用就该抽成自定义HookComposable了。专利系统里最典型的例子是usePagination这个Hook它把分页相关的状态和逻辑封装起来// composables/usePagination.js import { ref, computed } from vue export function usePagination(defaultPageSize 10) { const currentPage ref(1) const pageSize ref(defaultPageSize) const total ref(0) const totalPages computed(() Math.ceil(total.value / pageSize.value)) const goToPage (page) { currentPage.value page } const resetPage () { currentPage.value 1 } return { currentPage, pageSize, total, totalPages, goToPage, resetPage } }然后在搜索页和后台管理页里分别调用// 搜索页 const { currentPage, pageSize, total, goToPage } usePagination(10) // 后台管理页 const { currentPage, pageSize, total, goToPage } usePagination(20)两个页面互不影响因为每个组件调用Hook都会生成独立的状态。这样做既减少了重复代码又保持组件内部逻辑清晰。7. 前后端分离部署与Nginx配置7.1 前端打包构建的注意事项项目开发完成后前端需要进行打包构建生成静态文件交给Nginx托管。Vue项目的构建命令是npm run build构建产物默认在dist目录下。构建过程中最需要注意的是路由模式。开发时如果用createWebHistoryhistory模式打包后的静态文件部署到Nginx后访问/patent/123这样的路径时Nginx会尝试查找服务器上真实的/patent/123文件找不到就会返回404。解决办法是在Nginx配置里加一个try_files指令server { listen 80; server_name yourdomain.com; root /usr/share/nginx/html; index index.html; # 关键配置所有路径都回退到index.html location / { try_files $uri $uri/ /index.html; } # 静态资源缓存策略 location /assets/ { expires 30d; add_header Cache-Control public, immutable; } # 反向代理到后端接口 location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }如果不想配置Nginx的try_files也可以把路由模式改成createWebHashHistoryhash模式URL中会多一个#符号比如/#/patent/123。hash模式的好处是刷新页面不会404但URL不够美观。两个方案各有优劣我建议对颜值有要求且能控制Nginx配置的优先用history模式。7.2 在服务器上用Xshell部署前端项目服务器部署这套流程我用Xshell操作了好几次这里分享一个完整的操作序列跟着走基本不会出错。先确认服务器上装好了Nginxnginx -v如果没装分别执行安装命令。以CentOS为例yum install -y nginx systemctl enable nginx systemctl start nginx本地打包完成后通过Xshell把dist目录传到服务器上。常用的方式有两种第一种是用scp命令scp -r dist/ rootyour-server-ip:/usr/share/nginx/html/第二种是配合Xftp直接把本地dist目录拖拽上传。我个人在文件量不大时喜欢用Xftp图形化操作更直观。上传完成后重载Nginx使配置生效nginx -t # 检查配置是否有语法错误 nginx -s reload # 重载配置然后访问服务器IP或者域名如果能看到页面就说明部署成功了。常见问题有两个一是权限不足导致403可以检查一下文件目录权限二是端口未开放需要在云安全组和系统防火墙中放行80端口。7.3 webview与本地打包文件的加载场景热词列表里出现了好几次“webview加载本地Vue打包文件”“iOS加载本地Vue项目”这类问题。这是混合App开发中很典型的一个场景——把Vue项目打包出来的静态文件放到App的WebView里加载而不是部署到服务器上。Android的WebView加载本地文件的配置相对简单直接加载file:///android_asset/dist/index.html即可。但iOS的WKWebView加载本地文件会有限制不能用file://直接加载需要借助loadFileURL方法let webView WKWebView(frame: .zero) let indexURL Bundle.main.url(forResource: index, withExtension: html, subdirectory: dist) webView.loadFileURL(indexURL!, allowingReadAccessTo: indexURL!.deletingLastPathComponent())还有一个隐藏的坑Vue打包出来的JS和CSS文件是通过相对路径引用的打包时需要设置base// vite.config.js export default defineConfig({ base: ./ // 相对路径适配webview本地加载 })如果这个值没设置默认生成的引用路径是/assets/xxx.js这种绝对路径在WebView的本地文件环境中就会因为找不到资源而白屏。这个问题我排查过整整一个下午最后发现就是base少配了一个点。另一个需要注意的问题是WebView里的跨域限制。如果Vue项目内置在App中请求的又是线上后端接口很可能触发CORS。解决思路是前端使用WebView提供的JavaScript Bridge去请求接口或者后端对App内置的User-Agent放行。不同方案的取舍取决于App的具体架构这里不展开细说。8. 常见问题与排查技巧实录8.1 页面数据更新了但视图不变这是Vue开发中最经典的问题在专利系统开发时也遇到过。用户在后台修改了专利的法律状态返回列表页后状态标签还是旧值压根没刷新。排查思路是这样的第一步确认数据是否真的更新了。在组件里打印一下store或者接口返回的数据看有没有变化。如果数据源本身就是旧的问题出在接口层面——可能是缓存也可能是修改后没有重新拉取列表。第二步确认是否触发了响应式更新机制。如果是给reactive对象直接新增属性比如res.data.newField xxxVue 3中新增属性是响应式的但如果在Vue 2中这样写就不会触发更新。这里还是推荐用ref或者reactive的完整赋值方式避免这类边界问题。第三步如果是数组更新注意下标更新的写法。Vue 3中下面的写法是响应式的const arr ref([1, 2, 3]) arr.value[0] 100 // Vue 3可以触发更新Vue 2中则必须用Vue.set或者splice方法。8.2 Element Plus组件引入后样式丢失使用unplugin-auto-import和unplugin-vue-components做Element Plus按需自动导入时有时会发现ElMessage弹窗样式是裸的。经典的原因有两个第一ElMessage这类函数式调用的组件不是通过模板标签使用的自动导入插件可能不会自动引入它的样式。解决办法是手动在main.js或样式文件中导入import element-plus/es/components/message/style/css第二自动导入配置中ElMessage可能没有被识别。需要检查一下vite.config.js里的AutoImport配置AutoImport({ resolvers: [ElementPlusResolver()], dts: src/auto-imports.d.ts })我个人的建议是如果项目对首屏性能要求没那么极致直接全量引入Element Plus更省心import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)启动速度会慢一些但至少不会遇到样式莫名丢失的问题。等后续有空闲时间再优化按需加载性价比更高。8.3 前后端联调时常见的跨域和参数问题跨域问题我在联调部分已经说过这里补充一个排查网络问题的通用方法。遇到接口报错时先用浏览器的开发者工具F12打开Network面板看几个关键信息请求的URL是否和后端接口路径一致请求方法GET/POST/PUT/DELETE是否符合后端定义请求头Headers里是否携带了必要的token请求体Payload里的参数格式是否和后端DTO匹配参数问题最常见的场景是后端定义了一个ListString类型的参数前端传了一个逗号拼接的字符串或者后端期望JSON格式前端用application/x-www-form-urlencoded提交了表单。遇到这类问题不要急着改代码先在Network面板里对比前后端的请求数据格式再用Postman或Apifox单独调一次接口验证后端逻辑最后才排查前端代码。这样能快速定位问题出在哪一层避免在小问题上浪费时间。8.4 排查问题时的三个高效技巧技巧一善用console.log但不滥用。在关键节点打印数据状态比如接口返回后、事件处理函数入口、路由守卫判断处。排查完记得删掉保持代码整洁。技巧二看Vue Devtools的组件树和Pinia状态。这个工具能直接看到每个组件的props、data、computed值还能修改Pinia store的值实测页面反应比console.log更直观。技巧三遇到白屏先看控制台报错。很多时候白屏不是样式问题而是某个变量为undefined模板里访问它的属性时抛出了异常。控制台里红色的报错信息直接定位到对应的组件和代码行修复就很快。9. 放在最后这几个模块就是专利查询与发布系统从零搭建的核心脉络。回想整个开发过程最耗时的地方反而不是某个具体的功能编码而是在组件通信方案的选择、接口请求的封装、以及前后端联调时那些细节对齐上。Vue本身的上手门槛并不高真正决定项目质量的是代码的组织能力和对坑位的预判能力——哪些逻辑该放组件内部、哪些该抽到store、哪些公共能力该做成一劳永逸的封装这些判断都在一次次踩坑里打磨出来。如果你是刚开始做这类信息管理系统建议从两个地方下手一是先把Axios封装和路由守卫这两块地基打好后面所有功能模块都在这上面生长二是用好Vue Devtools学会从状态管理的角度去调试页面而不是靠刷新碰运气。专利领域的数据模型比普通业务系统复杂但把检索、详情、发布这三条主线理清楚整个系统也就水到渠成了。后面如果再扩展专利年费计算、同族专利关联这种更专业的功能核心架构也不用大改。 基于Vue的专利查询与发布系统设计与实现：从检索到部署
很多人做管理系统第一反应就是Vue Element Plus Spring Boot这套组合专利查询与发布系统也不例外。但真正动手之后才发现专利数据查询这种场景和普通增删改查的管理后台差别还挺大的——检索逻辑复杂、字段多、关联关系深而且发布环节还要考虑申请人、发明人、法律状态这些专利特有的数据模型。这篇文章就从一个实际落地的项目出发完整拆解一个基于Vue的专利查询与发布系统设计与实现过程包括路由设计、状态管理、数据请求封装、检索交互、发布表单处理以及最后怎么在服务器上通过Nginx把打包好的前端部署起来。做后端的朋友可以直接跳过Vue基础部分重点看前后端接口约定和部署环节刚接触Vue不久的朋友建议把组件通信、路由守卫这些实操细节也过一遍都是项目里真实用到的写法。1. 系统整体设计与技术选型1.1 为什么选Vue作为前端框架专利查询与发布系统这类项目核心痛点是数据交互频繁、页面状态复杂、检索条件多变。如果用传统的jQuery或者纯HTML方式开发光是维护检索表单和结果列表之间的状态同步就能让人崩溃。Vue的响应式数据绑定天然适合这种场景——你只需要维护数据源视图会自动更新。目前Vue有选项式Options API和组合式Composition API两种写法。这个项目里我选择的是组合式写法主要原因有三个一是逻辑复用更灵活检索相关的功能可以抽成独立的composable二是代码组织更清晰同一块业务逻辑的变量和方法放在一起不像选项式那样分散在data、methods、computed多个块里三是Vue 3对TypeScript的支持更友好虽然这个小项目没用TS但后续如果要扩展组合式API的迁移成本更低。提醒一句如果团队里大部分人习惯的是Vue 2的选项式写法直接上组合式会有学习成本。但如果是新项目我还是建议直接上Vue 3 组合式Vue 2已经在2023年底停止维护了。项目还引入了Element Plus作为UI组件库。专利查询系统的页面结构比较固定——检索区、结果列表、详情弹窗、发布表单这些在Element Plus里都有现成的组件比如el-form、el-table、el-pagination、el-dialog能省掉大量写样式和交互逻辑的时间。不过要特别注意Element Plus的按需自动导入配置配置不对会出现组件样式丢失甚至直接报错的问题后面第5节会详细说。1.2 前后端分离架构下的模块划分这个系统采用的是Spring Boot Vue的前后端分离架构前端负责页面渲染和用户交互后端负责专利数据的存储、检索引擎和业务逻辑。前端项目内部的模块划分如下src/ ├── api/ # API请求封装 │ ├── patent.js # 专利查询相关接口 │ ├── user.js # 登录认证相关接口 │ └── request.js # Axios实例封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 │ ├── PatentCard.vue # 专利卡片组件 │ ├── PatentFilter.vue # 检索条件组件 │ └── StatusTag.vue # 法律状态标签组件 ├── router/ # 路由配置 │ └── index.js ├── store/ # 状态管理Pinia │ └── modules/ │ ├── user.js # 用户状态 │ └── patent.js # 专利搜索条件、列表状态 ├── views/ # 页面组件 │ ├── SearchView.vue # 搜索页面 │ ├── PatentDetail.vue # 专利详情页 │ ├── PublishView.vue # 专利发布页面 │ └── LoginView.vue # 登录页面 ├── utils/ # 工具函数 │ └── format.js # 日期、状态码格式化 └── App.vue模块划分的核心原则是页面组件只负责组合和交互业务逻辑放在api层和store层工具函数抽到utils里。这样做的直接好处是如果后端接口路径变了只需要改api层的一个文件如果多个页面都要显示专利状态直接调用StatusTag组件就行不用每个页面复制一遍判断逻辑。从实际开发体验来说前端项目最怕的就是组件乱嵌套、接口地址散落在各个页面里。把组件和请求统一管理之后后面加功能或者改bug都会轻松很多。2. 路由设计与权限控制实现2.1 路由表的配置与动态加载专利查询与发布系统的路由体系分为两层一是用户可见的页面路由二是某些页面内部的操作权限路由。直接使用Vue Router的静态路由动态路由组合方式。静态路由包括首页搜索、专利详情、登录这些公开页面不需要登录就能访问。动态路由则是需要登录后才有权限访问的页面比如发布专利、个人中心、后台管理。// router/index.js import { createRouter, createWebHistory } from vue-router import { useUserStore } from ../store/modules/user const routes [ { path: /login, name: Login, component: () import(../views/LoginView.vue), meta: { title: 登录, public: true } }, { path: /search, name: Search, component: () import(../views/SearchView.vue), meta: { title: 专利检索, public: true } }, { path: /patent/:id, name: PatentDetail, component: () import(../views/PatentDetail.vue), meta: { title: 专利详情, public: true } }, { path: /publish, name: Publish, component: () import(../views/PublishView.vue), meta: { title: 发布专利, requiresAuth: true } }, { path: /admin, name: Admin, component: () import(../views/AdminDashboard.vue), meta: { title: 后台管理, requiresAuth: true, requiresAdmin: true } } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const userStore useUserStore() if (to.meta.requiresAuth !userStore.isLoggedIn) { next({ path: /login, query: { redirect: to.fullPath } }) return } if (to.meta.requiresAdmin userStore.role ! admin) { next({ path: /search, query: { noPermission: true } }) return } document.title to.meta.title ? ${to.meta.title} - 专利查询与发布系统 : 专利查询与发布系统 next() })几个关键点说明一下路由懒加载。用() import()的方式来定义组件这样浏览器首屏不会一次性加载所有页面的代码而是访问到对应路由时才加载对应的JS文件。专利详情页这种依赖大量组件的页面懒加载能明显缩短首屏白屏时间。路由守卫。beforeEach里做了两件事权限校验和页面标题设置。权限校验的逻辑比较简单——如果目标路由需要登录而用户未登录就跳转到登录页并且把原始目标地址存在query.redirect里登录成功后再跳回来。这里用Pinia的useUserStore来获取登录状态刷新页面时Pinia的数据会丢失所以需要在main.js里做持久化处理比如从localStorage里恢复用户状态或者刷新时重新请求用户信息接口。2.2 参数传递的三种方式和适用场景Vue Router传参是开发中用到最频繁的功能之一专利查询系统里三种传参方式都用到了。第一种是query方式适合传非敏感的筛选条件。比如专利检索页跳转详情页时带上来源标记// 跳转方式 router.push({ path: /search, query: { keyword: 人工智能, page: 2 } })这种情况下刷新页面后参数还在URL里可以分享链接给别人非常方便。第二种是paramsname方式适合传ID这种标识性参数。比如从列表页进详情页router.push({ name: PatentDetail, params: { id: patentId } })需要注意用params方式传参时页面刷新后参数会丢失因为Vue Router不推荐把参数持久化到URL中。如果需要在详情页刷新后还能拿到ID建议设计路由时就把ID放到路径里// 路径定义 { path: /patent/:id, name: PatentDetail, component: () import(../views/PatentDetail.vue) } // 跳转时 router.push({ path: /patent/${patentId} })第三种是Vuex/Pinia中存储跨页面数据。比如检索页面设置的复杂的筛选条件跳转详情页再返回时筛选条件不应该丢失。把筛选条件存到Pinia的patent模块里从详情页返回时组件重新挂载从store中恢复条件即可。三种传参方式各有适用场景我一般的原则是刷新后还必须保留的用query或路径参数临时传递的数据用params或store要在多页面间共享且频繁读写的数据用store。3. 专利检索功能的架构与实现3.1 检索交互与状态管理专利检索是整个系统的核心功能交互上分为三个部分顶部的关键词搜索栏、中间的筛选条件面板、底部的检索结果列表。三者之间状态联动任何一个条件的变更都要触发列表更新。这个联动如果用组件内部的data来管理很快会陷入状态爆炸——关键词、申请人、发明人、申请日期范围、法律状态、专利类型、分页页码每个都是可变的而且它们之间还有组合关系。我用Pinia把检索状态抽成了独立模块// store/modules/patent.js import { defineStore } from pinia import { searchPatents } from ../../api/patent export const usePatentStore defineStore(patent, { state: () ({ keyword: , applicants: [], inventors: [], patentType: , legalStatus: , dateRange: [], currentPage: 1, pageSize: 10, total: 0, results: [], loading: false }), actions: { async fetchResults() { this.loading true try { const params { keyword: this.keyword, applicants: this.applicants, inventors: this.inventors, patentType: this.patentType, legalStatus: this.legalStatus, startDate: this.dateRange?.[0], endDate: this.dateRange?.[1], page: this.currentPage, pageSize: this.pageSize } const res await searchPatents(params) this.results res.data.records this.total res.data.total } finally { this.loading false } }, // 重置所有检索条件 resetFilters() { this.keyword this.applicants [] this.inventors [] this.patentType this.legalStatus this.dateRange [] this.currentPage 1 } } })这样做的好处是检索组件、列表组件、分页组件都从同一个store读写状态任何一方触发的更新其他组件都能自动感知。比如在筛选面板里选中了“发明专利”列表组件不通过props传递也能拿到这个值因为大家共享的是同一个store实例。3.2 搜索结果高亮与分页加载专利列表的展示采用卡片式布局每张卡片显示专利名称、申请号、申请人、申请日期、法律状态等关键字段。检索结果里的关键词高亮是个常见需求实现思路不复杂——前端拿到后端返回的结果对匹配关键词的文本片段做标记// utils/highlight.js export function highlightText(text, keyword) { if (!keyword) return text const escapedKeyword keyword.replace(/[.*?^${}()|[\]\\]/g, \\$) const regex new RegExp((${escapedKeyword}), gi) return text.replace(regex, mark classhighlight$1/mark) }在模板中用v-html渲染时要注意如果文本内容本身包含用户提交的HTML代码直接渲染会有XSS风险。稳妥的做法是先把文本中的HTML标签转义掉再做关键词替换。这个细节在真实项目中非常容易被忽略。分页加载上我用的是Element Plus的el-pagination组件页码变化时调用store里的fetchResults方法重新请求数据。这里有个交互细节如果用户在第8页点击了一个专利详情返回列表时应该还是第8页而不是回到第1页。靠Pinia保存当前页码就能实现这个效果不需要额外处理。经验分享专利检索的后端接口一次性返回几千条数据是很常见的。前端千万别把全量数据拉到本地再分页那样页面直接卡死。一定要用后端分页前端只维护当前页和每页条数。4. 专利发布流程与表单处理4.1 发布表单的核心校验逻辑专利发布界面是整个系统里表单最复杂的部分涉及专利基本信息、申请人信息、发明人信息、技术领域分类、摘要、权利要求书等多个区块。直接用el-form的表单校验功能配合自定义校验函数处理特殊规则。先说基本配置方式。每个表单控件绑定一个prop在rules里定义校验规则const rules { title: [ { required: true, message: 请输入专利名称, trigger: blur }, { min: 5, max: 100, message: 专利名称长度需在5到100个字符之间, trigger: blur } ], applicationNumber: [ { required: true, message: 请输入申请号, trigger: blur }, { validator: (rule, value, callback) { const prefix value.substring(0, 2) const year value.substring(2, 6) if (!/^[0-9]{2}$/.test(prefix) || !/^[0-9]{4}$/.test(year)) { callback(new Error(申请号格式不正确应包含国家代码和申请年份)) } else { callback() } }, trigger: blur } ], applicationDate: [ { required: true, message: 请选择申请日期, trigger: change } ], claimCount: [ { type: number, min: 1, max: 50, message: 权利要求项数需在1到50之间, trigger: blur } ] }申请号这种有固定格式的字段纯靠Element Plus自带规则没法实现必须写自定义validator。我还遇到过一个需求——日历选择器中当前月份以后的日期不能选。这是专利实际业务场景中的常见限制直接在日期选择器上设置disabled-date属性el-date-picker v-modelform.applicationDate typedate placeholder请选择申请日期 :disabled-date(date) date.getTime() Date.now() /4.2 动态表单的实现——发明人列表专利发布的发明人数量是不固定的可能是一个人也可能是多个人。这时候用动态表单比较合适——用户可以点击“添加发明人”按钮新增一行输入框也可以删除某一行。动态表单在Element Plus中通过v-for循环生成字段校验规则也需要动态设置el-form-item v-for(inventor, index) in form.inventors :keyindex :label发明人${index 1} :propinventors.${index}.name :rules{ required: true, message: 请输入发明人姓名, trigger: blur } el-input v-modelinventor.name placeholder请输入姓名 / el-button typedanger clickremoveInventor(index)删除/el-button /el-form-item el-button typeprimary clickaddInventor添加发明人/el-button这里有个坑prop必须写成inventors.${index}.name这样的路径格式不然el-form找不到对应的校验字段整个表单验证会静默失败。我第一次做动态表单时就在这里栽过跟头怎么点提交都提示校验不通过排查了半天才发现是prop路径写错了。4.3 富文本编辑器集成与内容清洗专利的摘要、技术方案、实施方式这些长文本内容需要用富文本编辑器来录入。我选了WangEditor 5相比老牌的UEditor和Quill它更轻量、API更现代而且对Vue 3的支持很友好。import wangeditor/editor/dist/css/style.css import { onBeforeUnmount, ref, shallowRef } from vue import { Editor, Toolbar } from wangeditor/editor-for-vue const editorRef shallowRef() const toolbarConfig {} const editorConfig { placeholder: 请输入内容..., MENU_CONF: { uploadImage: { // 图片上传接口 server: /api/upload/image, // 自定义上传参数 fieldName: file, maxFileSize: 2 * 1024 * 1024, allowedFileTypes: [image/jpeg, image/png, image/gif] } } } const handleCreated (editor) { editorRef.value editor } onBeforeUnmount(() { if (editorRef.value) { editorRef.value.destroy() } })集成编辑器后遇到的一个典型问题是编辑器生成的HTML带有大量内联样式和pbr/p这种空标签直接提交到后端会造成数据冗余。我的做法是提交前用HTMLParser对内容做一次清洗去掉冗余的空标签和>// api/request.js import axios from axios import { ElMessage } from element-plus import { useUserStore } from ../store/modules/user import router from ../router const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 15000 }) // 请求拦截器携带token request.interceptors.request.use( config { const userStore useUserStore() if (userStore.token) { config.headers[Authorization] Bearer ${userStore.token} } return config }, error Promise.reject(error) ) // 响应拦截器统一处理业务错误 request.interceptors.response.use( response { const res response.data // 如果后端自己封装了code字段 if (res.code ! undefined res.code ! 200) { ElMessage.error(res.message || 请求失败) // 401token失效跳转登录页 if (res.code 401) { const userStore useUserStore() userStore.logout() router.push({ path: /login }) } return Promise.reject(new Error(res.message || 请求失败)) } return res }, error { // HTTP层面的错误 if (error.response) { switch (error.response.status) { case 401: ElMessage.error(登录已过期请重新登录) router.push({ path: /login }) break case 403: ElMessage.error(没有权限访问此资源) break case 404: ElMessage.error(请求的资源不存在) break case 500: ElMessage.error(服务器内部错误) break default: ElMessage.error(网络异常请稍后重试) } } else { ElMessage.error(网络连接失败) } return Promise.reject(error) } ) export default request上面的写法里有一个关键点把HTTP状态码错误和业务码错误分开处理。HTTP 200不代表业务一定成功后端可能在响应体里返回code: 500表示业务逻辑出错。如果只盯着HTTP状态码很多业务错误会被淹没。还有一个细节超时时间根据接口特性设置。专利检索接口因为后端要执行复杂的查询耗时较长可以单独在具体接口里覆盖超时时间// api/patent.js export function searchPatents(params) { return request({ url: /patents/search, method: get, params, timeout: 30000 // 覆盖默认的15秒 }) }5.2 与Spring Boot后端联调的两种模式前后端分离项目的联调阶段最常见的两个痛点是跨域和接口路径不一致。跨域问题通常有两种解决方案。第一种方案是代理模式适合开发环境。在Vite的配置里设置dev server代理// vite.config.js export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } })这样前端代码里请求/api/patents/search时开发服务器会把请求转发到http://localhost:8080/patents/search浏览器视角下没有跨域问题。这种方案不修改后端代码前后端各自独立启动推荐日常联调使用。第二种方案是后端直接开启CORS适合生产环境同域部署或测试环境快速联调Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }CORS方案在后端开启后前端不需要代理配置直接用完整地址请求即可。但要注意生产环境开放所有域名跨域是有安全风险的建议上线前把addAllowedOriginPattern收敛为实际部署的域名。联调经验经常看到前后端各自本地跑得好好的一联调就各种问题。其实高频问题就三个——接口路径对不上、参数名大小写不一致、日期格式不统一。联调前先把自己这边的接口文档对齐能省很多时间。5.3 接口文档约定的几个重要规范多次联调踩坑之后我总结出了几条接口约定规范分享给大家第一所有日期字段统一用yyyy-MM-dd格式传输时间戳类型的字段用毫秒级。前后端各自做格式化转换避免出现前端传的是时间戳、后端解析成字符串这种问题。第二分页接口统一返回recordstotal的结构。使用MyBatis-Plus的分页插件天然就是这样返回的前端拿到后直接用就行。第三错误信息要有业务可读性。后端返回的message不要写系统错误这种废话而要说明具体原因比如申请号已存在请勿重复发布。第四敏感信息比如用户手机号在列表接口中用***脱敏返回。前端展示明细时再调详情接口获取完整数据。6. 组件通信与状态共享的实战写法6.1 组件通信七种方式的使用场景Vue组件通信是面试必问、工作必用的知识点。专利查询系统里用到的通信方式有这些我把高频的几种整理出来props / emit。父子组件之间最简单直接的通信方式。比如专利筛选组件PatentFilter.vue它接收父组件传入的初始筛选条件用户在面板上修改后通过emit把变化告知父组件。这种单向数据流的写法容易调试数据流向清晰。v-model。本质上是props emit的语法糖适合表单类组件的双向绑定。我在封装PatentCard.vue的选中状态时用的就是v-model:selected的写法。PiniaVuex。跨页面、跨组件层级的全局状态。之前提到的检索条件、用户登录状态都属于这一类。ref / reactive。在组合式API中父子组件间还可以用defineExpose配合ref获取子组件的实例和内部方法。!-- 父组件 -- template PatentFilter reffilterRef / /template script setup import { ref } from vue import PatentFilter from ./components/PatentFilter.vue const filterRef ref() // 调用子组件暴露的方法 function resetFilters() { filterRef.value.resetForm() } /script!-- 子组件 PatentFilter.vue -- script setup defineExpose({ resetForm }) /scriptprovide / inject。跨多级组件传递数据时特别好用不用一层层props传递。比如在专利详情页的根组件里provide一个patentId树形结构内部任意层级的组件都能inject获取。mitt事件总线。Vue 3移除了$on/$emit实例方法引入mitt作为替代。适合完全没有嵌套关系的组件之间通信。专利系统里有个场景是搜索结果列表需要通知顶栏的收藏按钮更新状态两个组件没有直接的嵌套关系用mitt就比层层传递props方便。// utils/eventBus.js import mitt from mitt export default mitt()// 某个组件中发送事件 import eventBus from ../utils/eventBus eventBus.emit(favorite-changed, patentId)// 另一个组件中监听事件 import eventBus from ../utils/eventBus eventBus.on(favorite-changed, (patentId) { // 更新收藏状态 })6.2 组合式API中组件逻辑复用的正确姿势如果组件里同一套逻辑被多个页面使用就该抽成自定义HookComposable了。专利系统里最典型的例子是usePagination这个Hook它把分页相关的状态和逻辑封装起来// composables/usePagination.js import { ref, computed } from vue export function usePagination(defaultPageSize 10) { const currentPage ref(1) const pageSize ref(defaultPageSize) const total ref(0) const totalPages computed(() Math.ceil(total.value / pageSize.value)) const goToPage (page) { currentPage.value page } const resetPage () { currentPage.value 1 } return { currentPage, pageSize, total, totalPages, goToPage, resetPage } }然后在搜索页和后台管理页里分别调用// 搜索页 const { currentPage, pageSize, total, goToPage } usePagination(10) // 后台管理页 const { currentPage, pageSize, total, goToPage } usePagination(20)两个页面互不影响因为每个组件调用Hook都会生成独立的状态。这样做既减少了重复代码又保持组件内部逻辑清晰。7. 前后端分离部署与Nginx配置7.1 前端打包构建的注意事项项目开发完成后前端需要进行打包构建生成静态文件交给Nginx托管。Vue项目的构建命令是npm run build构建产物默认在dist目录下。构建过程中最需要注意的是路由模式。开发时如果用createWebHistoryhistory模式打包后的静态文件部署到Nginx后访问/patent/123这样的路径时Nginx会尝试查找服务器上真实的/patent/123文件找不到就会返回404。解决办法是在Nginx配置里加一个try_files指令server { listen 80; server_name yourdomain.com; root /usr/share/nginx/html; index index.html; # 关键配置所有路径都回退到index.html location / { try_files $uri $uri/ /index.html; } # 静态资源缓存策略 location /assets/ { expires 30d; add_header Cache-Control public, immutable; } # 反向代理到后端接口 location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }如果不想配置Nginx的try_files也可以把路由模式改成createWebHashHistoryhash模式URL中会多一个#符号比如/#/patent/123。hash模式的好处是刷新页面不会404但URL不够美观。两个方案各有优劣我建议对颜值有要求且能控制Nginx配置的优先用history模式。7.2 在服务器上用Xshell部署前端项目服务器部署这套流程我用Xshell操作了好几次这里分享一个完整的操作序列跟着走基本不会出错。先确认服务器上装好了Nginxnginx -v如果没装分别执行安装命令。以CentOS为例yum install -y nginx systemctl enable nginx systemctl start nginx本地打包完成后通过Xshell把dist目录传到服务器上。常用的方式有两种第一种是用scp命令scp -r dist/ rootyour-server-ip:/usr/share/nginx/html/第二种是配合Xftp直接把本地dist目录拖拽上传。我个人在文件量不大时喜欢用Xftp图形化操作更直观。上传完成后重载Nginx使配置生效nginx -t # 检查配置是否有语法错误 nginx -s reload # 重载配置然后访问服务器IP或者域名如果能看到页面就说明部署成功了。常见问题有两个一是权限不足导致403可以检查一下文件目录权限二是端口未开放需要在云安全组和系统防火墙中放行80端口。7.3 webview与本地打包文件的加载场景热词列表里出现了好几次“webview加载本地Vue打包文件”“iOS加载本地Vue项目”这类问题。这是混合App开发中很典型的一个场景——把Vue项目打包出来的静态文件放到App的WebView里加载而不是部署到服务器上。Android的WebView加载本地文件的配置相对简单直接加载file:///android_asset/dist/index.html即可。但iOS的WKWebView加载本地文件会有限制不能用file://直接加载需要借助loadFileURL方法let webView WKWebView(frame: .zero) let indexURL Bundle.main.url(forResource: index, withExtension: html, subdirectory: dist) webView.loadFileURL(indexURL!, allowingReadAccessTo: indexURL!.deletingLastPathComponent())还有一个隐藏的坑Vue打包出来的JS和CSS文件是通过相对路径引用的打包时需要设置base// vite.config.js export default defineConfig({ base: ./ // 相对路径适配webview本地加载 })如果这个值没设置默认生成的引用路径是/assets/xxx.js这种绝对路径在WebView的本地文件环境中就会因为找不到资源而白屏。这个问题我排查过整整一个下午最后发现就是base少配了一个点。另一个需要注意的问题是WebView里的跨域限制。如果Vue项目内置在App中请求的又是线上后端接口很可能触发CORS。解决思路是前端使用WebView提供的JavaScript Bridge去请求接口或者后端对App内置的User-Agent放行。不同方案的取舍取决于App的具体架构这里不展开细说。8. 常见问题与排查技巧实录8.1 页面数据更新了但视图不变这是Vue开发中最经典的问题在专利系统开发时也遇到过。用户在后台修改了专利的法律状态返回列表页后状态标签还是旧值压根没刷新。排查思路是这样的第一步确认数据是否真的更新了。在组件里打印一下store或者接口返回的数据看有没有变化。如果数据源本身就是旧的问题出在接口层面——可能是缓存也可能是修改后没有重新拉取列表。第二步确认是否触发了响应式更新机制。如果是给reactive对象直接新增属性比如res.data.newField xxxVue 3中新增属性是响应式的但如果在Vue 2中这样写就不会触发更新。这里还是推荐用ref或者reactive的完整赋值方式避免这类边界问题。第三步如果是数组更新注意下标更新的写法。Vue 3中下面的写法是响应式的const arr ref([1, 2, 3]) arr.value[0] 100 // Vue 3可以触发更新Vue 2中则必须用Vue.set或者splice方法。8.2 Element Plus组件引入后样式丢失使用unplugin-auto-import和unplugin-vue-components做Element Plus按需自动导入时有时会发现ElMessage弹窗样式是裸的。经典的原因有两个第一ElMessage这类函数式调用的组件不是通过模板标签使用的自动导入插件可能不会自动引入它的样式。解决办法是手动在main.js或样式文件中导入import element-plus/es/components/message/style/css第二自动导入配置中ElMessage可能没有被识别。需要检查一下vite.config.js里的AutoImport配置AutoImport({ resolvers: [ElementPlusResolver()], dts: src/auto-imports.d.ts })我个人的建议是如果项目对首屏性能要求没那么极致直接全量引入Element Plus更省心import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)启动速度会慢一些但至少不会遇到样式莫名丢失的问题。等后续有空闲时间再优化按需加载性价比更高。8.3 前后端联调时常见的跨域和参数问题跨域问题我在联调部分已经说过这里补充一个排查网络问题的通用方法。遇到接口报错时先用浏览器的开发者工具F12打开Network面板看几个关键信息请求的URL是否和后端接口路径一致请求方法GET/POST/PUT/DELETE是否符合后端定义请求头Headers里是否携带了必要的token请求体Payload里的参数格式是否和后端DTO匹配参数问题最常见的场景是后端定义了一个ListString类型的参数前端传了一个逗号拼接的字符串或者后端期望JSON格式前端用application/x-www-form-urlencoded提交了表单。遇到这类问题不要急着改代码先在Network面板里对比前后端的请求数据格式再用Postman或Apifox单独调一次接口验证后端逻辑最后才排查前端代码。这样能快速定位问题出在哪一层避免在小问题上浪费时间。8.4 排查问题时的三个高效技巧技巧一善用console.log但不滥用。在关键节点打印数据状态比如接口返回后、事件处理函数入口、路由守卫判断处。排查完记得删掉保持代码整洁。技巧二看Vue Devtools的组件树和Pinia状态。这个工具能直接看到每个组件的props、data、computed值还能修改Pinia store的值实测页面反应比console.log更直观。技巧三遇到白屏先看控制台报错。很多时候白屏不是样式问题而是某个变量为undefined模板里访问它的属性时抛出了异常。控制台里红色的报错信息直接定位到对应的组件和代码行修复就很快。9. 放在最后这几个模块就是专利查询与发布系统从零搭建的核心脉络。回想整个开发过程最耗时的地方反而不是某个具体的功能编码而是在组件通信方案的选择、接口请求的封装、以及前后端联调时那些细节对齐上。Vue本身的上手门槛并不高真正决定项目质量的是代码的组织能力和对坑位的预判能力——哪些逻辑该放组件内部、哪些该抽到store、哪些公共能力该做成一劳永逸的封装这些判断都在一次次踩坑里打磨出来。如果你是刚开始做这类信息管理系统建议从两个地方下手一是先把Axios封装和路由守卫这两块地基打好后面所有功能模块都在这上面生长二是用好Vue Devtools学会从状态管理的角度去调试页面而不是靠刷新碰运气。专利领域的数据模型比普通业务系统复杂但把检索、详情、发布这三条主线理清楚整个系统也就水到渠成了。后面如果再扩展专利年费计算、同族专利关联这种更专业的功能核心架构也不用大改。