基于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>
实现效果:
商品详情