做电影网站赚钱,设计欣赏心得体会,c 做网站怎么居中,电子商务网站建设与维护实训题库前言
在现代化Web应用开发中#xff0c;前后端分离架构已成为主流。本文将详细介绍如何使用Vue3作为前端框架#xff0c;SpringBoot作为后端框架#xff0c;实现一套完整的增删改查(CRUD)功能#xff0c;包含分页查询、条件筛选等企业级特性。
技术栈介绍 前端#xff1… 前言
在现代化Web应用开发中前后端分离架构已成为主流。本文将详细介绍如何使用Vue3作为前端框架SpringBoot作为后端框架实现一套完整的增删改查(CRUD)功能包含分页查询、条件筛选等企业级特性。
技术栈介绍 前端Vue3 Element Plus Axios 后端SpringBoot MyBatis-Plus 构建工具Vite (前端) Maven (后端)
一、环境准备与项目搭建
1.1 前端项目初始化
bash
复制
下载
npm init vuelatest vue3-springboot-crud
cd vue3-springboot-crud
npm install axios element-plus --save
1.2 后端项目搭建
使用Spring Initializr创建项目添加以下依赖 Spring Web MyBatis Framework Lombok MySQL Driver
二、核心功能实现
2.1 跨域解决方案
前后端分离开发首要解决跨域问题SpringBoot后端配置如下
java
复制
下载
Configuration
public class CrossConfig {private static final long MAX_AGE 24 * 60 * 60;Beanpublic CorsFilter corsFilter() {CorsConfiguration config new CorsConfiguration();config.addAllowedOrigin(*);config.addAllowedHeader(*);config.addAllowedMethod(*);config.setMaxAge(MAX_AGE);UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration(/**, config);return new CorsFilter(source);}
}
2.2 前端Axios封装
javascript
复制
下载
import axios from axios;
import { ElMessage } from element-plusconst http axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 50000
})// 请求拦截器
http.interceptors.request.use(config {config.headers[Content-Type] application/json;charsetutf-8const user JSON.parse(localStorage.getItem(user) || {})if (user.token) {config.headers[Authorization] Bearer ${user.token}}return config
})// 响应拦截器
http.interceptors.response.use(response {if (response.data.code ! 200) {ElMessage.error(response.data.message)}return response.data
}, error {ElMessage.error(error.message)return Promise.reject(error)
})export default http
三、分页查询实现
3.1 后端分页逻辑
java
复制
下载
PostMapping(/list_page)
public ResultPageResultUser listPage(RequestBody PageQueryUser query) {QueryWrapperUser wrapper new QueryWrapper();if (StringUtils.isNotBlank(query.getEntity().getName())) {wrapper.like(name, query.getEntity().getName());}int total userMapper.selectCount(wrapper);PageHelper.startPage(query.getCurrentPage(), query.getPageSize());ListUser list userMapper.selectList(wrapper);return Result.success(new PageResult(total, list));
}
3.2 前端分页组件
vue
复制
下载
templatediv classpagination-containerel-paginationv-model:current-pagequeryParams.currentPagev-model:page-sizequeryParams.pageSize:page-sizes[10, 20, 50, 100]layouttotal, sizes, prev, pager, next:totaltotalsize-changehandleQuerycurrent-changehandleQuery//div
/templatescript setup
import { reactive, ref } from vue
import http from /utils/requestconst queryParams reactive({currentPage: 1,pageSize: 10,name:
})const total ref(0)
const tableData ref([])const handleQuery async () {const res await http.post(/user/list_page, queryParams)tableData.value res.data.listtotal.value res.data.total
}
/script
四、完整CRUD实现
4.1 新增数据
java
复制
下载
PostMapping(/add)
public ResultString addUser(RequestBody User user) {user.setCreateTime(LocalDateTime.now());userMapper.insert(user);return Result.success(添加成功);
}
4.2 更新数据
java
复制
下载
PostMapping(/update)
public ResultString updateUser(RequestBody User user) {user.setUpdateTime(LocalDateTime.now());userMapper.updateById(user);return Result.success(更新成功);
}
4.3 删除数据
java
复制
下载
PostMapping(/delete)
public ResultString deleteUser(RequestBody ListLong ids) {if (ids ! null !ids.isEmpty()) {userMapper.deleteBatchIds(ids);}return Result.success(删除成功);
}
五、前端界面优化
5.1 表格与表单组件
vue
复制
下载
templatediv classapp-container!-- 查询表单 --el-form :inlinetrue classsearch-formel-form-item label用户名el-input v-modelqueryParams.name clearable clearhandleQuery //el-form-itemel-form-itemel-button typeprimary clickhandleQuery查询/el-buttonel-button clickresetQuery重置/el-button/el-form-item/el-form!-- 操作按钮 --div classoperation-buttonsel-button typeprimary clickhandleAdd新增/el-buttonel-button typedanger clickhandleBatchDelete批量删除/el-button/div!-- 数据表格 --el-tablev-loadingloading:datatableDataselection-changehandleSelectionChangeel-table-column typeselection width55 /el-table-column propname label姓名 /el-table-column propage label年龄 /el-table-column label操作 width200template #defaultscopeel-button sizesmall clickhandleEdit(scope.row)编辑/el-buttonel-button sizesmall typedanger clickhandleDelete(scope.row)删除/el-button/template/el-table-column/el-table!-- 分页组件 --paginationv-showtotal 0:totaltotalv-model:pagequeryParams.currentPagev-model:limitqueryParams.pageSizepaginationhandleQuery/!-- 新增/编辑对话框 --el-dialog v-modeldialogVisible :titledialogTitleel-form :modelform :rulesrules refformRefel-form-item label姓名 propnameel-input v-modelform.name //el-form-itemel-form-item label年龄 propageel-input-number v-modelform.age :min0 //el-form-item/el-formtemplate #footerel-button clickdialogVisible false取消/el-buttonel-button typeprimary clicksubmitForm确定/el-button/template/el-dialog/div
/template
六、性能优化建议 后端优化 使用MyBatis-Plus的分页插件替代手动分页 添加Redis缓存高频访问数据 对大数据量查询添加索引 前端优化 使用防抖处理频繁查询 添加表格加载状态 实现数据懒加载
javascript
复制
下载
// 防抖处理示例
import { debounce } from lodash-esconst debouncedQuery debounce(handleQuery, 500)
七、常见问题解决 跨域问题确保后端正确配置CORS前端请求地址正确 分页失效检查分页参数是否正确传递后端SQL是否正确拼接 数据更新不及时在增删改操作后重新查询数据 批量操作失败检查后端是否支持批量操作参数格式是否正确
结语
本文详细介绍了基于Vue3和SpringBoot的全栈CRUD开发流程涵盖了从基础查询到复杂分页的实现以及前后端交互的最佳实践。读者可以根据实际需求扩展更多功能如表单验证、文件上传、权限控制等。欢迎交流。
