vue2+node+mysql demo總結

1.App.vue中：

2.在main.js中的new vueRouter里設置mode:history或者hash ；設置{path:'/',redirect:'home'}默認進入的路徑；設置linkActiveClass改變路由激活時的class名；也定義全局基本樣式和全局過濾器等，例如：

import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
//    使用momentjs這個日期格式化類庫實現日的格式化功能
    return moment(input).format(fmtstring);
});

在oschina git代碼

git init
git add.
git commit -m "項目版本1"
git remote add origin https://git.oschina.net/.../...
git push -u origin master

更改原類庫的css時遇到偽類圖標時可以修改成自定義圖片

.mui-icon-phone:before{
        content: '';
        background-image: url(../../statics/imgs/3.png);
        display: inline-block;//將行間變成塊級元素
        width: 50px;
        height: 50px;
        background-repeat: round;
    }

v-bind="{to:'/news/newsinfo/'+item.id}"  特殊寫法

通過this.$route.params.id獲取main.js中設置的路由id值

用post方法提交評論數據

        postData(){
          if (this.content.trim().length === 0) {
            Toast('評論不能為空');
            return;
          }
          this.$http.post('/api/comment/' + this.id, {
            content: this.content,
          }).then(res => {                           //, {params: {cId: this.id}}可以傳值給后台node服務器，在content后
            console.log(res);
            Toast('成功提交');
           this.list = [{
 "user_name": "匿名用戶",
 "add_time": new Date(),
 "content": this.content
 }].concat(this.list);

this.content = ''; }) },

get評論數據

            getcommentlist(pageindex=1){
                1.0 確定評論數據的url
                let url  = common.apidomain + '/api/getcomments/'+this.id+'?pageindex='+pageindex;
                2.0 發出ajax請求獲取數據即可
                this.$http.get(url).then(function(res){
                    if(res.data.status !== 0 ){
                        Toast(res.data.message);
                        return;
                    }
               3.0  將message數組中的數據賦值給this.list
                    this.list = this.list.concat(res.data.message);
                });
            }

實現更多頁的加載

            getmore(){
                1.0 實現this.pageindex值的增加1
                this.pageindex++;
                console.log(this.pageindex);

               2.0 獲取當前this.pageindex值對應的分頁數據
                this.getcommentlist(this.pageindex);

            }

設置overflow-x:auto;出現x軸滾動條

通過v-bind綁定樣式：

    <ul v-bind="{style:'width:'+ulWidth+'px'}">
--------------------------------------------------------------------------------------------------------------

                    let w = 62;
                    let count = res.data.message.length + 1;
                    this.ulWidth = w * count ;

使用插件時（比如vue-preview）記得確認在webpack.config.js的loader中增加擴展名（如.svg）,vue-preview不能放在<a></a>中

在photoinfo的getimgs方法里通過forEach遍歷服務器數據，來按照vue-preview的要求更改圖片寬高：

        getSuolue(){
          this.$http.get('/api/suoluetu').then(res=>{
          res.data.forEach(item=>{
            let img=document.createElement('img');
            img.src=item.src;
               item.h=img.height;
               item.w=img.width;
              });
            this.list=res.data;
          })
        }

 

在子組件inputNumber.vue中定義加和減的方法，通過this.$emit傳值給父組件

        methods:{
            substrict(){
                this.count--;
                 確保最小值為1
                if(this.count <1){
                    this.count = 1;
                }
                this.sendmessage();
            },
            add(){
                this.count++;
                this.sendmessage();
            },
            sendmessage(){
                this.$emit('dataobj',this.count);
            }
        }

在父組件goodsinfo.vue中

 <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>

----------------------------------------------------------------------------------
    getcount(count){
                this.inputNumberCount = count;
            },
// getcount中的第一個參數就是子組件inputNumber中傳遞過來的count值     

 

通過localStorage完成在goodsinfo.vue中點擊 加入購物車 將數據同步至app.vue中的購物車頁面

1. 只有2個vm對象是同一個對象時才能實現父子間傳值，於是可以創建一個公共的vm.js文件，(將購買數量添加至app.vue下方的購物車徽章。）

//vm.js
import Vue from 'Vue';

export const COUNTSTR = 'inputNumberCount';
export var vm = new Vue();

  //goodsinfo.vue

import {vm,COUNTSTR} from '../../kits/vm.js';

  toshopcar(){
//                1.0 觸發事件
                vm.$emit(COUNTSTR,this.inputNumberCount);
              }

//app.vue
import {vm,COUNTSTR} from './kits/vm.js';
    // 利用 vm.$on() 來注冊 COUNTSTR這個常量代表的事件
    vm.$on(COUNTSTR,function(count){
//        1.0 將count值追加到購物車中
        var badgeobj = document.querySelector('#badge');
        badgeobj.innerText = parseInt(badgeobj.innerText) + count;
    });

2.封裝localSg.js

// 1.0 定義常量key,將來操作的localStorage中的數據都以這個key來作為標識
export const KEY = 'goodsdata';
export let valueObj = {goodsid:0,count:0};

// 2.0 實現數據的增加
// value;格式： {goodsid:87,count:10}
export function setItem(value){
    //1.0 獲取json格式
    let jsonString =  localStorage.getItem(KEY);
    jsonString = jsonString || '[]';
    let arr =   JSON.parse(jsonString);
    // 2.0 將value追加進入arr
    arr.push(value);
    // 3.0 將arr 轉換成json字符串保存起來
    localStorage.setItem(KEY,JSON.stringify(arr));
}

// 3.0 獲取數據
export function getItem(){
   let jsonString =  localStorage.getItem(KEY);
//    將json格式字符串轉換成 js對象
    // jsonString：是一個標准的json格式
    jsonString = jsonString || '[]';

    return JSON.parse(jsonString);
}

在goodsinfo中使用：

    import {setItem,valueObj} from '../../kits/localSg.js'

    toshopcar(){
//                1.0 觸發事件
                vm.$emit(COUNTSTR,this.inputNumberCount);
//                2.0 將數據保存到localStroage中
                valueObj.goodsid = this.id;
                valueObj.count = this.inputNumberCount;
                setItem(valueObj);
                       }

 

使用index使開關互不干擾

    <div class="row" v-for="(item,index) in datalist">
            <mt-switch class="switch" v-model="value[index]"></mt-switch>


               getdatalist(){
//                1.0 從localstorage中獲取到所有的商品id值
//                obj的格式：{
//                    87:4,
//                     88:1
//                     }
                let obj = getgoodsObject();
//                2.0 將id值按照 api的參數格式提交給api
                let idstring = '';
                for(let key in obj){
                    idstring+= key + ',';
                }

                idstring = idstring.substring(0,idstring.length-1);//提交服務器的數據格式為/id1,id2,id3...

整合數據格式：從[{"goodsid":87,"count":2},{"goodsid":88,"count":3}]變成{87:2,88:3}

export function getgoodsObject(){
//   獲取 數組
/*
* arr的格式：
* [{goodsid:87,count:1},{goodsid:87,count:3},{goodsid:88,count:1}]
* */
    let arr  = getItem();
// 將arr數組中的goodid相同的多個對象合並成同一個對象
    let resObj ={};
    for(let i = 0 ; i<arr.length; i++){
        if(!resObj[arr[i].goodsid]){
        //    如果沒有當前商品的數據，則添加一個數據
            resObj[arr[i].goodsid] = arr[i].count;
        }else{
        //    已經有當前商品的數據了，則將cont追加
            let count = resObj[arr[i].goodsid];
            resObj[arr[i].goodsid] = count + arr[i].count;
        }
    }

    return resObj;
}

 

實現購物車里的購買數量組件cartInputNumber.vue:

拿到服務器的數據后先進行處理：（cart.vue）

            this.$http.get(url).then(function(res){
                    //狀態值的判斷
                    if(res.data.status != 0 ){
                        Toast(res.data.message);
                        return;
                    }
//                    將locaStorage中的所有的商品對應的count的值賦值給message中每個對象的cou(服務器接口的數據）
                    res.data.message.forEach((item)=>{
                        item.cou = obj[item.id];// obj是從localStorage中獲取的數據（let obj = getgoodsObject();）
                    //    為了解決一個bug所以必須在此處初始化values數組全部為false
                        this.value.push(false);
                    });
                    this.datalist = res.body.message;
                });

cartInputNumber.vue（cart的子組件）中用props接受initCount和goodsid

        methods:{
            substrict(){
                this.count--;
//                確保最小值為1
                if(this.count <1){
                    this.count = 1;
                    return;
                }
                this.sendmessage('substrict');
            },
            add(){
                this.count++;
                this.sendmessage('add');
            },
            sendmessage(type){
                this.resObj.type = type;
                this.resObj.goodsid = this.goodsid;

                this.$emit('cardataobj',this.resObj);
            }
        }

在localSg中添加方法：

//obj的格式：{goodsid:87,type:'add'}
export function updateData(obj){
    let arr  = getItem();

    let count = 1;
    if(obj.type ==='add'){
        //加
        arr.push({goodsid:obj.goodsid,count:count});
    }else{
        //減
        for(let i =0 ;i < arr.length ; i++){
            //如果這個對象中的count值等於1，則刪除這個對象，否則將這個對象的count減1以后保存回去
            if(arr[i].goodsid === obj.goodsid){
                if(arr[i].count > 1){
                    arr[i].count = arr[i].count -1;
                    break;
                }else{
                    //刪除此對象
                    arr.splice(i,1);
                    break;
                }
            }
        }
    }

//    將最新的arr保存回localStorage中
    localStorage.setItem(KEY,JSON.stringify(arr));

}

在cart中使用：

    getiInputNumber(resObj){
                console.log(resObj);
//             1.0 更新localStorage中的數據
                updateData(resObj);

//            2.0 更新 this.datalist中的當前數量
                for(let i = 0;i <this.datalist.length ; i++){
                    if(this.datalist[i].id == resObj.goodsid){
                        if(resObj.type =='add'){
                            this.datalist[i].cou = this.datalist[i].cou + 1;
                        }else{
                            this.datalist[i].cou = this.datalist[i].cou - 1;
                        }
                        break;
                    }
                }

            },

 

 

 

 實現小球飛入購物車功能：

                 <transition name="show"  @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter >
                        <div v-if="isshow" class="ball"></div>
                 </transition>
---------------------------------------------------------------------------------------------------------

動畫3個方法
            beforeEnter(el){
//                設定小球的初始位置
                el.style.transform = "translate(0px,0px)";
            },
            enter(el,done){
//                保證小球出現動畫
                el.offsetWidth;

//                設置小球的結束位置
                el.style.transform = "translate(75px,366px)";

//                結束動畫
                done();
            },
            afterEnter(el){
//            重置小球的初始狀態
                this.isshow = !this.isshow;
            }

------------------------------------------------------------------------------------

    .ball{
        background-color: red;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        position: absolute;
        left:150px;
        top:10px;
        transition: all 0.4s ease;
        z-index: 100;
    }