vue pc端網站項目開發坑點與難度記錄

時間 2019-12-07

原文原文鏈接

背景

在一pc端的web項目裏，因爲某些特性須要由動態語言處理，因此只在有須要使用vue來處理數據的頁面，直接引入vue.js來處理。
因爲剛開始並無打算使用前端來渲染數據和處理交互，因此使用了一些非vue的ui和插件，致使後來衝突坑點很多。
非vue模塊化下使用vue，雖然不能import vue文件，使用組件方式也有點噁心，但處理一些事情仍是不錯的。html

使用formdata提交表單數據

先上代碼前端

        var that           = this;
        var myForm         = document.getElementById("form_add");
        var submitFormData = new FormData(myForm);
        submitFormData.append('action', this.action);//添加自定義的參數，這裏是動做，添加或者修改
        layer.load(0,{time:500});
        $.ajax({
            url         : apiAddressAdd,
            type        : 'POST',
            dataType    : 'json',
            cache       : false,
            processData : false,
            contentType : false,
            data        : submitFormData
        })

有2個參數是必須設置processData 和 contentTypevue

這裏要說的是contentType，經實踐，不論是否有包括file上傳文件或圖片，則必須設置爲false, 設置爲true或不設置，後臺都不能獲取jquery

jquery賦值不響應input使用v-model綁定的值

在作某個修改數據功能的時候，因爲表單的全部數據，使用v-model綁定的，包括地址。es6

地址使用了一個jquery地址選擇器，當選擇器選擇好地址的時候，只是賦值給input，並無觸發v-model綁定的數據web

查看了一篇文章，賦值以後，須要觸發input的原生input事件，纔會響應v-model：方式以下ajax

$("#city-picker")[0].dispatchEvent(new Event('input'))

商品篩選之參數組選擇組件

這是很常見的一個功能，本處只是記錄一下思路過程，以防往後老年癡呆，請看下圖數據庫

如圖中，有4個參數組，每一個參數組只能選定一個參數，選中的參數在下面以標籤，點擊X能夠去掉相應已選擇的標籤json

但因爲參數組是從後臺輸出的接口獲得的，也就是說，不一樣的種類的商品，有不一樣的參數組，有的可能只有1組參數，也有可能有4組api

本篇實現此處功能的前提，數據庫表應該設計爲：

參數組爲單獨一張表，如上面的是選擇了茶具種類，有：分類、材質、風格、擺放空間，四種參數組（不一樣的商品種類可能會有相同的參數組，但統一添加到此表中，即惟一id值不會重複）
參數組的參數項爲單獨一張表，關聯參數組表，和上面狀況同樣，有可能和別的商品種類的同樣的參數組中有相同的參數項（名字就算相同，可是同表中惟一id值不會重複）

這2點也是實現本篩選功能的基礎。

如下爲代碼的實現思路：

先看json數據結構

如圖所示，和上面的篩選組件截圖對應，4個參數組，每一個參數組不一樣的id,全部參數項的id也不一樣,即使name相同也沒有關係。

請求到參數組的時候，作以下處理

res.data.paramGroup.forEach(function(item){
   vm.$set(vm_data.param_group_active,'active_'+item.gid,0);
})

//更新數據
that.dataParamsGroup = res.data.paramGroup;

把參數組全部數據原始格式放到一個叫param_group_active中

這個對象，用來標識當前哪組參數選中的哪項參數項，0，固然就是默認沒有選中

而後並遍歷參數組，以參數組的惟一id爲標識，建立一個響應式的對象，值爲0 （注意，這裏說的是參數組，非參數組下面的參數項）

獲得以下對象

而後看參數組dom結構：

裏面的A標籤，就是參數的詳細項，激活的狀態，就是常見的tab的那個作法

選中當前標籤，固然是以class來表示了，上面綁定的class，取決於參數項本身的id,對應 param_group_active組中，激活的值

點擊參數項的時候：

參數帶入：參數組和id,當前點擊的參數項的id,而且vue的set方法來設置響應數據

好比當我選擇風格中的花鳥以後，風格的惟一id是14，而花鳥是12

很明瞭了，能夠理解成動態tab。。。

接下來，選中的參數，都要顯示在下排，並能夠取消。結構以下：

根據咱們的激活參數項的數據param_group_active循環出來，大於0，固然是有了選擇，

而後你會看到paramsFlattening[item]這個東西，很明顯這是一個object，item一看就知道是當前選中的參數項的id值，

這裏是要顯示所選中的參數項的名稱，因此，這個paramsFlattening裏面確定放了參數項的數據

但ahax取回來的數據是一個二維object,暫且這麼叫，咱們想一個辦法，咱們在這例子中暫時叫參數扁平化

看代碼：

也就是把全部參數項，放到一個新的object中（注意，咱們這裏的paramsFlattening是一個計算屬性）

以參數項的id爲鍵名，中文名稱爲值，遍歷放進去，獲得了這麼個對象：

因此咱們在dom結構中直接以插值方式調用：{{paramsFlattening[item]}} ，即可以顯示所選中的標籤的對應中文名稱。

接下來是取消選中的標籤

從上面的截圖中能夠看到點擊了i 標籤（是一個x圖標）調用了deleteParam,並帶進了參數item, 是參數項的id

來看這個方法：

遍歷存放激活狀態的對象，這裏的key，就是這串:

看哪一個對象（每一個參數組）的id（記得這裏存的是激活的參數項的id）值和帶進來的id值一致，就設爲0，

這樣，選中的標籤那個地方，是依賴這裏值大於0才顯示的，設爲0就不顯示了

最後你可能會問，選中是選中了，但怎麼提交這些參數數據

在本例中，老衲把這些選中的參數項id值，堆成一塊，用,號分隔，開來，固然後臺查詢的時候還要處理這個數據

封裝一個不完美的圖片上傳類

咱們暫且稱它爲類，雖然不是用es6 class...此處只當充數字量記錄一下，沒什麼難度
使用場景：多個地方須要上傳圖片，因而搞了這麼個東西，有可能直接點file元，也有可能點擊的是別的觸發元素，好比換頭像的時候。

依賴jquery和layer消息,使用formdata數據來當ajax發送的數據，好像有file元素，就要設置這2項:

contentType : false, processData : false

因爲項目中api接口直接統一寫進配置文件，則這裏不作成參數帶進方式

/**
 * [圖片上傳類，統一上傳地址]
 * @param {[type]}   params [description]
 * @param {Function} cb     [description]
 */
function ClassUploadImage(params,cb){
    this.__proxyEl      = params.proxyEl;
    this.__imgFileInput = params.imgFileInput;
    this.__module       = params.module;
    this.__cb           = cb ;
}
//初始化過程
ClassUploadImage.prototype.init = function(){
    var that = this

    //先判斷是否有layer和jquery
    if(!window.$ || !window.jQuery){alert('沒有jquery!'); return false;}
    if(typeof layer == 'undefined'){alert('沒有引入layer!'); return false;}

    //綁定代理解發file事件的元素
    $(that.__proxyEl).on("click",this,function(){
        $(that.__imgFileInput).trigger('click');
    })

    //綁定文件表單的選擇事件，當選擇了文件，當即執行上傳
    $(that.__imgFileInput).change(function(){
        var files   = $(this)[0].files[0];
        var formObj = new FormData();
        formObj.append('image', files);
        formObj.append('module', that.__module);
        that.upload(formObj);
    });
}
//上傳過程
ClassUploadImage.prototype.upload = function(formObj){
    var that = this;
    console.log('執行上傳！');
    layer.load(0, {shade: false,time:300});
    $.ajax({
        url         : apiImageUpload,
        type        : 'post',
        dataType    : 'json',
        data        : formObj,
        cache       : false,
        contentType : false,
        processData : false
    })
    .done(function(res) {
        //此處未對返回的報文進行狀態碼判斷
        $.lightTip.success(res.msg);
        that.__cb(res);
    })
    .fail(function(e) {
        console.log('不知發生了什麼錯誤...');
    })
}

使用：

   //上傳圖片初始化
    var myUploadImg = new ClassUploadImage({
        proxyEl:'#proxyuploadbutton,#proxyuploadimg',
        imgFileInput:'#image',
        module:'headimg'
    },function(res){
        $(".header_original_img").val(res.img);
        $("#proxyuploadimg").attr('src',res.imgurl)
    });
    myUploadImg.init();

參數__proxyEl爲代理input的點擊事件元素，若是忽略此參數，就只能直接點擊file元素

data 裏的Object變量中的Array類型屬性值坑人記錄

場景：產品詳情頁數據返回的對象中，其中有一個是數組類型，是產品的相冊

{
    "code": 0,
    "msg": "數據正常！",
    "data": {
        "id": 1,
        "img": "http://dummyimage.com/360x360",
        "name": "唐五代耀州窯剔刻蓮瓣水注",
        "artist": "藝術家名字",
        "authorId": 93,
        "price": "250000",
        "dsc": "鐮田先生的天目已經燒造幾十年，做品風格古樸天然 ，口部天然露胎，和傳統油滴建盞有不少類似之處。微距下，斑紋底部透明有反射膜 ，膜上斑紋大而立體，表面微有有觸感。胎體輕盈，色爲棕，表面略泛光，喝茶之佳物。",
        "view": 779,
        "pcid": 2,
        "album": [
            "http://lorempixel.com/600/600/technics/",
            "http://lorempixel.com/600/600/technics/",
            "http://lorempixel.com/600/600/technics/"
        ],
        "birth": "1986-11-16",
        "birthplace": "安徽省 宿州市 埇橋區",
        "birthtype": 2,
        "awidth": "30",
        "aheight": "80",
        "liked": 57,
        "detail": "事拉我道象特據片四信廠華。種海點支育容量做積鬥衆運進。南界眼參派傳我真音例活術者所。持人較方觀切度題始可作習列。主萬適等自件教相全門話取用。低金色其命麼放從特長拉線經便。",
        "selled": 0,
        "favorite": 1
    }
}