做网站一般长宽多少钱山西省网站建设哪里好

张

张建站

2026/4/8 9:45:27

10分钟阅读

做网站一般长宽多少钱,山西省网站建设哪里好,公司门户最新版下载,免费下载ppt模板网站有哪些最近在帮学弟学妹们看毕业设计项目#xff0c;发现一个挺普遍的现象#xff1a;很多用 Java 和 Vue 做的项目#xff0c;乍一看功能挺全#xff0c;但代码一打开#xff0c;前后端逻辑搅在一起#xff0c;一个文件几百行#xff0c;改个按钮都得心惊胆战。这让我想起了自…最近在帮学弟学妹们看毕业设计项目发现一个挺普遍的现象很多用 Java 和 Vue 做的项目乍一看功能挺全但代码一打开前后端逻辑搅在一起一个文件几百行改个按钮都得心惊胆战。这让我想起了自己当年做毕设的“惨痛”经历。所以今天想结合一个经典的图书管理系统聊聊怎么用 Spring Boot 和 Vue 3从零搭建一个结构清晰、易于维护的全栈项目希望能帮你避开那些坑让毕设不仅跑得起来更能拿得出手。1. 先聊聊痛点为什么你的项目看起来“很乱”很多同学的项目问题往往出在起步阶段就没规划好。我总结了几点最常见的“面条式”代码所有逻辑都写在 Controller 或一个巨大的 Vue 组件里查书、借书、用户管理全混在一起后期加功能堪比拆炸弹。脆弱的安全防线用户密码用明文存数据库SQL 语句用字符串拼接“SELECT * FROM user WHERE name” name “”这简直是给 SQL 注入大开方便之门。随意的 API 设计接口命名全凭心情/getBooks、/addNewBook、/deleteBookById风格不一前端调用时得时刻对照着“密码本”。缺失的状态管理用户登录后信息不知道存哪页面一刷新就得重新登录体验极差。紧密的前后端耦合前端页面里直接写死了后端 IP 和端口或者后端返回的数据结构一变前端整个页面都得重调。这些问题堆起来答辩时老师随便问几个“为什么这么设计”可能就答不上来了。我们的目标就是建立一个高内聚、低耦合的架构来解决它们。2. 技术选型为什么是 Spring Boot Vue 3面对琳琅满目的技术选择比努力更重要。后端Spring Boot 为何完胜传统 SSM以前学校可能教 SSMSpring Spring MVC MyBatis但那需要大量 XML 配置依赖冲突让人头疼。Spring Boot 的核心优势就是“约定大于配置”。一键启动内嵌了 Tomcat一个main方法就能跑起项目告别复杂的 WAR 包部署。自动配置只要引入spring-boot-starter-web、spring-boot-starter-data-jpa或 mybatis-plus等依赖大部分配置已经自动完成。生态丰富对于安全Spring Security、缓存Redis、文档Swagger都有非常成熟的 Starter 集成几行配置就能用。前端Vue 3 的 Composition API 带来了什么相比 Vue 2 的 Options APIVue 3 的 Composition API 是应对复杂逻辑的利器。逻辑复用可以把一个功能相关的数据、计算属性、方法封装在一个独立的useXxx函数里例如useBookManagement在不同组件中轻松复用告别mixins的命名冲突。更好的类型推导配合 TypeScript代码提示和类型检查非常棒减少低级错误。更灵活的代码组织你可以把相关的代码如获取图书列表和搜索图书放在一起而不是按data、methods、computed分散到不同区域阅读和维护更直观。3. 核心实现打通一个完整的“借书”流程我们以“用户登录 - 查看图书列表 - 借阅图书”这个核心流程为例看看前后端如何优雅协作。第一步后端搭建与用户登录JWT鉴权项目结构分层这是高内聚的基础。通常分为controller接收请求调用服务返回结果。只做流程转发业务逻辑一点不留。service核心业务逻辑层。比如“借书”的校验规则、库存扣减就在这里。repository/dao数据持久层负责直接和数据库如 MySQL对话。entity/model实体类对应数据库表。dto数据传输对象用于前后端交互比如“创建图书的请求”就不需要传id和createTime。config存放各种配置类如跨域配置、JWT 配置。utils工具类如密码加密、JWT 生成与解析。JWT 登录接口实现首先在pom.xml引入jjwt依赖。然后我们写一个简单的登录 Controller。// AuthController.java RestController RequestMapping(/api/auth) public class AuthController { Autowired private UserService userService; Autowired private JwtUtil jwtUtil; // 自定义的JWT工具类 PostMapping(/login) public Result login(RequestBody Valid LoginRequest request) { // 1. 校验用户名密码 User user userService.findByUsername(request.getUsername()); if (user null || !passwordEncoder.matches(request.getPassword(), user.getPassword())) { return Result.error(用户名或密码错误); } // 2. 生成JWT令牌避免存储用户密码等敏感信息 String token jwtUtil.generateToken(user.getUsername(), user.getRole()); // 3. 返回令牌和用户基本信息 LoginResponse response new LoginResponse(token, user.getUsername(), user.getRole()); return Result.success(登录成功, response); } }这里的LoginRequest用了Valid注解配合字段上的NotBlank注解可以自动校验参数是否为空非常方便。图书查询与借阅接口创建一个BookController它应该非常“薄”。// BookController.java RestController RequestMapping(/api/books) public class BookController { Autowired private BookService bookService; // 查询图书列表带分页和条件查询 GetMapping public Result getBooks(RequestParam(required false) String keyword, RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { PageInfoBookVO pageInfo bookService.getBooks(keyword, pageNum, pageSize); return Result.success(pageInfo); } // 借阅图书 PostMapping(/{bookId}/borrow) PreAuthorize(hasRole(USER)) // 使用Spring Security注解进行权限控制只有USER角色能借书 public Result borrowBook(PathVariable Long bookId, AuthenticationPrincipal String username) { // AuthenticationPrincipal 可以获取到当前登录用户的用户名从JWT中解析 bookService.borrowBook(bookId, username); return Result.success(借阅成功); } }注意PreAuthorize注解它优雅地实现了方法级别的权限控制比在代码里写if-else判断角色清爽多了。第二步前端 Vue 3 组件与状态管理封装统一的请求工具Axios 在src/utils/request.js中封装 Axios统一处理请求头、响应拦截和错误。// request.js import axios from axios; import { ElMessage } from element-plus; // UI库提示组件 import router from ../router; const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 从环境变量读取后端地址 timeout: 10000, }); // 请求拦截器给每个请求加上JWT Token service.interceptors.request.use( config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer ${token}; } return config; }, error Promise.reject(error) ); // 响应拦截器统一处理错误如401跳转登录页 service.interceptors.response.use( response response.data, // 直接返回后端 Result 结构里的 data error { if (error.response?.status 401) { ElMessage.error(登录已过期请重新登录); localStorage.removeItem(token); router.push(/login); } else { ElMessage.error(error.response?.data?.message || 请求失败); } return Promise.reject(error); } ); export default service;实现登录页面和状态管理使用 Vue 3 的ref和reactive并配合 Pinia推荐或 Vuex 进行全局状态管理。这里展示一个使用组合式函数的登录逻辑。!-- Login.vue -- script setup import { ref } from vue; import { useRouter } from vue-router; import { login } from /api/auth; // 导入封装好的API函数 import { useUserStore } from /stores/user; // 假设使用Pinia store const router useRouter(); const userStore useUserStore(); const form ref({ username: , password: }); const handleLogin async () { try { const res await login(form.value); // 假设返回 { token, username, role } userStore.setToken(res.token); userStore.setUserInfo({ username: res.username, role: res.role }); ElMessage.success(登录成功); router.push(/); // 跳转到首页 } catch (error) { // 错误已在request拦截器中统一提示这里可以不用再处理 } }; /script template !-- 登录表单UI -- el-form :modelform submit.preventhandleLogin el-form-item label用户名 el-input v-modelform.username / /el-form-item el-form-item label密码 el-input typepassword v-modelform.password / /el-form-item el-button typeprimary native-typesubmit登录/el-button /el-form /template实现图书列表和借阅功能创建一个BookList.vue组件它只关心视图和用户交互数据逻辑通过调用独立的组合式函数或 Store 来完成。!-- BookList.vue -- script setup import { onMounted, ref } from vue; import { getBooks, borrowBook } from /api/book; import { useUserStore } from /stores/user; const userStore useUserStore(); const bookList ref([]); const loading ref(false); const loadBooks async () { loading.value true; try { const res await getBooks(); bookList.value res.list; } finally { loading.value false; } }; const handleBorrow async (bookId) { try { await borrowBook(bookId); ElMessage.success(借阅成功); // 可以重新加载列表或者乐观更新本地数据 loadBooks(); } catch (error) { // 错误已处理 } }; onMounted(() { loadBooks(); }); /script template div v-loadingloading el-table :databookList el-table-column proptitle label书名 / el-table-column propauthor label作者 / el-table-column propinventory label库存 / el-table-column label操作 template #default{ row } el-button sizesmall clickhandleBorrow(row.id) :disabledrow.inventory 0 || userStore.role ! USER 借阅 /el-button /template /el-table-column /el-table /div /template4. 安全与性能那些容易被忽略的细节密码加密绝对不要明文存储。使用 Spring Security 的BCryptPasswordEncoder它每次加密出来的密文都不同且自带盐值安全性很高。SQL 注入防护坚持使用 JPA 的方法名查询、Query注解使用参数绑定或 MyBatis-Plus 的 Wrapper不要手动拼接 SQL 字符串。CSRF 防护在前后端分离且使用 JWT 的场景下CSRF 风险较低因为标准做法不会自动携带 Cookie。但如果使用 Cookie-SessionSpring Security 默认已提供 CSRF 防护。接口幂等性对于POST创建请求要防止重复提交。简单做法可以是前端按钮防抖后端为关键操作如借书生成唯一令牌Token或者检查业务状态如这本书是否已被该用户借阅。分页查询列表接口一定要支持分页PageHelper或 JPA 的Pageable避免一次性查询上万条数据拖垮数据库和网络。5. 生产避坑指南来自踩坑者的经验跨域CORS问题这是前后端分离第一道坎。在后端WebMvcConfigurer配置类中全局配置或使用CrossOrigin注解。注意生产环境要指定具体的源origin而不是“*”。Axios 封装不规范一定要像上面那样统一封装否则每个请求都要写一遍错误处理代码冗余且难以维护。Maven 依赖冲突使用mvn dependency:tree命令查看依赖树找到冲突的库用exclusions排除掉不需要的传递性依赖。JWT Token 过期与刷新Token 过期后不要让用户重新登录。可以设计一个/api/auth/refresh接口用旧的、未过期的 Refresh Token 来换取新的 Access Token。前端路由守卫在 Vue Router 的全局前置守卫中判断用户是否登录检查 Token未登录则跳转到登录页保护需要权限的路由。环境变量前端项目使用.env.development和.env.production管理不同环境的后端 API 地址千万不要写死在代码里。6. 如何让你的项目更出彩基于上面这个已经结构清晰、功能完整的图书管理系统你完全可以轻松扩展让它成为答辩中的亮点文件上传功能实现图书封面图片上传。后端使用 Spring Boot 的MultipartFile搭配阿里云 OSS 或本地存储前端使用el-upload组件。实时消息WebSocket实现“借阅到期提醒”或“新书到货通知”。后端用ServerEndpoint注解建立 WebSocket 端点前端用new WebSocket()连接并监听消息。数据可视化使用 ECharts在管理员后台展示“月度借阅量统计”、“图书类别分布”等图表。单元测试为后端的 Service 层关键方法编写 JUnit 测试这能体现你的工程素养。使用SpringBootTest进行集成测试。通过这样一个从痛点分析到技术选型再到核心模块实现和安全优化的完整流程你的毕业设计就不再是功能的简单堆砌而是一个有架构思考、有代码规范、具备一定工程化水平的项目。这不仅能让你在答辩时从容不迫对你理解企业级开发流程也大有裨益。希望这篇笔记能为你提供一个清晰的路线图祝你毕业设计顺利高分通过