天羽蜂应用开发

天羽蜂使用说明 天羽蜂人工智能开发

文档介绍

该文档是关于react框架和Material UI创建天羽蜂应用的，您可通过该文档快速构建自己的天羽蜂应用。

应用创建

您可以直接git clone　https://gitlab.com/musys-demo/app-template.git应用模板到您本地，cd到目录app-template并git checkout -b dev切换到dev分支，先运行npm i安装项目依赖，然后运行npm start启动项目。
访问http://localhost:3000，页面显示hello world．至此，您的第一个天羽蜂应用创建完成，您可以基于此模板完成您自己的天羽蜂应用开发。

应用结构

|-- apps-template
    |-- .gitignore
    |-- README.md
    |-- package-lock.json
    |-- package.json
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |   |-- logo192.png
    |   |-- logo512.png
    |   |-- manifest.json
    |-- src
        |-- App.js
        |-- index.css
        |-- index.js // 应用入口
        |-- reportWebVitals.js
        |-- setupTests.js
        |-- components  // 存放您自己开发组件的目录
        |   |-- ThemeColorPresets.js
        |-- hooks // 自定义hook的文件目录
        |   |-- useResponsive.js
        |-- pages 
        |   |-- Home.js
        |-- routes // 前端路由的文件目录
        |   |-- index.js
        |-- sections // Part of the page
        |-- theme // 应用主题
        |   |-- breakpoints.js
        |   |-- index.js
        |   |-- palette.js
        |   |-- shadows.js
        |   |-- typography.js
        |   |-- overrides 
        |-- utils　//工具类存放目录
            |-- getColorPresets.js
            |-- getFontValue.js

开发说明

.gitignore文件

.gitignore文件用来忽略被指定的文件或文件夹的改动，被记录在.gitignore文件里的文件或文件夹，是无法被git跟踪到的，即被忽略的文件是不会被放入到远程仓库里的。

README.md文件

对项目的主要信息进行描述。 如果一个项目很长时间都没有动，突然您需要修改这个项目，那么通过README.md中对项目的描述能让您快速的再次上手；或者别人拿到您的项目也能通过README.md文件的描述快速的了解该项目。

package.json文件

package.json 里面定义的是版本范围（比如^1.0.0），具体跑npm install的时候安的什么版本，要解析后才能决定，这里面定义的依赖关系树，可以称之为逻辑树（logical tree）。
node_modules文件夹下才是npm实际安装的确定版本的东西，这里面的文件夹结构我们可以称之为物理树（physical tree）。
安装过程中有一些去重算法，所以您会发现逻辑树结构和物理树结构不完全一样。

public文件夹

该文件夹用于存放当前项目的静态资源，在该文件夹中，您会看到除index.html文件之外还有应用图标以及manifest.json文件。

index.html文件

该文件是整个应用的入口文件，您可以在该文件中通过script标签以js的方式引入您需要的插件．

manifest.json文件

该文件提供有关应用程序的信息（例如名称、作者、图标和描述）。目的是将 Web 应用程序安装到设备的主屏幕上时，为用户提供更快的访问和更丰富的体验。

src文件夹

用于存放您开发的源代码。

index.js文件

应用的入口文件，通过ReactDOM.createRoot()返回一个ReactDOMRoot的实例，并调用该实例的render方法完成页面的渲染。
将reportWebVitals()改为reportWebVitals(console.log)可在浏览器控制台打印出当前页面的质量信号。

index.css文件

全局样式配置文件，您可以通过该文件修改全局样式。

App.js文件

该文件是您的第一个组件，也是应用最顶层的组件，您可以通过引入其他组件的方式来丰富和完善您的应用

components文件夹

存放您在开发过程中自定义的组件。在当前文件夹下存在一个ThemeColorPresets.js的文件，该文件是用于覆盖默认主题颜色的组件，通过修改该文件可以更换当前应用的主题颜色。详情请参考该文档主题部分。

hooks文件夹

存放您在开发过程中自定义的hook。在该文件夹下已存在有一个名为useResponsive的自定义hook,该hook用于判断当前屏幕大小，来确定是手机端还是PC端。

Page文件夹

该文件夹用于存放您开发的页面，您可以通过配置前端路由来实现页面之间的跳转。在该文件夹下存在一个名为Home的文件，该文件就是您的Home页面．您可以通过访问http://localhost:3000下的根路径来访问该页面，当然，您也可以通过修改routes文件夹下的index.js文件来进行前端路由的修改。

routes文件夹

用于管理前端路由的文件夹，可通过修改该文件夹下的index.js文件来修改前端路由．详细内容可该参考文档的前端路径部分．

sections文件夹

存放页面的部分．当您的一个页面内容很多时，一个页面用一个文件来管理是很麻烦的，这个时候，您可以把一个页面要显示的不同内容划分成多个部分，存放到该文件夹，以便于对页面的管理．

theme文件夹

应用默认主题的文件夹，您可以修改该文件夹下对应的内容来修改主题的样式，详细主题说明请参考该文档主题部分内容

utils文件夹

用于存放您封装的工具类函数和可共享的方法等．

getColorPresets.js文件

提供了预设的一些颜色，您可以调用该文件获取预设的颜色．

getFontValue.js文件

当屏幕大小发生变化时，获取当前字体大小.

前端路由

什么是前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 不同返回不同的页面来实现。

常用前端路由方案

hash：可能是大多数人了解的模式，主要是基于锚点的原理实现。简单易用

history：即使用html5标准中的history api通过监听popstate事件来对dom进行操作。每次路由变化都会引起重定向

前端路由方案优缺点

hash 路由 优缺点

优点： 实现简单，兼容性好（兼容到 ie8） 绝大多数前端框架均提供了给予 hash 的路由实现 不需要服务器端进行任何设置和开发 除了资源加载和 ajax 请求以外，不会发起其他请求

缺点： 对于部分需要重定向的操作，后端无法获取 hash 部分内容，导致后台无 法取得 url 中的数据，典型的例子就是微信公众号的 oauth 验证 服务器端无法准确跟踪前端路由信息 对于需要锚点功能的需求会与目前路由机制冲突

History 模式路由优缺点

优点 ：对于重定向过程中不会丢失 url 中的参数。后端可以拿到这部分数据。绝大多数前段框架均提供了 history 模式的路由实现。后端可以准确跟踪路由信息 可以使用 history.state 来获取当前 url 对应的状态信息

缺点：兼容性不如 hash 路由(只兼容到 IE10) 需要后端支持，每次返回 html 文档

主题

什么是主题

主题可以指定组件的配色、平面的明暗、阴影的深浅、墨水元素的合适的不透明度等等。 该应用主题设置采用的是material UI的Theming，您可以通过主题来定制MUI。

主题的使用

使用 MuiThemeProvider 组件将样式注入到你的应用中。 但是，这是可选的；因为 Material-UI 组件带有默认主题。

ThemeProvider 依赖于 React 的上下文（context）功能来将主题传递给下级组件，所以你需要确保 ThemeProvider 是你试图自定义组件的父级组件。

主题引入

import * as React from 'react';
import { red } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

嵌套主题

您还可以嵌套主题，内层主题将会覆盖外层主题．

<ThemeProvider theme={outerTheme}>
  <Checkbox defaultChecked />
  <ThemeProvider theme={innerTheme}>
    <Checkbox defaultChecked />
  </ThemeProvider>
</ThemeProvider>

应用通用交互接口

您需要通过这些接口，完善应用和调度天羽蜂系统，如若缺失，可能会导致应用工作异常．

登录

数据交互格式

{
  usename:'admin',
  password:'admin
}

接口示例

export function loginByUsername(username, password) {
  const data = {
    username,
    password
  }
  return axios({
    url: '/auth/login',
    method: 'post',
    data: qs.stringify(data),
    loading: 'spin'
  })
}

该API由天羽蜂应用后端定义并提供给前端(待优化)

获取系统结果

数据交互格式

应用环境

React 版本：v18.2.0
Node JS版本：ｖ16.6.2
npm 版本：v6.14.12

回到首页