摘要：結構設計文件結構所有數據庫操作代碼靜態資源庫，如路由操作，對應工具包代碼模板文件系統入口數據文件，可導入部分數據流圖用戶留言賣家添加圖書買家購書部分算法設計首先對于留言評論，防止惡意用戶刷留言評論，設置了定時銷毀器。

書窩線上地址
GitHub地址
由于時間有限，事務較重，系統實現只好從簡。

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

需要用戶系統，用戶是系統的根源，是數據的源頭，該系統的用戶就是要求中所說的會員，所以需要提供如下功能：

用戶注冊

用戶登錄

用戶信息查看

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

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

用戶留言

留言查看

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

賣家

圖書上架

圖書修改

圖書查看

銷售情況圖表

買家

圖書查看購買

買書記錄查看

圖書評論與刪除

該部分將涉及整個系統從無到有的設計思路，自底向上有

數據庫選擇和設計

服務器框架選擇和設計

前端框架選擇和設計

并且將針對具體細節給出相關表示，如數據字典，ER圖，數據流圖，算法設計等。

該系統我選擇了MySQL數據庫，具體原因如下：

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

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

具有SQLYog這種強大方便的圖形操作軟件，輕松導入導出數據，輕松連接遠程服務器傳遞數據。

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

用戶

留言

圖書

圖書評論

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

作為JS動態語言的受益者，我服務器肯定就選擇nodejs了。

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

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

JS語言簡潔靈活有趣。

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

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

文件結構

db/ 所有數據庫操作代碼
public/ 靜態資源庫，如js,css
routes/ 路由操作diam，對應url
utils/ 工具包代碼
views/ Jade模板文件
app.js 系統入口
mysql.sql mysql數據文件，可導入

部分數據流圖

用戶留言

賣家添加圖書

買家購書

部分算法設計

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

var _timer = {};

var Timer = {
    set : function (key,mill) { //設置定時器的關鍵字與銷毀時間
        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;
    }
}

該系統具有銷售分析，如某賣家所有銷售情況的折線圖，x軸表示日期，y軸表示該日售出書籍數目。
算法設計如下：

// all 表示所有賣家銷售記錄，0-N 時間從現在到以前
function makeLineChart(all) {
    if(all==null || all.length==0)
        return;
    //返回數據中 keys表示日期數組，data表示對應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:[]});
}

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

// all 表示所有賣家銷售記錄，0-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); // 根據最近時間的時間得到第二天0點時間
    var start = new Date(end - 1000*60*60*24*7); // 減去7天毫秒數，得到七天前時間
    var data = {keys:[pivot.title],data:[1]},titleMap = {};
    titleMap[pivot.title]=0; //初始化參數
    for(var i=all.length-2;i>=0;i--){
        if(new Date(all[i].tradeDate)
前端框架選擇和設計
選擇與原因
針對于用戶之間接觸的前端界面，我選擇了Bootstrap3.0 UI，jQuery，marked.js，highlight.js，pace.js，下面做出相關介紹與說明：

BootStrap3.0 
一套完備的UI框架，包括美觀的css樣式和一些基于jQuery的組件?？梢宰岄_發者用最少的時間建立一個美觀的界面。

jQuery
因為BootStrap組件需要，而且能夠方便進行DOM操作，強大的選擇器與鏈式調用。

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

highlight.js
與marked.js配套使用，能夠將代碼段解析為具有樣式類的庫。

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


文件結構
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模塊壓縮后真正傳送的樣式文件
特殊功能說明
提示框動態固定顯示

方法一：（固定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自適應
.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})
}
跳至評論，評論區高亮

@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編輯區可粘貼網絡圖片

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();
                // 調用
                document.execCommand("insertText", false, "![ClipboardImage]("+c+")");
            })
        }
    };
代碼段右上角顯示語言


系統截圖











收獲與體會

感受到了nodejs與express的魅力

增強了系統的整體把控架構能力

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

不足在于后端異步結構代碼比較冗雜，難于管理


參考資料

nodejs express4.x 文件上傳

Jade 完整教程

page.js

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

www.haorooms.com/post/jq_js_xxjdt