打造校园二手交易平台——构建更便捷、更绿色的校园生态

前端

2023-12-02 16:21:45

校园二手交易小程序：构建一个安全、透明的二手交易平台

需求分析：了解校园二手交易的痛点

校园二手交易是校园文化和经济的重要组成部分，但传统的线下交易往往面临交易不安全、信息不透明、界面不友好等问题。为了解决这些痛点，本课题旨在构建一个基于SSM框架、微信小程序框架和MySQL数据库的校园二手交易小程序。

系统设计：安全、可靠、易用、可扩展

系统设计目标明确：安全性、可靠性、易用性、可扩展性。

经济可行性：开源技术，成本低廉

小程序采用开源技术开发，大大降低了开发和维护成本，经济可行性高。

系统架构：B/S架构，界面友好

系统采用B/S架构，前端使用微信小程序框架开发，界面友好、操作简单。

数据库设计：MySQL，数据安全

数据库采用MySQL，具有高性能、高可靠性、高安全性等特点，确保数据安全。

代码示例：实现商品发布

// 商品发布页面
Page({
  data: {
    images: [], // 商品图片数组
    title: '', // 商品标题
    price: '', // 商品价格
    description: '', // 商品
  },

  // 选择图片
  chooseImage: function () {
    wx.chooseImage({
      count: 9, // 最多选择9张图片
      sizeType: ['original', 'compressed'], // 选择原图或压缩图
      sourceType: ['album', 'camera'], // 从相册或相机选择
      success: (res) => {
        this.setData({
          images: this.data.images.concat(res.tempFilePaths)
        })
      }
    })
  },

  // 删除图片
  deleteImage: function (e) {
    const index = e.currentTarget.dataset.index
    this.data.images.splice(index, 1)
    this.setData({
      images: this.data.images
    })
  },

  // 发布商品
  publish: function () {
    wx.showLoading({
      title: '正在发布...'
    })
    const title = this.data.title
    const price = this.data.price
    const description = this.data.description
    const images = this.data.images

    wx.cloud.uploadFile({
      cloudPath: 'images/' + Date.now() + '.jpg', // 上传到云存储的路径
      filePath: images[0], // 上传的文件路径
      success: (res) => {
        wx.cloud.callFunction({
          name: 'publishProduct',
          data: {
            title,
            price,
            description,
            image: res.fileID // 云存储中的文件ID
          },
          success: (res) => {
            wx.hideLoading()
            wx.showToast({
              title: '发布成功',
              icon: 'success'
            })
          },
          fail: (err) => {
            wx.hideLoading()
            wx.showToast({
              title: '发布失败',
              icon: 'error'
            })
          }
        })
      },
      fail: (err) => {
        wx.hideLoading()
        wx.showToast({
          title: '发布失败',
          icon: 'error'
        })
      }
    })
  }
})