闲来无事写了一个最小商城，实现了一个商城的基本功能和基本ui，虽然功能不是很多，用到的知识却不少，借此复习一下和学习一下学过的东西。
代码扔到个人github库：点击这里
先上作品，首先要说的是服务器，此服务器纯nodejs搭建，用了nodejs最火的框架express，后面一些插件用到再说吧~
作品分为pc端和移动端，pc端又分为商品页和后台管理页面。
打开localhost：3000（nodejs默认3000端口），首先展示了页面，普通的商场格式，设计和布局什么的就不说了（比较渣，没有设计，凑合看）
然后是登陆页面，仿淘宝登陆，输入正确，登陆按钮会启用，后面还有几种登陆方式，到后面再说。登陆页面的账号信息是没有输入到前台，所以视频第一次是输错密码了，没有提示并返回，后面移动端输错，打开了服务器也看到了console.log
然后是加入购物车了，懒得做商品详情页了，就把加入购物车放到商品处。
说到商品，主页的商品是由react渲染的（此处没有用redux和es6，是因为我会再用es6+react+redux+react-router写一份作品，此次仅仅是react的简单应用，期待ing）。直接拉取数据，用react组件（web component是现在前端流行趋势，因为耦合度低，代码清晰，纯净，好维护，与其他依赖低等等。react就是其中之一）方式呈现，它的优点就是大量操作dom的时候节省性能，商场不一定要用的。
然后是打开购物车界面，用jquery操作全选，删除等等，配合ajax与后台交互。
其实博主更倾向于用angular做这种操作，原因是angular的数据绑定能减少很多的jq代码，而且angular在大应用的性能非常好。（虽然有很多坑）
点击结账后跳转成功页面，再到收藏页面没什么说的。（博主太懒，收藏夹、购物车的图片没换）充值也是一个form表单。最后到pc的一个聊天室。这个聊天室是用了h5的websocket新技术，非长轮询的http交换，websocket性能更好。聊天室的实现是node的热门模块socket.io实现的，socket.io+nodejs是当下websocket实现的非常好的方式。
然后到注册，这个注册表单的验证方式是时事的，每次输入都会验证，错误即会红框并弹错。
然后是pc的第二部分，后台管理页，输入错误会弹窗，此处没有演示。进入管理页面，整个后台管理都是angular的应用。可能仔细的同学可以看到每次切换并不会刷新页面，这是由node渲染了页面主路由。然后后面的子路由，包括模版都是由angular控制的。页面表格大家也看出管理员的表格和其他的并不一样，第一个表格是用ng-grid渲染（后来改为叫ui-grid）大家也能看到ng-grid的强大之处了，还有好多功能并没有写出来。后面的会员管理，订单管理等等都是拉取的数据库数据。加了操作项，商品页面有分页，也是由angular写的分页。
商品进货的表单是标准的angular表单验证，输入错误下面就会出现提示，感觉和第一个注册页面没什么区别，但是用angular来写感觉更高大上，哈哈～最主要是代码量减少了一大截。因为angular的双向绑定和一些内置的指令，加上angular的事件系统，这是博主喜欢angular的原因。（事件系统在分页里有用到，别的特效也都有用到）
最后是移动端的页面，移动端流量真的是得节省，本商城用不到h5的一些移动端接口，也没有用框架，只用了一个移动端功能强大的swiper插件，轮播图插件（pc端的轮播图是自己写的）
移动端自然页面都要适应一下，因为特意做了移动端，也没有用到css3的相应式设计。视频中，我用chrome模拟了手机端，它就打开了手机端，在node里面我判断了useragent，于是就酱。。
一些页面也没有必要说了，购物车是手写的逻辑，别的页面也仅仅是视图加了一点处理。移动端最值得说的就是这个图片预加载和点击更新了。（当然有人跟我说人家移动端都是延迟加载，你还预加载了）预加载是为了让页面打开即能开到图片的展示，延迟加载是为了剩流量。而本商城省流量的方法是点击加载，拉取8个商品，点击再继续加载8个。图片加载完之前显示的loading的图片，由于是本地服务器，图片加载快，可能看不到loading图片。点击加载的图片也是采用了预加载。等到商城做到大应用可以考虑把这个点击加载换成下拉加载，这个比较省流量。但小应用就不差那么多了～
另外本商场在css用了sass，用gulp做的前端自动化，webpack配合的react使用。sass是规范化css。gulp和webpack也是前端现在最流行的东西，自动化的流式处理，和打包。顺便一提，数据库是mongodb。
本商城完全是我一个人写的，耗费了我一个半月的空闲时间，也为此付出了不少心血，希望大家多提意见。