Mall-Learning Organize-Basic-Commodity Service API-Brand Management (6)

1. Use reverse engineering to generate front-end and back-end codes

1. New brand management menu

Renren Rapid Development Platform-"System Management-"Menu Management-"Brand Management

2. Use the generated front-end code

In the directory: renren\main\resources\src\views\modules\product

copied to the front-end module

and then restart the front-end project, there will be a brand management page.

The header of the table is consistent with the comments of the table structure in the database.
There is no new addition and Delete function, this is because of the permission problem. In the front-end project, I want to do these functions and judge whether there is permission. Now the permission system is not added, so the button generated by default has no permission. In the brand code, there are new

and The function of batch deletion, which is used to v-if="isAuth('product:brand:save')"judge whether you have this permission, will display these functions if you have this permission, you can delete the permission judgment, or return it to true forever, or add permission (there is no development permission module yet)

Search for isAuth globally, modify it and return it to true

so that we have permission

Test adding, modifying, and deleting brands, it can be successful

2. Optimize the reverse generated brand management page

1. Display status switch optimization

// 1. In the display state, add a display button to refer to the custom column template of Table <template slot-scope="scope"></template>, and then use switch as a switch

v-model="scope.row.showStatus" binds the corresponding row status data

// 2. Modify the status button in the new or modified file

Modify the width of the table label


// 3. The address of the image that should be uploaded to the brand logo address needs to be modified to use the Upload component

// 4. First do the status display and non-display interaction with the background, modify the status of the data monitoring switch and use the Events of the switch event

2. Brand upload optimization (using Alibaba Cloud storage)

Monolithic application, ordinary distributed application (the file is uploaded to one server, if you request other servers, you will not be able to find the file, there will be problems, you can also record metadata to solve it, and the server corresponding to the corresponding request), optimization: the browser does not care Which goods and services are uploaded, all are uploaded to the file storage center, written in the same place, read in one place, you can build it yourself, or use cloud storage.
We use Alibaba Cloud's object storage OSS here.

Enable object storage.
Then follow the usage documentation.

For learning use only, simple use options:
select infrequent access, disable redundant storage, select public read, do not need server-side encryption, real-time log query: not enabled.

1) Alibaba Cloud Object Storage - common upload method

The user first uploads the picture to the application server (that is, the commodity service) through the browser, and then to the object storage.
Upload the picture to the gateway, transfer it to the commodity service, and the commodity service gets the byte stream of the file, uses java code to transfer the stream data of the picture to the object storage, and gets the address.

2) Alibaba Cloud Object Storage - direct transfer after server-side signature

Store the OSS account number and password in your own commodity service (application server). If the browser wants to upload data, first find a policy (upload policy) from our application server, and use the account number and password of Alibaba Cloud to generate a doctor's anti-counterfeiting signature , this signature contains the authorization token for our access to Alibaba Cloud, and the address and location we want to upload to Alibaba Cloud. After the browser gets this information from the server, the information does not have an account number and password, but has an account number and password. The generated anti-counterfeiting signature, the front end carries the anti-counterfeiting signature and the file to be uploaded to the Alibaba Cloud cloud storage service. Alibaba Cloud can verify the anti-counterfeiting signature by itself. If it is correct, Alibaba Cloud can receive the upload request and save the uploaded object. This way the files don't have to go through our server.

3) Create Alibaba Cloud object storage space (OSS integration)

Create ARM

https://github.com/alibaba/spring-cloud-alibaba

4) Create a third-party module zhenyanmall-third-party to save, third-party interface

Third-party interface services also need to be registered with the registration center and configuration center.

1: Create oss configuration, oss obtains the server signature

2: Configure the gateway

3: Write front-end single file upload and multi-file upload functions.

Copy the courseware "docs" code "front-end-"upload to the front-end project under src->components

Modify the path to your own

Modify the brand logo address in the brand addition or new function,

In OSS, set our bucket to be accessible across domains, and then it can be uploaded and displayed normally.

3. Form Validation & Custom Validator

1) Set the newly added or modified displayed data, and perform two-way binding

2) Let the address of the uploaded file be displayed as a picture

Use the custom display of the table component to display a certain column, use template, and put the brand logo in the brand list

Let's use the image display component in element

Found a problem, missing components<el-image>

Can use native image

Form validation uses the form validation function in form

Validate using the rules attribute

There is also a callback after the verification failure of the custom verification rule, specifying its own validator for each attribute

4. Back-end verification

JSR303: Java specification experience No. 303, which stipulates the standard of data verification.

• 1) Add validation annotations to Bean: javax.validation.constraints, and define your own message prompts
• 2), open the verification function @Valid

•  效果：校验错误以后会有默认的响应；
  

• 3) After the verified bean is followed by a BindingResult, the result of the verification can be obtained
• 4), group verification (complex verification of multiple scenarios)

•     1)、	@NotBlank(message = "品牌名必须提交",groups = {AddGroup.class,UpdateGroup.class})
  

•      给校验注解标注什么情况需要进行校验
  

•     2）、@Validated({AddGroup.class})
  

•     3)、默认没有指定分组的校验注解@NotBlank，在分组校验情况@Validated({AddGroup.class})下不生效，只会在@Validated生效；
  

• 5), custom verification

•  1）、编写一个自定义的校验注解
  

•  2）、编写一个自定义的校验器 ConstraintValidator
  

•  3）、关联自定义的校验器和自定义的校验注解
    *      @Documented
    * @Constraint(validatedBy = { ListValueConstraintValidator.class【可以指定多个不同的校验器，适配不同类型的校验】 })
    * @Target({ METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER, TYPE_USE })
    * @Retention(RUNTIME)
    * public @interface ListValue {
  

5. Backend unified exception handling

• @ControllerAdvice
• 1), write exception handling class, use @ControllerAdvice.
• 2) Use @ExceptionHandler to annotate exceptions that can be handled by the method.
• 3) Create an exception check code enumeration class BizCodeEnume in common