Все в технологическом сообществе Chaoca:
1. Что такое ant-design-pro
Ant Design Pro — это интерфейсное/дизайнерское решение среднего уровня на уровне предприятия. типовые шаблоны/бизнес-компоненты/вспомогательные ресурсы для проектирования. , чтобы еще больше расширить возможности «пользователей» и «дизайнеров» в процессе проектирования и разработки продуктов среднего и конечного уровня на уровне предприятия.
Короче говоря, antd-pro — это полный интерфейсный каркас, основанный на UI-фреймворке ant-design.
Перед использованием antd-pro студенты-разработчики должны получить базовые знания о ES2015+, React, UmiJS, dva, g2, antd и React Router v4, которые обеспечат необходимую основу для вашей работы по разработке.
== В вашей локальной среде должны быть установлены yarn (или npm), node и git. В этой главе будет использоваться редактор кода Visual Studio, который необходимо установить локально. ==
2. Локальная установка
Способ 1: установка git
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project
npm install //安装依赖
npm start //运行项目
Способ 2. Используйте строительные леса ant-design-pro-cli
Установите интегрированный инструмент ant-design-pro-cli глобально, а затем вы сможете создавать проект напрямую, используя только профессиональные новые
npm install ant-design-pro-cli -g //全局安装脚手架
mkdir pro-demo && cd pro-demo //在新目录下
pro new //新建antd-pro
npm start //运行项目
==Здесь рекомендуется второй метод, так что вы можете собрать свой проект antd-pro локально в любое время==.
начать строить
(1) Откройте командную строку, введите npm install ant-design-pro-cli -g и дождитесь завершения установки.
(2) Создайте новую папку (каталог), откройте командную строку в папке, введите: mkdir pro-demo && cd pro-demo, эта команда создаст новую папку с именем pro-demo и войдет в папку с файлами.
(3) Введите команду pro new, и ваш проект antd-pro будет установлен в этот каталог (введите имя проекта, путь по умолчанию — текущий)
(4) Введите команду запуска npm
(5) После завершения запуска браузер автоматически откроется для доступаhttp://localhost:8000, если вы видите следующую страницу, это означает успех
3. Структура каталогов
ant-design-pro-cli создал для нас полную структуру разработки, предоставляя различные функции и ямы, охватывающие промежуточную и фоновую разработку.Ниже представлена структура каталогов всего проекта.
├── config # umi 配置，包含路由，构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
IV. Добавьте свой собственный бизнес-интерфейс
Мы видим, что текущий проект antd-pro представляет собой пустой фреймворк.Я считаю, что вы дорожите внешними интерфейсами, которые должны хотеть, чтобы их страницы появились в проекте немедленно, давайте начнем прямо сейчас!
Теперь мы снова откроем наш проект, используя дружественный редактор Visual Studio Code, для разработки. Открываем проект и входим в консоль: npm start: Дождитесь окончания запуска:
1. Создайте новый маршрут
маршрутизация: В настоящее время все маршруты в скаффолде управляются единообразно через config.ts. В конфигурацию umi мы добавили некоторые параметры, такие как имя, значок, hideChildrenInMenu, полномочия, чтобы помочь в создании меню. в:
- имя и значок представляют собой текст и значок сгенерированного пункта меню соответственно.
- hideChildrenInMenu используется для скрытия дочерних маршрутов, которые не нужно отображать в меню. Для использования см. пошаговую настройку формы.
- hideInMenu может скрыть этот маршрут в меню, включая подмаршруты.
- полномочия используются для настройки полномочий этого маршрута.Если они настроены, они будут проверять полномочия текущего пользователя и решать, отображать ли их.
Меню: Меню генерируются из config.ts. Если вашему проекту не нужно меню, вы можете установить menuRender={false} в src/layouts/BasicLayout.tsx.
Добавьте новую информацию о маршрутизации в файл config/config.ts (и, возможно, в файл js, в зависимости от того, выберете ли вы TypeScript или javaScript):
routes: [
{
path: '/',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{ //这个就是新添加的路由，它含有一个子页面Page2
path: '/test',
name: 'test',
icon: 'bars',
routes: [{
path: '/test/page2',
name: 'MyTest',
component: './Page2',
}]
},
{
component: './404',
},
]
2. Создайте новую страницу
Создайте новый Page2.jsx в каталоге pages
import React from 'react';
const MyPage = (props) => (
<h2>我的页面</h2>
);
export default MyPage;
Сохраните и просмотрите следующее содержимое на странице, чтобы указать на успех:
3. Напишите компоненты пользовательского интерфейса
По мере роста приложения вам нужно будет разделить элементы пользовательского интерфейса на несколько страниц (или использовать их несколько раз на одной странице).В dva вы можете извлечь эту часть в компоненты.
Давайте напишем компонент MyTest, готовый реализовать страницу отображения карточки.
Создайте новый файл component/MyTest/index.js:
import React, { Component } from 'react';
import { Card } from 'antd';
const { Meta } = Card;
export default class MyTest extends Component {
render() {
return (
<div style={{ padding: '0 24px', minHeight: 500, display: 'flex',margin:'auto',justifyContent:'center' }}>
<Card
hoverable
style={{ width: 480, margin: 20 }}
cover={<img alt="example" src={require('./img/ship.jpg')} />}
>
<Meta title="那时候我只会想自己想要什么，从不想自己拥有什么" description="生命就像一盒巧克力，结果往往出人意料" />
</Card>
<Card
hoverable
style={{ width: 480, margin: 20 }}
cover={<img alt="example2" src={require('./img/aa.jpg')} />}
>
<Meta title="希望是一个好东西，也许是最好的，好东西是不会消亡的" description="那是一种内在的东西， 他们到达不了，也无法触及的" />
</Card>
<Card
hoverable
style={{ width: 480, margin: 20 }}
cover={<img alt="example3" src={require('./img/gg.jpg')} />}
>
<Meta title="城镇中有那么多的酒馆，她却偏偏走进了我的酒馆" description="生命就像一盒巧克力，结果往往出人意料" />
</Card>
</div>
)
}
}
4. Измените страницу
Мы только что изменили страницу, чтобы:
import React from 'react';
import Mytest from '@/components/MyTest';
export default ()=>(
<Mytest />
)
Сохраните и запустите, и мы увидим:
Готово!
5. Использование диаграмм в antd-pro
Есть много предприятий, которые используют фреймворк классов диаграмм, и мы также можем использовать этот тип фреймворка для выполнения наших собственных функций в antd-pro.
G2: набор графического синтаксиса, основанный на визуальном кодировании, управляемый данными, с высокой простотой использования и расширяемостью, пользователям не нужно обращать внимание на различные утомительные детали реализации, различные интерактивные статистические данные могут быть построены с помощью одной диаграммы оператора.
ECharts: библиотека визуализации с открытым исходным кодом, реализованная на JavaScript, которая может без проблем работать на ПК и мобильных устройствах, совместима с большинством современных браузеров (IE8/9/10/11, Chrome, Firefox, Safari и т. д.). облегченная ZRender, высокоуровневая библиотека векторной графики, предоставляет интуитивно понятные, интерактивные и настраиваемые диаграммы визуализации данных.
Мы рекомендуем использовать ECharts здесь, потому что документация более подробная, популярность сообщества относительно высока, и информации будет больше.
1. Создайте новый маршрут
routes: [
{
path: '/',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{
path: '/test',
name: 'test',
icon: 'bars',
routes: [{
path: '/test/page2',
name: 'MyTest',
component: './Page2',
},
{ //新建一个图表页面的路由
path: '/test/page1',
name: 'MyChart',
component: './Page1',
}]
},
{
component: './404',
},
]
2. Создайте новую страницу
import React from 'react';
import Pie from '@/components/Echart/Pie'; // @ 表示相对于源文件根目录
import Map from '@/components/Echart/Map';
import Bar from '@/components/Echart/Bar';
export default () => (
<div style={{ display: 'flex',justifyContent:'center' }}>
<Bar/>
<Pie />
<Map />
</div>
);
3. Напишите компоненты пользовательского интерфейса
Начнем с написания компонента Bar для построения гистограммы.
Создайте новый файл component/Echart/Bar.js:
import React, { Component } from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入地图相关
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/component/toolbox';
class Bar extends Component {
componentDidMount() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mapBar'));
// 绘制图表
myChart.setOption({
backgroundColor: '#fff',
legend: {},
tooltip: {},
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]});
}
render() {
return (
<div id="mapBar" style={{height:550,width:520,marginRight:20}}></div>
);
}
}
export default Bar;
Сохраните и запустите, мы увидим, как диаграмма появляется на нашей только что созданной странице. Таким же образом создаем еще диаграммы и можно увидеть:
5. Настройки меню
Откройте файл src\locales\zh-CN\menu.js и добавьте информацию о меню:
'menu.test':'我的页面',
'menu.test.MyTest':'我的卡片',
'menu.test.MyChart':'我的图表',
Вы можете видеть, что меню вступило в силу:
6. Основные настройки стиля
Может быть, наши клиенты-сокровища спросят. Все примеры проектов antd-pro, которые мы видели, — это боковые панели. Почему ты оказался в верхнем меню, маленький монстр? Посмотрим:
Откройте config\defaultSettings.js, вы можете изменить базовый стиль!
export default {
navTheme: 'light',
primaryColor: '#fff',
layout: 'sidemenu',
contentWidth: 'Fluid',
fixedHeader: false,
autoHideHeader: false,
fixSiderbar: false,
colorWeak: false,
menu: {
locale: true,
},
title: '小怪鹿前端',
pwa: false,
iconfontUrl: '',
};
7. Заключение
ant-design-pro как фронтенд, миддл и бэкенд решение, продвигаемое Ali, используется все большим количеством разработчиков.В этой главе рассказывается, как быстро создать собственный бизнес-интерфейс в проекте.Ему также нужны быть в src/models, src/ Создавайте соответствующие модели и сервисы в сервисах, а управление состоянием и данные запросов будут представлены вам в следующей главе, так что следите за обновлениями! , я надеюсь, что вы сможете попрактиковаться в содержании глав и добавить в фреймворк собственную полную страницу! ! !
Другие технические статьи по фронтенду, все в сообществе фронтенд-технологов Chaoca