首個vue.js項目收尾中……

前言：

4.26號入手vue.js+elementUI，迄今為止我們的工作應該可以暫時告一段落了；下周開始，又是新的“征程”。

過程：站在接近完成的角度來看這個項目，似乎的確有許多事情需要自己闡述。

關於連接數據庫

初次vue.js的時候，還以為可以通過什么“手段”像使用thinkjs一樣直接連接到數據庫，於是不知道從哪里看見的“Vue2.0之后，vue-resource停止更新，原因是Vue2.0開始，他們想更專注於View層，所以網絡部分就不再維護，並且axios支持服務端渲染，各方面比resource更好，故推薦使用axios”（之前的確在哪里看見過，可是今天找了很久，也沒有發現在官網哪里，但是事實的確如此吧！暫不糾結這個了，因為我們的項目中並沒有使用它，但還是附上axios文檔地址：https://github.com/mzabriskie/axios）;簡言之：使用vue.js的時候，需要另外一個“工具“來輔助它請求服務器端；

我們采取的做法便是將前后端分離，均采用nodejs，一個專門寫接口，將前台需要的數據組織好（使用hprose：http://www.hprose.com/index.html）；一個專門寫頁面（使用vue.js2.0：https://cn.vuejs.org/以及elementui：http://element.eleme.io/#/zh-CN）；

使用vue+elementui的例子：

https://github.com/taylorchen709/vue-admin，整個項目結構也是跟整個相同，於是在實際使用過程中就出現了很多“意想不到”的問題

1.首先是關於靜態文件的引入

需要在項目的根目錄下，新建一個static的文件夾，圖片放在static/img文件夾底下，樣式文件放在static/css文件夾底下，具體使用：

圖片引用：'/static/img/xxx.png';

css引用：@import '/static/css/xxx.css';

2.關於路由權限的問題

可以參考http://www.cnblogs.com/zhengyeye/p/6908159.html這里所描述的試試；

3.登錄頁底下添加備注

 

 

需要login頁面底部欄添加一行備注，起初的做法是在login.vue頁面寫代碼，但是最終發現總是報錯，最終原來發現了底部欄信息是寫在App.vue中的：

<template>
    <div id="app">
        <router-view></router-view>
        <footer>
            <div style="font-size: 14px !important;text-align: center !important;color: #c1c8d1">
                提示：這里是備注信息
            </div>
        </footer>
    </div>
</template>

 

下面便是修改后的效果：

 

4.關於dialog或者button綁定屬性或者顯示值的若干問題

1）dialog：后台管理系統中，免不了新增或者編輯的彈框，簡潔之便可以使用同一個dialog，於是就出現了

 

<el-dialog v-model="FormVisible" :close-on-click-modal="false" v-bind:title="title" style="width: 760px;margin: 0 auto;">
...
</el-dialog>

只需要使用v-bind，綁定dialog的title屬性即可；同理適用於butoon中：

<el-button v-bind:type="showType" size="small" @click="handleEdit(scope.$index, scope.row)" v-text="showFont"></el-button>

這樣的話，我們就可以“隨心所欲”的使用一個變量來控制button想樣式以及回顯的字了，但是記得顯示字需要用v-text，簡單記：

v-bind:綁定的是屬性；v-text：綁定的是文字；

5.分頁組件

elementui提供了一套現成的分頁組件（http://element.eleme.io/#/zh-CN/component/pagination），但是我們在使用過程中卻出現了一個問題：當我們先點擊分頁信息，再點擊頁面上部的搜索條件的時候，分頁組件始終停留在之前的分頁數字上面，究其原因原來是綁定的row和page的值不太正確，於是在每次點擊“搜索”的時候，就讓this.page=1就行；

<el-col :span="24" class="toolbar" >
            <el-pagination style="float: right"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="page"
                           :page-sizes="[25, 50, 100, 250]"
                           :page-size="rows"
                           layout="total,sizes,prev,pager,next,jumper"
                           :total="total">
            </el-pagination>
        </el-col>

6.多個input綁定同一個change事件

需求：同時監聽多個input的change事件

<input type="text" value="value" @change="mychange($event)"/>

mychange (e) {
  console.log(e.target.value)
  this.value = e.target.value
}

由於input的change事件只傳一個一個參數，而這里需要對多個input進行判斷區分，於是自己就在change方法中增加了一個參數：index

<input type="text" value="value" @change="mychange($event,1)"/>

 

mychange(e,index){
  //需要處理的邏輯
}

這樣就可以區分多個input，進行其他操作了。

后言：

其實整個項目遇見的問題不僅於此，更多的感覺便是自己處理問題的辦法總是太少，不夠得當。不過Becauser of like,I love it more tan before,相信以后應該會好點吧~

收拾收拾，下班回家。迎接下周新工作了。