【电商平台前端项目1】序言

写在前面

都在讲写技术博客的好处，但是首先能写得出来技术博客的前提得是你真的懂了，不然写一些如何安装破解软件的所谓博客，就真的恐怕要贻笑大方了。

新人写博客，切记不能为了写而写。开始不能写教程，就写学习笔记，写一些经验总结。前期重点是坚持。写作的过程，也是一种对知识点的回顾。

以上，写给我自己和看我文章的新人小伙伴们，大家加油。

啰嗦两句

我在how2j这个网站上学习java，最开始完全是被两个实战项目（一个仿天猫前端和一个仿天猫后端）吸引了。我当时就在想，如果我也能搞一个这样的项目，应该就能找一份工作了吧。

开始的时候我为了求快，使用django快速的开发了一个项目，提交在我的github地址上。有兴趣的小伙伴可以观摩一下，帮我批评指正一番也是极好的。不过这个项目只实现了大概，还有很多bug。我就急于用这个项目找一份python程序员的工作，然而一个月下来没有结果。很尴尬。

how2j这个网站上的项目，是没有使用框架的，这样对于掌握知识点固然好，但是用来做成项目就感觉差点劲。况且我觉得如果照本宣科，完全复制着做一遍学习效率并不高。因此产生了一个大胆的想法。就是用市面上最热门的、最主流的技术来完成这个项目。算是弥补自己没有实践经验的缺点。好的，那让我们开始吧！

这个项目我也已经提交到我的github上，感兴趣的小伙伴继续观摩把！

项目目标

 

• 掌握一个电商网站前端从设计到开发最后上线的完整的流程；
• 独立开发一个前端项目；
• 从架构层面，学习一下前后端分离如何设计，学习如何分层架构和模块化

架构设计

我发现软件架构过程中一个很重要的考虑因素就是如何解耦合，松散耦合的好处一大堆，用我理解的话说就是整个系统不至于牵一发而动全身。理论一点的说法就是这样做的好处是易于维护易于复用并且易于拓展的。

为了实现松散耦合，分层架构应运而生了，也就是我们说的MVC、MVVM这种。

另一种很流行的架构设计就是模块化，模块化的意思和分层架构很类似，可以理解为一个是横向的，一个是纵向的，所谓模块化，就是将一个大的系统，拆分为若干个相对独立的小的模块。

，模块化不仅可以解耦合还可以并行开发。

模块化方案有AMD、CMD、CommonJS和ES6这几种，大家自己了解吧，在我的项目中使用CommonJS方案。

我们将一个大的主模块拆分为若干个小模块，再由小模块和数据层进行交互，数据层同服务器交互，而不是业务逻辑直接同服务器交互。同时，工具层的工具类为整个项目提供支持。

技术选型

最主要的原则就是保证兼容性，选取的技术尽量简单。除了HTML、CSS和JS这三大件外，还使用了JQuery这个类库。

此外，为了提升开发效率，我使用了一些辅助工具，主要是webpack、依赖的NodeJs和包管理工具NPM。

做技术选型主要考虑几个因素：

• 软件过程模型：这里我们选择敏捷开发，我自己提需求，改需求，然后自己迭代开发。逐渐完成里程碑。
• 前后端分离：how2j上的实战项目是没有做分离的，个人开发倒是没问题，但是团队开发用这种方式不现实，这里我学习了一下，使用完全分离的方式进行开发。最终选择的是纯静态的html的前后端分离方式，完全是通过接口做数据的交互。这样做的好处就是能够做到完全脱离后端模板，系统复杂度也偏低。
• 框架：原则就是用户端尽量保守（选择jquery和css）后台管理系统则激进一点，顺便玩一下React和Sass。
• 构建工具：打包工具选择WebPack
• 版本控制：选择git
• 发布方式：从git拉取代码，本地打包，发布到线上。