• 开发页面


    开发页面

    本节内容将介绍如何开发一个页面实现简单的增删改查

    前置条件

    没有后端环境的同学也可以使用我们提供的demo后端环境进行学习 后端环境变量配置方法

    开发步骤

    创建页面文件

    1. 创建一个 Hello World 页面,在子模块的路径下创建文件夹 packages/test-module1/src/routes/hello-world,这个文件夹的名字对应的就是功能明
    2. 在创建的文件夹下面新建一个 HelloWorldPage.js 文件, 文件内容如下:

      /* packages/test-module1/src/routes/hello-world/HelloWorldPage.js */
      
      const HelloWorldPage = () => 'Hello Hzero!';
      
      export default HelloWorldPage;
      

      页面初始架构

      // HelloWorldPage.js
      
      import React from 'react';
      import { Header, Content } from 'components/Page';
      
      const HelloWorldPage = () => {
      return (
          <>
              <Header title="Hello World" />
              <Content>
                  <h3>hello</h3>
              </Content>
          </>
      );
      }
      
      export default HelloWorldPage;
      

    配置页面路由

    修改 packages/xxx-module/config/routers.js 添加页面路由配置

    [
        // {
        //     path: "/xxx-module/xxx-feature",  // 路由
        //     component: () => import("../routes/xxx-feature/XxxPage"),  // 页面组件, 相对于 routers 的相对位置,
        //     models: [  // model数据模型
        //         () => import("../models/xxxModels"), // dva 中的 model 文件
        //     ],
        //     components: [ { /* 子页面路由配置 */ } ], // 子页面路由,这里的配置项目属性和父外层是一样的
        //     authorized: true,  // 未配置菜单时,配置权限得以访问页面。在完成开发后删除此属性。
        //     title: 'xxxTitle', // tabs 标题,如果页面有绑定菜单就不需要配置,显示菜单文案,
        // },
        {
            path: "/test-modules1/hello",
            component: () => import("../routes/hello-world/HelloWorldPage"),
            authorized: true,
            title: 'Hello',
        },
    ]
    

    参数介绍:

    查看页面

    进入子模块目录 packages/test-module1运行项目。

    yarn start:dev
    

    浏览器打开 http://localhost:8000/test-modules1/hello 即可查看页面效果。

    DEMO 参考