All in the front hipcafe technology community:
What is Ant-Design-Pro
Ant Design Pro is an enterprise-class back-end front-end/Design solution. It adheres to the Design values of Ant Design and is committed to building up on the basis of Design specifications and basic components, extracting typical templates/business components/supporting Design resources. To further improve the experience of “users” and “designers” in the design and development process of enterprise-level background products.
In short, ANTD-Pro is a complete front-end scaffolding based on the Ant-Design UI framework.
Before using ANTD-Pro, you should know the basics of ES2015+, React, UmiJS, DVA, G2, ANTD, and React Router V4. This will give you the necessary foundation for your development work.
Your local environment requires yarn (or NPM), Node, and Git installed. This section will use the Visual Studio Code editor, which you will need to install locally. = =
2. Local installation
Method 1: Git installation
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project
npm install // Install dependencies
npm start // Run the project
Copy the codeMethod 2: Use ant-design-pro-CLI scaffolding
Install the integrated Ant-Design-Pro-CLI tool globally, and then just need Pro New to build the project directly
npm install ant-design-pro-cli -g // Install scaffolding globally
mkdir pro-demo && cd pro-demo // In the new directory
pro new / / new antd - pro
npm start // Run the project
Copy the codeThe second method is recommended so that you can build your ANTD-Pro project locally at any time.
Begin to build
(1) Open the CLI, enter NPM install ant-design-pro-cli -g, and wait for the installation to complete
(2) Create a folder (directory), open the cli in this folder, and enter mkdir pro-demo && CD pro-demo. The command will create a folder named pro-demo and go to the folder
(3) Enter the pro new command, it will install your antD-Pro project in this directory (enter the project name, the default path is current)
(4) Run the NPM start command
(5) After the startup is completed, the browser will automatically open to visit http://localhost:8000, and you will see the following page on behalf of success
3. Directory structure
Ant-design-pro-cli has generated a complete development framework for us, providing a variety of features and pits covering middle and back end development. The following is the directory structure of the whole project.
├─ Config # umi, Including Route, ├─ Public │ ├─ ├─ SRC │ ├─ Assets │ ├─ General Components │ ├─ ├─ Public │ ├─ Favicon │ ├─ SRC │ ├── Favicon │ ├─ General Components │ ├─ Public │ ├─ ├─ favicon │ ├─ public │ ├─ ├─ Favicon │ ├─ public │ ├─ │ ├─ │ ├─ General Components │ ├─ Public │ ├─ │ ├─ │ ├─ General Components # ├ ─ ─ e2e integration test cases │ ├ ─ ─ layouts # general layout │ ├ ─ ─ models # global dva model │ ├ ─ ─ pages # entrance and common business page template │ ├ ─ ─ services # │ backend interface service ├ ─ ─ utils # tool library │ ├ ─ ─ locales # internationalized resource │ ├ ─ ─ global. Less global style # │ └ ─ ─ global. Global JS ts # ├ ─ ─ tests # test tools ├ ─ ─ the README, md └ ─ ─ package. JsonCopy the codeAdd your own business interface
The current ANTD-Pro project is an empty framework. I’m sure you want to see your own page in the project immediately. Let’s get started!
We will now use Visual Studio Code, a friendly editor, to reopen our project for development. To open the project, console type: that horse start: wait for the run to complete:
1. Create a route
Route: at present, all routes in scaffolding are managed uniformly through config.ts. In UMI configuration, we added some parameters, such as name, icon, hideChildrenInMenu, authority, to assist in generating menus. Among them:
- Name and icon represent the text and icon of the generated menu item, respectively.
- HideChildrenInMenu Is used to hide child routes that do not need to be displayed in the menu. Usage you can view the configuration of the step form.
- HideInMenu can not show this route in the menu, including child routes.
- Authority Specifies the permission to configure the route. If the permission is configured, the current user’s permission will be verified and whether to display it.
Menu: The menu is generated according to config.ts. If your project does not need the menu, you can be in SRC/layouts/BasicLayout TSX set menuRender = {false}.
Add new routing information to the config/config.ts(or js file, depending on whether you choose TypeScript or javaScript) file:
routes: [
{
path: '/'.name: 'welcome'.icon: 'smile'.component: './Welcome'}, {// This is the new route, which contains a child page Page2
path: '/test'.name: 'test'.icon: 'bars'.routes: [{
path: '/test/page2'.name: 'MyTest'.component: './Page2',}}, {component: './404',},]Copy the code2. Create a page
Create page2.jsx in the Pages directory
import React from 'react';
const MyPage = (props) = > (
<h2>My page</h2>
);
export default MyPage;
Copy the codeSave. If the following information is displayed on the page, the save is successful:
3. Write the UI Component
As your application grows, you’ll need to share UI elements across multiple pages (or use them multiple times on one page), and in dVA you can split those elements into components.
Let’s write a MyTest Component to implement a card display page.
New components/MyTest/index. Js file:
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=" < span style={{width: 480, margin: 1em; 20}} cover={<img Alt ="example2" SRC ={require('./img/aa.jpg')} />} > <Meta title=" Hope is a good thing, maybe the best, </ > < span style={{width: 480, margin: 1em; 20}} cover={<img Alt ="example3" SRC ={require('./img/gg.jpg')} />} > <Meta title=" Description =" Life is like a box of chocolates, you never know what you're gonna get"Copy the code4. Modify the page
Let’s change the previous page to:
import React from 'react';
import Mytest from '@/components/MyTest';
export default() = > (<Mytest />
)
Copy the codeSave run and we’ll see:
And you’re done!
Use charts in ANTD-Pro
There are many businesses that use chart-like frameworks, and in ANTD-Pro we can use these frameworks to accomplish our own functions.
G2: A set of graphics syntax based on visual coding, data-driven, with high ease of use and scalability, users do not need to pay attention to all kinds of tedious implementation details, a single statement can build a variety of interactive statistical charts.
ECharts: An open source visual library using JavaScript, can run smoothly on PC and mobile devices, compatible with most of the current browser (IE8/9/10/11, Chrome, Firefox, Safari, etc.), the underlying rely on lightweight vector graphics library ZRender, providing intuitive, Interactive rich, highly customizable data visualization chart.
We recommend using ECharts here, because the documentation is more detailed, the community is more popular, and there will be more information.
1. Create a route
routes: [
{
path: '/'.name: 'welcome'.icon: 'smile'.component: './Welcome'}, {path: '/test'.name: 'test'.icon: 'bars'.routes: [{
path: '/test/page2'.name: 'MyTest'.component: './Page2'}, {// Create a route for the chart page
path: '/test/page1'.name: 'MyChart'.component: './Page1',}}, {component: './404',},]Copy the code2. Create a page
import React from 'react';
import Pie from '@/components/Echart/Pie'; // @ indicates the root directory of the source file
import Map from '@/components/Echart/Map';
import Bar from '@/components/Echart/Bar';
export default() = > (<div style={{ display: 'flex',justifyContent:'center' }}>
<Bar/>
<Pie />
<Map />
</div>
);
Copy the code3. Write the UI Component
Let’s start by writing a Bar Component that builds the Bar graph.
Create a components/Echart/ bar.js file:
import React, { Component } from 'react';
// Introduce the ECharts main module
import echarts from 'echarts/lib/echarts';
// Introduce map correlation
import 'echarts/lib/chart/bar';
// Introduce the prompt box and title component
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() {
// Initializes the echarts instance based on the prepared DOM
var myChart = echarts.init(document.getElementById('mapBar'));
// Draw a diagram
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;
Copy the codeSave and run, and we’ll see the chart appear on our new page. Using the same method, let’s create more diagrams and see:
5. Menu Settings
Open the SRC \locales\ zh-cn \menu.js file and add the menu information:
'menu.test':'My page'.'menu.test.MyTest':'My Card'.'menu.test.MyChart':'My chart'.Copy the codeYou can see that the menu is in effect:
Vi. Basic style Settings
In case our treasure front end asks, all the examples we’ve seen of antD-Pro projects are the sidebar, the little deer. Why is that the top menu? Let’s see:
Open config\ defaultsettings. js to modify the base style.
export default {
navTheme: 'light'.primaryColor: '#fff'.layout: 'sidemenu'.contentWidth: 'Fluid'.fixedHeader: false.autoHideHeader: false.fixSiderbar: false.colorWeak: false.menu: {
locale: true,},title: 'Little Monster Deer front'.pwa: false.iconfontUrl: ' '};Copy the code7. Conclusion
Ant-design-pro, as a front-end, middle and background solution promoted by Ali, has been used by more and more developers. This chapter introduces how to quickly build their own business interface in the project, and how to establish corresponding models and services in SRC/Models and SRC/Services. Stay tuned for status management and request data in the next section! I hope you can practice the chapter content and add your own complete page to the frame!!
More front-end technology articles in the front-end hipster tech community
