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;
 }