Fourth Round of Improvements to the Reddit Application – Reddit应用程序的第四轮改进

最后修改: 2015年 9月 5日

中文/混合/英文(键盘快捷键:t)

1. Overview

1.概述

In this tutorial, we’ll keep improving the simple Reddit application that we’re building as part of this public case study.

在本教程中,我们将继续改进作为本公共案例研究一部分而构建的简单Reddit应用程序。

2. Better Tables for Admin

2.为管理员提供更好的表格

First, we’ll bring the tables in the Admin pages to the same level as the tables in the user facing application – by using the jQuery DataTable plugin.

首先,我们将通过使用jQuery DataTable插件,使管理页面中的表格与面对用户的应用程序中的表格处于同一水平。

2.1. Get Users Paginated – the Service Layer

2.1.让用户分页–服务层

Let’s add the pagination enabled operation in the service layer:

让我们在服务层添加启用分页的操作。

public List<User> getUsersList(int page, int size, String sortDir, String sort) {
    PageRequest pageReq = new PageRequest(page, size, Sort.Direction.fromString(sortDir), sort);
    return userRepository.findAll(pageReq).getContent();
}
public PagingInfo generatePagingInfo(int page, int size) {
    return new PagingInfo(page, size, userRepository.count());
}

2.2. A User DTO

2.2.一个用户DTO

Next – let’s now make sure that we’re cleanly returning DTOs to the client consistently.

下一步–现在让我们确保我们干净利落地将DTO返回给客户。

We’re going to need a User DTO because – up until now – the API was returning the actual User entity back to the client:

我们将需要一个User DTO,因为–到目前为止–API是将实际的User实体返回给客户端。

public class UserDto {
    private Long id;

    private String username;

    private Set<Role> roles;

    private long scheduledPostsCount;
}

2.3. Get Users Paginated – in the Controller

2.3.让用户分页 – 在控制器中

Now, let’s implement this simple operation in the controller layer as well:

现在,让我们在控制器层也实现这个简单的操作。

public List<UserDto> getUsersList(
  @RequestParam(value = "page", required = false, defaultValue = "0") int page, 
  @RequestParam(value = "size", required = false, defaultValue = "10") int size,
  @RequestParam(value = "sortDir", required = false, defaultValue = "asc") String sortDir, 
  @RequestParam(value = "sort", required = false, defaultValue = "username") String sort, 
  HttpServletResponse response) {
    response.addHeader("PAGING_INFO", userService.generatePagingInfo(page, size).toString());
    List<User> users = userService.getUsersList(page, size, sortDir, sort);

    return users.stream().map(
      user -> convertUserEntityToDto(user)).collect(Collectors.toList());
}

And here’s the DTO conversion logic:

这里是DTO的转换逻辑。

private UserDto convertUserEntityToDto(User user) {
    UserDto dto = modelMapper.map(user, UserDto.class);
    dto.setScheduledPostsCount(scheduledPostService.countScheduledPostsByUser(user));
    return dto;
}

2.4. Front-end

2.4.前端

Finally, on the client side, let’s use this new operation and re-implement our admin users page:

最后,在客户端,让我们使用这个新的操作,重新实现我们的管理用户页面。

<table><thead><tr>
<th>Username</th><th>Scheduled Posts Count</th><th>Roles</th><th>Actions</th>
</tr></thead></table>

<script>           
$(function(){
    $('table').dataTable( {
        "processing": true,
        "searching":false,
        "columnDefs": [
            { "name": "username",   "targets": 0},
            { "name": "scheduledPostsCount",   "targets": 1,"orderable": false},
            { "targets": 2, "data": "roles", "width":"20%", "orderable": false, 
              "render": 
                function ( data, type, full, meta ) { return extractRolesName(data); } },
            { "targets": 3, "data": "id", "render": function ( data, type, full, meta ) {
                return '<a onclick="showEditModal('+data+',\'' + 
                  extractRolesName(full.roles)+'\')">Modify User Roles</a>'; }}
                     ],
        "columns": [
            { "data": "username" },
            { "data": "scheduledPostsCount" }
        ],
        "serverSide": true,
        "ajax": function(data, callback, settings) {
            $.get('admin/users', {
                size: data.length, 
                page: (data.start/data.length), 
                sortDir: data.order[0].dir, 
                sort: data.columns[data.order[0].column].name
            }, function(res,textStatus, request) {
                var pagingInfo = request.getResponseHeader('PAGING_INFO');
                var total = pagingInfo.split(",")[0].split("=")[1];
                callback({
                    recordsTotal: total,recordsFiltered: total,data: res
            });});
        }
});});
</script>

3. Disable a User

3.禁用一个用户

Next we’re going to build out a simple admin feature – the ability to disable a user.

接下来我们要建立一个简单的管理功能–禁用用户的能力

The first thing we need is the enabled field in the User entity:

我们首先需要的是User实体中的enabled字段。

private boolean enabled;

Then, we can use that in our UserPrincipal implementation to determine if the principal is enabled or not:

然后,我们可以在我们的UserPrincipal实现中使用它,以确定委托人是否已启用。

public boolean isEnabled() {
    return user.isEnabled();
}

Here the API operation that deals with disabling/enabling users:

这里是处理停用/启用用户的API操作。

@PreAuthorize("hasRole('USER_WRITE_PRIVILEGE')")
@RequestMapping(value = "/users/{id}", method = RequestMethod.PUT)
@ResponseStatus(HttpStatus.OK)
public void setUserEnabled(@PathVariable("id") Long id, 
  @RequestParam(value = "enabled") boolean enabled) {
    userService.setUserEnabled(id, enabled);
}

And here’s the simple service layer implementation:

这里是简单的服务层实现。

public void setUserEnabled(Long userId, boolean enabled) {
    User user = userRepository.findOne(userId);
    user.setEnabled(enabled);
    userRepository.save(user);
}

4. Handle Session Timeout

4.处理会话超时

Next, let’s configure the app to handle a session timeout – we will add a simple SessionListener to our context to control session timeout:

接下来,让我们配置应用程序处理会话超时–我们将向我们的上下文添加一个简单的SessionListener以控制会话超时

public class SessionListener implements HttpSessionListener {

    @Override
    public void sessionCreated(HttpSessionEvent event) {
        event.getSession().setMaxInactiveInterval(5 * 60);
    }
}

And here is the Spring Security configuration:

这里是Spring Security的配置。

protected void configure(HttpSecurity http) throws Exception {
    http 
    ...
        .sessionManagement()
        .invalidSessionUrl("/?invalidSession=true")
        .sessionFixation().none();
}

Note:

请注意。

  • We configured our session timeout to be 5 minutes.
  • When session expire the user will be redirected to login page.

5. Enhance Registration

5.加强注册

Next, we’ll enhance the registration flow by adding some functionality that was previously missing.

接下来,我们将通过增加一些以前缺少的功能来加强注册流程。

We’re going to only illustrate the main points here; to go deep into registration – check out the Registration series.

我们在这里只说明要点;要深入了解注册–请看注册系列

5.1. Registration Confirmation Email

5.1.注册确认电子邮件

One of these features missing from registration was that users weren’t promoted to confirm their email.

注册中缺少的这些功能之一是,没有促进用户确认他们的电子邮件。

We’ll now make users confirm their email address first before they’re activated in the system:

我们现在会让用户在系统中激活前先确认他们的电子邮件地址。

public void register(HttpServletRequest request, 
  @RequestParam("username") String username, 
  @RequestParam("email") String email, 
  @RequestParam("password") String password) {
    String appUrl = 
      "http://" + request.getServerName() + ":" + 
       request.getServerPort() + request.getContextPath();
    userService.registerNewUser(username, email, password, appUrl);
}

The service layer also needs a bit of work – basically making sure that the user is disabled initially:

服务层也需要做一点工作–基本上要确保用户最初被禁用。

@Override
public void registerNewUser(String username, String email, String password, String appUrl) {
    ...
    user.setEnabled(false);
    userRepository.save(user);
    eventPublisher.publishEvent(new OnRegistrationCompleteEvent(user, appUrl));
}

Now for the confirmation:

现在来确认一下。

@RequestMapping(value = "/user/regitrationConfirm", method = RequestMethod.GET)
public String confirmRegistration(Model model, @RequestParam("token") String token) {
    String result = userService.confirmRegistration(token);
    if (result == null) {
        return "redirect:/?msg=registration confirmed successfully";
    }
    model.addAttribute("msg", result);
    return "submissionResponse";
}
public String confirmRegistration(String token) {
    VerificationToken verificationToken = tokenRepository.findByToken(token);
    if (verificationToken == null) {
        return "Invalid Token";
    }

    Calendar cal = Calendar.getInstance();
    if ((verificationToken.getExpiryDate().getTime() - cal.getTime().getTime()) <= 0) {
        return "Token Expired";
    }

    User user = verificationToken.getUser();
    user.setEnabled(true);
    userRepository.save(user);
    return null;
}

5.2. Trigger a Password Reset

5.2.触发密码重置

Now, let’s see how to allow users to reset their own password in case they forget it:

现在,让我们看看如何让用户在忘记密码的情况下重置自己的密码。

@RequestMapping(value = "/users/passwordReset", method = RequestMethod.POST)
@ResponseStatus(HttpStatus.OK)
public void passwordReset(HttpServletRequest request, @RequestParam("email") String email) {
    String appUrl = "http://" + request.getServerName() + ":" + 
      request.getServerPort() + request.getContextPath();
    userService.resetPassword(email, appUrl);
}

Now, the service layer will simply send an email to the user – with the link where they can reset their password:

现在,服务层将简单地发送一封电子邮件给用户–其中有他们可以重置密码的链接。

public void resetPassword(String userEmail, String appUrl) {
    Preference preference = preferenceRepository.findByEmail(userEmail);
    User user = userRepository.findByPreference(preference);
    if (user == null) {
        throw new UserNotFoundException("User not found");
    }

    String token = UUID.randomUUID().toString();
    PasswordResetToken myToken = new PasswordResetToken(token, user);
    passwordResetTokenRepository.save(myToken);
    SimpleMailMessage email = constructResetTokenEmail(appUrl, token, user);
    mailSender.send(email);
}

5.3. Reset Password

5.3.重置密码

Once the user clicks on the link in the email, they can actually perform the reset password operation:

一旦用户点击了邮件中的链接,他们就可以真正执行重置密码的操作

@RequestMapping(value = "/users/resetPassword", method = RequestMethod.GET)
public String resetPassword(
  Model model, 
  @RequestParam("id") long id, 
  @RequestParam("token") String token) {
    String result = userService.checkPasswordResetToken(id, token);
    if (result == null) {
        return "updatePassword";
    }
    model.addAttribute("msg", result);
    return "submissionResponse";
}

And the service layer:

还有服务层。

public String checkPasswordResetToken(long userId, String token) {
    PasswordResetToken passToken = passwordResetTokenRepository.findByToken(token);
    if ((passToken == null) || (passToken.getUser().getId() != userId)) {
        return "Invalid Token";
    }

    Calendar cal = Calendar.getInstance();
    if ((passToken.getExpiryDate().getTime() - cal.getTime().getTime()) <= 0) {
        return "Token Expired";
    }

    UserPrincipal userPrincipal = new UserPrincipal(passToken.getUser());
    Authentication auth = new UsernamePasswordAuthenticationToken(
      userPrincipal, null, userPrincipal.getAuthorities());
    SecurityContextHolder.getContext().setAuthentication(auth);
    return null;
}

Finally, here’s the update password implementation:

最后,这里是更新密码的实现。

@RequestMapping(value = "/users/updatePassword", method = RequestMethod.POST)
@ResponseStatus(HttpStatus.OK)
public void changeUserPassword(@RequestParam("password") String password) {
    userService.changeUserPassword(userService.getCurrentUser(), password);
}

5.4. Change Password

5.4.更改密码

Next, we’re going to implement a similar functionality – changing your password internally:

接下来,我们要实现一个类似的功能–在内部改变你的密码。

@RequestMapping(value = "/users/changePassword", method = RequestMethod.POST)
@ResponseStatus(HttpStatus.OK)
public void changeUserPassword(@RequestParam("password") String password, 
  @RequestParam("oldpassword") String oldPassword) {
    User user = userService.getCurrentUser();
    if (!userService.checkIfValidOldPassword(user, oldPassword)) {
        throw new InvalidOldPasswordException("Invalid old password");
    }
    userService.changeUserPassword(user, password);
}
public void changeUserPassword(User user, String password) {
    user.setPassword(passwordEncoder.encode(password));
    userRepository.save(user);
}

6. Bootify the Project

6.启动项目

Next, let’s convert/upgrade the project over to Spring Boot; first, we will modify the pom.xml:

接下来,让我们把项目转换/升级到Spring Boot上;首先,我们将修改pom.xml

...
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.2.5.RELEASE</version>
</parent>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
        
    <dependency>
       <groupId>org.aspectj</groupId>
       <artifactId>aspectjweaver</artifactId>
     </dependency>
...

And also provide a simple Boot application for startup:

而且还提供一个简单的启动Boot应用程序

@SpringBootApplication
public class Application {

    @Bean
    public SessionListener sessionListener() {
        return new SessionListener();
    }

    @Bean
    public RequestContextListener requestContextListener() {
        return new RequestContextListener();
    }

    public static void main(String... args) {
        SpringApplication.run(Application.class, args);
    }
}

Note that the new base URL will now be http://localhost:8080 instead of the old http://localhost:8080/reddit-scheduler.

请注意,新的基础URL现在将是http://localhost:8080,而不是以前的http://localhost:8080/reddit-scheduler

7. Externalize Properties

7.属性的外部化

Now that we have Boot in, we can use @ConfigurationProperties to externalize our Reddit properties:

现在我们有了Boot,我们可以使用@ConfigurationProperties来外部化我们的Reddit属性。

@ConfigurationProperties(prefix = "reddit")
@Component
public class RedditProperties {

    private String clientID;
    private String clientSecret;
    private String accessTokenUri;
    private String userAuthorizationUri;
    private String redirectUri;

    public String getClientID() {
        return clientID;
    }
    
    ...
}

We can now cleanly use these properties in a type-safe manner:

现在我们可以以一种类型安全的方式干净地使用这些属性。

@Autowired
private RedditProperties redditProperties;

@Bean
public OAuth2ProtectedResourceDetails reddit() {
    AuthorizationCodeResourceDetails details = new AuthorizationCodeResourceDetails();
    details.setClientId(redditProperties.getClientID());
    details.setClientSecret(redditProperties.getClientSecret());
    details.setAccessTokenUri(redditProperties.getAccessTokenUri());
    details.setUserAuthorizationUri(redditProperties.getUserAuthorizationUri());
    details.setPreEstablishedRedirectUri(redditProperties.getRedirectUri());
    ...
    return details;
}

8. Conclusion

8.结论

This round of improvements was a very good step forward for the application.

这一轮的改进对应用来说是一个非常好的进步。

We’re not adding any more major features, which makes architectural improvements the next logical step – this is what this article is all about.

我们没有再增加任何主要功能,这使得架构改进成为下一个合乎逻辑的步骤–这就是本文的内容。