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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开发与安全

apache, php, mysql 安装过程命令记录

一、安装apache httpd-2.0.64 1. ./configure --prefix=/usr/local/apache2 2. make 3. ma...

23500
来自专栏一个爱瞎折腾的程序猿

初次尝试Linux并记录一二

若出现 服务器拒绝了SETP连接,但它监听FTP链接。。。没有安装sshd 解决方案

13410
来自专栏小樱的经验随笔

Linux目录结构

Linux 目录结构 装完Linux,首先需要弄清Linux 标准目录结构 ? / root —?启动Linux时使用的一些核心文件。如操作系统内核、引导程序G...

52160
来自专栏Laoqi's Linux运维专列

看懂FTP的主动和被动模式

50490
来自专栏java系列博客

【redis】安装与运行:Creating Server TCP listening socket 127.0.0.1:6379: bind: No error

73950
来自专栏python学习路

一、Django的基本用法

学习Django有一段时间了,整理一下,充当笔记。盗张图: ? MVC 大部分开发语言中都有MVC框架 MVC框架的核心思想是:解耦 降低各功能模块之间的耦合性...

33650
来自专栏LinXunFeng的专栏

hexo+github 搭建个人技术博客

20430
来自专栏云计算教程系列

如何在Debian 8上安装Munin监视工具

Munin是一个系统,网络和基础设施监控应用程序,通过Web浏览器以图形形式提供信息。它是围绕客户端 - 服务器架构设计的,可以配置为监控它所安装的机器(Mun...

7500
来自专栏信安之路

XSS学习笔记【一】

非持久型XSS也称反射型XSS。具体原理就是当用户提交一段代码的时候,服务端会马上返回页面的执行结果。那么当攻击者让被攻击者提交一个伪装好的带有恶意代码的链接时...

9900
来自专栏后端技术探索

nginx动静分离实操

部署wordpress实现整个网站的动静分离,实现如下要求: 1.前端Nginx收到静态请求,直接从NFS中返回给客户端。 2.前端Nginx收到动态请求转交给...

20730

扫码关注云+社区

领取腾讯云代金券