基於SSM+Layui+微信小程序的校園跳蚤市場*（閒置交易平臺）的設計與實現

基於SSM+Layui+微信小程序的校園跳蚤市場的設計與實現由服務端和微信小程序端組成。
服務端：基於SSM框架（Spring、Spring MVC、MyBatis），後臺頁面使用layui搭建，數據庫使用MySql，服務端使用Intellij Idea開發，可導入到Eclipse、MyEclipse中；主要功能爲管理員登錄、管理員管理、APP用戶管理、留言評論管理、商品管理、商品發佈等功能【可定製新功能】

小程序端：基於微信小程序，主要功能爲微信一鍵登錄、商品瀏覽、商品搜索、查看商品詳情、聯繫賣家、評論留言、拉黑用戶、收藏商品、發佈商品、商品管理、黑名單管理、收藏管理等功能【可定製新功能】

歡迎推薦同學來定製畢業設計系統（定製關鍵詞：Android+iOS+Java+php+python+微信小程序+人臉識別相關應用+大數據統計分析）

下面是功能簡介：
小程序端
1、微信登錄
代碼實現：

//index.js
//獲取應用實例
const app = getApp()
var inputinfo;
var openid;
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件處理函數
  bindViewTap: function() {
    console.log("進入主頁了");
    wx.switchTab({
      url: '/pages/index/index'
    });
  },
  input_content: function(e) {
    console.log("輸入的內容爲：" + e);
    inputinfo = e.detail.value;
  },
  /**
   * 彈窗
   */
  showDialogBtn: function() {
    this.setData({
      showModal: true
    })
  },
  /**
   * 彈出框蒙層截斷touchmove事件
   */
  preventTouchMove: function() {},
  /**
   * 隱藏模態對話框
   */
  hideModal: function() {
    this.setData({
      showModal: false
    });
  },
  /**
   * 對話框取消按鈕點擊事件
   */
  onCancel: function() {
    this.hideModal();
  },
  /**
   * 對話框確認按鈕點擊事件
   */
  onConfirm: function() {
    var that = this;
    console.log("點擊確定了" + inputinfo);
    console.log(inputinfo.length);
    if (inputinfo.length != 11) {
      wx.showToast({
        title: '手機號必須爲11位',
        icon: 'none',
        duration: 2000
      })
    } else {
      this.hideModal();
      console.log("手機號位數合法");
      console.log("phone = " + inputinfo);
      console.log("nickname = " + app.globalData.userInfo.nickName);
      console.log("sex = " + app.globalData.userInfo.gender);
      console.log("headurl = " + app.globalData.userInfo.avatarUrl);
      console.log("openid = " + openid);
      wx.request({
        //後臺接口地址
        url: app.globalData.baseUrl + 'accountRegister.action',
        data: {
          phone: inputinfo,
          nickname: app.globalData.userInfo.nickName,
          sex: app.globalData.userInfo.gender,
          headurl: app.globalData.userInfo.avatarUrl,
          openid: openid
        },
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function(res) {
          wx.hideLoading();
          console.log(res.data);
          if (res.data.code == 0) {
            wx.showToast({
              title: '登錄成功',
              icon: 'success',
              duration: 2000
            })
            app.globalData.accountInfo = res.data.data;
            console.log("登錄成功，保存用戶信息，進入主頁");
            wx.switchTab({
              url: '/pages/index/index'
            });
          } else if (res.data.code == 10001014) {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
            that.showDialogBtn();
          } else {
            wx.showModal({
              title: res.data.msg,
              confirmText: 'OK',
              showCancel: false
            })
            console.log("用戶信息註冊失敗");
          }
        }
      })
    }

  },

實現效果：

2、商品首頁
頂部廣告輪播、中部功能導航按鈕、底部商品列表（支持上拉刷新、下拉加載更多）
代碼：

Page({
  data: {
    adList: [],
    functionClass: [{
        "id": 'all',
        "icon": "/images/all_goods.png",
        "text": "所有商品"
      },
      {
        "id": 'last',
        "icon": "/images/lastnew_goods.png",
        "text": "最新發布"
      },
      {
        "id": 'hot',
        "icon": "/images/hot_goods.png",
        "text": "熱門商品"
      },
      {
        "id": 'free',
        "icon": "/images/free_goods.png",
        "text": "免費商品"
      }
    ],
    urgent: [],
    paiGoods: [],
    lastNew: []
  },
 
  getLastGoods: function() {
    var that = this;
    // console.log("黑名單用戶" + app.globalData.uids.uid.join(","));
    var ids = '';
    for (var i in app.globalData.uids) {
      console.log("用戶id = " + app.globalData.uids[i].uid);
      if (i == app.globalData.uids.length - 1) { //最後一個不需要加逗號
        ids += app.globalData.uids[i].uid;
      } else {
        ids += app.globalData.uids[i].uid + ",";
      }

    }
    console.log("uids = " + ids);
    page++;
    console.log("開始獲取了-->" + page);
    // 獲取最新發布的商品
    wx.request({
      url: app.globalData.baseUrl + 'goodsstLast.action',
      data: {
        'page': page,
        'limit': 20,
        'uids': ids
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function(res) {
        console.log(res.data);
        var goods = res.data.data;
        if (res.data.code == 0) {
          if (res.data.data.length == 0) {
            page--;
            wx.showToast({
              title: '沒有更多了',
              icon: 'none',
              duration: 2000
            })
            return;
          }
          // console.log("商品列表爲：" + goods);
          for (var i in goods) {
            // console.log("時間爲：" + util.dateformat(parseInt(goods[i].addTime)));
            goods[i].addTime = util.dateformat(parseInt(goods[i].addTime));
            if (goods[i].headurl.indexOf("https") > -1) {
              // console.log("微信圖片");
            } else {
              goods[i].headurl = app.globalData.picUrl + goods[i].headurl;
            }

            if (goods[i].picurl != null) {
              goods[i].pic = app.globalData.picUrl + goods[i].picurl.split(",")[0];
            }
            // console.log(goods[i].headurl);
          }
          that.setData({
            lastNew: that.data.lastNew.concat(goods)
          });
          // console.log("當前商品列表：" + that.data.lastNew);
        }
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
        wx.stopPullDownRefresh();
      }
    });
  },
  onLoad: function(options) {
    // 頁面顯示
    console.log("用戶信息爲：" + app.globalData.accountInfo);
    //  console.log("類型"+app.globalData.goodsClass[0]);
    // 頁面初始化 options爲頁面跳轉所帶來的參數
    var that = this;
    console.log(app.globalData.baseUrl + '/advList.json');
    // 獲取廣告輪播
    wx.request({
      url: app.globalData.baseUrl + '/advList.json',
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 設置請求的 header
      success: function(res) {
        // console.log(res.data.home_banner);
        // success
        that.setData({
          adList: res.data.home_banner
        });

        console.log(that.data.adList);
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    });
    that.getLastGoods();
  },

實現效果：

商品詳細頁面
查看商品所有信息，評論、聯繫賣家、收藏商品、拉黑用戶
代碼：
isCJ: function(str) {
if (str.indexOf("【出價】") > -1) {
return true;
}
return false;
},
onPullDownRefresh: function() {
// do somthing
// console.log(“刷新了”);
this.onLoad(this.data.options);
},
addBlacklist: function() {
var that = this;
wx.showModal({
title: ‘提示’,
content: ‘您確定要將用戶【’ + that.data.goods.nickname + ‘】加入黑名單嗎？加入之後將看不到此用戶的商品動態’,
success(res) {
if (res.confirm) {
console.log(‘用戶點擊確定’)

      console.log("準備拉黑的用戶：" + that.data.goods.uid);
      wx.getStorage({
        key: 'uids',
        success: function(res) {
          var uids = res.data;
          console.log("" + uids);
          var isExisted = false;
          for (var i in uids) {
            if (uids[i].uid == that.data.goods.uid) {
              isExisted = true;
            }
          }
          if (!isExisted) { //不存在就保存
            console.log("不存在與黑名單，準備加入");
            var uidBean = {
              uid: that.data.goods.uid,
              nickname: that.data.goods.nickname,
              headurl: that.data.goods.headurl
            };
            uids.push(uidBean); //保存沒有拉黑過的用戶id

            wx.setStorage({
              key: 'uids',
              data: uids
            })
            app.globalData.uids = uids; //同步更新app中的數據
          } else {
            console.log("已存在，不用再加入了");
          }
        },
        fail: function() {
          console.log("失敗了，說明沒有加入過黑名單，現在插入第一個");
          var uids = [];
          var uidBean = {
            uid: that.data.goods.uid,
            nickname: that.data.goods.nickname,
            headurl: that.data.goods.headurl
          };
          uids.push(uidBean); //保存沒有拉黑過的用戶id
          console.log('uids = ' + uids);
          wx.setStorage({
            key: 'uids',
            data: uids
          })
          console.log('uids = ' + uids);
          app.globalData.uids = uids; //同步更新app中的數據
        },
        complete: function() {
          wx.showToast({
            title: '成功拉黑',
            icon: 'success',
            duration: 2000
          })
        }
      })
    } else if (res.cancel) {
      console.log('用戶點擊取消')
    }
  }
})

},
getGids: function() {
var that = this;
wx.getStorage({
key: ‘gids’,
success: function(res) {
that.setData({
gids: res.data
})
},
})
},
addCollection: function() {
var that = this;
var gids = that.data.gids;
var isCollection = that.data.isCollection;
console.log(“點擊前的狀態：” + isCollection);

if (isCollection) { //點之前是選中，刪除收藏     
  for (var i in gids) {
    if (gids[i] == that.data.goods.gid) {
      gids.splice(i, 1);
    }
  }
} else { //點之前是未選中，保存
  gids.push(that.data.goods.gid);
}
this.setData({
  isCollection: !isCollection
});
console.log("點擊後的狀態：" + that.data.isCollection);
that.setData({
  gids: gids
})
wx.setStorage({
  key: 'gids',
  data: gids,
  success: function(res) {},
  fail: function(res) {},
  complete: function(res) {
    wx.showToast({
      title: that.data.isCollection?'收藏成功':'取消收藏成功',
      duration: 2000
    })
  },
});

},

實現效果：


管理員端1、管理員登錄
動態驗證碼，背景爲動態氣泡
代碼：

<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form, $ = layui.jquery;

        var id = (new Date()).valueOf();
        $("#captcha_img").attr("src", 'adminerifycode.action?id=' + id);
        console.log("id= " + id);
        $("#captcha_img").click(function () {
            id = (new Date()).valueOf();
            $("#captcha_img").attr("src", 'adminerifycode.action?id=' + id);
            console.log("id= " + id);
        });

        //監聽提交
        form.on('submit(login)', function (data) {
            var loading = layer.load(1, {shade: [0.1, '#fff']});//0.1透明度的白色背景
            $.post('/admin/login.action?id=' + id, data.field, function (res) {
                layer.close(loading);
                if (res.code === 0) {
                    console.log("登陸結果爲：" + res.data[0].username);
                    sessionStorage.setItem("info", JSON.stringify(res.data[0]));
                    layer.msg("登錄成功", {icon: 1, time: 1000}, function () {
                        location.href = "/admin/main.html";
                    });
                } else if (res.code === 10001016) {
                    layer.open({
                        title: "提示",
                        content: res.msg
                        , btn: ['確定']
                        , end: function (index, layero) {
                            location.reload(false);
                        }
                    });
                } else {
                    $('#captcha').val('');
                    layer.msg(res.msg, {icon: 2, anim: 6, time: 1000});
                    id = (new Date()).valueOf();
                    $("#captcha_img").attr("src", 'adminerifycode.action?id=' + id);
                }
            });
            return false;
        });
        //自定義驗證規則
        form.verify({
            verifycode: function (value, item) { /alue：表單的值、item：表單的DOM對象
                if (value == null || value == '') {
                    return "驗證碼不能爲空";
                }
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '驗證碼沒有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '驗證碼沒有下劃線\'_\'';
                }
                if (value.length != 4) {
                    return '驗證碼爲4位';
                }
            }
        });
    });
</script>

實現效果：


商品詳情