type
status
date
slug
summary
tags
category
icon
password
能力模型
能力分类
省赛
全球总决赛
学习进度
中国总决赛
一、项目概述
随着学生生活节奏的加快和消费能力的提升，大量书籍、电子产品、衣物等物品在短暂使用后便被闲置，造成资源浪费。尽管市面上已存在二手市场，其价格优势和资源再利用的特点受到学生们的青睐，但交易的隐蔽性却助长了欺诈等不良行为，给学生群体带来了交易风险。
为了促进学生间的安全交易，培养节约和环保意识，我们推出了专门针对大学生群体的“華物“二手交易网。该平台目前主要服务于武汉地区的985、211高校，致力于打造一个安全、可靠、透明的二手交易平台。通过严格的交易监管和身份验证机制，降低交易风险，提升交易效率，让学生在享受二手交易带来的便利的同时，也能感受到安全可靠的交易环境。
二、技术架构
1.整体架构
本项目采用前后端分离的方式实现，前端层和后端层二者通过 HTTP 协议进行交互通信。前端通过 axios 发送 HTTP 请求（携带请求头、请求体等相关信息，可能包含 Cookie 信息）到后端 Spring Boot 内置的 Tomcat 服务器上，后端根据请求的 URL、请求类型等，利用 Spring MVC 进行请求的分发处理，经过一系列业务逻辑、数据处理、鉴权等操作后，将响应数据（比如 JSON 格式的数据等）返回给前端，前端再依据返回的数据进行页面渲染展示等操作。
2.前端框架结构
（1）Vue.js 核心层
作为前端的基础框架，负责整个前端页面的构建、数据绑定、事件处理等核心功能，驱动整个前端应用的运行。
（2）Element UI 组件库层
基于 Vue.js，提供了丰富的 UI 组件，像按钮、表单、表格、对话框等，开发人员通过组合这些组件快速搭建出符合项目需求的美观且易用的用户界面，提升开发效率。
（3）vue-router 层
管理前端页面的路由，根据不同的 URL 路径来加载对应的 Vue 组件页面，实现单页面应用（SPA）中的页面切换效果，比如从首页切换到文章详情页、用户中心页等不同的功能页面。
（4）vuex 层
用于管理前端应用的状态，当多个组件需要共享某些数据或者状态变化时，通过 vuex 来统一管理，保证数据的一致性，例如用户登录后的状态信息、文章列表数据的缓存等情况。
（5）axios 层
主要负责与后端进行数据交互，向后端发送 HTTP 请求（如获取文章列表、提交用户注册信息等），并接收后端返回的响应数据，将数据传递给对应的 Vue 组件进行展示或者进一步处理。
3.后端框架结构
（1）Spring Boot 核心层
作为整个后端的基础框架，整合各个组件，负责启动服务、配置管理等功能，内置了 Tomcat 服务器用于接收和处理前端发来的请求以及返回响应。
（2）Spring MVC 层
处理前端跨域请求，接收来自前端的各类 HTTP 请求（比如 GET、POST 等），并依据请求的 URL 等信息将请求分发给对应的 Controller 进行处理。
Controller 层的各个类方法会调用相应的 Service 层逻辑来执行业务处理。
（3）Service 层
包含具体的业务逻辑处理代码，比如处理用户注册、登录业务，文章的增删改查等业务流程。它会调用 MyBatis 相关的持久层方法来与数据库进行交互，获取或更新数据。
（4）MyBatis 层：
管理与 MySQL 数据库的交互，通过编写 SQL 映射文件或者使用注解的方式，将数据库中的表结构与 Java 中的实体类进行映射，负责执行如查询、插入、更新、删除等针对数据库的操作，将数据库的数据传递给 Service 层或者将 Service 层传来的数据持久化到数据库中。
（5）Servlet API 部分
拦截前端发来的请求，针对请求中的 Cookie 信息进行处理，例如读取、设置等操作，基于 Cookie 等信息做简单的鉴权管理，判断用户的合法性等情况，为后续的业务逻辑处理提供基础保障。
（6）Validation 部分
在接收到前端数据后，对数据的格式、合法性等进行校验，例如验证用户输入的邮箱格式是否正确、密码长度是否符合要求等，避免不符合要求的数据进入后续的业务逻辑处理流程。
三、项目实施
1.项目架构
.idea文件夹：与开发工具（如 WebStorm/IntelliJ IDEA）相关的配置文件。
dist文件夹：存放项目构建后的静态文件，供部署使用。
image文件夹：图片资源文件夹，存放了背景图片bg2.jpg。
node_modules文件夹：存放项目的依赖包，由 npm/yarn 安装生成。
public文件夹：公共资源文件夹，包含index.html（Vue 应用的入口模板）和avatar.jpg。
src文件夹：项目的核心源码部分，包括以下子目录：api：定义接口的文件夹，index.js是对 API 请求的封装。assets：存放静态资源（如图片）供组件或页面引用。components：Vue 组件文件夹，分为通用组件（common）和页面组件（page）。router：Vue 路由配置文件夹，负责管理页面导航。store：Vuex 状态管理文件夹，用来管理全局状态。utils：工具函数文件夹，request.js是封装的 HTTP 请求方法。App.vue：Vue 应用的根组件。main.js：应用的入口文件，初始化 Vue 实例。
2.封装API请求
在封装API请求部分，使用request工具函数，用于处理HTTP请求，以下代码中的每个接口方法均对应后端的一个功能，接口格式如下：
(1)用户相关接口
- 用户模块接口包括登录、登出、获取用户信息等。
- 采用
GET方法请求时，使用params传递参数。
(2)地址管理接口
- 地址相关操作包括新增、获取、更新、删除等。
POST方法使用data传递参数，适用于需要传递较多数据或提交表单时。
(3)闲置物品管理接口
- 用于管理用户发布的闲置物品，支持添加、查询、更新等操作。
(4)订单管理接口
- 用于处理订单的添加、查询、更新、删除等。
(5)消息管理接口
- 包括消息发送、查询、删除等功能，便于用户和系统之间的互动。
(6)管理员相关接口
- 提供管理员的登录、用户管理等功能。
(7)类型管理接口
- 用于管理物品的分类，包括添加、编辑、删除和查询。
3.路由管理
基于 Vue.js 使用
vue-router 实现路由管理的代码，定义了整个前端应用的路由结构和行为，主要包括路径映射、路由组件加载、页面标题元信息等。路由定义格式如下：（1）重定向路由
- 当用户访问根路径
/时，会自动重定向到/index。
（2）主页面路由
以下是一些关键页面路由的定义：
（3）动态加载的页面
（4）用户认证相关路由
- 包括用户登录 (
/login) 和用户注册 (/sign-in) 页面。
（5）管理后台路由
- 用于管理后台的登录和操作。
（6）通配路由
- 功能: 当用户访问未定义的路径时，重定向到根路径
/。
- 好处: 避免用户访问无效页面，提升用户体验。
补充
修复
router.push 和 router.replace 方法在 Vue-router 3.x 中，如果在相同路径跳转时产生的重复导航错误。4.状态管理
采用Vues进行全局状态管理。
Vuex 是 Vue.js 的状态管理库，它主要包括以下四个部分：
- state: 用于存储全局的状态数据。
- mutations: 同步修改
state的方法。
- actions: 异步操作或复杂逻辑，通过触发
mutations来修改state。
- getters: 用于从
state中派生计算结果，相当于 Vue 中的computed属性。
- modules: 用于将
store拆分为多个子模块，便于管理和维护。
- 本项目的状态管理较为简单
5.HTTP请求
我们基于
axios 配置了一个 HTTP 请求实例，并通过拦截器对请求和响应进行统一的处理，方便在项目中复用。（1）axios实例创建
（2）请求拦截器
（3）响应拦截器
6.项目入口main.js
main.js 是 Vue 项目入口文件，负责初始化应用程序并挂载到 DOM 上。该部分较为简单，仅对用户登录进行路由守卫(
router.beforeEach((to, from, next)部分)。7.组件化页面
由于页面组件较多，在此不一一详细说明，仅对页面构成进行概述。
- 通用组件 (
common) AppFoot.vue和AppHeader.vue：底部和顶部的全局导航组件。AppPageBody.vue：页面主体内容的容器组件。IdleGoods.vue、orderList.vue、userList.vue：分别与商品、订单、用户相关的功能组件。
- 页面组件 (
page) index.vue：项目的主页组件。login.vue和login-admin.vue：普通用户和管理员的登录页面。idle-details.vue：闲置商品的详情页面。platform-admin.vue：平台管理相关的页面。search.vue：搜索页面。me.vue、message.vue和order.vue：分别是个人信息、消息中心和订单管理页面。
四、项目展示
1.首页
2.商品详情页
3.商品发布
4.收获地址及学校
5.商品购买
6.个人主页
五、总结反思与未来展望
1.项目总结
本次是个人第一次尝试前后端分离的项目，因此对于接口的撰写格式、要求以及一些底层的思路原理有了更加清晰的认识，并且通过这一次的项目，对于Vue的框架接口和实现原理有了更加切实的体会，不同于普通的html混乱的结构，Vue采用组件化管理的方式，一方面是对应代码进行的简化，另一方面对于代码页面建立了一个“目录”，让我们在撰写前端代码的同时对整体项目结构有了更加清楚的认识，这在团队开发能够让我们进行有效的分工而非混乱的。同时，通过这次页面的代码编写，我的前端技术也更加的熟练了，较之上学期明显有了很大的熟练度的提升，是对我本人很好的一次锻炼。
2.个人反思
在本次项目中，我主要负责前端接口、CSS等代码，以及原型图和汇报PPT的制作等，我明确我个人的发展方向为产品经理、前端工程师等。在项目中，项目前期我们的阻碍是最大的，一个项目如何分工？每次原型图画出来需要如何修改？是否符合我们最开始的预期？写出来的代码和原型图之间的差距如何弥补？怎样写出更好看的前端页面？这些都是我学到并且以后仍旧需要继续学习和提升的地方。
3.未来展望
（1）继续学习前端，多多参考和练习网上其他人优秀的前端页面，孰能生巧提高代码编写水平，同时通过观摩练习他人方案提高自己的前端页面设计水平，写出更漂亮和高质量的代码。
（2）参与前后端分离的项目，了解后端的一些知识，通过广泛的知识获取对前端我的撰写进行引导，加强团队合作开发的水平。
（3）学习React等技术，对比不同的先进的前端技术间的差别，养成终生学习、不断进步的习惯，也是提升自己未来的就业竞争力。
有关问题，欢迎您在底部评论区留言，一起交流~
- Author:Koreyoshi
- URL:https://Koreyoshi1216.com/article/166c7b13-c6a7-80b0-8178-f124fb669df8
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts