这是第二届青训营元气满满小白队的仓库
一．项目介绍 火山引擎，是字节跳动为企业提供的数字化服务的中台。该团队采用现有技术克隆了一个类似的数字化服务平台，以下称为火山引擎项目。该项目团队创建于2022年1月14日。由队长房森，队员葛传冰，王聪，薛彪，曹树慧五人组成。团队建立后命名为元气满满小白队。队伍编号为1730.项目正式开始于2022年1月24日。
二. 任务分工
房森：规划发布项目的架构、开发环境、工具，更新云工程/商品模块，封装oss，合并分支，更新迭代，优化debug，带领团队完成进度，部署项目。 王聪：负责登录退出初始页等模块，修改后台api，做组件的适配，协调不同组件的交流等 葛传冰：修改api。编写开发环境与文档，配置组件的运行。 薛彪：负责客户模块，实现用户的添加与修改，协调用户参数在不同组件中的传递，适配组件 曹树慧：云工程模块的增删改除上传下线功能
- React 17.0.2
- Git
- UmiJS 3.2
- Ant Design Pro V5
- 多种 API
- visual Studio Code
- node v16.13.2
- npm 8.1.2
- yarn 1.22.17
- Git/Wechat
- Microsoft edge
[Api 文档地址]
- (https://pro.ant.design/zh-CN/docs/overview)(Ant Design Pro 文档总览)
- (https://procomponents.ant.design/components)(模板组件文档)
- (https://www.showdoc.com.cn/1824645173761431/8414274620688955)(私有整体说明文档访问密码为：666666)
一定要先看 说明文档
数据表字段参考 数据字典
登录统一使用 认证Api
后台管理使用 后台Api
登录页面
欢迎界面
工作台页面
用户列表页面
云工程页面
项目测试页面
增长分析页面
查询表格页面
项目使用方法：
This project is initialized with Ant Design Pro. Follow is the quick guide for how to use.
Install node_modules:
npm installor
yarnAnt Design Pro provides some useful script to help you quick start and build with web project, code style check and test.
Scripts provided in package.json. It's safe to modify or add additional script:
npm startnpm run buildnpm run lintYou can also use script to auto fix some lint error:
npm run lint:fixnpm testYou can view full document on our official website. And welcome any feedback in our github.
- 快速上手
- 目录结构
- 常用配置
- 路由
- 页面跳转
- HTML 模板
- 使用 Mock 数据
- 整合 Dva
- 运行时配置
- Umi UI
- 安装与体验
- 目录结构
- 路由与页面
- 布局和组件
- Mock 和连调
- 区块
- TodoList-初始化与列表
- TodoList-服务端获取数据
- TodoList-使用 Model
- TodoList-数据共享
- TodoList-总结
- 去除多余的内容
- Logo 和文字替换
- 封装网络请求
- 使用 Git 版本控制
- 登录
- 用户信息
- 退出
- 首页统计
- 用户列表
- 禁用与启用
- 用户添加
- 用户更新
- 封装添加和更新
- 工程文件列表
- 上架与推荐
- 添加工程文件页面
- 处理文件分类
- 阿里 OSS 简介
- 封装 OSS 上传
- 集成富文本编辑器
- 富文本编辑器集成阿里 OSS 上传
- 完成文件添加
- 文件编辑页面
- 优化富文本编辑器
- 完成文件更新
- 项目列表
- 添加项目页面
- 项目测试分类
- 完成项目添加
- 项目测试时间
- 服务调用次数
- 完成更新
- 数据分析列表
- 添加分析页面
- 增长分析类型
- 增长分析状态的修改
- 增长分析权限
- 增长分析更新
- 表格数据列表
- 添加表格页面
- 处理表格数据分类
- 记录调度时间
- 更新配置
- 轻服务
- 部署上线
- 域名解析
- HTTPS 证书
创建目录并进入目录:
$ mkdir umijs
$ cd umijs
创建项目:
$ yarn create @umijs/umi-app
安装依赖:
$ yarn
启动项目:
$ yarn start
部署发布:
$ yarn build
本地验证:
$ yarn global add serve
$ serve ./dist
.editorconfig 编辑器配置文件
.gitignore Git 忽略文件
.prettierignore 格式化代码时忽略的文件
.prettierrc 格式化代码的配置
tsconfig.json typescript 配置文件
typings.d.ts typescript 类型定义文件
hash
配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存。
base
设置路由前缀，通常用于部署到非根目录。
publicPath
配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以。
outputPath
指定输出路径。
title
配置标题
history
配置 history 类型和配置项。
targets
配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。
proxy
配置代理能力。
theme
配置主题，实际上是配 less 变量。
routes
配置路由。
在配置文件中通过 routes 进行配置，格式为路由信息的数组:
export default {
routes: [
{ exact: true, path: '/', component: 'index' },
{ exact: true, path: '/user', component: 'user' },
],
}
常用配置:
routes: [
{ path: '/', component: '@/pages/index' },
{ path: '/list', redirect: '/user/one' },
{
path: '/user',
component: '@/layouts/index',
wrappers: [
'@/wrappers/auth',
],
routes: [
{path: '/user/one/:id?', component: '@/pages/index', title: '用户页面一'},
{path: '/user/two', component: '@/pages/user', title: '用户页面二'},
{component: '@/pages/404'}
]
},
{component: '@/pages/404'}
],
声明式跳转:
<Link> 和 <NavLink> 进行跳转:
import { Link } from 'umi';
...
<Link to="/user">用户中心</Link>
<Link to="/user">首页</Link>
命令式跳转:
import { history } from 'umi';
// 跳转到指定路由
history.push('/list');
// 带参数跳转到指定路由
history.push('/list?a=b');
history.push({
pathname: '/list',
query: {
a: 'b',
},
});
// 跳转到上一个路由
history.goBack();
默认模板的位置是: /node_modules/@umijs/core/lib/Html/document.ejs
但是不要去修改默认的模板, 因为在 node_modules 目录下的文件不会进入版本库, 每次 npm install 都会重新生成 /node_modules 中的文件
可以新建 src/pages/document.ejs 作为模板文件
关闭 mock:
export default {
mock: false,
};
通过环境变量临时关闭:
$ MOCK=none umi dev
dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
创建路由组件:
import React from 'react';
const Dva = () => {
return (
<div>
dva
</div>
);
};
export default Dva;
创建 model :
export default {
namespace: 'tags', // model中的effect和reducer要通过命名空间调用，不要和其他model同名
state: { }, // state,跟react组件中的state差不多一个意思
effects: { }, // effect通常是调用服务端接口，后调用reducer更新state
reducers: { } // state通过reducer来更新
}
import { request } from 'umi';
const getData = async () => {
return request('/api/tags')
}
export default {
namespace: 'tags',
state: {
tagsList: []
},
effects: {
*fetchTags({payload, callback}, {put, call}) {
const response = yield call(getData, payload)
yield put({
type: 'setTagsList',
payload: response
})
}
},
reducers: {
setTagsList(state, { payload }) {
return {...state, tagsList: payload}
}
}
}
连接 Model 和 组件:
import React from 'react';
import {connect} from 'umi'
const Dva = (props: any) => {
const { dispatch } = props
const list = props.tags.tagsList.list || []
const getData = () => {
dispatch({
type: 'tags/fetchTags',
payload: {}
})
}
return (
<div>
<h3>dva</h3>
<button onClick={getData}>加载数据</button>
{
list.map((item, index) => {
return <p key={index}>{item.name}</p>
})
}
</div>
);
};
export default connect(({tags}) => ({ tags }))(Dva);
import { history } from 'umi';
// 动态添加路由
export function patchRoutes({ routes }) {
routes.unshift({
path: '/foo',
component: require('@/pages/user1').default,
});
// 由服务端返回
const extraRoutes = [
{path: '/server', component: require('@/pages/user2').default}
]
merge(routes, extraRoutes);
}
// 合并路由的方法
function merge(routes, extraRoutes) {
extraRoutes.map(item => {
routes.unshift(item)
})
}
// 覆盖默认渲染
export function render(oldRender) {
const isLogin = true
if (isLogin) {
oldRender()
} else {
history.push('/');
oldRender()
}
}
// 路由改变时候触发
export function onRouteChange({ matchedRoutes }) {
if (matchedRoutes.length) {
document.title = '融职 ' + (matchedRoutes[matchedRoutes.length - 1].route.title || '');
}
}
创建一个新项目:
$ yarn create @umijs/umi-app
安装 Umi UI:
yarn add @umijs/preset-ui -D
创建目录并进入:
$ mkdir antd_pro
安装:
$ yarn create umi
安装依赖:
$ yarn install
启动:
$ yarn start