express搭建图书贩卖体系

书窝线上地点
GitHub地点
由于时刻有限，事件较重，体系完成只好从简。

需求剖析

需交课程设想报告和软件（源代码）。课程设想报告将存档。报告内容包含：需求剖析、算法头脑形貌、数据流图、E-R图、数据字典、程序构造、收成与体味等。
功用请求：完成一个基于web的网上图书的贩卖治理体系，能供应多种前提的查询，还应具有会员治理、看法反应、贩卖剖析等功用。将留言板、图表剖析、文件上传等头脑归入个中。

用户体系

须要用户体系，用户是体系的泉源，是数据的泉源，该体系的用户就是请求中所说的会员，所以须要供应以下功用：

• 用户注册

• 用户登录

• 用户信息检察

• 用户既可所以卖家，亦可所以买家

用户留言(信息反应)

为了逐步完美体系，供运用户与建站者的交换通道，而且该通道不仅限于用户与建站者，用户与用户之间也能够相互交换，进步趣味性。详细功用以下：

• 用户留言

• 留言检察

卖家买家体系

生意离不开卖家买家，该体系亦是云云，须要以下功用列表：

• 卖家

  • 图书上架

  • 图书修正

  • 图书检察

  • 贩卖状况图表

• 买家

  • 图书检察购置

  • 买书纪录检察

  • 图书批评与删除

设想文档

该部份将触及全部体系从无到有的设想思绪，自底向上有

1. 数据库挑选和设想

2. 效劳器框架挑选和设想

3. 前端框架挑选和设想

而且将针对详细细节给出相干示意，如数据字典，ER图，数据流图，算法设想等。

数据库挑选和设想

挑选与缘由

该体系我挑选了MySQL数据库，详细缘由以下：

1. MySQL异常轻量，比拟课堂上讲的SQL Server数据库，一个安装包2GB，MySQL的500MB几乎小巫见大巫（近来看到属于NoSQL的MongoDB竟然只要100MB）。

2. 短时刻须要完成该体系，同时关于MySQL异常熟习，之前做在线订票体系，在线测验体系等都是竖立在MySQL上。

3. 具有SQLYog这类壮大轻易的图形操纵软件，轻松导入导出数据，轻松衔接长途效劳器通报数据。

基于以上缘由，因而挑选了MySQL。

数据字典

用户

留言

图书

图书批评

生意业务
由于生意业务完成后，卖家依然能够对图书举行修正，所以我将买进时图书信息都寄存在此表中，示意买进时图书的信息。

E-R图

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) break;
var title = all[i].title;
if(titleMap

前端框架挑选和设想

挑选与缘由

针关于用户之间打仗的前端界面，我挑选了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(/{
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