Back-end development front end – management platform

Premise: suitable for the back-end students want to build a set of management platform front end

Understand that many RD projects (especially management platforms) need to support both front and back end development. Most of the back-end students are usually in the processing of data, because of the different technology, do the front-end often cause more or less trouble to the back-end big cattle. Coupled with the evolution of front-end technology, react and VUE use, has increased the cost of learning. I’ve covered how a back-end can start a front-end project. Hope to help you build a management platform from 0 to 1 of the front part.

Selection of technology: Ant Design Pro (ANTD Pro) (Method of building management platform provided by Ant Financial)

Reasons for selection:

1. Because the technology stack is React, most of it conforms to the programming habit of manipulating data at the back end, and React is also one of the most popular front-end technologies. Facilitate subsequent front-end take over.
2. The other one is to introduce Ant Design to include all kinds of components so you don’t have to write CSS.
3. The framework of the management platform directly generated, we do not need to build from scratch. This section describes how to control routes and permissions.
4. The Ant Design Pro framework is used for most of the management platform construction;

Here’s how antD Pro operates and how react is written.

Note: New front-end concepts are required

• Arrow functions: (argu1, argu2…) Function (argu1, argu2) {}
• Let /const: The new variable definition, similar to var, can be explored further.

React environment setup

Step1: deploy the front-end environment (node environment)

Node environment (NVM is recommended to manage node installation)

Install the NVM

The curl - o - https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bashCopy the code

Associated global variables

touch ~/.bash_profile
Copy the code

Install the node

NVM install 10.4.0Copy the code

Check whether the installation is successful

node --version
Copy the code

Step2: use umi to build a react project

Overview: Umi integrates the installation mode of pro.ant. Design. You can run the following command to install the React environment

Liverpoolfc.tv: pro. Ant. The design/docs/gettin…

1. Generate projects with UMI

mkdir first-fe-demo
npm create umi
Copy the code

2. Select the ant – design – pro

Step3: Start the project

Note: all students who operate this project need to install the dependency file in the first step of getting the project

Install dependency files

npm install
Copy the code

Start the project

npm run start
Copy the code

2. Ant-design-pro analysis

1. Overview of files and directories

• Config: configuration items

  • Config /config.js: route configuration
  • Config /defaultSetting: Platform style Settings
  • Config /proxy: debugs IP address configurations

• SRC: where the code is written

  • SRC /assets: Places a static file, similar to an image
  • SRC/Components: Generic components
  • SRC/Layout: Project template (universal for multiple pages)
  • SRC/pages: pages
  • SRC /service: redux data request (don’t worry)
  • SRC/Models: Redux
  • SRC /utils: Generic method

2. Template Inheritance (SRC/Layout)

All template inheritance in SRC/layouts/BasicLayout JSX, want to change the frame style, modify the file The content of the red box is defined by the above documents.

React

1. React

React /setState/props/ lifecycle

• State: Everything in the component is updated with a change in state
• This.setstate ({XXX: 123}, function(){})
• Props: The method used by the props to pass data between components is this.props. XXX (same as state, but can only be changed by changing state)
• Life cycle: includes time to declare, pre-render, select and then, unregister components, etc. Select the appropriate time to call method or processing code, most commonly used as follows, backend students remember these two can deal with most of the development requirements.
  • Constructor: Define the initial state
  • CompontentDidMount: Page request data, such as operations

2. Page or component template

Each new project can start by copying this file (it is recommended to copy the following, this document will be added later) in SRC /page/ create a new folder, demo, and create two files: index.js and style.less

/* index.js */
import React, { Component } from 'react';
import { connect } from 'dva';
// Inherit the global template
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';

class Index extends Component {
  // Declare the component and place the state property
  constructor(props) {
    super(props);
    this.state = {
      show: 'hello world',}}/ / life cycle part, commonly used componentDidMount, see https://www.jianshu.com/p/46022f1cbbb3
  componentDidMount() {
    this.addRd();
  }

  / / function declaration section, note (a, b, c) = > {} is the meaning of the function (a, b, c) {}
  addRd = (a)= > {
    setTimeout((a)= > {
      this.setState({
        show: 'hello RDs',
      }, alert('success'));
    }, 2000);
  } 
  
  // Page rendering
  render() {
    return (
      <div className={styles.red}>
        {this.state.show}
      </div>); }}export default connect()(Index);
Copy the code

3. Configure front-end routes

Route configuration location: config/config.js file

Routing files are laid out with a list on the left, and can be layered down, similar to the sub-menu on the left.

4. Open the page

Like above, we configured the arrows point to the new path of (copy welcome) after save, open http://localhost:8000/welcome2

Note: Port 8000 will be selected by default. If 8000 is found to be occupied by the machine, the project will automatically specify a new port and inform us, possibly 8001 or other ports. Please check the log information output after startup.

The project runs normally (subsequent changes do not need to be restarted, and the project provides hot update function)

5. Joint adjustment with the back-end

Start the back-end service

Configure the back-end service address in config/proxy.js. The configuration method is similar to that of nginx. Note that cros is open across domains.

As shown in the figure, for example, we started the Web service under port 3000 and wrote the/API /test interface. The front-end project needs to call all requests for/API to the Web project on port 3000.

If the front-end address is used to directly access the interface, for example, localhost:8000/ API /test, the content of the back-end interface is normally returned.

To start code tuning, add code to the previous demo page, and pay attention to the following two points:

• Join request to introduce; Request is a request tool that functions like ajax before it;
• The request method is request().then(); Then write the operation after the request.

/* index.js */
import React, { Component } from 'react';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
// Introduce request (request interface method)
import request from '@/utils/request';
import styles from './style.less';

class Index extends Component {
  // Declare the component and place the state property
  constructor(props) {
    super(props);
    this.state = {
      show: 'hello world',}}/ / life cycle part, commonly used componentDidMount, see https://www.jianshu.com/p/46022f1cbbb3
  componentDidMount() {
    // this.addRd();
    // After the page is loaded, request the required data
    this.getData();
  }

  // Function declaration section
  addRd () {
    setTimeout((a)= > {
      this.setState({
        show: 'hello RDs',
      }, () => {alert('success')});
    }, 2000);
  }

  // [new] request back end service, return data
  getData = (a)= > {
    request('/api/test? mount=1', {
      method: 'GET'.data: {
        mount: 1,
      },
    }).then((res) = > {
       this.setState({show: res.data});   
    });
  }

  render() {
    return (
      <div className={styles.red}>
        {this.state.show}
      </div>); }}export default connect()(Index);
Copy the code

6. Login verification

Check the SRC/layouts/SecurityLayout JSX

In the componentDidMount method, write the request login method; First, a login interface needs to be added in the back-end project. You can check whether you are logged in to enter the function page or jump to the login page to log in.

Introducing Request (as described in 5)

Write request login login method, reset login state isReady:

componentDidMount() {
  request('/api/islogin', {}).then((res) = > {
    if(res.success) {
      this.setState({
        isReady: true}); }else {
      location.href = ""; }})}Copy the code

4. Introduce ANTD (Style Component)

1. Ant.design /docs/react/…

2. Select the component you want to use and copy the generated code below the component:

   Example: Select the Input box ant. Design/Components /…

// The file header imports the component
import {Input} from 'antd'

// Add the corresponding HTML code to the render method
  render() {
    return (
      <div className={styles.red}>
        <Input placeholder="Basic usage" />
      </div>)}Copy the code

3. Add events to allow users to trigger component interactions. Here’s how react binds events. The basic properties are all on + JS native event names (uppercase)

   Common event properties: onClick, onChange, onInput, onSelect

   Define an event method: onClick={() => {return ”}}

   render() {
     return (
       <div className={styles.red}>
         {this.state.show}
         <Input placeholder="Basic usage" onChange={(e)= > {
           this.setState({inputText: e.target.value})
         }} />
         <p>Input: {this.state.inputText}</p>
       </div>)}Copy the code

5. Project packaging

Execute in project root:

npm run build
Copy the code

Execution Result:

Also, after the packaging is complete, a./dist folder will be added to the root directory of the project, where the compiled front-end files will be stored.

Deploy the Dist folder to the server, and the project is complete.

** Reference: Live with Java project