首个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,相信以后应该会好点吧~

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