第一章 项目简介
这是一个简单的前端+后端电商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工具名称 | 功能</ |
---|