Vue.js 入门
背景
为了学习spring,准备写一个通讯录demo,实现增删改查功能。
前端页面同事推荐用vue.js,因为简单快速,当然前提是基于你对前端的html,css,js有一定的了解
资料
vue.js 官网: https://cn.vuejs.org/
axios: https://www.npmjs.com/package/axios
实例说明
整体思路
items用于页面展示,contact用于新增数据的存储,editContact用于修改数据的存储和展示
新建数据,页面form跟data绑定,存储在data中,axios获取data中的数据,向后端发起请求插入数据库,插入数据成功后,将前端form的数据存在items中用于页面展示;
修改数据,通过页面item.id通过axio向后端获取数据,展示在弹出窗口上,然后弹出窗口绑定了click时间触发后端editContact方法;
删除数据,页面数据通过直接获取item.id直接调用后端的删除接口,然后前端items也删除数据;
查询数据,直接接口
实例Vue,data来存储数据
var vm = new Vue({
el: '#contacts',
data: {
contact: {
id:'',
name: '',
wechat: '',
phone: '',
address: '',
industry: ''
},
editContact:{
id:'',
name: '',
wechat: '',
phone: '',
address: '',
industry: ''
},
items: []
}
数据绑定,将form表单里面的内容跟data中的contact双向绑定,页面填写的数据会保存在data.contact中,可以修改data.contact的数据来控制页面的数据展示
<form role="form" class="form-horizontal" id="contactForm">
<label for="name">Name</label><input type="text" class="form-control" id="name" v-model="contact.name" />
<label for="wechat">Wechat</label><input type="text" class="form-control" id="wechat" v-model="contact.wechat" />
<label for="phone">Phone</label><input type="text" class="form-control" id="phone" v-model="contact.phone" />
<label for="address">Address</label><input type="text" class="form-control" id="address" v-model="contact.address" />
<label for="industry">Industry</label><input type="text" class="form-control" id="industry" v-model="contact.industry" />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" v-on:click="insertContact" aria-hidden="true" data-dismiss="modal">保存</button>
</div>
</form>
v-for 遍历数据,列表展示数据,index为列表下标,遍历items里面的数据
<tr v-for="(item,index) in items">
<td>{{item.name}}</td>
<td>{{item.wechat}}</td>
<td>{{item.phone}}</td>
<td>{{item.address}}</td>
<td>{{item.industry}}</td>
<td>
<a class="btn btn-default" v-on:click="getEditContactId(item.id)" href="#modal-container-edit" data-toggle="modal">Edit</a>
<a class="btn btn-default" v-on:click="deleteContact(item.id,index)">Delete</a>
</td>
</tr>
mounted调用methods里面的方法,如mounted调用methods里面的getAllContact方法
mounted: function () {
this.getAllContact();
}
跟后端的交互请求,使用axios,如下get请求
getAllContact: function(){
axios.get('/contact/all')
.then(function (response) {
console.log(response.data);
vm.items=response.data
})
.catch(function (error) {
console.log(error)
});
}
methods里面方法的相互调用,edit完去调用getAllContact方法
editContactInfo: function(){
var editInfo = JSON.stringify(vm.editContact);
var instance = axios.create({
timeout: 1000,
headers: { 'Content-Type': 'application/json' }
});
instance.post('/contact/edit/'+vm.editContact.id,editInfo)
.then(function (response){
console.log(response.data);
vm.getAllContact();
})
.catch(function (error){
console.log(error);
})
}
动作触发,v-on:click="方法名",点击edit触发getEditContactId方法
<a class="btn btn-default" v-on:click="getEditContactId(item.id)" href="#modal-container-edit" data-toggle="modal">Edit</a>
<a class="btn btn-default" v-on:click="deleteContact(item.id,index)">Delete</a>
- 如何正确的对安卓手机进行数据恢复?
- [WCF安全系列]绑定、安全模式与客户端凭证类型:WSHttpBinding与WSDualHttpBinding
- Python中list的遍历
- Python中的参数传递与解析
- [WCF安全系列]实例演示:TLS/SSL在WCF中的应用[HTTPS]
- QEMU3 - 使用ceph来存储QEMU镜像
- Redis错误配置详解
- 顺序存储线性表的实现
- 技术揭秘:什么是定位劫持?黑客是如何进行劫持攻击的?
- CSS概要
- 如何使用 scikit-learn 为机器学习准备文本数据
- 使用jQuery Validation插件来验证表单
- 如何用Wireshark捕获USB数据?
- QEMU 2: 参数解析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法