第一章 本周导学

1-1 本章介绍

  • 组件平台
  • 组件预览
  • 组件README

第二章 组件平台架构设计和技术选型

2-1 组件平台架构设计

点击查看【processon】

2-2 组件平台技术选型和框架搭建

umi-component-test改项目代码提交至：https://github.com/liugezhou/umi-component-test

  1. 初始化UmiJS
    • mkdir umi-component-dev
    • cd umi-component-dev
    • yarn create @umijs/umi-app
    • yarn install
    • yarn start

2. 新建页面

npx umi g page detail

  1. 配置路由

    .umirc.ts新建页面路由 routes: [ { path:’/‘, component:’@/pages/index’ }, { path:’/nice’, component:’@/pages/detail’ }, ], yarn start启动项目后，访问 http://192.168.1.3:8000/nice即可看到最新的页面

4. 安装 Ant Design

yarn add antd

  1. 使用 ```html import { Button } from “antd”;

  1. <a name="mbeWU"></a>
  2. ### 
  3. <a name="JWwJv"></a>
  4. ### 第三章 组件平台基础功能开发
  6. ---
  8. <a name="CmlG4"></a>
  9. #### <br />3-1 umi 项目全局入口文件+国际化开发
  11. > - 运行时配置:约定src/app.tsx为运行时配置,该配置文件下可以做一些全局性的操作
  12. > - 国际化：文档-插件-@umijs/plugin-locale
  13. >    - **mkdir：**src/locales/zh-CN.ts | en-US.ts，配置WELCOME_TO_UMI_WORLD字段内容
  14. >    - .umirc.ts中配置国际化[代码如下所示]
  15. >    - src/app.tsx中引入国际化[代码如下所示]
  17. ```javascript
  18. // src/umirc.ts
  19. locale: {
  20.     default: 'zh-CN',
  21.     antd: false,
  22.     title: false,
  23.     baseNavigator: true,
  24.     baseSeparator: '-',
  25.   },
  27.  // src/app.tsx
  28.   import 'antd/dist/antd.css';
  29.   import { getLocale,setLocale } from 'umi';
  30.   import qs from 'qs';
  31.   const { search } = window.location;
  32.   const { locale = 'zh-CN' } = qs.parse(search, { ignoreQueryPrefix: true });
  33.   setLocale(locale,false)
  36.   // src/pages/index.tsx
  37.   import { useIntl } from 'umi';
  38. export default function IndexPage() {
  39.   const init = useIntl()
  40.   const msg = init.formatMessage({
  41.       id:'WELCOME_TO_UMI_WORLD',
  42.       defaultMessage:'你好，牛逼的前端架构师！'
  43.   },{
  44.     name:'liugezhou'
  45.   })
  46.   console.log(msg)
  47. }

最后：yarn start启动文件，访问查看控制台：http://localhost:8000/?locale=en-US

3-2 组件平台功能展示 + 页头页脚开发

umijs支持layout引入，于是我们在开发页头页脚的时候，页面页头与页脚是在各个页面都存在的，于是我们可以将页面不同的地方以layout的形式注入

  1. // src/layouts/index.js
  3. import styles from './index.less'
  5. function BasicLayout(props){
  6.     return (
  7.   <div className={styles.normal}>
  8.     <div className={styles.title}>{slogan}</div>
  9.         {props.children}
  10.       <div className={styles.footer}>{copyright}</div>
  11.   </div>
  12.   )
  13. }
  14. export default BasicLayout
  16. //src/layouts/index.less
  17. @import '~antd/dist/antd';
  19. .normal{
  20.     text-align:center
  21. }
  23. .title{
  24.     font-size:15px;
  25.     font-weight: normal;
  26.     background: @primary-color;
  27.     padding: 10px 0;
  28.     color: white;
  29.     margin:0;
  30. }
  32. .footer {
  33.     font-size: 12px;
  34.     font-weight: normal;
  35.     background: @primary-color;
  36.     padding: 10px 0;
  37.     color: white;
  38.     margin: 0;
  39. }
  41. // .umijsrc.js
  42. import { defineConfig } from 'umi';
  44. export default defineConfig({
  45.   nodeModulesTransform: {
  46.     type: 'none',
  47.   },
  48.   routes: [
  49.     {
  50.       path: '/',
  51.       component: '@/layouts/index',
  52.       routes: [
  53.         {
  54.           path: '/',
  55.           component: '@/pages/index'
  56.         },
  57.         {
  58.           path: '/detail',
  59.           component: '@/pages/detail'
  60.         }
  61.       ]
  62.     }
  63.   ],
  64.   fastRefresh: {},
  65.   locale: {
  66.     default: 'zh-CN',
  67.     antd: false,
  68.     title: false,
  69.     baseNavigator: true,
  70.     baseSeparator: '-',
  71.   }
  72. });

3-3 组件平台动态配置 API 开发

我们的页面与页脚内容需要从接口获取，因此，本节内容为在 cloudscope-cli-server服务中去编写接口代码。 本周相关代码提交至：cloudscope-cli/server/lesson33

3-3-1 添加路由 

  1. // app/route.js
  2. 'use strict';
  4. module.exports = app => {
  5.   const { router, controller } = app;
  7.   router.resources('componentSite', '/api/v1/componentSite', controller.v1.componentSite);
  9. };

3-3-2 API编写

  1. // app/controller/v1/ComponentSite.js
  2. 'use strict'
  3. const Controller = require('egg').Controller;
  4. const mongo = require('../../utils/mongo')
  6. class ComponentSiteController extends Controller{
  7.   asynx index(){
  8.       const { ctx } = this;
  9.         const data = await mongo.query('componentSite);
  10.           if(data && data.length>0){
  11.             ctx.body = data[0]
  12.          }else{
  13.           ctx.body = []
  14.       }
  15.   }                                
  16. }
  • 需要在mongoDB中新建集合 componentSite,添加页面页脚数据
  • 启动项目，浏览器输入地址，测试访问结果

3-4 前端动态配置 API 接入

代码无分支提交至：umi-component-test

上一节我们开发完毕api接口后，在前端请求该接口

  • 首先需要install axios
  • 接着需要封装request请求。
  1. // src/layouts/util/reques.js
  3. import axios from 'axios';
  4. const BASE_URl = 'http://liugezhou.com:7001'
  5. const service = axios.create({
  6.     baseURl:BASE_URL,
  7.   timeout:5000
  8. })
  10. service.interceptor.request.use({
  11.     config => {
  12.       return config;
  13.     }
  14.   error => {
  15.       return new Promise.reject(error)                              
  16.     }
  18.   service.interceptor.response.use({
  19.     response => {
  20.     return new response.data;
  21.   }
  22.     error => {
  23.         return new Promise.reject(error)                              
  24.     }
  25. })
  27. export default request;
  29. //src/layouts/utils/service.js
  31. import request from './request'
  33. export function getSiteInfo(){
  34.     return request({
  35.       url:'/api/v1/componentSite'
  36.   })
  37. }
  39. export default {}
  • 最后，在首页中去调用该接口，且赋值为页头与页脚
  1. // src/layouts/index.js
  3. import styles from './index.less';
  4. import {getSiteInfo } from '../utils/service';
  5. import { useState, useEffect } from 'react'';
  7. function BasicLayout(props){
  8.         const [init,setInit] = useState(false);
  9.       const [slogan,setSlogan] = useState('');
  10.       const [copyright,setCopyright ] = useState('');
  12.       useEffect( () =>{
  13.          if (!init) {
  14.          setInit(true);
  15.          getSiteInfo().then(data => {
  16.            setSlogan(data.slogan);
  17.            setCopyright(data.copyright);
  18.          }).catch(err => {
  19.            console.log(err);
  20.            setSlogan('');
  21.            setCopyright('');
  22.          });
  23.        }
  24.     },[init])
  26.   return (
  27.            <div className={styles.normal}>
  28.             <div className={styles.title}>{slogan}</div>
  29.             {props.children}
  30.             <div className={styles.footer}>{copyright}</div>
  31.         </div>
  32.       )
  33. }
  34.  export default BasiLayout;

第四章 组件平台组件列表页面开发

4-1 组件列表 API 开发

本周相关代码提交至：cloudscope-cli/server/lesson33

  1. // app/controller/v1/Components.js
  3. async index(){
  4.   const { ctx, app } = this;
  5.   const { name } = ctx.query;
  6.   const andWhere = name ? `AND c.name LIKE '%${name}%'` : '';
  7.   const sql = `SELECT c.id, c.name, c.classname, c.description, c.npm_name, c.npm_version, c.git_type, c.git_remote, c.git_owner, c.git_login, c.create_dt, c.update_dt, v.version, v.build_path, v.example_path, v.example_list
  8. FROM component AS c
  9. LEFT JOIN version AS v ON c.id = v.component_id
  10. WHERE c.status = 1 AND v.status = 1 ${andWhere}
  11. ORDER BY c.create_dt, v.version DESC`;
  12.   const result = await app.mysql.query(sql);
  13.   const components = [];
  14.   result.forEach(component => {
  15.     let hasComponent = components.find(item => item.id === component.id);
  16.     if (!hasComponent) {
  17.       hasComponent = {
  18.         ...component,
  19.       };
  20.       delete hasComponent.version;
  21.       delete hasComponent.build_path;
  22.       delete hasComponent.example_path;
  23.       delete hasComponent.example_list;
  24.       hasComponent.versions = [];
  25.       components.push(hasComponent);
  26.       hasComponent.versions.push({
  27.         version: component.version,
  28.         build_path: component.build_path,
  29.         example_path: component.example_path,
  30.         example_list: component.example_list,
  31.       });
  32.     } else {
  33.       hasComponent.versions.push({
  34.         version: component.version,
  35.         build_path: component.build_path,
  36.         example_path: component.example_path,
  37.         example_list: component.example_list,
  38.       });
  39.     }
  40.   });
  41.   ctx.body = components;
  42. }

4-2 测试组件数据创建

  • 上一节我们获取的组件列表数据为一条，本节首先再去创建几条测试数据。

  • 在此之前，先去更改之前的组件模版 cloudscope-cli-components，packahe.json的配置：publishConfig为access：true 和 build:demo

    • 外层package.json 增加一个版本号
    • template内package.json 配置 publishConfig
    • template内package.json 配置‘build:demo’:”npm install && npm run build && cd examples && npm install && npm run build”
    • npm publish
    • mongodb数据库中将版本号升级

  • mkdir cloudscope-cli_component-test3

  • cd cloudscope-cli_component-test3
  • cloudscope-cli init -tp /Users/liumingzhou/Documents/imoocCourse/Web前端架构师/cloudscope-cli/commands/init/ 【这里需要注意的是，由于我本读安装且默认设置了node的版本为14，而之前开发的本地脚手架为12.16，因此支持以上代码需要更换node版本】
    • @cloudscope-cli/components-test2
    • 1.0.0
    • 通用的Vue3组件库模版
    • components test2
  • code .
  • npm run build:demo
  • cloudscope-cli publish -tp /Users/liumingzhou/Documents/imoocCourse/Web前端架构师/cloudscope-cli/commands/publish/ [不加prod属性，不用关心OSS与NPM发布]

检查：

  • git remote -v 【查看远程仓库信息】

  • 查看mysql数据库插入信息

  • 如果添加了 —prod属性

  • 查看npm发布组件信息
  • 查看云OSS上传信息

4-3 组件列表页面开发

4-4 组件卡片面板开发

4-5 搜索框组件开发+模糊搜索API开发

这三节内容为组件首页列表的umi项目代码开发，包括布局、请求、点击事件等功能，代码分类为：国际化配置、工具类、业务代码，其中核心内容为业务代码，主要是使用UI库ant-design-react和umi以及react的一些用法。

  • 国际化配置
  1. // src/locales/en-US.js
  2. export default {
  3.     WELCOME_TO_UMI_WORLD: "{name}, welcome to umi's world",
  4.     INDEX_SEARCH: 'Search',
  5.     INDEX_PLACEHOLDER: 'Component Name',
  6.   };
  7. // src/locales/zh-CN.js
  8. export default {
  9.   WELCOME_TO_UMI_WORLD: '{name}，欢迎光临umi的世界',
  10.   INDEX_SEARCH: '搜索',
  11.   INDEX_PLACEHOLDER: '组件名称',
  12. };
  • 工具类
  1. // src/utils/index.js
  3. export function formatName(name) {
  4.   let _name = name;
  5.   if (_name && _name.startsWith('@') && _name.indexOf('/') > 0) {
  6.     // @cloudscope-cli/component-test ->
  7.     // @cloudscope-cli_component-test
  8.     const nameArray = _name.split('/');
  9.     _name = nameArray.join('_').replace('@', '');
  10.   }
  11.   return _name;
  12. }
  14. export default {};
  15. // src/utils/request.js
  16. import axios from 'axios'
  18. const BASE_URL = 'http://liugezhou.com:7001'
  20. const service = axios.create({
  21.     baseURL: BASE_URL,
  22.     timeout: 5000
  23. })
  25. service.interceptors.request.use(
  26.     config => {
  27.         return config
  28.     },
  29.     error => {
  30.         return Promise.reject(error)
  31.     }
  32. )
  34. service.interceptors.response.use(
  35.     response => {
  36.         return response.data
  37.     },
  38.     error => {
  39.         return Promise.reject(error)
  40.     }
  41. );
  43. export default service;
  45. //src/utils/service.js
  46. import request from './request';
  48. export function getSiteInfo() {
  49.   return request({
  50.     url: '/api/v1/componentSite',
  51.   });
  52. }
  54. export function getComponentList(params) {
  55.   return request({
  56.     url: '/api/v1/components',
  57.     params,
  58.   });
  59. }
  61. export default {};
  63. //src/utils/git.js
  64. import { formatName } from '../utils';
  66. export function getGitUrl(item) {
  67.   let name = item.classname;
  68.   if (name.startsWith('@') && name.indexOf('/') > 0) {
  69.     const nameArray = name.split('/');
  70.     name = nameArray.join('_').replace('@', '');
  71.   }
  72.   return `https://${item.git_type}.com/${item.git_login}/${name}`;
  73. }
  75. /**
  76.  * 获取组件预览链接
  77.  * @param name      组件名称
  78.  * @param version   组件版本
  79.  * @param path      组件预览文件路径
  80.  * @param file      组件预览文件名称
  81.  */
  82. export function getPreviewUrl({ name, version, path, file }) {
  83.   // 上传至OSS再来配置
  84.   return `https:// /${formatName(name)}@${version}/${path}/${file}`;
  85. }
  87. export default {};
  • 业务代码 ✨✨✨✨✨
  1. // src/pages/index.jsx
  2. import styles from './index.less';
  3. import { Divider, Row, Col, Card, Input } from 'antd';
  4. import { EditOutlined, EllipsisOutlined, EyeOutlined } from '@ant-design/icons';
  5. import { useIntl,history } from 'umi';
  6. import { getGitUrl,getPreviewUrl } from "../utils/git";
  7. import { getComponentList } from '../utils/service';
  8. import { useState, useEffect } from "react";
  10. const { Meta } = Card;
  11. const { Search } = Input;
  13. export default function IndexPage() {
  14.   const [init, setInit] = useState(false);
  15.   const [list, setList] = useState([]);
  16.   const [name, setName] = useState(null);
  17.   const intl = useIntl();
  19.   useEffect(() => {
  20.     if (!init) {
  21.       setInit(true);
  22.       getComponentList({ name }).then(data => {
  23.         console.log(data);
  24.         setList(data);
  25.       }).catch(err => {
  26.         console.error(err);
  27.         setList([]);
  28.       });
  29.     }
  30.   }, [init, name]);
  32.   function getAvatar(item) {
  33.     if (item.git_type === 'gitee') {
  34.       return {
  35.         img: 'https://gitee.com/static/images/logo-black.svg',
  36.         style: { height: '20px', cursor: 'pointer' },
  37.       };
  38.     } else {
  39.       return {
  40.         img: 'https://www.youbaobao.xyz/arch/img/github.jpeg',
  41.         style: { height: '40px', cursor: 'pointer' },
  42.       };
  43.     }
  44.   }
  45.   function getLastPreviewUrl(item) {
  46.     const lastVersion = item.versions[0];
  47.     const examplePath = lastVersion.example_path;
  48.     const exampleFile = JSON.parse(lastVersion.example_list)[0];
  49.     return getPreviewUrl({
  50.       name: item.classname,
  51.       version: lastVersion.version,
  52.       path: examplePath,
  53.       file: exampleFile,
  54.     });
  55.   }
  57.   return (
  58.     <div className={styles.container}>
  59.       <div className={styles.search}>
  60.       <Search
  61.           style={{ width: '50%' }}
  62.           placeholder={intl.formatMessage({ id: 'INDEX_PLACEHOLDER' })}
  63.           allowClear
  64.           enterButton={intl.formatMessage({ id: 'INDEX_SEARCH' })}
  65.           size='large'
  66.           onSearch={value => {
  67.             setName(value);
  68.             setInit(false);
  69.           }}
  70.         />
  71.       </div>
  72.       <Divider orientation='right'>共{list.length}个组件</Divider>
  73.       <Row gutter={16} justify='space-around'>
  74.         {
  75.           list.map(item => (
  76.             <Col span={6} key={item.id}>
  77.               <Card
  78.                 actions={[
  79.                   <EyeOutlined key='setting' onClick={() => {
  80.                     window.open(getLastPreviewUrl(item));
  81.                   }}
  82.                   />,
  83.                   <EditOutlined key='edit' onClick={() => {
  84.                     history.push({
  85.                       pathname: '/detail',
  86.                       query: {
  87.                         id: item.id,
  88.                       },
  89.                     });
  90.                   }}
  91.                   />,
  92.                   <EllipsisOutlined key='ellipsis' />,
  93.                 ]}
  94.               >
  95.                 <Meta
  96.                   avatar={<img
  97.                     alt={item.name}
  98.                     src={getAvatar(item).img}
  99.                     style={getAvatar(item).style}
  100.                     onClick={() => window.open(getGitUrl(item))}
  101.                   />}
  102.                   title={item.name}
  103.                   description={item.description}
  104.                 />
  105.               </Card>
  106.             </Col>
  107.           ))
  108.         }
  109.       </Row>
  110.     </div>
  111.   );
  112. }
  113. // src/pages/index.less
  114. .containter {
  115.   padding: 20px;
  116. }
  118. .search {
  119.   padding:30px;
  120. }

第五章 组件平台组件详情页面开发

5-1 组件详情获取API开发

首先在umi-component-dev项目下写details页面

  1. // src/pages/details.jsx
  2. import { useState, useEffect } from 'react';
  3. import styles from './detail.css';
  4. import { getComponentItem } from "../utils/service";
  6. export default function Page(props) {
  7.   const [init, setInit] = useState(false)
  8.   const [data, setData] = useState(null)
  10.   useEffect(() => {
  11.     const query = props.location.query
  12.     if(!init && query.id){
  13.       setInit(true);
  14.       getComponentItem(query.id).then( data=> {
  15.         console.log(data)
  16.       })
  17.     }
  18.   })
  19.   return (
  20.     <div>
  21.     </div>
  22.   );
  23. }
  24. // src/utils/service.js
  25. export function getComponentItem(id) {
  26.   return request({
  27.     url: `/api/v1/components/${id}`,
  28.   });
  29. }

接着，重点就是去开发接口获取组件的具体信息了

  1. // app/controller/v1/Components.js
  3.  // api/v1/components/:id
  4. async show() {
  5.   const { ctx, app } = this;
  6.   const id = ctx.params.id
  7.   const results = await app.mysql.select('component', {
  8.     where: { id }
  9.   })
  10.   if (results && results.length > 0) {
  11.     const component = results[0]
  12.     component.versions = await app.mysql.select('version', {
  13.       where: { component_id: id },
  14.       orders: [['version', 'desc']]
  15.     })
  16.     // gitee GET https://gitee.com/api/v5/repos/{owner}/{repo}/contents(/{path})
  17.     // git GET https://api.github.com/repos/{owner}/{repo}/{path})
  18.     let readmeUrl;
  19.     let _name = component.classname;
  20.     if (_name && _name.startsWith('@') && _name.indexOf('/') > 0) {
  21.       const nameArray = _name.split('/');
  22.       _name = nameArray.join('_').replace('@', '');
  23.     }
  24.     if (component.git_type === 'gitee') {
  25.       readmeUrl = `https://gitee.com/api/v5/repos/${component.git_login}/${_name}/contents/README.md`
  26.     } else {
  27.       readmeUrl = `https://api.github.com/repos/${component.git_login}/${_name}/README.md`
  28.     }
  29.     const readme = await axios.get(readmeUrl);
  30.     let content = readme.data && readme.data.content;
  31.     if (content) {
  32.       content = decode(content)
  33.       if (content) {
  34.         component.readme = content
  35.       }
  36.     }
  37.     ctx.body = component
  38.   } else {
  39.     ctx.body = {}
  40.   }
  41. }

5-2 组件基本信息样式开发

5-3 组件代码+预览样式开发

5-4 组件安装样式和复制命令功能开发

5-5 组件多预览文件上传工作

5-6 组件多预览文件上传开发