Home page architecture design
Page structure Definition
- On the left navigation bar, the content is displayed on the right
- The Content displayed on the right is divided into Header, middle Content and lower Footer
Directory structure Definition
-
Define components package, add Footer, Header, NavLeft package respectively, add index.js file inside, import can be imported to the package level, the system will automatically find the index.js file under the package
-
Define the style package and add common.less file internally to define the global style
Grid system use
- The grid system has 24 columns
- In Antd, rows use Row components, columns use Col components, and columns have span attributes (span={length value} is written into the SPAN attribute). The total Col span under the same Row is 24
Calc calculation method is used
- Clac () is a dynamically computed length value in LESS
- Any length value can be computed using the CLAC () function
- Calc (100vh): Vh means 1%, and 100vh means 100%
Examples use:
Width :clac(100%-50px) // Indicates that the width attribute is 100% of the entire layout minus 50px lengthCopy the codeAbout the less
- Less is the pre-editor
- Under div there is a tag, want to set the style of a and div, in less can be nested at the time of definition
/ / CSS div {... } div a{... } //less div{... a:{ ... }}Copy the code- Less can use defined variables
@colorA:'red'
div{
color:@colorA
a:{
color:black
}
}
Copy the code### Left navigation bar content
Add the Assets folder to the public folder and place the logo-ant. SVG image
Note: a public file is a build file that stores content after a build, usually with static resources inside. The contents of a public file are accessed directly from the root directory
Example code home page header content
Jsonp can be used to solve cross-domain problems (cross-domain is cross-domain, cross-port, cross-protocol)
Use the setInterval function to refresh the time information in real time and call the JSONP method in the AXIos package to send the request and make the callback according to the Promise
The Router 4.0
React Router4.0 Describes the basic concepts of React Router4.0
Version 4.0 does not require routing configuration, everything is a component
-
React-router: basic routing packet
Router core API provides some router core apis, including Router,Route,Switch, etc
-
React-router-dom: browser-based routing (including react-router)
Provides BrowserRouter HashRouter, Route, Link, NavLink
NPM install react-router-dom –save or yarn add react-router-dom
-
React-router-dom core usage
HashRouter and BrowserRouter
Route: path, exact, component, render
Note: The exact attribute represents the exact match. Only when the path matches completely, can the corresponding component be loaded
-
NavLink is used in menus as menu navigation, Link hyperlink navigation
eg1.
import {Link} from 'react-router-dom';
const Header=()=>{
<header>
<nav>
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/three'>Three</Link></li>
</nav>
</header>
}
Copy the code- Definition: values: enclosing props. Match. Params. Number
<Link to={{pathname:'/three/7'}}>Three #7</Link>
Copy the code- You can also pass a location object in the TO property, as in:
{pathname:'/',search:' '.hash:' ',key:'abc123',state:{}}
Copy the code- Switch- Select a Route that meets the requirements and find the first matching content from top to bottom
<Switch>
<Route path='/admin/ui/buttons' component={Buttons}/>
<Route path='/admin/ui/models' component={Models}/>
<Route path='/admin/ui/loading' component={Loading}/>
</Switch>
Copy the code- Redirect
<Redirect to="/admin/home">
Copy the codeReact Router4.0 Demo
-
4.0 Basic Routing function DEMO implementation – Mixed componentization [Route and Link on the same page]
A HashRouter wraps both a Link and a Router and must have only one child inside it
The route address is set through the TO attribute of the Link component. The Route component uses the path attribute to match routing addresses to render components in the component.
-
Actual code
-
4.0 Basic Routing function DEMO implementation – Configuration [Extract Route to a separate JS file]
Configuration Implements the routing function
Create home.js with ul->li->Link navigation component inside, and write {this.props. Children} in the area where you want to display the routing content to load the information passed internally when calling the home.js component
Embedded routines by
To implement nested routines in Main, add {this.props. Children} in Main to render the internal information, and add a Link component to jump
Then delete the component property and add the render property to render the page. The render property should be a function that returns the Main component (with the Route property inside for Route rendering).
Note:
Render ()=>{}; render ()=>{}; render ()=>{}; If you do not add curly braces, write the returned component directly. ES6 arrow function default arrow after the content is return
-
Gets the value of the dynamic route
Set the route link to jump to in main.js
import React,{Component} from 'react';
import {Link} from 'react-router-dom';
class Main extends Component{
render() {return(
<div>
this is Main.<br/>
<Link to="/main/test-id"</Link><br/> <Link to="/main/456"> embedded routines by 2 < / Link > < hr > < / hr > {this. Props. Children} < / div >). }}export default Main;
Copy the codeTo get the defined dynamic routing information in info.js, run {this.props.mate.params. Route name}
import React,{Component} from 'react';
class Info extends Component{
render() {return(< div > this is test the dynamic routing function value of dynamic routing is {this. Props. Match. Params. Value} < / div >). }}export default Info;
Copy the code-
Adding a Default Route
Add the react-router-dom Switch component to wrap the Route component to set only one Route from top to bottom
Add a Route component with no path property to the last position inside the Switch component as the default Route
NoMath.js
import React from 'react';
class NoMatch extends React.Component{
render() {return( <div> 404 Not Found </div> ); }}export default NoMatch;
Copy the codeProject routing actual combat development
When users access the project, the input URL needs to have corresponding output, but when it is output as the whole file, there are altogether three cases: login, details page, and home page. Therefore, we need to write the entry file router.js for the project and import it in index.js
The router file defines the way to use routes as HashRouter
Since we want to access the full route with a login page, a details page, and a home page, the router file needs to define the root component App. App.js has nothing inside but {this.props. Children}, which is used to house the child components. {this.props. Children} {this.props. Children} {this.props.
Conclusion: To use Route to display component information, you must call {this.props. Children} to display the component’s page
Display the content section of the Admin component using {this.props. Children} Route in router.js
/src/admin.js
import React from 'react';
import { Row, Col } from 'antd';
import Header from './components/Header';
import Footer from './components/Footer';
import NavLeft from './components/NavLeft';
import Home from './pages/home';
import './style/common.less'
class Admin extends React.Component{
render() {return(
<Row className="container">
<Col span={6} className="nav-left">
<NavLeft/>
</Col>
<Col span={18} className="main">
<Header/>
<Row className="content"> {/* <Home></Home> */} {this.props.children} </Row> <Footer/> </Col> </Row> ); }}export default Admin;
Copy the code{item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} {item.title} To jump to {item.key}
UI menu components (Andt UI components)
Button component
- Importing the Card Component
import {Card} from 'antd'
Copy the code- The title attribute is used to label the title above the card
<Card title="Basic components"></Card>
Copy the code
The Button component
- Introducing the Button component:
import {Button} from 'antd'
Copy the code-
The type attribute value
Primary indicates the primary button
Leaving type out indicates the default style button
Bootstrap indicates the dashed button
Danger stands for danger button
-
The disable attribute value indicates the disable button
-
The icon property value represents the button icon style
Plus means plus
Danger stands for danger button
Delete: delete
Search for
Download indicates to download
-
The shape property represents the shape of the button
Circle means circle
-
Loading property {true} indicates loading (the button cannot be clicked)
-
The Button Group is the button.group component, which is used to indicate that the contained Button component is a Group
-
The size property represents the component size
Small Small button component
Default Default size button component
Large large button component
Radio components
- Introducing the Rodio component:
import {Radio} from 'antd'
Copy the code- The external Radio component needs to be wrapped with the radio.group component, and the value of the internal Radio component can be obtained through the external component object (via E.target.value).
Supplementary knowledge
When the internal information of the Route page exceeds the current page size, a scroll bar will appear, and the left navigation bar will scroll along with it, with empty packets below the navigation bar
The solution
When the definition of main in common.less adds overflow:auto to indicate that the rendered page scrolls automatically when it is taller than the current screen
Frame component -Modal basic component
- The introduction of Modal:
import {Modal} from 'antd';
Copy the code-
Model component Properties
The title property is displayed as a title
The visible attribute parameter for {true | false}, is true, according to is false is not displayed
The onCancel attribute value is a function that performs the method executed when the × or Cancel option of the modal box is clicked
-
The content filled inside the Model will serve as the body content of the template box
-
knowledge
When the component’s onClick value is this.handleName (the function name), it is automatically called from the start and cannot be passed as an argument. When passing a parameter, you need to turn the contents of onClick into an arrow function that returns the calling method of the parameter so that the function is executed when clicked and the method is called by passing the parameter
If you want to pass the parameter as the key of the object, you need to wrap it with []. If you do not wrap the key directly, it will be regarded as a variable and an error will be reported
-
Model Custom footer implementation
Whether the visible property {true} or {false} implementation of the Model component is displayed
The okText property of the Model component sets the display of the OK option
The cancelText property of the Model component sets the Cancel option to display the content
-
Model top 20px popbox implementation
Set the distance to 20px from the top with the style attribute value {{top:20}}
-
Model horizontal center implementation
Set the style name using the wrapClassName of the Model component
Retrieve the values of the user name and password
AntD uses the getFieldDecorator property to read the username and password and use it directly, and must create an object/Form through form.create () before we can use getFieldDecorator
Enclosing props. Form. GetFieldDecorator AntD has encapsulated, fixed grammar, remember
const { getFieldDecorator } = this.props.form;
Copy the codeThe getFieldDecorator is used as follows, where rules are defined within rules
<FormItem>
{
getFieldDecorator('userName',{
initialValue:' ',
rules:[
{
required:true,
message:'User name cannot be empty'
},
{
min:5,max:10,
message:'Length out of range'
},
{
pattern:new RegExp('^\\w+$'.'g'),
message:'Username must be alphanumeric',
}
]
})(
<Input prefix={<Icon type="user"/>} placeholder="Please enter user name"/>
)
}
</FormItem>
Copy the codeThere must be the following sentence. Create the Form with form.create () and pass the component in so that getFieldDecorator is recognized or an error is reported
// The key is to recognize getFieldDecorator by creating an object/Form with form.create () and passing the component into itexport default Form.create()(FormLogin);
Copy the codeEffect input information
- /getFieldValue is a method of the Object object, form, that gets all the values in the form
- ValidateFields ()=> validateFields ()=>
HandleSubmit = () =>{//getFieldsValue is a method of the object form that gets all the values in the formletuserInfo = this.props.form.getFieldsValue(); / / validateFields method is to check the information is in line with the requirements, check is a cycle, with () = > this. Props. Form. ValidateFields ((err, values) = > {if(! err){ message.success(`${userInfo.userName}Congratulations, you login successfully! Current password:${userInfo.userPwd}`)}}}Copy the codeCheckBox Remembers the password
Be sure to declare valuePropName:’ Checked ‘in getFieldDecorator to check the Checkbox button by default
<FormItem>
{
getFieldDecorator('remember',{
valuePropName:'checked',
initialValue:true} (<Checkbox > remember the password </Checkbox>)} <a href="#" style={{float:'right'}}> Forget password </a> </FormItem>Copy the codeAdd icon
Use the prefix = {}
<Input prefix={<Icon type="user"/>} placeholder="Please enter user name"/>
<Input prefix={<Icon type="lock"/>} placeholder="Please enter your password"/>
Copy the codeThe overall effect is shown as follows:
registered
Contact address
When setting the range of contact addresses, the maximum number of lines, the minimum number of lines: autoSize={} in the request is an object. Const rows = {minRows:2,manRows:6}; autoSize={rows } ; Was established. AutoSize ={minRows:2,manRows:6} will report an error. AntD official documentation is as follows:
<FormItem label="Contact Address"{... formItemLayout}> { getFieldDecorator('address',{
initialValue:Olympic Park, Haidian District, Beijing
})(
<TextArea
autosize={rowObject}
/>
)
}
</FormItem>
Copy the codeThe effect is as follows:
The date shown
Run the showTime command with format= ‘YYYY-MM-DD HH: MM :ss’ to display the date and time
<FormItem label="Birthday"{... formItemLayout}> { getFieldDecorator('birthday',{
initialValue:moment('2018-08-08')
})(
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
/>
)
}
</FormItem>
Copy the codeAs shown in figure
Upload the picture
-
In the actual project, it is different from now
Use your interface to replace action = “/ / jsonplaceholder.typicode.com/posts/” in content
The server saves the image to the server and returns the image address of the previous server. We display the image address in the IMG SRC file
AntD uploads avatars using.jpg image format
GetBase64 = (img, callback)=>{const reader = new FileReader(); reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
handleChange = (info) => {
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
this.getBase64(info.file.originFileObj, imageUrl => this.setState({
userImg:imageUrl,
loading: false,})); } } <FormItem label="Avatar"{... formItemLayout}> { getFieldDecorator('userImg',{
})(
<Upload
listType="picture-card"
showUploadList={false}
action="//jsonplaceholder.typicode.com/posts/"onChange={this.handleChange} > {this.state.userImg? <img src={this.state.userImg} />:<Icontype="plus"/>}
</Upload>
)
}
</FormItem>
Copy the codeForms – Basic forms
Load before sending the request
// Load before sending the requestif(options.data && options.data.isShowLoading ! = =false){
loading = document.getElementById('ajaxLoading'); //block displays loading loading.style.display ='block';
}
Copy the codeDisable loading after the request is successful
// Stop loading after the request succeedsif(options.data && options.data.isShowLoading ! = =false){
loading = document.getElementById('ajaxLoading'); //none turns off loading loading.style.display ='none';
}
Copy the codeNote: If you do not want loading, set ShowLoading: false (true by default)
axios.ajax({
url:'/table/list', data:{params:{page:this.params.page}, // do not want to have loading. The default istrue
// isShowLoading :false,
}
}).then((res)=>{
})
}
Copy the codeForms – Advanced forms
The head fixed
Y :y axis, 240:y axis length
<Card title="Head fixation">
<Table
bordered
columns={columns }
dataSource={this.state.dataSource}
pagination={false}
scroll={{y:240}}
/>
</Card>
Copy the codeOn both sides of the fixed
Scroll ={{scroll={{x:1050}}
X 😡 axis, 1050: total width of x axis, sum of width
<Card title="Left side fixed" style={{margin: '10px 0'}}>
<Table
bordered
columns={columns2 }
dataSource={this.state.dataSource}
pagination={false}
scroll={{x:1050}}
/>
</Card>
Copy the codeSet Fixed: ‘left’ under the title bar; Fixed: ‘right’
const columns2 = [
{
title: 'id',
dataIndex: 'id',
width:80,
fixed:'left'
},
{
title: 'Username',
dataIndex: 'userName',
fixed:'left',
width:80,
},
{
title: 'gender',
dataIndex: 'sex',
render(sex){
return sex == 1 ? 'male' : 'woman'
},
width:80,
},
{
title: 'birthday',
width:120,
dataIndex: 'birthday'
},
{
title: 'Early rise time',
dataIndex: 'time',
width:80,
},
{
title: 'address',
width:120,
fixed:'right',
dataIndex: 'address',},]Copy the codeIf there is a gap in the middle, add the title type
Installing a plug-in
React-draft-wysiwyg: text editor plug-in
Draftjs-to-html: a text-to-HTML plug-in
yarn add react-draft-wysiwyg draftjs-to-html --save
Copy the codeCity Management Page
Enable the city-popbox function
- For the above components, add the Modal function of clicking a button
[Open city] button: Listen for the onClick event and call this.Handleopencity () to display the popbox
state = {
list:[],
isShowOpenCity:false} // Enable city handleOpenCity = ()=>{this.setState({isShowOpenCity:true})}Copy the code