express搭建圖書銷售系統

圖書銷售系統 —— 書窩

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

---

需求分析

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

<!--more-->

用戶系統

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

• 用戶註冊

• 用戶登陸

• 用戶信息查看

• 用戶既能夠是賣家，亦能夠是買家

用戶留言(信息反饋)

爲了逐漸完善系統，提供用戶與建站者的交流通道，而且該通道不只限於用戶與建站者，用戶與用戶之間也可以互相交流，提升趣味性。具體功能以下：

• 用戶留言

• 留言查看

賣家買家系統

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

• 賣家

  • 圖書上架

  • 圖書修改

  • 圖書查看

  • 銷售狀況圖表

• 買家

  • 圖書查看購買

  • 買書記錄查看

  • 圖書評論與刪除

---

設計文檔

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

1. 數據庫選擇和設計

2. 服務器框架選擇和設計

3. 前端框架選擇和設計

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

數據庫選擇和設計

選擇與緣由

該系統我選擇了MySQL數據庫，具體緣由以下：

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

2. 短期須要完成該系統，同時對於MySQL十分熟悉，以前作在線訂票系統，在線考試系統等都是創建在MySQL上。

3. 具備SQLYog這種強大方便的圖形操做軟件，輕鬆導入導出數據，輕鬆鏈接遠程服務器傳遞數據。

基於以上緣由，所以選擇了MySQL。

數據字典

用戶

字段	類型	備註
username	varchar(12)	用戶名,惟一, 6-12位
email	varchar(20)	電子郵箱,惟一
password	varchar(12)	密碼,6-12位
registerDate	date	註冊日期

留言

字段	類型	備註
username	varchar(12)	留言者用戶名
content	text	留言內容
datetime	datetime	留言時間

圖書

字段	類型	備註
bookID	char(8)	圖書ID,惟一,如BK123456
title	varchar(25)	書名
author	varchar(25)	做者
press	varchar(25)	出版社
price	decimal(10,1)	價格,保留小數點後一位
quantity	int(11)	庫存量(本)
image	mediumblob	封面圖片
seller	varchar(12)	賣家用戶名
importDate	date	上架日期

圖書評論

字段	類型	備註
username	varchar(12)	評論人用戶名
bookID	char(8)	被評論圖書
datetime	datetime	評論時間
content	text	評論內容

交易
由於交易完成後，賣家仍然能夠對圖書進行修改，因此我將買進時圖書信息都存放在此表中，表示買進時圖書的信息。

字段	類型	備註
tradeID	char(10)	交易記錄ID,惟一,如TD12345678
tradeDate	date	交易日期
buyer	varchar(12)	買家用戶名
bookID	char(8)	書本ID
title	varchar(25)	書名
author	varchar(25)	做者
press	varchar(25)	出版社
price	decimal(10,1)	買進價格
quantity	int(11)	庫存
image	mediumblob	封面
seller	varchar(12)	賣家

E-R圖

服務器框架選擇和設計

選擇與緣由

做爲JS動態語言的受益者，我服務器確定就選擇nodejs了。

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

2. nodejs很是適合IO密集型的應用，採用的是異步事件隊列的機制。

3. JS語言簡潔靈活有趣。

nodejs與express

• 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)<start) // 若是時間再七天以前，跳出循環
            break;
        var title = all[i].title;
        if(titleMap[title]==null){
            titleMap[title] = data.keys.length;
            data.keys.push(title);
            data.data.push(1);
        }else
            data.data[titleMap[title]]++;
    }
    return data;
}

前端框架選擇和設計

選擇與緣由

針對於用戶之間接觸的前端界面，我選擇了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模塊壓縮後真正傳送的樣式文件

特殊功能說明

1. 提示框動態固定顯示
   

方法一：（固定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})
}

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)
    });

1. 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(/<img.+src="(.+?)"/g,(m,c)=>{
                e.preventDefault();
                // 調用
                document.execCommand('insertText', false, "![ClipboardImage]("+c+")");
            })
        }
    };

1. 代碼段右上角顯示語言
   

---

系統截圖

---

收穫與體會

• 感覺到了nodejs與express的魅力

• 加強了系統的總體把控架構能力

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

• 不足在於後端異步結構代碼比較冗雜，難於管理

參考資料

• nodejs express4.x 文件上傳

• Jade 完整教程

• page.js

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

• www.haorooms.com/post/jq_js_xxjdt