Skip to content

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. 路由守卫处理

  • beforeRouteEnterbeforeRouteUpdate 中处理权限逻辑;
  • 使用 nextTick() 确保 DOM 更新后再执行某些操作;

3. 数据请求优化

  • 使用 Axios 或 Fetch API 请求数据;
  • 添加全局错误拦截器统一处理异常;
  • 对高频请求添加防抖/节流机制;

4. 页面性能优化

  • 非关键资源延迟加载(如图片懒加载);
  • 使用 keep-alive 缓存常用页面;
  • 避免在页面中重复引入相同组件或服务;

五、页面组件文档建议

每个页面组件应配有说明文档,内容包括:

  • 功能描述
  • props 表格(类型、默认值、是否必填)
  • events 列表
  • 插槽说明
  • 使用示例代码

示例页面文档:UserListPage 用户列表页

Props

参数名类型默认值必填说明
autoLoadbooleantrue初始化是否自动加载

Events

事件名参数说明
selectuser用户点击某一行触发

插槽

插槽名说明
header自定义头部区域
actions自定义操作按钮

示例代码

vue
<UserListPage auto-load @select="handleSelect" />

六、脚手架工具推荐

  • 手动复制模板:从已有模板 clone 并修改页面名称、接口、样式;

  • CLI 工具生成:使用脚手架命令一键生成页面骨架;

    bash
    npm run generate page:user-profile
  • 低代码平台:使用可视化工具拖拽生成页面并导出标准代码;

七、页面模板管理建议

  • 统一命名规则:如 UserListPage.vue, OrderDetailPage.vue;
  • 集中存放模板:可建立 /templates/pages/ 目录管理通用模板;
  • 版本更新记录:每次模板升级需更新 CHANGELOG;
  • 团队内部共享:通过私有 NPM 包或 Git Submodule 共享模板;