Use flying ice + DVA to quickly build a background system

Writing in the front

Recently we received such a demand, to write a background management system, time is very urgent, the product is only given a prototype, the function of the display, given the requirement is to pay attention to the function, use it to consider beautification. However, as the front end, how can we be satisfied with this? We just learned about flying ice a while ago, so we decided to use flying ice to build this system together. This article is just a record of the use of flying ice during this period of experience and encountered some pits.

To introduce

First to introduce fly ice, starting on the first website document put forward several key words, ali open source, fast building, improve the efficiency of development, rich material system, its purpose is to quickly set up a background management system, in the face of rich template and block can save developers a lot of time, the energy is mainly focused on the logical layer. Dva is based on the data flow scheme of Redux and Redux-Saga. This article will not introduce DVA too much, but I still recommend you to learn DVA. Next, follow me step by step to quickly build a management system.

iceworks

Iceworks is a GUI software developed by ICE to help developers quickly develop middle and back end front-end applications. You can use this GUI software to build your projects, modify, add pages, and package projects.

New project

The first step in creating a new project is to select a template. We can see that Flyice now provides us with nearly 50 templates, including React, Applets, Vue, Angular project templates. Here I choose the template of ICE Application Management. Ok, once the template is selected, click On The Use template and you can see that our project is in the process of a quick installation.

Introducing the dva

Next, without talking about directory structures, let’s introduce DVA.

• To install DVA, click Add Dependency in IceWorks.
• Start dVA and change the index.js in the SRC folder to look like this.

import Dva from 'dva';
// Load default global styles normalize,.clearfix, some mixin methods, etc
import '@icedesign/base/reset.scss';
import router from './router';

// Create a DVA instance
const app = new Dva();

// Import routes
app.router(router);

// Start the project
app.start('#ice-container');

Copy the code

The router.js file also needs to be modified a little bit

// Introduce position modification
import { HashRouter as Router, Switch, Route } from 'dva/router';

// Export the changes by default
export default ({ history }) => <Router history={history}>{routeChildren}</Router>;
Copy the code

So we’ve successfully introduced the DVA, which is the first step, and then the Model and Container Component. Create a new models folder and write dVA’s model file to it. Then connect the model via DVA’s Connect in the corresponding index.js component we need.

The new page

What we need to do when adding pages is simple

• Click on the New page and select the desired block. For example, a simple filterable list page.
  

  

• After selecting the block, we can preview the effect first. Then click Generate page.
  

  

• Then write the model corresponding to dVA in the Models.

The mock data

Mock data is unavoidable in development, and Feibin has provided us with a complete mock scheme.

• Create the mock/index.js file under the project root.
• How to write mock data

// mock/index.js
const foo = require('./foo.json');
const bar = require('./bar');

module.exports = {
  // Both GET and POST are supported
  '/api/users/1': foo,
  '/api/foo/bar': bar(),

  // Support standard HTTP
  'GET /api/users': { users: [1.2]},'DELETE /api/users': { users: [1.2]},// Support custom functions, API reference express4
  'POST /api/users/create': (req, res) = > {
    res.end('OK');
  },

  // Support parameters
  'POST /api/users/:id': (req, res) = > {
    const { id } = req.params;
    res.send({ id: id }); }};Copy the code

Configure navigation and theme colors

• The configuration navigation can be modified in the menuconfig.js file
• The theme color is changed in themeConfig in package.json

The directory structure

So our overall directory structure looks like this.

| | - components in the head and the navigation bar component, layout style of layout components and the common written here | - pages | - Home | - components responsible for the display block component files | -- Home. JSX | - Index. Js we can choose to write to connect here | - models | -- common. Js common model, such as a variety of enumeration data, General data | -- the userInfo. Js respective model | | - services API interface method - utils tools | -- index. | js entry documents -- menuConfig. Js | - the top and side navigation configuration The router. | - routerConfig JSX export routing component. Js routing configurationCopy the code

The form

Form and Field in @iceDesign/Base are recommended for Form class components, which are completely opposite to those recommended by the official website. The reason is that I find it really difficult to obtain data with formBinder, which is officially recommended, while the combination of Form and Field is simpler and easier to use.

The last

This article for the introduction of flying ice is not too in-depth, just a simple introduction to how to use, is a recommended advertorials ？？？？ Flying ice OF I think if we encounter such a project, might as well try flying ice, you can product and UI to choose the page, block, and even let him put up the page, and then we complete the function is good, so not beautiful! All right, that’s it. 😊