Java 互联网主流框架实战：SpringBoot+MyBatis+Vue 全栈开发
一、SpringBoot 2.7 核心开发
百度网盘\] Java互联网高级系统班【尚学堂】---**789it.top/13806/**
#### 1.1 项目初始化与配置
##### 1.1.1 快速创建项目
```bash
# 使用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 多环境配置
```yaml
# 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开发
```java
@RestController
@RequestMapping("/api/users")
public class UserController {
@GetMapping
public ResponseEntity> listUsers(
@RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "10") int pageSize) {
PageHelper.startPage(pageNum, pageSize);
List users = userService.listAll();
return ResponseEntity.ok(PageInfo.of(users));
}
@PostMapping
public ResponseEntity 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与分页
```java
// 1. 自定义Mapper接口
public interface UserMapper extends BaseMapper {
@Select("")
List 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 多数据源配置
```java
// 主数据源配置
@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 项目初始化
```bash
# 创建Vue项目
npm init vue@latest fullstack-frontend -- --typescript
# 添加必要依赖
cd fullstack-frontend && npm install
npm add axios pinia element-plus vue-router@4
```
#### 3.2 核心模块设计
```typescript
// 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>('/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
// Java后端统一响应体
@Data
@AllArgsConstructor
public class Result {
private int code;
private String message;
private T data;
public static Result 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 跨域与安全配置
```java
// 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 自动化构建
```yaml
# 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
# 后端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 后端缓存策略
```java
// 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 前端性能优化
```javascript
// 路由懒加载
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 电商核心模块设计
```scss
├── 用户中心
│ ├── 登录注册 (JWT+OAuth2)
│ ├── 个人资料
│ └── 地址管理
├── 商品系统
│ ├── SPU/SKU管理
│ ├── 商品搜索 (Elasticsearch)
│ └── 商品评价
└── 订单系统
├── 购物车
├── 订单创建
└── 支付集成
```
#### 7.2 典型业务实现
```java
// 订单创建服务
@Transactional
public OrderDTO createOrder(OrderCreateDTO dto, Long userId) {
// 1. 验证库存
List 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监控系统健康状态