基于Spring Boot与Vue的全栈应用开发实践
项目架构与技术选型
现代Web应用开发趋向于前后端一体化，提升协作效率并保障系统一致性。本项目采用Java生态中的Spring Boot作为后端框架，依托其自动配置与内嵌服务器特性快速搭建服务；前端则选用渐进式JavaScript框架Vue.js，结合组件化设计实现灵活高效的UI构建。
环境初始化
后端：Spring Boot工程创建
通过 Spring Initializr 生成项目骨架，选择核心依赖：
Spring Web：提供HTTP处理能力Spring Data JPA：简化数据库操作MySQL Driver：连接关系型数据库
项目结构如下：
src/
├── main/
│ ├── java/ # Java源码
│ │ └── com.example.demo
│ │ ├── DemoApplication.java
│ │ ├── controller/
│ │ ├── service/
│ │ ├── repository/
│ │ └── model/
│ └── resources/
│ ├── application.properties
│ └── data.sql
└── test/ # 测试代码前端：Vue项目搭建
使用 vue create 命令初始化项目，推荐启用以下功能：
Router：支持页面跳转Vuex：集中管理应用状态
启动本地开发服务器：
npm run serve后端核心实现
数据建模与持久化
定义实体类映射数据库表：
@Entity
public class Post {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private String body;
// getter/setter 省略
}数据访问层
声明仓库接口继承 JpaRepository，自动获得增删查改方法：
public interface PostRepository extends JpaRepository {
} 业务逻辑封装
服务层实现核心业务逻辑：
@Service
public class PostService {
@Autowired
private PostRepository postRepo;
public List<Post> getAllPosts() {
return postRepo.findAll();
}
public Post savePost(Post post) {
return postRepo.save(post);
}
public void deleteById(Long id) {
postRepo.deleteById(id);
}
}REST API 接口
控制器暴露标准接口：
@RestController
@RequestMapping("/api/posts")
@CrossOrigin(origins = "*") // 允许跨域访问
public class PostController {
@Autowired
private PostService postService;
@GetMapping
public ResponseEntity<List<Post>> getAll() {
return ResponseEntity.ok(postService.getAllPosts());
}
@PostMapping
public ResponseEntity<Post> create(@RequestBody Post post) {
return ResponseEntity.ok(postService.savePost(post));
}
@DeleteMapping("/{id}")
public ResponseEntity<Void> delete(@PathVariable Long id) {
postService.deleteById(id);
return ResponseEntity.noContent().build();
}
}前端交互开发
组件化页面设计
创建文章列表组件 PostList.vue：
<template>
<div>
<ul>
<li v-for="post in posts" :key="post.id">
<h4>{{ post.title }}</h4>
<p>{{ post.body.substring(0, 80) + '...' }}</p>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return { posts: [] };
},
mounted() {
axios.get('http://localhost:8080/api/posts')
.then(res => this.posts = res.data)
.catch(err => console.error('Load failed:', err));
}
};
</script>路由与导航
配置多页面路由，支持动态参数传递：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import PostList from '../views/PostList.vue';
import PostDetail from '../views/PostDetail.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: PostList },
{ path: '/post/:id', component: PostDetail, props: true }
]
});
export default router;状态管理（可选）
使用 Vuex 管理全局状态，例如用户登录信息：
// store/index.js
import { createStore } from 'vuex';
export default createStore({
state() {
return { user: null };
},
mutations: {
setUser(state, user) {
state.user = user;
}
},
actions: {
login({ commit }, credentials) {
// 模拟登录请求
commit('setUser', credentials);
}
}
});跨域与数据通信
由于前端运行在 http://localhost:8081，后端在 8080，需配置允许跨域访问。已在控制器上添加 @CrossOrigin 注解，或通过配置类统一设置。
前后端数据交换采用 JSON 格式，通过 axios 发送请求：
axios.post('/api/posts', { title: '新文章', body: '内容...' })
.then(res => console.log('成功创建:', res.data));部署与优化
后端打包部署
使用 Maven 构建可执行 JAR 包：
mvn clean package部署至服务器：
java -jar target/demo-0.0.1.jar前端生产构建
生成优化后的静态资源：
npm run build输出目录为 dist/，可部署至 Nginx、Apache 或 CDN 加速访问。
性能优化建议
- 缓存机制：在服务方法上添加
@Cacheable("posts")减少数据库压力。 - 懒加载组件：对非首屏组件使用异步导入，提升首屏加载速度。
- 代码压缩：构建时启用 Gzip 压缩与 Tree-shaking 优化。
测试策略
- 后端测试：使用 JUnit 5 编写单元与集成测试，验证服务逻辑。
- 前端测试：借助 Jest + Vue Test Utils 进行组件单元测试，或使用 Cypress 完成端到端行为验证。
