express搭建图书销售系统

前端框架选择和设计

选择与原因

针对于用户之间接触的前端界面，我选择了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 APIclipboardData = 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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！