Front and rear ends unitary check program parameters

Parameter check scheme distal

Foreword

Because of my own back-end big data platform development, because front-end resources are relatively short, so we do a whole stack development engineer. Distal aspect of the selected entry of relatively simple and easy VUE, using the basic components of the base assembly ele, icon class is v-chart, echart, g2, g6 are used, the use of a graph-based order of priority is from front to back. Now I give links to related technical framework, for your reference.

Form validation

We often have some demand, that is, the front end when submitting a request to the back-end, you need to submit the form fields validation, such as the table name or the name field can not be empty, the maximum number of characters, etc. This demand can not exceed this species needs to be done check the rear end, the front end in order to have a good experience, but also to do the check, the user fill the province of hard information for so long, and finally was destroyed, but also through the backend interface look at the parameters illegal information, experience is not good.

Form component we basically use the form of components ele, simple to use, and also supports form validation function, but often examples of our needs than the official website provides much more complex, here I summed up a few local demand should be noted, that is easy to check parameter does not take effect places:

  • form no binding rules, form the model parameters and the inside of the object binding inconsistent.
  • form in remember to fill REF, associated with the form, and then remember function, filed in the write this $ refs [ 'form'] validata ((valid) => {});.. Thus, if the do not write, even if the correction test failed, or will submit a request backwards.
  • If you want to check in the form fields are not defined well in advance, or the entire object is copied directly to form, there are also likely to take effect or not is not accurate, particular attention here assignment and deep copy.

Experience Optimization parameters check

In the front end of the development process, sometimes there has been reassigned after the input box, the check result is still the old, so that the experience is very bad, by other operations, front-end code to change the assignment, rather than the interface operation to change the assignment, this time change and blur events are not triggered, the old check results also show naked in there. for example:

When we build a table requires the table name can not be blank check time we set a blur (set to change later found the same effect), we do not enter anything, then leave, this is the table name can not be blank check It is in effect, as shown below:

image
We click on the upper right corner of the table DDL to build, after a period of input sql inside, click on the resolution, after successfully resolved, it will parse out the value of the cover to the inside of the form table and field names, pay attention this time, the field names in the table of values and this was in line with our rules, but the result is still the last check, users also need to mouse over the input box, and then click the input box to leave, only to re-trigger the check, so the user experience is not super it is good.
image
So to study how to solve this problem, hard work pays off, the study ele api, when, in fact, have the relevant api, you can clear the check result last.
image
image

solution

As shown above, clearValidate is to remove the last check results form item, where the use of parameters, we use the time to remember that if a direct call this. $ Refs [ 'form']. ClearValidate () is a clear form items All the results of the last check form item, if only need to clear the old check results for a specific form item, you need to clear the name of a collection of individual tables can be filled into it. For example, I will reconsider the library and table name assignment, only the old Chu to check the results of these two tables in addition to the individual.

Backend parameter calibration program

We use back-end development springBoot or springMvc development, but also need to check the parameters, such as changing the time id is not empty ah, name not be waited in vain, although some of these can be guaranteed by the front end, but others can also be bypassed a front end, a rear end of the interface you direct request, deliberately irregular wear parameters, to destroy your system, your disk playing with other logging operations. Because even in the front have been carried out using calibration parameter limit, in order to rigor, still we need to do parameter checking in the back end. Of course, you can be in the code for each parameter code verification, is not empty, ah, ah is greater than 0, the string length limit ah, then you will find only a few hundred parameters will check the code line, seriously affecting the business logic, which in different ways and may also have duplicate codes. In response to this problem, we can check the parameters using annotation-based approach.

Annotated range of personal habits, if your service is only available to controller use, no external rpc provide services, then check your arguments layer controller layer is no problem, but if your service provide external services if there is rpc services may be considered a verification interface service loads, can guarantee the robustness of this code.

Parameters are divided into two kinds of a rear end, a single basic type of packaging, such as Long id, String name such; there is a custom object TableApproveBO, we need some values ​​may be verified inside the object. The following were to introduce:

A single basic type of packaging verifies

Note that two points: the need to add annotations validated over class, then add in the process of validation rules to the corresponding. As shown below:

image
image

Custom objects check

Custom objects may be used in different scenarios, validation rules are not the same, such as the new application form when required id can be null, but modify the application form when it is necessary to amend the application form of id can not be empty, but the two who is using the same business object, and this time we just need to check the packet. Specific steps are as follows:

Defined check packet

  • First, we need to define the packets of the packet checksum used, in fact, some of the air interface.
    image
  • Then define grouping validation rules and validation rules are in effect on the business object, if you do not define grouping, the default for all groups are to take effect.
    image
  • Finally, the method needs to be checked up plus the packet checksum is used, then the parameter validation rules will take effect.
    image
  • In order to give the front end a friendly tips, check parameters does not meet the needs of the thrown exception unified process, so do not satisfy the rule legible, you can see me throw exceptions defined parameters for two verification an exception handler, because different parameters validation framework, ran abnormal different, and thrown inside the encapsulated object is not the same format. Because I use multiple parameters validation framework, native validate-api thrown is ConstraintViolationException, but limited its support validation rules, such as for strings support notNull, but we really want is NotEmpty, you are not only only null, not empty string. It is necessary to use spring or hibernate after an extended check, this time an exception is not the same for each frame check thrown needs to be done differently.
    image

Remaining problem

Another case is self-defining the object within the two fields interdependent checksum that case, currently no suitable scheme, checking logic is a field is dependent on field values ​​of b, such a check needs I placed inside the code as part of the logic of the check, the check have not found a better program, if everyone has good program, you can share together. Field when a value of 1, b values ​​must be empty, field a value of 0 when, b value can not be empty, is this check, welcome to explore.

Guess you like

Origin juejin.im/post/5d4395fc6fb9a06b1b19a1b6