[Analysis and design] the analysis and design of the function demand of the housing pictures

Business requirements

1. Intermediary practitioners to publish housing listings information, request to be able to upload the property image, the listing control in 8 photos.
2. During the release process, in order to avoid user error, request the property image after uploading and in the listing other information has not been submitted, even if accidentally refresh the page, upload the picture information to be able to retain.
3. To be able to instantly display thumbnail effects on the page after uploading the image.

Demand analysis

For image files, we generally save it in the server's hard disk, rather than stored in the database, just the path of the file is saved to the database, when needed, and then called after query. So we need to design a table to put the basic information of the picture.

A property is generally can have more than one picture, at the same time, according to the actual business qualification, a picture normal can only correspond to a property (avoid fake listings), so we in the design database, housing and pictures should be a one-to-many relationship. And our product demand is for the housing agent, a listing information on the site will certainly be repeated, the corresponding relationship between the property and the user is many-to-many relationship. Therefore, in order to facilitate user management of the picture, our picture Resource table should also be linked with the user, the corresponding relationship between the user and the picture resources should also be a one-to-many relationship.

Normal in the page, we will be in the same page to complete the basic information and image upload tasks, but the picture upload is generally in the <input type= "file" > control after the file is added, the entire large form before the submission of the image uploaded to the server to do processing, So the Avatar upload is done first, and then the general information submitted.

This is a problem: the two operations are step-by, how to correlate the two parts of the information, and also to prevent any unexpected situation in the middle, such as:

1. Upload the image, the results of the listing in the middle of other reasons do not release or later release, this situation once more, it is bound to cause a lot of garbage accumulation.
2. After uploading the image, the Web page is stuck and the page has to be refreshed, and the uploaded image information cannot be retrieved after the refresh, causing the user experience to drop.
3. Image is a priority to upload, which means that the listing information has not been established, the natural database of the House ID has not yet, how to establish the relationship between the picture and the property?

Functional design

To solve a series of problems, we can do this:

• First: When the image is uploaded, when the upload is successful, the picture information is written to the database, the database structure such as:
  
  Where the user ID and House ID are separate from the user table and the House information table to establish a FOREIGN key constraint (of course, as long as the logic has control, the database does not establish the same), the House ID is set to non-must lose. When we upload pictures, because the house information has not been established, so at the moment we are not able to get the house ID, but we can get the user ID, so that we can first let our image resources, and the user first to make an association, so that the benefit of the association is that later I can submit the listing information form, Check the user ID to make sure that there are no vulnerabilities or risks (tampering with others ' data).
• Second: After a successful write to the database, the data that is written is loaded into the list collection, the front end is returned through Ajax, the page is refreshed, and the image_id is set to the Alt attribute of , Image_ SRC is set to the SRC attribute so that the thumbnail can be displayed. Of course this is just one way, we can create a set of controls that <input type= "hidden" > to temporarily store the data. For subsequent form submissions, it is then uploaded to the backend.
• When the listing information form is submitted, the backend will first write the listing information to the database, and then verify that the image information just now is the same as the user ID of the current operation, after verification, you can insert house_id into the picture information table.
• This establishes the complete picture and form partial upload mechanism, guarantees the information integrity and the authenticity. The most important thing is to ensure that the image resources and housing resources can be properly linked.
• Review We actually have a little demand is not achieved, that is, when the user upload image results after the interruption of the release of the listing, what to do? In fact, the method is very simple, this only need to set up timed tasks, such as in the night run batch, the unified query database, no house_id picture information, both incomplete picture information, and then can be based on the query out of the SRC address, conversion cost to hard disk directory, and then delete them, There are two ways to delete, one is to delete the file directly in Java, and the other is to save the path of the file and then write to a text, then call the local command or script, and delete it. I am personally inclined to the latter, I am intuitive to think that such efficiency may be higher, but has not been tested, interested friends can try.

[Analysis and design] the analysis and design of the function demand of the housing pictures