DUMP102 企业级电商FE

101 完成 webpack 配置后，有一套类似 live-reload 自动刷新提供 REPL 环境。

【配置 webpack.config.js 别名，方便 js 文件做require 支持路径别名简写】

  resolve:{
        alias:{
            util : __dirname + '/src/util',
            page : __dirname + '/src/page',
            service : __dirname + '/src/service',
            image : __dirname + '/src/image',
        }
    },

 

【Access-Control-Allow-Origin】跨域问题

charles软件  remote map 功能，这样就能用同域名下请求 url l额。 （浏览器配合 switchy omega 切换成系统代理 给 charles 监听。）

 

==========================================

common工具

网络请求

URL路径

模板渲染  hogan

字段验证 通用提示

统一跳转

 

页面布局  layout 

navigator  header content menu footer

【技巧】~ 扁平化 、 对称 、 对齐 、 距离 、配色（百搭）

1。定宽布局

2。通用部分抽离

3。icon-font 引入

4。通用样式

 

通用导航条开发

通用页面头部开发

通用侧边导航开发

通用结果提示页开发

 

=============================================做

1. util 全局通用的工具 mm.js  ，供其它js require 调用。

 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){
                //  返回 404 503 错误码
                typeof param.error === 'function' && param.error(err.statusText);
             }
            
             
         })
     },
    //  统一登录处理
     doLogin   : function(){
        //  redirect 支持返回
         window.location.href = './login.html?redirect=' + encodeURIComponent(window.location.href);
     }
 };

 module.exports = _mm;

 

2.正则获取url参数    list.do?key1=xxx&key2=       【目标获得 value       这个value要先弄key，然后value的结尾是 & 或者 没有东西】

// 取 key 要表示 开头有或没有 &     ，得到 (^|&)            注释^为开头

// 取 value 要表示 ([^&]*)(&|$)                                            注释^为取反     (&|$)

// window.location.search.substr(1)  跳过问号

   // 获取 url 参数
    getUrlParam:function(name){
        var regxp = new RegExp('(^|&)'+name+'=([^&]*)(&|$)');
        var result = window.location.search.substr(1).match(regxp);
        return result ? decodeURIComponent(result[2]):null;
    },

 

3. 渲染html 、 npm  i --save hogan.js@3.0.2

 // 渲染引擎
    renderHtml: function(htmlTemplate,data){
        var template = Hogan.compile(htmlTemplate);
        var result = template.render(data);
        return result;
    },

 

4.正则验证字段

   // 字段验证
    validate: function(value,type){
        var stripValue = $.trim(value);
        // 非空判断
        if('require' === type){
            return !!stripValue;//对空值转一次布尔 true 再转一次 false 
        }
        // 手机号验证
        if('phone' === type){
            return /^1\d{10}$/.test(stripValue);
        }
        // 邮箱格式验证
        if('email' === type){
            return /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/.test(stripValue);
        }
        // 
    },

 

5.meta 元数据提取到 header.html

<script> 提取到 footer.html

 

6.通用布局 css 

 

/*
 * @Author: chenhui7373
 * @Date: 2018-07-06 09:03:05
 * @LastEditors: chenhui7373
 * @LastEditTime: 2018-07-06 09:33:45
 * @Description: 
 * @Email: sunw31@163.com
 */


 /* css 重置 */
*{
    margin: 0;
    padding: 0;
} 
body{
    background: #f6f6f6;
    font: 12px/1.5 tahoma,arial,Microsoft YaHei,sans-serif;
}
li{
    list-style: none;
}
img{
    display: block;
    border: none;
}
label{
    cursor: pointer;
}
input[type='checkbox']{
    cursor: pointer;
}

/* 定宽布局 */
.w{
    width: 1080px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
/* .large .w{
    width: 1600px;
} */
/* 全局通用样式 */

/* 隐藏类 */
.hide{
    display: none;
}
/* 超链样式 */
.link{
    color: #998;
    cursor: pointer;
    text-decoration: none;
}
.link:hover{
    color:#e80012;
}
.link-text{
    color:#999;
    text-decoration: none;
}
/* btn */
.btn{
    display: inline-block;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    background: #c60023;
    border: none;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    outline: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-mini{
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    padding: 0 10px;
}
/* loading */
.loading{
    margin:10px auto;
    display: block;
    width: 65px;
    height: 65px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: url(../../image/icon/loading.gif) no-repeat;
    opacity: .6;
}

 

7. 字体资源

npm i --save  font-awesome@4.7.0

直接使用  webpack.config.js alias下node_modules ，单刀直入复制路径引用 .min.css。

 

========================================================================

8. 导航条     

nav-simple.html

<div class="nav-simple">
    <div class="w">
        <a class="logo">MMALL</a>
    </div>
</div>

/common/nav-simple/index.js index.css

/*  index.css */
.nav-simple{
    height: 60px;
    line-height: 60px;/*  字体底部到字体顶部撑开，布局上一切都是容器。  */
    border-bottom: 1px solid #ddd;
    background: #fff;
}
.nav-simple .logo{
    font-size: 26px;
    font-weight: bold;
    color: #c60023;
}


/*  index.js */
 'use strict';
require('./index.css')

 

nav.html

<div class="nav">
    <div class="w">
        <div class="user-info">
            <span class="user not-login">
                <span class="link js-login">登录</span>
                <span class="link js-register">注册</span>
            </span>
            <span class="user login">
                <span class="link-text">
                    欢迎，
                    <span class="username"></span>
                </span>
                <span class="link js-logout">退出</span>
            </span>
        </div>
        <ul class="nav-list">
            <li class="nav-item">
                <a class="link" href="./cart.html">
                    <i class="fa fa-shopping-cart"></i>
                    购物车(<span class="cart-count">0</span>)
                </a>
            </li>
            <li class="nav-item">
                <a class="link" href="./order-list.html">我的订单</a>
            </li>
            <li class="nav-item">
                <a class="link" href="./user-center.html">我的MMall</a>
            </li>
            <li class="nav-item">
                <a class="link" href="./about.html">关于MMall</a>
            </li>
        </ul>
    </div>
</div>

/common/nav/index.js index.css

/*index.css */
.nav{
    background: #eee;
    height: 30px;
    line-height: 30px;   
}
/* 用户部分 */
.nav .user{
    float: left;
}
.nav .user.login{
    display: none;
}
.nav .user .link{
    margin-right: 5px;
}
/* 导航链接部分 */
.nav .nav-list{
    float: right;
}
.nav .nav-list .nav-item{
    display: inline-block;
    margin-left: 5px;
}


/* index.js  */
'use strict';

// 导航条的 css 样式
require('./index.css');

 

9.脚注

 .footer{
     padding-bottom: 10px;
 }


 .footer .links{
    text-align: center;
    line-height: 30px;
    color: #666;
 }

 .footer .links .link{
     padding: 0 10px;
 }

 .copyright{
    text-align: center;
    line-height: 30px;
    color: #666;
 }