Appearance
2.2 页面模板
在企业级后台系统中,页面是用户与系统交互的核心单元。为了保证开发效率、维护成本和一致性体验,我们需要围绕常见的业务场景制定统一的页面结构规范。
本文主要涵盖页面设计原则、标准结构示例、典型页面类型、开发最佳实践等内容,适用于 Vue 或 React 技术栈下的中大型后台管理系统项目。
一、页面设计原则
结构统一
- 所有页面遵循统一的目录结构;
- 包含 template、script、style 三大部分;
- 页面组件命名采用 PascalCase(如 UserList.vue);
布局标准化
- 使用统一的布局组件(如
<Layout>
,<Header>
,<Sider>
,<Content>
); - 支持响应式布局,适配不同分辨率;
- 提供默认空白页、带侧边栏页、全屏页等基础模板;
权限控制
- 页面路由配置清晰,路径命名统一(如
/user/list
,/order/detail
); - 动态路由支持权限控制;
- 页面进入前进行权限校验,无权限时跳转至 403 页面;
数据驱动
- 页面初始化时统一调用数据服务获取数据;
- 使用 Pinia/Vuex/Zustand 管理页面级状态;
- 页面卸载时清理副作用(如定时器、事件监听);
二、标准页面结构示例(以 Vue 为例)
vue
<template>
<layout class="page-user-list">
<template #header>
<h2>用户管理</h2>
</template>
<template #default>
<div class="user-filter">
<search-bar @search="onSearch" />
</div>
<data-grid
:columns="columns"
:data="users"
:loading="loading"
@sort="onSort"
@filter="onFilter"
/>
<pagination
:total="total"
:current-page="currentPage"
@change="onChangePage"
/>
</template>
<template #footer>
<page-footer />
</template>
</layout>
</template>
<script>
import Layout from '@/components/Layout.vue';
import SearchBar from '@/components/SearchBar.vue';
import DataGrid from '@/components/DataGrid.vue';
import Pagination from '@/components/Pagination.vue';
import PageFooter from '@/components/PageFooter.vue';
import UserService from '@/services/user.service';
export default {
name: 'UserListPage',
components: {
Layout,
SearchBar,
DataGrid,
Pagination,
PageFooter
},
data() {
return {
users: [],
loading: true,
total: 0,
currentPage: 1,
columns: [
{ title: '用户名', field: 'username' },
{ title: '角色', field: 'role' },
{ title: '创建时间', field: 'createdAt' }
]
};
},
async mounted() {
try {
this.loading = true;
const res = await UserService.fetchUserList(this.currentPage);
this.users = res.list;
this.total = res.total;
} catch (error) {
console.error('Failed to load user list:', error);
this.$router.push('/error/404');
} finally {
this.loading = false;
}
},
methods: {
onSearch(keyword) {
this.keyword = keyword;
this.currentPage = 1;
this.loadUsers();
},
onSort(field, order) {
this.sortField = field;
this.sortOrder = order;
this.loadUsers();
},
onChangePage(page) {
this.currentPage = page;
this.loadUsers();
},
async loadUsers() {
this.loading = true;
const res = await UserService.fetchUserList({
page: this.currentPage,
keyword: this.keyword,
sort: `${this.sortField}:${this.sortOrder}`
});
this.users = res.list;
this.loading = false;
}
}
};
</script>
<style scoped>
.page-user-list .user-filter {
margin-bottom: 16px;
}
</style>
三、典型页面模板类型
1. 列表页(List Page)
展示一组数据条目(如用户列表、订单列表);
支持分页、筛选、排序功能;
示例:OrderListPage.vue
, ProductListPage.vue
2. 详情页(Detail Page)
显示单个对象的完整信息(如商品详情、用户详情);
可能包含子导航或标签切换;
示例:ProductDetailPage.vue
, UserProfilePage.vue
3. 表单页(Form Page)
提供新增或编辑操作界面;
支持字段校验、提交成功提示;
示例:CreateOrderPage.vue
, EditProfilePage.vue
4. 异常页(Error Page)
统一展示错误状态(如 404、500);
提供返回首页按钮;
示例:NotFoundPage.vue
, ServerErrorPage.vue
5. 配置页 / 设置页(Settings Page)
多 Tab 设计,用于调整系统参数或用户设置;
每个 Tab 对应独立组件;
示例:AccountSettingPage.vue
, SystemConfigPage.vue
四、页面开发最佳实践
1. 生命周期使用建议
created/mounted
:用于请求初始数据;beforeUnmount
:清除定时器、取消订阅、销毁实例;activated/deactivated
(Vue):用于缓存组件时的数据更新;
2. 路由守卫处理
- 在
beforeRouteEnter
或beforeRouteUpdate
中处理权限逻辑; - 使用
nextTick()
确保 DOM 更新后再执行某些操作;
3. 数据请求优化
- 使用 Axios 或 Fetch API 请求数据;
- 添加全局错误拦截器统一处理异常;
- 对高频请求添加防抖/节流机制;
4. 页面性能优化
- 非关键资源延迟加载(如图片懒加载);
- 使用 keep-alive 缓存常用页面;
- 避免在页面中重复引入相同组件或服务;
五、页面组件文档建议
每个页面组件应配有说明文档,内容包括:
- 功能描述
- props 表格(类型、默认值、是否必填)
- events 列表
- 插槽说明
- 使用示例代码
示例页面文档:UserListPage 用户列表页
Props
参数名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
autoLoad | boolean | true | 否 | 初始化是否自动加载 |
Events
事件名 | 参数 | 说明 |
---|---|---|
select | user | 用户点击某一行触发 |
插槽
插槽名 | 说明 |
---|---|
header | 自定义头部区域 |
actions | 自定义操作按钮 |
示例代码
vue
<UserListPage auto-load @select="handleSelect" />
六、脚手架工具推荐
手动复制模板:从已有模板 clone 并修改页面名称、接口、样式;
CLI 工具生成:使用脚手架命令一键生成页面骨架;
bashnpm run generate page:user-profile
低代码平台:使用可视化工具拖拽生成页面并导出标准代码;
七、页面模板管理建议
- 统一命名规则:如 UserListPage.vue, OrderDetailPage.vue;
- 集中存放模板:可建立 /templates/pages/ 目录管理通用模板;
- 版本更新记录:每次模板升级需更新 CHANGELOG;
- 团队内部共享:通过私有 NPM 包或 Git Submodule 共享模板;