1. Use GitHub to learn from 1-0-1

You can’t write programs, but you can’t have never heard of Github, someone might say, that Github? right right Yes, that’s github. Github, as the world’s largest gay dating site, is a place where we can start with a complete project and, bit by bit, witness the process from zero to one to improve our hard power. There are more than a few advantages to taking advantage of Github over a training institution (mainly savings).

If you want to understand the following, you need to do the following:

  • A Github account
  • A pair of eyes
  • One brain, half a brain

Download the resources we need from GitHub

This is mainly explained through the Newbee-Mall project. Disclaimer: I have nothing to do with the author of this project.

Search the Newbee-Mall project on the Github page


Click on the readme.md file, which is a detailed description of the project. Download the open source project by installing the package


3. Decompress newbee-mall.zip and open it with IDEA

Unzip newbee-mall.zip, open it with IDEA, and configure Maven to pull POM dependencies


4. Configure the mysql database and modify the application.properties configuration file

Create database newbee_mall_db


Find SQL files and import SQL in batches


SQL import results:


Configure the application. The properties


5. Start the project and visit the project address

Start the project


Visit the project at http://localhost:28089/


You can see that the project is already running, and then some people don’t know how to continue, don’t worry, let’s log in to the background management system to have a look.


Here we found that the account, password and verification code were needed. We found the table tb_newbee_mall_admin_user and found that there was an admin account. The password was encrypted and the encryption format should be MD5 encryption.

There is a small incident here, several times the input verification code has been wrong, resulting in login verification has not been able to pass, MY temper, directly verify the verification code to disable. We can see the requested interface address by accessing the URL. Double-click Shift global search /admin/login in idea directly, we will find the verification code here as expected, and comment out directly.


6. Use the file upload function to draw parallels

Enter the management interface, found to add product information function, add a test.


After adding:


Take the file upload function as an example. The previous configuration file was only the configuration of the database. Combined with the tb_newbee_MALL_GOOds_info table in the database, we can confirm that the file upload function is uploaded locally. The file path is then stored in the database.


Through the request sent by the browser, we can find the interface for uploading files, and check the page logic of the interface in IDEA.



As you can see, the /admin/upload/file interface requires a file parameter and then obtains the file path based on constants.file_upload_dic, creates a folder if it doesn’t exist and inserts the image into it.

Let’s test this interface with Postman.


And instead of returning a message, it’s returning a bunch of HTML code, and we’re going to look at that code, which was intercepted by the WebMVC interceptor, and we’re going to look at the interceptor code


Sure enough, block everything that starts with admin, change it, and add.excludePathPatterns(“/admin/”) to let go of all blocks. Let’s test it again.


We can see that the file was uploaded successfully, but we carefully observe the file path, found that it is different from the local storage path, how is it access to the local image? Again look at the interceptor code:

   public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.addResourceHandler("/upload/**").addResourceLocations("file:" + Constants.FILE_UPLOAD_DIC);

        registry.addResourceHandler("/goods-img/**").addResourceLocations("file:" + Constants.FILE_UPLOAD_DIC);

    }

Copy the code

If you look at this method, you’ll see that the interceptor intercepts all requests starting with /upload and directs them to the new path for local image access.

That’s all for this article. According to the above process, partners can fully understand an open source project step by step, improve their technical ability. If you feel good, please click three, is the biggest support for the author.