基于Django++mysql+vue的校园二手交易平台系统【完整代码+可远程安装部署】-优快云博客

本文链接：https://blog.youkuaiyun.com/Dalu_1226/article/details/145861998

摘要

在数字化校园建设不断推进的当下，校园二手交易平台对于优化校园资源配置、促进学生间的物品流通发挥着关键作用。本文介绍的校园二手交易平台系统，依托 Django、MySQL 和 Vue 等先进技术，旨在为师生打造一个便捷、高效的二手交易环境。

本系统以 Django 作为 Web 开发框架，其遵循 MVC（Model - View - Controller）架构模式，实现了业务逻辑、数据展示和数据处理的解耦，极大地提升了系统的可维护性和可扩展性。数据存储层面，选用 MySQL 关系型数据库，用于存储用户信息、商品详情、交易记录等结构化数据，凭借其成熟稳定的特性，保障数据安全与高效读写。前端开发则采用 Vue 框架，利用其组件化开发的优势，构建出交互性强、界面友好的用户操作界面，显著提升用户体验。

在功能实现上，系统为用户提供商品发布功能，支持学生详细录入二手物品的名称、类别、成色、价格等信息，并上传物品图片，方便其他用户全面了解商品详情。同时设有智能搜索功能，用户可依据关键词、类别、价格区间等条件快速检索心仪商品。此外，系统还集成了安全的在线支付功能，借助第三方支付接口，确保交易资金的安全流转。在用户管理方面，支持用户注册与登录，完善个人信息，并记录用户的交易历史，便于用户随时查询与管理。

为保障系统的稳定运行，引入缓存机制，采用 Redis 作为缓存数据库，对热门商品信息、频繁访问的数据进行缓存，有效减轻 MySQL 数据库的压力，提升系统响应速度。同时，运用消息队列技术，实现异步任务处理，优化系统性能，确保高并发场景下的稳定运行。

综上所述，该校园二手交易平台系统整合 Django、MySQL、Vue 等技术，结合缓存机制与消息队列，构建出功能完善、性能卓越的校园二手交易平台，为校园内的资源循环利用提供有力支持，推动校园数字化建设迈向新高度。

功能介绍

商品发布

用户只需轻松点击 “发布商品” 按钮，即可进入商品信息录入页面。在这里，用户能够详细填写二手物品的名称、所属类别、物品成色、期望售价等关键信息，还能上传多张物品图片，从不同角度展示商品细节，让潜在买家全方位了解商品状况，放心选购。

智能搜索

在搜索栏输入关键词，如 “二手笔记本”，或者选择类别为 “电子产品”，设置价格区间为 “2000 - 5000 元”，系统便能迅速筛选出符合条件的商品，精准定位到用户心仪的二手好物，节省大量查找时间。

在线支付

当用户确定购买商品后，点击 “立即购买”，系统会跳转至支付页面，支持多种第三方支付方式，如微信支付、支付宝支付等。用户只需按照提示完成支付操作，资金便会安全流转，保障交易顺利进行。

用户管理

新用户通过手机号或邮箱注册账号，设置密码，完善个人信息，如姓名、所在学院、联系方式等，方便交易沟通。登录后，用户可以随时查看自己的交易历史，包括已购买商品、已出售

开发环境

后端： Python 3.8 + Django 3.2
前端： Javascript + Vue
数据库：MySQL 5.7
开发平台：Pycharm + vscode
运行环境：Windows 10/11

界面展示

代码结构

server  
├── myapp            // 主应用
│       └── auth                     // 认证管理
│       └── middlewares              // 中间件
│       └── permission               // 权限
│       └── views                    // 视图与接口（主要业务代码）
│       └── models.py                // 状态码
│       └── serializers.py           // 状态码
│       └── urls.py                  // 状态码
│       └── utils.py                 // 状态码
├── server             // 配置目录
├── upload             // 静态资源目录
├── requiements.txt    // 依赖项

重要模块展示

分页实现

基于ant-design框架的a-table的分页插件。

// 分页变量

  const data = reactive({
    dataList: [],
    loading: false,
    keyword: '',
    selectedRowKeys: [] as any[],
    pageSize: 10,
    page: 1,
  });
  
// 分页插件
:pagination="{
          size: 'default',
          current: data.page,
          pageSize: data.pageSize,
          onChange: (current) => (data.page = current),
          showSizeChanger: false,
          showTotal: (total) => `共${total}条数据`,
        }"

请求工具实现

前端的请求工具是基于axios开发的，位于utils的http文件夹中。封装了request请求和拦截器。

const service: AxiosInstance = axios.create({
  // baseURL: import.meta.env.BASE_URL + '',
  baseURL: BASE_URL + '',
  timeout: 15000,
});

// axios实例拦截请求
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    config.headers.ADMINTOKEN = localStorage.getItem(ADMIN_USER_TOKEN);
    config.headers.TOKEN = localStorage.getItem(USER_TOKEN);

    return config;
  },
  (error: AxiosError) => {
    return Promise.reject(error);
  },
);

// axios实例拦截响应
service.interceptors.response.use(
  (response: AxiosResponse) => {
    if (response.status == 200) {
      if (response.data.code == 0 || response.data.code == 200) {
        return response;
      } else {
        return Promise.reject(response.data);
      }
    } else {
      return Promise.reject(response.data);
    }
  },
  // 请求失败
  (error: any) => {
    console.log(error.response.status);
    if (error.response.status == 404) {
      // todo
    } else if (error.response.status == 403) {
      // todo
    }
    return Promise.reject(error);
  },
);

权限控制模块

权限控制使用了BaseAuthentication实现的，具体代码可参考authentication.py

from rest_framework import exceptions
from rest_framework.authentication import BaseAuthentication
from myapp.models import User

# 接口认证
class AdminTokenAuthtication(BaseAuthentication):
    def authenticate(self, request):
        adminToken = request.META.get("HTTP_ADMINTOKEN")

        print("检查adminToken==>" + adminToken)
        users = User.objects.filter(admin_token=adminToken)
        """
        判定条件：
            1. 传了adminToken 
            2. 查到了该帐号 
            3. 该帐号是管理员或演示帐号
        """
        if not adminToken or len(users) == 0 or users[0].role == '2':
            raise exceptions.AuthenticationFailed("AUTH_FAIL_END")
        else:
            print('adminToken验证通过')

路由模块实现

前端的路由是基于vue-router框架实现的，路由文件位于src的rooter的root.js文件中。预览如下：

  {
    path: '/admin',
    name: 'admin',
    redirect: '/admin/thing',
    component: () => import('/@/views/admin/main.vue'),
    children: [
      { path: 'overview', name: 'overview', component: () => import('/@/views/admin/overview.vue') },
      { path: 'order', name: 'order', component: () => import('/@/views/admin/order.vue') },
      { path: 'thing', name: 'thing', component: () => import('/@/views/admin/thing.vue') },
      { path: 'comment', name: 'comment', component: () => import('/@/views/admin/comment.vue') },
      { path: 'user', name: 'user', component: () => import('/@/views/admin/user.vue') },
      { path: 'classification', name: 'classification', component: () => import('/@/views/admin/classification.vue') },
      { path: 'ad', name: 'ad', component: () => import('/@/views/admin/ad.vue') },
      { path: 'notice', name: 'notice', component: () => import('/@/views/admin/notice.vue') },
      { path: 'loginLog', name: 'loginLog', component: () => import('/@/views/admin/login-log.vue') },
      { path: 'opLog', name: 'opLog', component: () => import('/@/views/admin/op-log.vue') },
      { path: 'errorLog', name: 'errorLog', component: () => import('/@/views/admin/error-log.vue') },
      { path: 'sysInfo', name: 'sysInfo', component: () => import('/@/views/admin/sys-info.vue') },
    ]
  },