Vue+SpringBoot全栈项目搭建：手把手教你实现一个带分页和Swagger的CRUD应用

VueSpringBoot全栈开发实战从零构建企业级CRUD应用1. 全栈技术选型与项目初始化在当今快速迭代的互联网开发领域前后端分离架构已成为主流选择。Vue.js作为渐进式前端框架以其轻量级和响应式数据绑定特性成为构建用户界面的首选而SpringBoot凭借约定优于配置的理念极大简化了Java后端服务的搭建过程。两者结合能够充分发挥各自优势实现高效的全栈开发。技术栈核心组件前端Vue 3 Element Plus Axios后端Spring Boot 2.7 MyBatis-Plus Swagger构建工具Maven npm开发环境JDK 17 Node.js 16项目初始化步骤如下# 后端项目初始化 mvn archetype:generate -DgroupIdcom.example -DartifactIdfullstack-demo -DarchetypeArtifactIdmaven-archetype-quickstart -DinteractiveModefalse # 前端项目初始化 npm init vuelatest frontend cd frontend npm install后端项目结构建议采用分层架构src/main/java ├── com.example.demo │ ├── config # 配置类 │ ├── controller # 控制器 │ ├── entity # 实体类 │ ├── mapper # 数据访问层 │ └── service # 业务逻辑层2. 后端核心功能实现2.1 数据层配置与CRUD实现MyBatis-Plus作为MyBatis的增强工具提供了强大的单表CRUD操作支持。首先配置数据源和MP插件# application.yml spring: datasource: url: jdbc:mysql://localhost:3306/demo?useSSLfalse username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver实体类定义示例Data TableName(sys_user) public class User { TableId(type IdType.AUTO) private Long id; private String username; private String email; private LocalDateTime createTime; }Service层实现分页查询public interface UserService extends IServiceUser { PageUser pageUsers(int current, int size, String keyword); } Service public class UserServiceImpl extends ServiceImplUserMapper, User implements UserService { Override public PageUser pageUsers(int current, int size, String keyword) { QueryWrapperUser wrapper new QueryWrapper(); if (StringUtils.isNotBlank(keyword)) { wrapper.like(username, keyword).or().like(email, keyword); } return page(new Page(current, size), wrapper); } }2.2 RESTful API设计与Swagger集成良好的API设计应遵循RESTful规范同时提供完善的文档支持。Swagger配置如下Configuration EnableSwagger2 public class SwaggerConfig { Bean public Docket api() { return new Docket(DocumentationType.SWAGGER_2) .select() .apis(RequestHandlerSelectors.basePackage(com.example.demo.controller)) .paths(PathSelectors.any()) .build() .apiInfo(apiInfo()); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title(全栈Demo API文档) .description(VueSpringBoot全栈开发示例) .version(1.0) .build(); } }控制器示例RestController RequestMapping(/api/users) Api(tags 用户管理) public class UserController { Autowired private UserService userService; GetMapping ApiOperation(分页查询用户) public ResultPageUser listUsers( RequestParam(defaultValue 1) int page, RequestParam(defaultValue 10) int size, RequestParam(required false) String keyword) { return Result.success(userService.pageUsers(page, size, keyword)); } }3. 前端工程化开发3.1 Vue项目架构与组件设计现代前端开发强调模块化和组件化。推荐的项目结构src/ ├── api/ # API请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── utils/ # 工具函数 └── views/ # 页面组件Element Plus表格组件与分页整合template el-table :datatableData stylewidth: 100% el-table-column propusername label用户名/el-table-column el-table-column propemail label邮箱/el-table-column el-table-column label操作 template #defaultscope el-button sizesmall clickhandleEdit(scope.row)编辑/el-button /template /el-table-column /el-table el-pagination v-model:currentPagepagination.current :page-sizepagination.size :totalpagination.total current-changefetchData / /template script setup import { ref, onMounted } from vue import { getUserList } from /api/user const tableData ref([]) const pagination ref({ current: 1, size: 10, total: 0 }) const fetchData async () { const res await getUserList({ page: pagination.value.current, size: pagination.value.size }) tableData.value res.data.records pagination.value.total res.data.total } onMounted(fetchData) /script3.2 前后端联调与跨域处理开发环境下常见的跨域解决方案后端配置CORSConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .allowedHeaders(*); } }前端代理配置vue.config.jsmodule.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }Axios请求封装示例// api/user.js import request from /utils/request export function getUserList(params) { return request({ url: /users, method: get, params }) } // utils/request.js import axios from axios const service axios.create({ baseURL: /api, timeout: 5000 }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { return Promise.reject(new Error(res.message || Error)) } return res }, error { return Promise.reject(error) } ) export default service4. 高级功能实现与性能优化4.1 文件上传与下载SpringBoot处理文件上传PostMapping(/upload) public ResultString uploadFile(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.fail(请选择文件); } try { String fileName UUID.randomUUID() . FileUtil.extName(file.getOriginalFilename()); Files.copy(file.getInputStream(), Paths.get(/uploads).resolve(fileName)); return Result.success(/download/ fileName); } catch (IOException e) { log.error(文件上传失败, e); return Result.fail(上传失败); } }Vue前端实现template el-upload action/api/upload :on-successhandleSuccess :before-uploadbeforeUpload el-button typeprimary点击上传/el-button /el-upload /template script setup const beforeUpload (file) { const isLt10M file.size / 1024 / 1024 10 if (!isLt10M) { ElMessage.error(文件大小不能超过10MB) return false } return true } const handleSuccess (response) { if (response.code 200) { ElMessage.success(上传成功) } else { ElMessage.error(response.message) } } /script4.2 性能优化实践后端优化策略启用Gzip压缩添加缓存控制数据库查询优化# application.yml server: compression: enabled: true mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json min-response-size: 1024前端优化方案路由懒加载const routes [ { path: /users, component: () import(/views/UserList.vue) } ]组件按需引入import { ElButton, ElMessage } from element-plus export default { components: { ElButton }, methods: { showMessage() { ElMessage.success(操作成功) } } }生产环境构建优化# 安装分析插件 npm install --save-dev webpack-bundle-analyzer # 构建分析 npm run build --report5. 项目部署与持续集成5.1 后端部署方案SpringBoot应用打包与运行# 打包 mvn clean package -DskipTests # 运行 java -jar target/fullstack-demo-0.0.1-SNAPSHOT.jar --spring.profiles.activeprodDocker容器化部署# Dockerfile FROM openjdk:17-jdk-slim COPY target/fullstack-demo-0.0.1-SNAPSHOT.jar app.jar ENTRYPOINT [java,-jar,/app.jar]5.2 前端部署策略静态资源构建与Nginx配置server { listen 80; server_name example.com; location / { root /var/www/frontend/dist; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; } }CI/CD流程示例GitHub Actionsname: Backend CI/CD on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkoutv2 - name: Set up JDK 17 uses: actions/setup-javav2 with: java-version: 17 distribution: temurin - name: Build with Maven run: mvn -B package --file pom.xml - name: Docker build and push uses: docker/build-push-actionv2 with: push: true tags: user/repo:latest在实际项目部署中我们还需要考虑数据库迁移、环境变量管理、日志收集等运维问题。对于中小型项目使用Docker Compose可以简化部署流程version: 3 services: backend: build: ./backend ports: - 8080:8080 environment: - SPRING_DATASOURCE_URLjdbc:mysql://db:3306/demo - SPRING_DATASOURCE_USERNAMEroot - SPRING_DATASOURCE_PASSWORD123456 depends_on: - db frontend: build: ./frontend ports: - 80:80 db: image: mysql:8.0 environment: - MYSQL_ROOT_PASSWORD123456 - MYSQL_DATABASEdemo volumes: - mysql_data:/var/lib/mysql volumes: mysql_data: