流動圖書館

流動圖書館是一個圖書漂流和借閱工具，旨在共享閑置圖書亏较，并鏈接趣味相投的小伙伴遏佣。

預(yù)覽

鏈接

image

技術(shù)棧

小程序MINA框架：一個響應(yīng)的數(shù)據(jù)綁定框架塔逃。分為兩塊視圖層(View)和邏輯層(App Service)
Flex：flex彈性布局
Express : http服務(wù)框架
websocket: 前后端消息的實(shí)時推送
mongoose: 操作mongodb數(shù)據(jù)庫
pm2: 服務(wù)端使用pm2部署讯壶，常駐進(jìn)程

截圖

首頁

1.png

借閱書架

2.png

發(fā)布的圖書

3.png

借閱的圖書

4.png

客戶端

代碼結(jié)構(gòu)

image.png

微信小程序中每個頁面會有四個文件 .js .json .wxml .wxss
js文件中是頁面的邏輯，json文件是頁面的一些配置湾盗，wxml是小程序的頁面結(jié)構(gòu)伏蚊，wxss為頁面的樣式。

封裝http請求

const request = (obj) => {
  if(obj.header){
    obj.header.sessionId = session.sessionId;
  }else{
    obj.header = { sessionId: session.sessionId};
  }
  wx.request(obj);
}

在請求頭中手動加上sessionId,因?yàn)樾〕绦驔]有cookie格粪。

websocket

//連接websocket
wx.connectSocket({
  url: 'wss://liudongtushuguan.cn/socket?sessionId=' + session.sessionId,
});

wx.onSocketOpen(function(res){

});
wx.onSocketClose(function(res){
  console.log('websocket closed');
});

wx.onSocketMessage(function(res){  //收到消息的回調(diào)
  let msg = JSON.parse(res.data);
  let msgs = that.data.borrowMessage;
  msgs.unshift(msg);
  that.setData({ borrowMessage: msgs});
});

//發(fā)送socket消息
  let data = JSON.stringify({
    targetId: bookData.ownerId,
    nickName: APP.globalData.userInfo.nickName,
    bookName: bookData.title,
    time: new Date().toLocaleString(),
    bookId: bookId,
    wxNum: wxNum,
    phoneNum: phoneNum,
    msg: msg,
  });
  wx.sendSocketMessage({
    data: data,
  });

服務(wù)端

image.png

Express框架實(shí)現(xiàn)http服務(wù)

const https = require('https');
const fs = require('fs');
const express = require('express')
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const app = express();
const queryString = require('querystring');
const URL = require('url');
const socket = require('./service/socket');

const router = require('./routes/router').router;

//獲取認(rèn)證證書
var key = fs.readFileSync('./key/2_www.liudongtushuguan.cn.key');
var cert = fs.readFileSync('./key/1_www.liudongtushuguan.cn_bundle.crt');

var options = {
    key : key,
    cert : cert,
};

app.use(cookieParser());
app.use(bodyParser.json());

const httpsServer = https.createServer(options,app);
httpsServer.listen(443,() =>{
    console.log('listening 443 port');
});

socket(httpsServer);  //websocket

app.use(router);

小程序規(guī)定必須要用https協(xié)議躏吊。

websocket模塊

這里使用ws模塊而沒有選擇使用socket.io，因?yàn)樾〕绦蚩蛻舳瞬恢С謘ocket.io

const WebSocket = require('ws');  //使用ws模塊
const queryString = require('querystring');
const URL = require('url');
const sessions = require('./session');



module.exports = (httpServer) => {

    const wss = new WebSocket.Server({server : httpServer});

    wss.on('connection',(ws, req) => {
            let sessionId = queryString.parse(URL.parse(req.url).query).sessionId;
            ws.id = sessionId;
            ws.on('message' , (msg) => {
                    let msgObj = JSON.parse(msg);
                    if(sessions[msgObj.targetId]){
                        wss.clients.forEach((client) => {
                        if(client.id === msgObj.targetId){
                            let data = {
                                time : msgObj.time,
                                borrower :msgObj.nickName, 
                                book :msgObj.bookName,
                                borrowerId : sessions[sessionId],
                                bookId : msgObj.bookId,
                                wxNum : msgObj.wxNum,
                                phoneNum : msgObj.phoneNum,
                                msg : msgObj.msg
                            };
                            client.send(JSON.stringify(data));
                        }
                    });
                    }
            });
    });
};

mongoose操作數(shù)據(jù)庫

db.js:

const mongoose = require('mongoose');

mongoose.connect('mongodb://app:12345678@127.0.0.1/wxapp');

const connection = mongoose.connection;
connection.once('open', (err) => {
    if(err){
        console.log('Database connection failure');
    }else{
        console.log('Database opened');

    }
});

connection.on('error',(err) => {
    console.log('Mongoose connected error '+ err);
});

connection.on('disconnected', () => {
    console.log('Mongoose disconnected');
});

module.exports = {
    connection : connection,
    mongoose : mongoose,
};

model.js:

const Schema = mongoose.Schema;

const UserSchema = new Schema({
    onlyId : {type: String},
    publishedBooks : {type: Array},
    borrowedBooks : {type: Array},
    borrowMessages : Array, 
});

const BookSchma = new Schema({
    isbn : String,
    title : String,
    press : String,
    author : String,
    rate : String,
    tags : String,
    image : String,
    status : {type : Boolean,default : true},
    ownerId : String,
    owner : String,
    ownerImage : String,
});

const userModel =  mongoose.model('user' , UserSchema);
const bookModel = mongoose.model('book' , BookSchma);

module.exports = {
    UserModel  : userModel,
    BookModel : bookModel,
}

獲得微信用戶的openId

小程序前端會請求微信服務(wù)器得到一個code, 將code發(fā)送給自己的服務(wù)器帐萎，然后自己的服務(wù)器給微信服務(wù)器發(fā)送請求比伏，得到微信用戶的唯一標(biāo)識openId

const https = require('https');
const queryString = require('querystring');

const sessions = require('./session');


module.exports = (req, res, next) => {
        let code = req.query.code;
        let otherRes = res;
        DATA.js_code = code;
        OPTION.path = PATH + queryString.stringify(DATA);
        let wxReq = https.request(OPTION, (res) => {
            if(res.statusCode == 200){
                let json = '';
                res.on('data' , (data) => {
                    json+=data;
                });
                res.on('end' , () => {
                    json =JSON.parse(json);
                    let openId = json.openid;
                    sessions[openId] = openId;
                    otherRes.type('application/json');
                    otherRes.json({
                        data : {'sessionId' : openId},
                    });
                    otherRes.status(200);
                });
            }
        });
        wxReq.end();
};

使用pm2部署

安裝pm2

npm install  -g pm2

啟動應(yīng)用

pm2 start app.js

總結(jié)

流動圖書館小程序是由三個人的小團(tuán)隊(duì)設(shè)計(jì)和開發(fā)的。我主要負(fù)責(zé)前后端的開發(fā)工作疆导。這對從來沒接觸過服務(wù)端和小程序開發(fā)的我來說是一個挑戰(zhàn)當(dāng)然也是一次難得的學(xué)習(xí)機(jī)會赁项。從最初對小程序，服務(wù)端兩眼一抹黑澈段，到搭建出應(yīng)用的雛形悠菜，實(shí)現(xiàn)基本的效果，再到最后的拆分整合代碼败富，這期間經(jīng)歷了很多悔醋，也收獲了很多。從數(shù)據(jù)庫的設(shè)計(jì)到后臺數(shù)據(jù)庫操作兽叮、會話管理篙顺、http服務(wù)接口一直到前后端數(shù)據(jù)交互、小程序前端充择，我對程序開發(fā)的大致流程有了更進(jìn)一步的了解，彌補(bǔ)的之前對服務(wù)端知識的缺失匪蟀。

三個人的小團(tuán)隊(duì)椎麦，因?yàn)榕d趣結(jié)在一起，利用工作之余的時間完成自己喜歡的事情真的是一件令人十分有成就感的事情材彪。

有興趣的可以看源碼

小程序前端

小程序后端

如果覺得不錯观挎，就毫不吝嗇地給個star吧。后期項(xiàng)目還會繼續(xù)更新和完善段化。

原文地址