<script>
$(function(){
//先定义一个变量， 作为 储存将要显示到页面的数据
var data4Vue = {
//axios的映射地址
uri:'categories',
//储存axios返回的实体数据List
beans: [],
//储存绑定在页面的实体变量
bean: { id: 0, name: ''},
//储存实体变量
pagination:{},
//文件
file: null
};
//定义一个Vue变量
var vue = new Vue({
//el表示这个Vue的作用域范围， 通常用<div id="workingArea">...</div>
el: '#workingArea',
//data绑定到这个储存数据的变量后， 这些变量将可以在作用域范围内绑定和使用
data: data4Vue,
//mounted 表示这个 Vue 对象加载成功后自动执行该函数里面的代码语句
//其中 this 是指该vue对象， 但不是所有代码块中的this都是指vue这个对象，
//有时候可能是指方法， 举个例子。
//当你在 vue 对象的成员方法中调用了axios， 而你在axios调用vue对象的属性时就要
//直接声明 vue.name， 而不能 this.name 了
mounted:function(){
this.list(0);
},
// methods 里面写 该vue对象的成员方法
methods: {
list:function(start){
var url = this.uri+ "?start="+start;
//axios是ajax的一种， Vue.js推荐使用这种方法来前后端传送数据
axios.get(url).then(function(response) {
//将返回的数据赋值给 vue 对象中绑定的属性
vue.pagination = response.data;
vue.beans = response.data.content;
//$nextTick是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后
//使用 //$nextTick，则可以在回调中获取更新后的 DOM（这样可以不用写）
vue.$nextTick(function(){
//................
})
});
},
add: function () {
if(!checkEmpty(this.bean.name, "分类名称"))
return;
if(!checkEmpty(this.file, "分类图片"))
return;
var url = this.uri;
//axios.js 上传文件要用 formData 这种方式
var formData = new FormData();
formData.append("image", this.file);
formData.append("name", this.bean.name);
axios.post(url,formData).then(function(response){
//增加分类数据后重新渲染页面且把数据清空
vue.list(0);
vue.bean = { id: 0, name: '', hp: '0'};
$("#categoryPic").val('');
vue.file = null;
});
//确保所有dom元素创建与渲染完成后执行的代码， 最好将对dom元素操作的代码放
//在这个函数中， 比mounted更滞后的执行
vue.$nextTick(function(){
//执行代码
})
},
//获取文件
getFile: function (event) {
//将触发事件的文件赋值给file变量
this.file = event.target.files[0];
}
}
});
})
</script>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr class="success">
<th>ID</th>
<th>图片</th>
<th>分类名称</th>
<th>属性管理</th>
<th>产品管理</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
//beans是自动获取vue对象中绑定好的对应的属性
//如果循环需要序号就这样写：v-for="(bean,index) in beans" (index是序号， 基 0 )
<tr v-for="bean in beans ">
//变量值要用 {{}} 双花括号括住
<td>{{bean.id}}</td>
<td>
//注意 src前面要有一个：冒号， 这是Vue的格式要求
<img height="40px" :src="'img/category/'+bean.id+'.jpg'">
</td>
<td>
{{bean.name}}
</td>
<td>
//注意 href前面要有一个：冒号， 这是Vue的格式要求
<a :href="'admin_property_list?cid=' + bean.id "><span class="glyphicon glyphicon-th-list"></span></a>
</td>
<td>
<a :href="'admin_product_list?cid=' + bean.id "><span class="glyphicon glyphicon-shopping-cart"></span></a>
</td>
<td>
<a :href="'admin_category_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>
</td>
<td>
<a href="#nowhere" @click="deleteBean(bean.id)"><span class=" glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</tbody>
</table>
属性双向绑定（即显示的数据改变的同时， vue对象中的数据也会改变， 反之亦然）
<table class="addTable">
<tr>
<td>分类名称</td>
//@keyup.enter即按回车会触发 add 函数
//v-model即是双向绑定， 这里应该同时也声明了这个标签的 name = "bean.name", 这样就意味着和
//vue对象中 bean 变量中的 name 属性双向绑定了
<td><input @keyup.enter="add" v-model.trim="bean.name" type="text" class="form-control"></td>
</tr>
<tr>
<td>分类图片</td>
<td>
//获取文件
//accept="image/*" 限制接收的文件类型是图片， 但不限制是 GIF 和 JPEG 格式
//accept="image/gif, image/jpeg"
//@change="getFile($event)" 当选取的文件发生变化就会触发getFile($event)函数
//$event表示当前事件
<input id="categoryPic" accept="image/*" type="file" name="image" @change="getFile($event)" />
</td>
</tr>
<tr class="submitTR">
<td colspan="2" align="center">
<a href="#nowhere" @click="add" class="btn btn-success">提交</a>
</td>
</tr>
</table>
