Project_入门电商项目全栈式开发笔记

第一章 项目简介

这是一个简单的前端+后端电商DEMO：
线上访问地址：（服务器能撑到2019.11.21）

www.mmall.store

前端代码：

git@github.com:SilentJhin/mmall-fe.git

后端代码：

git@github.com:SilentJhin/mmall.git

接口文档：

https://github.com/SilentJhin/mmall/wiki

提示：浏览文章时可点击右侧目录来快速切换章节：

第二章 前端项目

第一节 架构

项目	可选项	选择项	备注
模块化方案	AMD，CMD CommonJS，ES6	CommonJS	AMD，CMD将模块化代码和业务代码掺杂在一起；语法较少，并且与业务分开；ES6较新但对一些旧版本不兼容
前后端分离方式	不分离 部分分离 完全分离	完全分离	不分离方式：前后端共用同一项目目录，使得本地开发环境搭建成本高，前后端人员共同维护成本高，发布成本高； 部分分离：后端负责页面模板（JSP），更新页面模板仍需要后端协助，需要前后端同时发布； 完全分离：纯静态html，完全通过接口做数据交互，降低了本地开发环境搭建成本，页面数据使用js渲染（hogan.js），完全脱离后端模板，系统复杂度低；缺点：不利于SEO(解决方式：Server Render/蜘蛛定制页面)
框架选型	jQuery，Angular，Avalon，Vue，React	jQuery，React	只有Avalon兼容IE8，但Avalon又比较小众
样式框架	CSS，Less，Sass	Css，Sass	用户端处于兼容性考虑，选择框架保守一点：采用jQuery+css; 管理系统是内部使用，不考虑兼容，只求快，采用React+Sass;(前端管理系统暂未开发)
构建工具	Grunt，Gulp，Webpack	Webpack	Grunt太过庞大和复杂； Webpack天生支持commonJS;
版本控制工具	svn，git	git	svn和git不属于同一个时代，git分支远超svn

前端采用分层模块化，利于解耦和并行开发；每个页面都由主模块和若干子模块构成，这些模块就是逻辑层；和后端的数据交互放在数据层，数据层和后端进行数据交互；还有一些基础工具封装为工具层用于支持逻辑层和数据层；

第二节 工具

工具名称	功能
sublime	前端IDE，html，css，js代码都是在这里面写的；
nodeJs	js运行环境
npm	js包管理工具
charles	MAC系统下代理工具（charles对Windows系统不友好，在chrome下会不监视localhost，处理方法是在host文件中localhost用其他字符串代替）
webpack	模块打包器

因为前端项目主要靠webpack进行模块拆分打包，下面对webpack使用的插件的说明：
一个网页主要包含HTML，css，js三个部分，webpack需要一些工具对其进行解析，打包：

webpack工具名称	功能</