1. 程式人生 > >基於微信小程式的校園二手商城設計與開發

基於微信小程式的校園二手商城設計與開發

時間過得可真快啊,轉眼間大學四年就結束了,人總是到了要分別的時候才懂得去懷念過去啊。前段時間弄完了畢業論文,最近在導師實驗室搬磚,一直沒時間整理,今天終於有時間,所以想把畢設給整理一下,首先宣告這個畢設做的很一般哈,給大家樂一下,也算是送給自己的畢業禮物吧

正文如下:

軟體功能及核心程式碼

4.1.1 使用者登入註冊 

首先是在使用者進入平臺時獲取使用者微信暱稱,儲存作為使用者名稱。至於使用者ID,是通過java中的UUID方法隨機分配一唯一值。最後將這兩項必填資訊寫入資料庫完成註冊

核心程式碼如下:

1)獲取使用者微信暱稱

// 登入

let that = this

wx.login({

success: res => {

// 傳送 res.code 到後臺換取 openId, sessionKey, unionId

},

})

// 獲取使用者資訊

wx.getSetting({

success: res => {

if (res.authSetting['scope.userInfo']) {

// 已經授權,可以直接呼叫 getUserInfo 獲取頭像暱稱,不會彈框

wx.getUserInfo({

success: res => {

// 可以將 res 傳送給後臺解碼出 unionId

that.globalData.userInfo = res.userInfo //獲取使用者基本資訊並儲存為全域性變數

that.globalData.userName = res.userInfo.nickName //獲取使用者微信暱稱並儲存為全域性變數

2)UUID方法隨機分配一唯一值

String uid = UUID.randomUUID().toString().substring(0, 8); //獲取UUID生成的32位數的前8位作為使用者ID

4.1.2 商品分類導航 

商品總共有4中分類,系統為每種分類分配一ID值,內容欄將會根據不同ID值顯示不同型別的商品。

核心程式碼如下:

//商品類別標籤切換事件

switchTab: function (e) {

let id = e.currentTarget.dataset.id      //獲取前端商品類別的ID值

let type                                   //定義商品類別變數

let num = 0                               //定義儲存商品類別的陣列初始下標

claArray = []                             //定義儲存商品類別陣列的臨時變數

var that = this

this.setData({

curNavId: id,                             //給前端商品類別賦值

})

//通過id分類List頁面內容

switch(id){

case 1:

type = "推薦"

break;

case 2:

type = "學習"

break;

case 3:

type = "運動"

break;

case 4:

type = "生活"

break;

case 5:

type = "智慧"

break;

}

if (GoodContent.length > 0){

for (let i = 0; i < GoodContent.length; i++) {

let content = GoodContent[i]

if (content.GoodType == type || type == "推薦") { //content.GoodType很關鍵

claArray[num++] = content

}

}

this.setData({

listContent: claArray

})

4.1.3 熱門商品展示 

熱門商品展示主要是本系統會根據商城各商品的點選瀏覽量,自動推薦瀏覽量最高的前5款商品展示在主頁。

核心程式碼如下:

//連線資料庫獲取商品資訊

wx.request({

url: 'http://localhost:8080/Ajax-Servlet-Test1/StoreMsg',  //伺服器地址

data: {

xx: 'selectAll',

},

header: {

'Content-Type': 'application/json'

},

success: function (res) {

that.globalData.GoodMessage = res.data   //將獲取的資料儲存在GoodMessage 全域性變數

}

})

var urlList = new Array()          //定義儲存熱門商品圖片Url地址的陣列

for (let i = 0; i < 5; i++) {

urlList[i] = app.globalData.GoodMessage[i].GoodImgUrl

}

4.1.4 模糊搜尋商品

  模糊搜尋商品主要是根據使用者輸入的關鍵字進行檢索,使用者輸入商品資訊關鍵字,與已釋出的商品資訊進行匹配,搜尋到符合要求的商品

核心程式碼如下:

//獲取伺服器資料

getdata:function(){

let that = this

wx.request({

url: 'http://localhost:8080/Ajax-Servlet-Test1/inputMsg',

data: {

xx: 'select',

yy: that.data.inputValue            //使用者輸入的關鍵字

},

header: {

'Content-Type': 'application/json'

},

success: function (res) {

that.setData({

list:res.data                      //將伺服器返回的匹配資訊儲存

})

}

})

},

//伺服器端與資料庫進行互動

if(str.equals(goodName)){

String sql = "SELECT * From good WHERE GoodTitle LIKE '%"+goodName+"'%";

PreparedStatement prep = null;

try {

prep = (PreparedStatement) connection.prepareStatement(sql);

ResultSet result = prep.executeQuery();

while(result.next()){

Good good = new Good();

String GoodTitle = result.getString("GoodTitle");

good.setUserName(GoodTitle);

goodList.add(good);

}

} catch (SQLException e) {

e.printStackTrace();

}

}

Gson gson = new Gson();

String goods = gson.toJson(goodList);

write.write(goods);

4.1.5 釋出商品 

有效使用者在釋出商品資訊時,填寫商品名稱、商品圖片、商品類別、商品介紹、聯絡人ID、聯絡人姓名等資訊,然後通過request訪問伺服器將資料寫進資料庫。

核心程式碼如下:

1)獲取本地圖片,並將圖片臨時地址儲存在資料庫

//上傳圖片

bindSendImage:function(res){

let that = this

wx.chooseImage({

count:1,                                  //定義本地選擇圖片時只能選擇一張

sizeType:['original', 'compressed'],      //定義選擇的圖片可以被壓縮

sourceType:['album', 'camera'],           //圖片既可以從相簿中選擇也可以拍照獲取

success: function(res) {

that.setData({

imgUrl:res.tempFilePaths[0]               //獲取本地圖片url地址

})

4.1.6 商品收藏 

使用者在進入商品的詳細資訊介面時,如果喜歡該物品但是又不想立刻購買的話,可以收藏該物品,收藏好的商品也可以點選取消。

核心程式碼如下:

//收藏事件

switchSC:function(id){

let that = this

let userId = app.globalData.userId      //獲取登入使用者ID

switch (id){

case 0:

this.setData({

shoucang:"收藏"

})

//連線資料庫刪除使用者收藏資訊

wx.request({

url: 'http://localhost:8080/Ajax-Servlet-Test1/StoreMsg',

data: {

xx: 'deleteSC',

yy: userId,                  //使用者ID

zz: that.data.GoodId,        //商品ID

ss: that.data.DjId           //店家ID

},

header: {

'Content-Type': 'application/json'

},

success: function (res) {

console.log("刪除成功")

}

})

break;

case 1:

this.setData({

shoucang:"收藏成功"

})

//連線資料庫新增使用者收藏資訊

wx.request({

url: 'http://localhost:8080/Ajax-Servlet-Test1/StoreMsg',

data: {

xx: 'insertSC',

yy: userId,                  //使用者ID

zz: that.data.GoodId,        //商品ID

ss: that.data.DjId           //店家ID

},

header: {

'Content-Type': 'application/json'

},

success: function (res) {

console.log("收藏成功")

}

})

break;

}

},

4.1.7 商品購買

本平臺商品在購買時採用的是偽支付事件。有效使用者在主頁商品資訊展示欄或者進入商品的詳細資訊介面時,可以選擇購買心儀的商品,購買成功的商品不可以點選取消。

核心程式碼如下:

//購買事件

goumai_btn: function () {

let that = this

wx.request({

url: 'http://localhost:8080/Ajax-Servlet-Test1/StoreMsg',

data: {

xx: 'insertGM',

yy: userId,                  //使用者ID

zz: that.data.GoodId,        //商品ID

ss: that.data.DjId           //店家ID

},

header: {

'Content-Type': 'application/json'

},

success: function (res) {

console.log("購買成功")

})

}

4.1.8 商品購物車功能

購物車裡展示的是使用者已收藏的商品資訊,使用者可以刪除相應已收藏的商品資訊,也可以點選進入相應收藏商品的詳細資訊介面瀏覽商品資訊。

核心程式碼如下:

//連線資料庫獲取使用者收藏資訊

wx.request({

url: 'http://localhost:8080/Ajax-Servlet-Test1/StoreMsg',

data: {

xx: 'showSC',

yy: userId,            //使用者ID

},

header: {

'Content-Type': 'application/json'

},

success: function (res) {

console.log("查詢收藏資訊成功!")

that.setData({

listContent: res.data           //將查詢到的收藏資訊儲存在listContent陣列

})

}

})

//連線資料庫刪除使用者收藏資訊

wx.request({

url: 'http://localhost:8080/Ajax-Servlet-Test1/StoreMsg',

data: {

xx: 'delSCGood',

yy: userId,                  //使用者ID

zz: msgGId,                  //商品ID

ss: msgUId                   //店家ID

},

header: {

'Content-Type': 'application/json'

},

success: function (res) {

console.log("刪除收藏資訊成功!")

that.switchType(type)

})

4.1.9 釋出商品管理 

主要是展示使用者已釋出的商品資訊,使用者可以刪除相應已釋出的商品資訊記錄,也可以點選進入相應釋出商品的詳細資訊介面瀏覽商品資訊。核心程式碼跟購物車裡程式碼相似,這裡就不多加贅述。

4.1.10 購買商品管理

主要是展示使用者已購買的商品資訊,使用者可以刪除相應已購買的商品資訊記錄,也可以點選進入相應購買商品的詳細資訊介面瀏覽商品資訊。核心程式碼跟購物車裡程式碼相似這裡就不多加贅述

以下是專案圖片,僅供參考哈