[百度网盘] Java互联网高级系统班【尚学堂】

Java 互联网主流框架实战：SpringBoot+MyBatis+Vue 全栈开发

一、SpringBoot 2.7 核心开发

百度网盘 Java互联网高级系统班【尚学堂】---789it.top/13806/

1.1 项目初始化与配置

1.1.1 快速创建项目

# 使用Spring Initializr创建项目
curl https://start.spring.io/starter.zip \
  -d dependencies=web,mybatis,mysql,lombok \
  -d javaVersion=11 \
  -d artifactId=fullstack-demo \
  -o fullstack-demo.zip

1.1.2 多环境配置

# application-dev.yml
server:
  port: 8081
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/dev_db
    username: dev_user
    password: dev123

# application-prod.yml
spring:
  datasource:
    url: jdbc:mysql://prod-db:3306/prod_db
    username: prod_user
    password: ${DB_PASSWORD} # 从环境变量读取

1.2 RESTful API开发

@RestController
@RequestMapping("/api/users")
public class UserController {
    
    @GetMapping
    public ResponseEntity<PageInfo<UserVO>> listUsers(
            @RequestParam(defaultValue = "1") int pageNum,
            @RequestParam(defaultValue = "10") int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<User> users = userService.listAll();
        return ResponseEntity.ok(PageInfo.of(users));
    }

    @PostMapping
    public ResponseEntity<UserVO> createUser(
            @Valid @RequestBody UserCreateDTO dto) {
        User user = userService.createUser(dto);
        return ResponseEntity.created(URI.create("/users/"+user.getId()))
               .body(userConverter.toVO(user));
    }
}

二、MyBatis-Plus 高级应用

2.1 动态SQL与分页

// 1. 自定义Mapper接口
public interface UserMapper extends BaseMapper<User> {
    @Select("<script>" +
            "SELECT * FROM user " +
            "<where>" +
            "   <if test='username != null'>AND username LIKE #{username}</if>" +
            "   <if test='status != null'>AND status = #{status}</if>" +
            "</where>" +
            "</script>")
    List<User> selectByCondition(@Param("username") String username, 
                               @Param("status") Integer status);
}

// 2. 分页插件配置
@Configuration
public class MyBatisConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

2.2 多数据源配置

// 主数据源配置
@Configuration
@MapperScan(basePackages = "com.demo.mapper.primary", 
           sqlSessionFactoryRef = "primarySqlSessionFactory")
public class PrimaryDataSourceConfig {
    
    @Bean
    @ConfigurationProperties("spring.datasource.primary")
    public DataSource primaryDataSource() {
        return DataSourceBuilder.create().build();
    }

    @Bean
    public SqlSessionFactory primarySqlSessionFactory(
            @Qualifier("primaryDataSource") DataSource dataSource) throws Exception {
        MybatisSqlSessionFactoryBean factory = new MybatisSqlSessionFactoryBean();
        factory.setDataSource(dataSource);
        factory.setMapperLocations(
            new PathMatchingResourcePatternResolver()
                .getResources("classpath:mapper/primary/*.xml"));
        return factory.getObject();
    }
}

// 从数据源配置（类似结构，更换包路径和Bean名称）

三、Vue 3 + TypeScript 前端架构

3.1 项目初始化

# 创建Vue项目
npm init vue@latest fullstack-frontend -- --typescript

# 添加必要依赖
cd fullstack-frontend && npm install
npm add axios pinia element-plus vue-router@4

3.2 核心模块设计

// src/api/user.ts
import axios from '@/utils/request'

export interface User {
  id: number
  username: string
  avatar?: string
}

export const fetchUsers = (params?: PaginationParams) => {
  return axios.get<PageResult<User>>('/api/users', { params })
}

// src/store/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    currentUser: null as User | null,
    token: ''
  }),
  actions: {
    async login(credentials: LoginForm) {
      const { data } = await authApi.login(credentials)
      this.token = data.token
      localStorage.setItem('token', data.token)
    }
  }
})

四、前后端交互规范

4.1 统一响应格式

// Java后端统一响应体
@Data
@AllArgsConstructor
public class Result<T> {
    private int code;
    private String message;
    private T data;
    
    public static <T> Result<T> success(T data) {
        return new Result<>(200, "success", data);
    }
    
    public static Result<?> error(int code, String message) {
        return new Result<>(code, message, null);
    }
}

// 前端axios拦截器
axios.interceptors.response.use(response => {
  const res = response.data
  if (res.code !== 200) {
    ElMessage.error(res.message || 'Error')
    return Promise.reject(new Error(res.message || 'Error'))
  }
  return res.data
}, error => {
  // 处理错误...
})

4.2 跨域与安全配置

// SpringBoot跨域配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

// JWT认证过滤器
@Component
public class JwtFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, 
                                  HttpServletResponse response, 
                                  FilterChain chain) {
        String token = request.getHeader("Authorization");
        if (StringUtils.hasText(token) && token.startsWith("Bearer ")) {
            Authentication auth = jwtProvider.getAuthentication(token.substring(7));
            SecurityContextHolder.getContext().setAuthentication(auth);
        }
        chain.doFilter(request, response);
    }
}

五、工程化与部署

5.1 自动化构建

# GitHub Actions示例
name: Java CI with Maven

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Set up JDK 11
      uses: actions/setup-java@v2
      with:
        java-version: '11'
        distribution: 'adopt'
    - name: Build with Maven
      run: mvn -B package --file pom.xml
    - name: Build Docker Image
      run: docker build -t fullstack-demo .

5.2 Docker部署

# 后端Dockerfile
FROM openjdk:11-jre-slim
COPY target/fullstack-demo.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

# 前端Dockerfile
FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

六、性能优化实践

6.1 后端缓存策略

// Redis缓存示例
@CacheConfig(cacheNames = "users")
@Service
public class UserServiceImpl implements UserService {
    
    @Cacheable(key = "#id")
    public User getById(Long id) {
        return userMapper.selectById(id);
    }
    
    @CacheEvict(allEntries = true)
    public void clearCache() {}
}

// 缓存配置
@EnableCaching
@Configuration
public class CacheConfig {
    @Bean
    public RedisCacheManager cacheManager(RedisConnectionFactory factory) {
        RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig()
            .entryTtl(Duration.ofMinutes(30))
            .serializeValuesWith(SerializationPair.fromSerializer(
                new Jackson2JsonRedisSerializer<>(Object.class)));
        return RedisCacheManager.builder(factory)
            .cacheDefaults(config)
            .build();
    }
}

6.2 前端性能优化

// 路由懒加载
const routes = [
  {
    path: '/user/:id',
    component: () => import('@/views/UserDetail.vue')
  }
]

// 图片懒加载指令
app.directive('lazy', {
  mounted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        el.src = binding.value
        observer.unobserve(el)
      }
    })
    observer.observe(el)
  }
})

七、项目实战案例

7.1 电商核心模块设计

├── 用户中心
│   ├── 登录注册 (JWT+OAuth2)
│   ├── 个人资料
│    └── 地址管理
├── 商品系统
│   ├── SPU/SKU管理
│   ├── 商品搜索 (Elasticsearch)
│   └── 商品评价
└── 订单系统
    ├── 购物车
    ├── 订单创建
    └── 支付集成

7.2 典型业务实现

// 订单创建服务
@Transactional
public OrderDTO createOrder(OrderCreateDTO dto, Long userId) {
    // 1. 验证库存
    List<OrderItem> items = checkStock(dto.getItems());
    
    // 2. 扣减库存
    reduceStock(items);
    
    // 3. 生成订单
    Order order = buildOrder(userId, items);
    orderMapper.insert(order);
    
    // 4. 清空购物车
    cartService.clearChecked(userId);
    
    // 5. 发送延迟消息检查支付状态
    rabbitTemplate.convertAndSend(
        "order.delay.exchange",
        "order.create",
        order.getId(),
        message -> {
            message.getMessageProperties()
                   .setDelay(30 * 60 * 1000); // 30分钟延迟
            return message;
        });
    
    return orderConverter.toDTO(order);
}

通过本全栈技术栈的学习，您将掌握：

1. SpringBoot企业级应用开发能力
2. MyBatis-Plus高效数据访问技巧
3. Vue3组合式API开发模式
4. 前后端分离工程实践
5. 云原生部署方案

建议开发过程中：

1. 使用Swagger维护API文档
2. 编写单元测试保证代码质量
3. 使用ELK收集分析日志
4. 通过Prometheus监控系统健康状态