摘要：結(jié)構(gòu)設(shè)計文件結(jié)構(gòu)所有數(shù)據(jù)庫操作代碼靜態(tài)資源庫，如路由操作，對應(yīng)工具包代碼模板文件系統(tǒng)入口數(shù)據(jù)文件，可導(dǎo)入部分?jǐn)?shù)據(jù)流圖用戶留言賣家添加圖書買家購書部分算法設(shè)計首先對于留言評論，防止惡意用戶刷留言評論，設(shè)置了定時銷毀器。

書窩線上地址
GitHub地址
由于時間有限，事務(wù)較重，系統(tǒng)實(shí)現(xiàn)只好從簡。

需交課程設(shè)計報告和軟件（源代碼）。課程設(shè)計報告將存檔。報告內(nèi)容包括：需求分析、算法思想描述、數(shù)據(jù)流圖、E-R圖、數(shù)據(jù)字典、程序結(jié)構(gòu)、收獲與體會等。
功能要求：實(shí)現(xiàn)一個基于web的網(wǎng)上圖書的銷售管理系統(tǒng)，能提供多種條件的查詢，還應(yīng)具有會員管理、意見反饋、銷售分析等功能。將留言板、圖表分析、文件上傳等思想納入其中。

需要用戶系統(tǒng)，用戶是系統(tǒng)的根源，是數(shù)據(jù)的源頭，該系統(tǒng)的用戶就是要求中所說的會員，所以需要提供如下功能：

用戶注冊

用戶登錄

用戶信息查看

用戶既可以是賣家，亦可以是買家

為了逐漸完善系統(tǒng)，提供用戶與建站者的交流通道，并且該通道不僅限于用戶與建站者，用戶與用戶之間也能夠互相交流，提高趣味性。具體功能如下：

用戶留言

留言查看

買賣離不開賣家買家，該系統(tǒng)亦是如此，需要如下功能列表：

賣家

圖書上架

圖書修改

圖書查看

銷售情況圖表

買家

圖書查看購買

買書記錄查看

圖書評論與刪除

該部分將涉及整個系統(tǒng)從無到有的設(shè)計思路，自底向上有

數(shù)據(jù)庫選擇和設(shè)計

服務(wù)器框架選擇和設(shè)計

前端框架選擇和設(shè)計

并且將針對具體細(xì)節(jié)給出相關(guān)表示，如數(shù)據(jù)字典，ER圖，數(shù)據(jù)流圖，算法設(shè)計等。

該系統(tǒng)我選擇了MySQL數(shù)據(jù)庫，具體原因如下：

MySQL十分輕量，相比課堂上講的SQL Server數(shù)據(jù)庫，一個安裝包2GB，MySQL的500MB簡直小巫見大巫（最近看到屬于NoSQL的MongoDB居然只有100MB）。

短時間需要完成該系統(tǒng)，同時對于MySQL十分熟悉，之前做在線訂票系統(tǒng)，在線考試系統(tǒng)等都是建立在MySQL上。

具有SQLYog這種強(qiáng)大方便的圖形操作軟件，輕松導(dǎo)入導(dǎo)出數(shù)據(jù)，輕松連接遠(yuǎn)程服務(wù)器傳遞數(shù)據(jù)。

基于以上原因，因此選擇了MySQL。

用戶

留言

圖書

圖書評論

交易
因為交易完成后，賣家仍然可以對圖書進(jìn)行修改，所以我將買進(jìn)時圖書信息都存放在此表中，表示買進(jìn)時圖書的信息。

作為JS動態(tài)語言的受益者，我服務(wù)器肯定就選擇nodejs了。

未使用過nodejs開發(fā)一個相對完整的系統(tǒng)，打算就將該系統(tǒng)作為入門了。

nodejs非常適合IO密集型的應(yīng)用，采用的是異步事件隊列的機(jī)制。

JS語言簡潔靈活有趣。

nodejs
基于ChromeV8引擎，以JS作為宿主語言的一個虛擬環(huán)境，JS于NodeJs可以看做是Java于JVM，NodeJs現(xiàn)在正在不斷發(fā)展中，目標(biāo)是與Java一樣，能夠形成一套十分完備的庫，目前NodeJs的生態(tài)環(huán)境非常好，第三方模塊層出不窮，而且由于npm，這些包是否方便管理與下載。

express
介紹完nodejs，那么express是什么呢？express是nodejs的一個第三方Web框架，開發(fā)者可以用該框架非常方便有效的建立HTTP服務(wù)。

文件結(jié)構(gòu)

db/ 所有數(shù)據(jù)庫操作代碼
public/ 靜態(tài)資源庫，如js,css
routes/ 路由操作diam，對應(yīng)url
utils/ 工具包代碼
views/ Jade模板文件
app.js 系統(tǒng)入口
mysql.sql mysql數(shù)據(jù)文件，可導(dǎo)入

部分?jǐn)?shù)據(jù)流圖

用戶留言

賣家添加圖書

買家購書

部分算法設(shè)計

首先對于留言評論，防止惡意用戶刷留言評論，設(shè)置了定時銷毀器。
算法設(shè)計如下：

var _timer = {};

var Timer = {
    set : function (key,mill) { //設(shè)置定時器的關(guān)鍵字與銷毀時間
        this.remove(key);
        _timer[key] ={mill:mill};
        _timer[key].code = setTimeout(function () {
            delete _timer[key];
        },mill);
    },
    isExist : function(key){
        return !!_timer[key];
    },
    remove : function(key){
        if(this.isExist(key)){
            clearTimeout(_timer[key].code);
            delete _timer[key];
            return true;
        }
        return false;
    }
}

該系統(tǒng)具有銷售分析，如某賣家所有銷售情況的折線圖，x軸表示日期，y軸表示該日售出書籍?dāng)?shù)目。
算法設(shè)計如下：

// all 表示所有賣家銷售記錄，0-N 時間從現(xiàn)在到以前
function makeLineChart(all) {
    if(all==null || all.length==0)
        return;
    //返回數(shù)據(jù)中 keys表示日期數(shù)組，data表示對應(yīng)keys日期的銷售量
    return all.reduceRight((p,n)=>{ // 從右向左歸并
        var date = n.tradeDate;
        if(p.keys[p.keys.length-1]!=date){
            p.keys.push(date);
            p.data.push(1);
        }else{
            p.data[p.data.length-1]++;
        }
        return p;             
    },{keys:[],data:[]});
}

銷售分析中還具有周最受歡迎圖書餅圖，表示一周內(nèi)各個圖書銷售情況。
算法設(shè)計如下：

// all 表示所有賣家銷售記錄，0-N 時間從現(xiàn)在到以前
function makePieChart(all) {
    if(all==null || all.length==0)
        return;
    var pivot = all[all.length-1];  // 取出最后一個交易記錄，也就是最近的
    var end = new Date(pivot.tradeDate).setHours(24); // 根據(jù)最近時間的時間得到第二天0點(diǎn)時間
    var start = new Date(end - 1000*60*60*24*7); // 減去7天毫秒數(shù)，得到七天前時間
    var data = {keys:[pivot.title],data:[1]},titleMap = {};
    titleMap[pivot.title]=0; //初始化參數(shù)
    for(var i=all.length-2;i>=0;i--){
        if(new Date(all[i].tradeDate)
前端框架選擇和設(shè)計
選擇與原因
針對于用戶之間接觸的前端界面，我選擇了Bootstrap3.0 UI，jQuery，marked.js，highlight.js，pace.js，下面做出相關(guān)介紹與說明：

BootStrap3.0 
一套完備的UI框架，包括美觀的css樣式和一些基于jQuery的組件。可以讓開發(fā)者用最少的時間建立一個美觀的界面。

jQuery
因為BootStrap組件需要，而且能夠方便進(jìn)行DOM操作，強(qiáng)大的選擇器與鏈?zhǔn)秸{(diào)用。

marked.js
一個將markdown文本翻譯為HTML的庫，api簡單。

highlight.js
與marked.js配套使用，能夠?qū)⒋a段解析為具有樣式類的庫。

pace.js
通過檢查瀏覽器加載的狀態(tài)，判斷文檔加載進(jìn)度，并且提供了一系列的css樣式，能夠在頁面加載的時候顯示頁面加載進(jìn)度。


文件結(jié)構(gòu)
public/
├── javascripts/
│   ├── addbook.js
│   ├── Ajaxdelete.js
│   ├── indexjs.js
│   ├── msgAnimate.js
│   ├── msgjs.js
│   ├── popImage.js
│   ├── search.js
│   ├── selljs.js
│   ├── utils.js
└── stylesheets/
    ├── bootstrap/
    ├── style.less
    ├── style.css
    ├── hljs-github-min.css
    └── markdown.less
stylesheets/文件夾放的是樣式文件，其中的style.less是入口，style.css是利用node模塊壓縮后真正傳送的樣式文件
特殊功能說明
提示框動態(tài)固定顯示

方法一：（固定width）
.messages{
  .box-shadow(0px 0px 8px 3px #bbb);
  z-index: 10000;
  position: fixed;
  width: 340px;
  height: 50px;
  left: 50%;
  top : -50px;
  margin-left: -170px;

  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
  opacity:0;
}
window.onload = function () {
    $(".messages")
        .css({"transform":"translate(0,120px)",opacity:1})
}
方法二：width自適應(yīng)
.messages{
  .box-shadow(0px 0px 8px 3px #bbb);
  z-index: 10000;
  position: fixed;
  left: 50%;
  top : 0px;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);

  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
  opacity:0;
}
window.onload = function () {
    $(".messages")
        // .css({"transform":"translate(0,120px)",opacity:1})
        .css({"margin-top":"140px",opacity:1})
}
跳至評論，評論區(qū)高亮

@keyframes blinking {
    0% {
        //opacity: 0;
    }
    30%{
        background-color: #fcf8e3;
    }
    100% {
        background-color: #fcf8e3;
        //opacity: 1;
    }
}
.blink{
    .animation(blinking 2.8s)
}
$("[role=link-msg]").click(function (e) {
        var x = $(this.hash).next().children().removeClass("blink")
        setTimeout(function () {
            x.addClass("blink").children("textarea").focus();
        },0)
    });
markdown編輯區(qū)可粘貼網(wǎng)絡(luò)圖片

input.onpaste = function (e) {
        var clipboardData, pastedData;

        // Get pasted data via clipboard API
        clipboardData = e.clipboardData || window.clipboardData;
        var text = clipboardData.getData("text/plain");
        if(!text){
            var img = clipboardData.getData("text/html");
            img.replace(/{
                e.preventDefault();
                // 調(diào)用
                document.execCommand("insertText", false, "![ClipboardImage]("+c+")");
            })
        }
    };
代碼段右上角顯示語言


系統(tǒng)截圖











收獲與體會

感受到了nodejs與express的魅力

增強(qiáng)了系統(tǒng)的整體把控架構(gòu)能力

掌握了一些常見具體問題的處理方式

不足在于后端異步結(jié)構(gòu)代碼比較冗雜，難于管理


參考資料

nodejs express4.x 文件上傳

Jade 完整教程

page.js

javascript-get-clipboard-data-on-paste-event-cross-browser

www.haorooms.com/post/jq_js_xxjdt