- 项目来源于慕课，包括用户端和后台管理系统，前者可了解电商网站从设计到上线整个流程；后者采用React16 + React-Router4结合yarn、webpack、ES6和Sass、Bootstrap等技术，体验前开发端新技术。
- 对于前端新人，从前到后撸一把还是很有必要的，此项目旨在交流学习，后续会整理项目中笔记及相关知识放在博客上，欢迎交流学习~
- 后台管理系统项目 >>
git clone git@gitee.com:happymmallmac/mmall-m.git
- 安装nodejs环境,使用v6.12.3
- 安装包管理工具yarn@1.6.0，yarn比npm好
- 在项目根目录执行yarn初始化
yarn / yarn install - 启动项目
- 开发模式 :
yarn run dev /yarn run dev_win生产模式 :yarn run dist /yarn run dist_win - 开发模式下预览项目 接口文档 >>
- 了解一个电商网站从设计到上线的整个流程
- 掌握开发过程中遇到各种坑的解决思路和能力
-
需求：用户 购买 后台 统计 运营 市场
-
核心：用户 购买
-
流程：展示 -> 购物车 -> 下单 -> 订单 -> 支付 -> 用户中心
-
功能拆分： 商品 ：首页、商品列表、商品详情
购物车：购物车数量、添加删除商品、购物车提交
订单：订单确认（地址管理）、订单提交、订单列表、订单详情
支付：支付
用户：登录、注册、个人信息、找回密码、修改密码
- 把纯静态的html模板完全放在前端，数据全部通过RESTful接口来进行交互
- 逻辑层
//www.greatytc.com/用户名/repository仓库名/raw/分支名master/图片文件夹名称/***.png or***.jpg
- 数据层
- 工具层
- 优点： 易维护、易复用、易扩展
- 在分层的基础上利用commonjs进行模块化的拆分，通过组件化的拼装达到业务的实现
- 优点： 进一步的解耦 支持并行开发，提高团队效率 ###技术选型&工具
| 项目 | 用户端 | 后台 |
|---|---|---|
| 特点 | 要求稳定 用户类型多样 兼容性好 有SEO要求 多页应用 | 开发快 企业内部使用 不要求兼容性和SEO 单页应用 |
| 选型 | javascript + jquery + commonjs + hogan | html5 + css3 + sass + Bootstrap + React16 + React-Router4 + ES6 |
构建工具将源代码转换成可以执行的JavaScript、CSS、HTML 代码，用来让我们不再做机械重复的事情，解放我们的双手的。
| 项目 | Gulp | webpack |
|---|---|---|
| 优点 | 好用又不失灵活,既可以单独完成构建，也可以和其他工具搭配使用 | 天生支持CommonJS,专注于处理模块化的项目，完整好用又不失灵活性； |
| 缺点 | 集成度不高，要写很多配置后才可以用 | 只能用于采用模块化开发的项目 |
| 选择 | × | √ |
毫无疑问，非git莫属
- 工具一栏
| 工具 | 构建工具 | 依赖环境 | 包管理 | 自动化发布脚本 | 代码编写 | 代码调试 | 请求挟持 | 版本控制 |
|---|---|---|---|---|---|---|---|---|
| 名称 | webpack | NodeJS | NPM | Shell | sublime | chrome | charles/fiddler4 | git |
注：更新webpack@4.2.0后webpack-dev-server新增了devServer的配置，用自带的代理就可以访问接口
- 为业务开发打下基础，加快开发速度
/*
* @Author: Lizh
* @Date: 2018-04-09 13:09:41
* @Last Modified by: Lizh
* @Last Modified time: 2018-05-16 23:04:43
*/
var config = {
serverHost:''
};
var _mm = {
// 网络请求
request : function(param){
var _this = this;
$.ajax({
type : param.method || 'get',
url : param.url || '',
dataType : param.type || 'json',
data : param.data || '',
success : function(res){
//登陆成功
if( 0 === res.status){
typeof param.success === 'function' && param.success(res.data , res.msg );
}
//无登陆状态需请求登陆
else if (10 === res.status){
_this.doLogin();
}
// 请求数据错误
else if (1 === res.status) {
typeof param.error === 'function' && param.error( res.msg );
}
},
error : function(err){
typeof param.error === 'function' && param.error( err.statusText );
}
});
},
// 获取服务器地址
getServerUrl:function(path) {
return config.serverHost+path;
},
//请求url参数
getUrlParam : function(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
var result = window.location.search.substr(1).match(reg);
return result ? decodeURIComponent(result[2]) : null;
},
//渲染html模板
renderHtml : function(htmlTemplate, data){
var template = Hogan.compile(htmlTemplate),
result = template.render(data);
return result;
},
//成功提示
successTips : function(msg){
alert(msg || '操作成功！');
},
//错误提示
errorTips : function(msg){
alert(msg || '哪里不对了~');
},
//字段的验证，支持非空、手机、邮箱的判断
validate : function(value, type){
var _value = $.trim(value);
//非空验证
if('require' === type){
return !!_value;
}
//手机号验证
if('phone' === type){
return /^1\d{10}$/.test(_value);
}
//邮箱格式验证
if('email' === type){
return /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(_value);
}
},
// 统一请求处理
doLogin :function() {
window.location.href = './user-login.html?redirect=' + encodeURIComponent(window.location.href);
},
//go home
goHome : function(){
window.location.href = './index.html';
}
};
module.exports = _mm;
- 利用webpack添加favicon
- 线上域名分离，HTML路径简化
| 文件 | html | js + css | image |
|---|---|---|---|
| 位置 | www/admin. + 根域名 | s. + 根域名 | img. + 根域名 |
- 添加dns-prefecth
- 对线上打包结果进行回归测试，防止压缩后显示不一致
- 增加页面数量
- 减少页面层级
- 关键词密度
- 高质量友链
- 分析竞对
- SEO数据监控
- 购买服务器和域名
- 阿里云服务器注册免费体验 >>
- 获取实例公网IP 登录密码 >> ，本次项目使用CentOS7
-
使用git bash远程连接服务器
-
安装git,可使用yum安装 ：
yum install git -
建立developer product 文件夹，拉取代码至developer
-
安装nginx ：
yum install nginx
-
编写发布脚本前先手动执行一次，确保脚本准确
-
编写自动发布脚本 ####nginx和域名配置（这次没有进行域名分离）
-
新建vhost/*.conf并将其引入nginx.conf主文件
-
nginx配置域名
- 如果对您有帮助，您可以点 "Star" 支持一下 十分感谢!
