基于springboot2+vue2的二手车交易系统

1. 资源

浏览全文可获取

2. 项目简介

二手车交易系统，旨在为二手车买卖双方提供一个在线信息发布与交流平台。系统支持三种角色：管理员、商家和普通用户。

• 管理员：负责系统的整体管理，包括对商家、用户、车辆信息、论坛帖子、公告和轮播图等进行审核、管理和维护。
• 商家：可以在平台上发布和管理自己出售的二手车信息，回复用户对车辆的留言，并参与论坛讨论。
• 用户：可以浏览和搜索二手车信息，收藏感兴趣的车辆，对车辆进行留言和点赞/点踩，参与论坛讨论，并管理个人资料。

系统功能覆盖了二手车交易信息流的完整闭环，从信息发布、浏览、搜索、互动到后台管理，流程清晰。

3. 技术栈

4. 详细介绍

4.1 核心功能模块

1. 后台管理模块 (admin)：基于Vue.js + Element UI开发，为管理员、商家和用户提供不同的管理界面。

   • 管理员管理 (users)：管理登录后台的管理员账号。
   • 汽车管理 (cheliang)：管理员可查看所有车辆，商家可在此模块管理自己的车辆（增、删、改、查）。
   • 汽车留言管理 (cheliangLiuyan)：商家可以查看并回复用户对自己车辆的留言。
   • 汽车收藏管理 (cheliangCollection)：管理员和商家可以查看所有用户的收藏/点赞/点踩记录。
   • 基础数据管理：管理汽车品牌、公告类型等字典数据 (dictionary)。
   • 论坛管理 (forum)：管理所有论坛帖子，支持删除和查看。
   • 公告信息管理 (news)：发布、修改、删除系统公告。
   • 商家管理 (shangjia)：管理员对注册商家进行管理。
   • 用户管理 (yonghu)：管理员对注册用户进行管理。
   • 轮播图管理 (config)：配置前台首页轮播图。

2. 前台展示与交互模块 (front)：面向普通用户和商家，采用Layui和原生JS实现。

   • 首页：展示轮播图、最新公告、热门和最新上架的汽车信息。
   • 汽车列表：支持按汽车品牌、价格区间、名称等条件进行筛选和搜索。
   • 汽车详情：展示汽车的详细信息、商家联系方式。用户可以在此进行收藏、点赞/点踩、发表留言。
   • 论坛：用户可以浏览所有帖子，并发布新帖或对现有帖子进行回复。
   • 公告信息：查看系统发布的各类公告。
   • 个人中心：用户和商家可以修改个人信息、头像、密码等。
   • 登录/注册：提供用户和商家的注册与登录功能。

4.2 权限控制

系统通过Apache Shiro和自定义的AuthorizationInterceptor拦截器实现了基于角色的访问控制。

• 角色定义：系统存在三种角色：管理员 (users)、商家 (shangjia)、用户 (yonghu)。
• 权限配置：权限菜单在menu.js文件中以JSON格式定义，明确每个角色能访问的后台菜单（backMenu）和对应的操作按钮（如查看、新增、修改、删除）。前端通过isAuth函数判断当前用户是否具有某个按钮的操作权限。
• Token验证：用户登录成功后，后端会生成一个Token并返回给前端。前端在后续的API请求头中携带该Token，后端拦截器AuthorizationInterceptor会验证Token的有效性，从而保护API接口。

4.3 数据库设计

• 用户表 (yonghu)：存储注册用户信息。
• 商家表 (shangjia)：存储注册商家信息。
• 管理员表 (users)：存储系统管理员信息。
• 汽车表 (cheliang)：存储二手车信息，外键关联shangjia表，并包含逻辑删除字段cheliang_delete。
• 汽车收藏表 (cheliang_collection)：记录用户的收藏、点赞、点踩行为，通过cheliang_collection_types字段区分。
• 汽车留言表 (cheliang_liuyan)：存储用户对车辆的留言及商家的回复。
• 论坛表 (forum)：存储论坛帖子，通过super_ids字段区分主帖和回帖。
• 公告表 (news)：存储系统公告信息。
• 字典表 (dictionary)：用于存储系统中的枚举数据，如汽车品牌、上下架状态、性别、公告类型等，提高了系统的可维护性。
• 配置表 (config)：存储系统配置项，如前台轮播图URL。
• Token表 (token)：存储用户登录的Token信息，用于身份认证。

5. 部分代码

5.1 后端核心实体类 - 汽车 (CheliangEntity.java)

package com.entity;

// ... 省略 imports

/**
 * 汽车
 */
@TableName("cheliang")
public class CheliangEntity<T> implements Serializable {
    private static final long serialVersionUID = 1L;

    @TableId(type = IdType.AUTO)
    private Integer id;                    // 主键
    private Integer shangjiaId;            // 商家ID
    private String cheliangName;           // 汽车名称
    private String cheliangPhoto;          // 汽车照片
    private Integer cheliangTypes;         // 汽车品牌(字典表关联)
    private Double cheliangNewMoney;       // 价格
    private Integer cheliangClicknum;      // 点击次数
    private Integer zanNumber;             // 赞数量
    private Integer caiNumber;             // 踩数量
    private String cheliangContent;        // 汽车介绍
    private Integer shangxiaTypes;         // 是否上架(字典表关联)
    private Integer cheliangDelete;        // 逻辑删除(1:未删, 2:已删)
    private Date createTime;               // 创建时间
    // ... 省略 getter 和 setter
}

5.2 后端核心控制器 - 商家管理 (ShangjiaController.java 部分)

@RestController
@RequestMapping("/shangjia")
public class ShangjiaController {
    // ... 省略 autowired

    /**
    * 后端保存（新增商家）
    */
    @RequestMapping("/save")
    public R save(@RequestBody ShangjiaEntity shangjia, HttpServletRequest request){
        // 检查用户名或手机号是否已被使用
        Wrapper<ShangjiaEntity> queryWrapper = new EntityWrapper<ShangjiaEntity>()
            .eq("username", shangjia.getUsername())
            .or()
            .eq("shangjia_phone", shangjia.getShangjiaPhone())
            .andNew()
            .eq("shangjia_delete", 1); // 只查未删除的记录

        ShangjiaEntity shangjiaEntity = shangjiaService.selectOne(queryWrapper);
        if(shangjiaEntity==null){
            shangjia.setShangjiaDelete(1); // 设置逻辑删除为未删除
            shangjia.setCreateTime(new Date());
            shangjia.setPassword("123456"); // 设置默认密码
            shangjiaService.insert(shangjia);
            return R.ok();
        }else {
            return R.error(511,"账户或者联系方式已经被使用");
        }
    }

    /**
    * 登录
    */
    @IgnoreAuth // 此方法忽略Token验证
    @RequestMapping(value = "/login")
    public R login(String username, String password, ...) {
        ShangjiaEntity shangjia = shangjiaService.selectOne(
            new EntityWrapper<ShangjiaEntity>().eq("username", username));
        if(shangjia==null || !shangjia.getPassword().equals(password))
            return R.error("账号或密码不正确");
        // 生成Token并返回
        String token = tokenService.generateToken(shangjia.getId(), username, "shangjia", "商家");
        // ... 省略组装返回数据
        return r;
    }
}

5.3 核心配置文件 - 数据库连接 (application.yml 部分)

spring:
    datasource:
        driverClassName: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://127.0.0.1:3306/ershouchejiaoyi?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8
        username: root
        password: 123456

mybatis-plus:
  mapper-locations: classpath*:mapper/*.xml # Mapper XML文件位置
  typeAliasesPackage: com.entity         # 实体类别名包
  global-config:
    id-type: 1                           # 主键类型 (0:自增, 1:用户输入)
    logic-delete-value: -1               # 逻辑删除全局配置
    logic-not-delete-value: 0

5.4 前端权限判断工具 (utils.js 部分)

import storage from './storage';
import menu from './menu';

/**
 * 是否有权限
 * @param {*} tableName 表名/功能模块名
 * @param {*} key 操作按钮 (如 '查看', '新增', '修改')
 */
export function isAuth(tableName, key) {
    let role = storage.get("role"); // 获取当前角色
    if(!role){
        role = '管理员';
    }
    let menus = menu.list(); // 获取权限配置
    for(let i=0;i<menus.length;i++){
        if(menus[i].roleName==role){
            // 遍历后台菜单，查找对应tableName的按钮权限列表
            for(let j=0;j<menus[i].backMenu.length;j++){
                for(let k=0;k<menus[i].backMenu[j].child.length;k++){
                    if(tableName==menus[i].backMenu[j].child[k].tableName){
                        let buttons = menus[i].backMenu[j].child[k].buttons.join(',');
                        // 判断当前操作key是否在权限列表中
                        return buttons.indexOf(key) !== -1 || false
                    }
                }
            }
        }
    }
    return false;
}

5.5 前端API请求封装 (http.js 部分)

import axios from 'axios'
import router from '@/router/router-static'
import storage from '@/utils/storage'

const http = axios.create({
    timeout: 1000 * 86400,
    withCredentials: true,
    baseURL: '/ershouchejiaoyi', // 基础URL
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    }
})

// 请求拦截器，统一添加Token
http.interceptors.request.use(config => {
    config.headers['Token'] = storage.get('Token')
    return config
}, error => {
    return Promise.reject(error)
})

// 响应拦截器，处理401未授权
http.interceptors.response.use(response => {
    if (response.data && response.data.code === 401) {
        router.push({ name: 'login' }) // 跳转到登录页
    }
    return response
}, error => {
    return Promise.reject(error)
})

export default http

5.6 前端汽车详情页核心逻辑 (cheliang/detail.html 部分)

<!-- 汽车详情页部分 methods -->
<script>
// ... 省略
methods: {
    // 收藏/取消收藏
    addCheliangCollection() {
        // 调用后端API查询是否已收藏
        layui.http.request('cheliangCollection/list', 'get', {
            cheliangId: this.detail.id,
            yonghuId: localStorage.getItem('userid'),
        }, (res) => {
            if (res.data.list.length == 1) {
                // 已收藏，调用删除接口
                layui.http.requestJson('cheliangCollection/delete', 'post', [res.data.list[0].id], ...);
            } else {
                // 未收藏，调用新增接口
                layui.http.requestJson('cheliangCollection/add', 'post', {
                    yonghuId: localStorage.getItem('userid'),
                    cheliangId: this.detail.id,
                    cheliangCollectionTypes: 1, // 1代表收藏
                }, ...);
            }
        });
    },
    // 点赞/取消点赞 (核心逻辑类似)
    zanNumberClick() { ... },
    // 点踩/取消点踩 (核心逻辑类似)
    caiNumberClick() { ... },
}
</script>

6. 部分截图

7. 项目总结

• 功能完善：涵盖了信息发布、浏览、检索、互动和管理等核心业务流程，能够满足基础的二手车在线交易场景。
• 角色分明：通过细致的前后端权限控制，清晰地划分了管理员、商家和普通用户的操作边界，保障了系统的有序运行。
• 技术栈主流：采用Spring Boot + MyBatis-Plus + Vue.js 等流行技术构建，具有一定的稳定性和可维护性。前后端分离的架构便于开发和部署。
• 数据设计合理：数据库表设计规范，通过字典表管理可配置项，通过逻辑删除保留数据痕迹，设计较为成熟。

总体而言，该项目是一个合格的课程设计或毕业设计作品，清晰地展示了Web应用的完整开发流程。

自助获取：https://fifteen.xiaobias.com/source/222