用Vue+Spring Cloud优雅实现前后端分离 - 进阶功能解锁

Spring Cloud 和 Vue.js 单表管理功能的深度探索

前言

在构建单表管理系统时，充分利用 Spring Cloud 和 Vue.js 的强大功能至关重要。本博客将深入探讨如何解锁这些平台的更高级特性，包括分页、数据操作和更高级的技术，如短 ID 设计和 AOP 统一日志输出。

分页功能

分页是单表管理系统不可或缺的特性，它允许用户轻松浏览大量数据。使用 pagehelper 插件，我们可以轻松实现分页功能。

1. 集成依赖项

<dependency>
  <groupId>com.github.pagehelper</groupId>
  <artifactId>pagehelper</artifactId>
  <version>5.2.0</version>
</dependency>

2. 配置 MyBatis

<plugins>
  <plugin>
    <interceptor>
      <id>com.github.pagehelper.PageHelper</id>
      <properties>
        <property name="helperDialect" value="mysql" />
      </properties>
    </interceptor>
  </plugin>
</plugins>

3. Controller 中设置分页参数

@GetMapping("/users")
public PageInfo<User> listUsers(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
                             @RequestParam(value = "pageSize", defaultValue = "10") int pageSize) {
  PageHelper.startPage(pageNum, pageSize);
  List<User> users = userService.listUsers();
  return new PageInfo<>(users);
}

4. Mapper 接口中获取分页数据

<select id="listUsers" resultType="com.example.demo.entity.User">
  SELECT * FROM user
</select>

新增、修改、删除功能

新增、修改和删除操作是单表管理系统的基本操作。

1. 前端表单

创建前端表单以收集用户输入的数据。

<form id="user-form">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <input type="submit" value="提交">
</form>

2. Controller 方法

接收前端提交的数据，调用 Service 方法完成操作。

@PostMapping("/users")
public User addUser(@RequestBody User user) {
  return userService.addUser(user);
}

@PutMapping("/users/{id}")
public User updateUser(@PathVariable Long id, @RequestBody User user) {
  return userService.updateUser(id, user);
}

@DeleteMapping("/users/{id}")
public void deleteUser(@PathVariable Long id) {
  userService.deleteUser(id);
}

3. 前端请求

使用 axios 发送 HTTP 请求，处理服务器返回的结果。

短 ID 设计与实现

短 ID 可以缩短 URL 长度，改善用户体验。

1. Snowflake 算法

使用 Snowflake 算法生成唯一且有序的短 ID。

2. 后端集成

在新增、修改和删除操作时生成短 ID。

@Entity
public class User {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;

  @Column(unique = true)
  private String shortId;

  // 其他字段
}

@PostMapping("/users")
public User addUser(@RequestBody User user) {
  user.setShortId(shortIdGenerator.generate());
  return userService.addUser(user);
}

3. 前端使用

使用短 ID 代替长 ID 缩短 URL。

AOP 统一日志输出

AOP 切面可以拦截方法调用，在执行前后记录日志信息。

1. 集成依赖项

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-aop</artifactId>
</dependency>

2. AOP 切面

@Aspect
@Component
public class LoggingAspect {

  @Before("execution(* com.example.demo.controller.*.*(..))")
  public void logBefore(JoinPoint joinPoint) {
    System.out.println("方法调用前：" + joinPoint.getSignature().getName());
  }

  @AfterReturning(value = "execution(* com.example.demo.controller.*.*(..))", returning = "result")
  public void logAfterReturning(JoinPoint joinPoint, Object result) {
    System.out.println("方法调用后：" + joinPoint.getSignature().getName() + ", 结果：" + result);
  }

  @AfterThrowing(value = "execution(* com.example.demo.controller.*.*(..))", throwing = "exception")
  public void logAfterThrowing(JoinPoint joinPoint, Exception exception) {
    System.out.println("方法调用异常：" + joinPoint.getSignature().getName() + ", 异常信息：" + exception.getMessage());
  }
}

3. 启用 AOP

@SpringBootApplication
@EnableAspectJAutoProxy
public class DemoApplication {

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

总结

通过结合 Spring Cloud 和 Vue.js，我们可以解锁更强大的单表管理功能。分页、数据操作、短 ID 设计和 AOP 统一日志输出等特性显著提升了系统性能和用户体验。

常见问题解答

1. 分页时如何设置每页数据量？

   • 在 Controller 中使用 @RequestParam 注解设置每页数据量，默认为 10 条。

2. 如何自定义短 ID 生成策略？

   • 创建一个自定义的短 ID 生成器，实现 ShortIdGenerator 接口。

3. AOP 统一日志输出是否支持多种日志级别？

   • 是的，可以通过调整 @AfterReturning 和 @AfterThrowing 注解中的 loggingLevel 属性来指定日志级别。

4. 如何处理异常情况下的日志输出？

   • 使用 @AfterThrowing 注解拦截异常，并在日志中记录异常信息。

5. 有哪些其他方法可以缩短 URL 长度？

   • 使用 URL 缩短服务（如 Bitly）、自定义短 URL 映射或使用重定向。