With the Nginx server, we can increase the speed of loading static resources.

Install Nginx

nginx: download

Update nginx.conf file

Update the listening port from 80 to 8089 and add the location directive into the server directive scope in the nginx-1.15.12\conf\nginx.conf file:

                    
                          1
2
3
4
5

                            listen       8089;
  location /images {
    alias  C:/Users/Dong/Desktop/java_shop_img;
    expires 1d;
  }

Test Configuration Syntax and Start Nginx

Run command prompt as Adnimistrator:

                    
                          1
2
3

                          cd C:\nginx-1.15.12
nginx -t
start nginx

Access an Uploaded Image

We can get the avatar path from the database:

Try it in browser:

                    
                          1

                          http://localhost:8089/images/1557230007/13.jpg

Update the profile.ftl Template in Controller Module

Copy and paste the following content into the profile.ftl template under the controller/src/main/resources/templates/user directory:

                    
                      
                        
                           1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

                        
                        
                          <html lang="en-NZ">
<@common.header/>
<body>
    ${errorMsg!}
    ${successMsg!}
    <h1>Edit Profile</h1>
    <form method="post" action="/user/profile">
        <div>
            <img alt="User Avatar" src="${(LOGGED_ON_USER.avatar)!}" width="300">
        </div>
        <div>
            <label>First Name:</label>
            <input type="text"  name="firstName" value="${(LOGGED_ON_USER.firstName)!}" required>
        </div>
        <div>
            <label>Last Name:</label>
            <input type="text"  name="lastName" value="${(LOGGED_ON_USER.lastName)!}" required>
        </div>
        <div>
            <label>Email:</label>
            <input type="text"  name="email" value="${(LOGGED_ON_USER.email)!}" required>
        </div>
        <div>
            <label>Introduction:</label>
            <textarea name="introduction">${(LOGGED_ON_USER.introduction)!}</textarea>
        </div>
        <div>
            <button type="submit">Update Profile</button>
        </div>
    </form>
    <h1>Edit Password</h1>
    <form method="post" action="/user/update-password">
        <input type="hidden"  name="email" value="${(LOGGED_ON_USER.email)!}" required>
        <div>
            <label>Current Password:</label>
            <input type="password" name="password" value="${password!}" required>
        </div>
        <div>
            <label>New Password:</label>
            <input type="password" name="newPassword" value="${newPassword!}" required>
        </div>
        <div>
            <label>Confirmed Password:</label>
            <input type="password" name="confirmedPassword" value="${confirmedPassword!}" required>
        </div>
        <div>
            <button type="submit">Update Password</button>
        </div>
    </form>
</body>
<@common.footer/>
</html>
                        
                      

                  

Try the Effect

                    
                          1

                          http://localhost:8080/user/profile

Buy me a coffee

10. Static Resources - Nginx Configuration

Contents