Personal blog navigation page (click on the right link to open a personal blog): Daniel take you on technology stack

Below, we explain in detail how NoahV help developers to quickly enhance the efficiency of research and development.

NoahV the back-end engineers into a full-stack

1. Spreadsheet Component

In the operation and maintenance business, it is often used to show some form of operation and maintenance objects, operation and maintenance of a list of events (such as on-line task list, task list monitoring, alarm monitoring event list, etc.). However, operation and maintenance of forms and form the basis of the difference is that there are some operation and maintenance objects, shown in Figure 1, on-line template form, in addition to rendering the template list information on-line, but also according to the template name, creation time filter (Figure 1.b) on a specific template information to edit or delete operation (Figure 1.c). Therefore, operation and maintenance of business applications typically contain a table CRUD operations, this type of operation is simple, non-front-end for such personnel to use front-end developers still need some knowledge. We NoahV in the spreadsheet component has been further enhanced, data show a configuration, development, behavior data manipulation, so that non-front-end developers to easily get started.

Figure 1 on-line template form

Specific configuration look:

Figure 2 on the line template configuration table

columns: each column of the table data definition, corresponding to FIG. 1.a
url: url form data requested map 1.a
method: the requested data in tabular form, corresponding to FIG. 1.a
items: a table filter interaction map 1.b
action: table editing, deleting data exchange, map 1.c

The rear end of the separated first development model, the rear end of the front end of the need to provide data, but generally not the rear end of the development is completed, the front end of this time requires a fixed data structure to its own analog data . In fact, analog data is a very tedious work, such as the above table such applications, in our actual business scenarios, demand pretty much, analog data is a repetitive work. In NoahV, we will use NoahV Mockup tool to generate this type of repetitive applications.

noahv cli is our command-line tool , which contains NoahV Mockup module, the module has a command is noahv create command, when executed noahv create, interface name prompts for analog data, the interface name of a specific file path + file name composition, such as input api / table, automatically generated mockup api folder in directory table is created at the same time simulation data in the folder api.

Note: you need to install noahv cli command-line tool before using noahv create, use more detailed steps, please see our documentation center ( https://baidu.github.io/NoahV ).

2. Application layout

Form is a commonly used application front end, of course, there are some applications, such as forms, a list of applications and so on, but these applications can not be a separate page. This page is a separate navigation, breadcrumbs, body content, some pages will have more complex layouts. So how front-end layout, a lot of developers who care about the issue.

2.1 - the next layout

We have a common page layout - lower layout, or left - right layout mode. Usually on the - on the head of navigation is at the layout, content is lower body, the head of navigation have a navigation and secondary navigation like, login / logout and so on. Layout demand for such common, we NoahV also made a unified package , navigation is configured, we look at the effect of drawing out the navigation configuration.

Figure 3 navigation application

corresponding to a logo, b corresponding to the navigation menu, c corresponding to login, d corresponding to the bread crumbs, e corresponding content thereof.

We look at the above interface to achieve through what configuration:

FIG 4 navigation configuration

FIG 4 logo is in the configuration of FIG 3.a logo
FIG navigation menu header is arranged 3.b
login is the login configuration of Figure 3.c
separator is configured to Figure 3.d breadcrumbs, hasBread can configure whether breadcrumbs

2.2 left - right layout

As mentioned earlier on in addition to - the layout of such, as well as left - right such cases, by definition, the navigation, the content of the right body, normally, the head of navigation and the navigation linkage has, in fact, Figure 4 navigation configuration, see a type type, there are two types of values of type: header / header-sidebar, can see the specific values corresponding to the case where the header is header-sidebar left navigation and navigation. We direct the FIG type 4 was changed to the value of header-sidebar, the layout is obtained under the map interface:

FIG 5 disposed left navigation

2.3 custom layout extension

Of course, the page layout is much more than these two cases, such as in the operation and maintenance scenario, we have a lot of interaction is a node services do operate, so there is left is the tree service, the right is the corresponding application service node. Such layout will need to front-end developers to develop their own custom layout. We did at the inlet of the page layout and the layout of the common custom layout of the switch , it can be switched between the two modes. We offer a self-defined layout file layout, if you need a custom mode put the files introduced, and you can use.

Scalability is NoahV tool distal engineers

Described in detail in the above table NoahV components, component layout how to help developers solve the efficiency problem, then we do from the architecture of NoahV a more comprehensive introduction. The following are NoahV architecture diagram:

Figure 6 NoahV Chart

From this schematic diagram see, NoahV consists of three parts, a first body is NoahV architecture, the second tool is NoahV third is NoahV specification.

NoahV architecture is the main part of the body, from the bottom dependency, assembly, scene, page, system. NoahV also provides project development phase of initialization, page creation, data modeling, as well as the FBI stage, the stage of publishing tools. Architecture and tools are subject to follow our development specifications, UI specification, API specification. Let's take a detailed description of these three parts NoahV.

1.NoahV architecture body

NoahV architecture is divided into five main layers, the first layer is a bottom layer NoahV dependent Vue JS. The second layer is a component, we usually say that the assembly is the basis of UI components, such as Element UI, Iview like component library, such as Input, Select and so on, the basic UI components, operation and maintenance operations with our operation and maintenance objects, operation and maintenance is our UI components, such as table components described earlier. In the operation and maintenance business, our dashboard, in addition to trend charts, bar charts like the base UI components UI components or operation and maintenance, but also trends assembly layout, dashboard display, etc., we put these several components together, it is our scene. Basic UI components, operation and maintenance UI components, the assembly is the scene of our page. Navigation, routing the respective pages bound, to form a complete system.

Next we look at the NoahV in the development, FBI, what are the publishing stage tool.

2.NoahV tools

2.1 development phase

When the project enters the development phase, we project Initialization tool to initialize the project, developers can create tools page according to their needs to create pages, components, etc., generated pages and components can be configured based approach to development of course, as with the developer can also be extended way to do custom development according to speak in front of the layout. In the development phase we also need to use simulation data, NoahV data simulation tools to automatically generate analog interface. With the data, you need a data request, a request for data, the market has Fetch, Axios and some efficient HTTP library, but in actual business scenarios, such as the support we need to deal with Restful interface, unknown jump, global loading and so on demand, which in Fetch, Axios is no packaging, so NoahV of NoahV request to these demands made certain integrated package, but also to provide hook entrance by request Hook, allows developers to request and after prior request was successful the data adaptation and conversion.

About NoahV Request to use finer details, please see our using the document ( https://baidu.github.io/NoahV/#/guide/request ).

2.2 FBI stage

When development is completed, before and after the FBI entered the stage. When the front-end and back-end of the FBI, the front end of projects usually have their own service, so when the call backend interface, there will be the problem of cross-domain data access, in order to solve cross-domain problems in the project initialization time, NoahV introduction of the proxy function , you can request the browser's proxy to the target Server, browser to bypass security restrictions origin policy, cross-domain data access, you can just add configuration in devProxy in. Finally, at the time of the publication's front-end release as static files, these files can be accessed directly through the back-end services, the proxy service is not required.

2.3 release stage

For compilation release phase of release, we combine Webpack and implement the development phase NoahV of Babel, the release build and compile phase, installed inside a common Webpack Loader and Weback Plugin to parse the appropriate documents, we also added as statistics like the Webpack Plugin, developers do not care about the specific compilation process . NoahV also provides an environment to configure Webpack with Typescript, so developers can choose their own needs to the required development environment according to their own projects.

3.NoahV specification

The above basic UI components, operation and maintenance UI components, scenes, pages and some of our related application development tool to generate follow our development specifications, UI specification, API specification. We use the command-line tools to initialize, and so create application page, when the page is created automatically add the route of the page. So the command-line tool to automatically create the page, page layout, page navigation, and page routing logic automated, standardized. At the same time, like components, page layout, page navigation, page routing these elements are configurable, these configurations for non-front-end developers to easily get started, developers can also do custom extension development according to the actual needs of the project.

The previous NoahV done so much introduction, let's look at how to use NoahV.

How to use NoahV

Before you begin, make sure that is properly installed and configured Node.js v6.5 or above.

how to install:

npm install noahv-cli -g
noahv –help

Run noahv -help, you will get the following screen:

Figure 7 noahv -help

Step one: initial page

mkdir project && cd project && noahv init
If you create a dashboard application uses: noahv init --dashboard
If you want to develop applications using Typescript: noahv init --ts
With noahv start to launch the application

After starting the application, you will see the following interface:

FIG 8 NoahV initialization interface

Step Two: Create a page

noahv create list

About noahv-mockup, noahv-request, noahv-test etc. please refer to our using the document ( https://baidu.github.io/NoahV/#/guide/quickstart ).

When creating a corresponding application when the console interface will be a corresponding prompt:

FIG 9 noahv create command

Step three: Publish Project

sh build.sh

Run the build script, the entire project will be automatically used to package compiled.

Attached Java / C / C ++ / machine learning / Algorithms and Data Structures / front-end / Android / Python / programmer reading / single books books Daquan:

(Click on the right to open there in the dry personal blog): Technical dry Flowering
===== >> ① [Java Daniel take you on the road to advanced] << ====
===== >> ② [+ acm algorithm data structure Daniel take you on the road to advanced] << ===
===== >> ③ [database Daniel take you on the road to advanced] << == ===
===== >> ④ [Daniel Web front-end to take you on the road to advanced] << ====
===== >> ⑤ [machine learning python and Daniel take you entry to the Advanced Road] << ====
===== >> ⑥ [architect Daniel take you on the road to advanced] << =====
===== >> ⑦ [C ++ Daniel advanced to take you on the road] << ====
===== >> ⑧ [ios Daniel take you on the road to advanced] << ====
=====> > ⑨ [Web security Daniel take you on the road to advanced] << =====
===== >> ⑩ [Linux operating system and Daniel take you on the road to advanced] << = ====

There is no unearned fruits, hope you young friends, friends want to learn techniques, overcoming all obstacles in the way of the road determined to tie into technology, understand the book, and then knock on the code, understand the principle, and go practice, will It will bring you life, your job, your future a dream.