就是根据Vue本身的特性，对之前写过的JSON等进行页面代码的简化。

其中，有俩点，需要明白一下：

在body标签里面，使用div标签，将列表数据包住，并设置一个id，便于vue对其的引用

在使用vue时，一定要导入包！

查询所有(这里仅展示.html界面的代码)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Vue</title>

</head>

<body>

<!--显示所有结果界面-->

<div id="app">

<table id="userTable">

<tr>

  <th>序号</th>

  <th>用户名</th>

  <th>密码</th>

</tr>

<tr v-for="(user,i) in users">

  <td>{{user.id}}</td>

  <td>{{user.username}}</td>

  <td>{{user.password}}</td>

</tr>

</table>

</div>

<script src="js/vue.js"></script>

<script>

new Vue({

  el:"#app",

  data(){

    return {

      users:[]

    }

  },

  mounted(){

    //页面加载完成后，进行异步请求

    var _this=this;

    axios({

      method:"get",

      url:"http://localhost:8080/ttCookieLogin_war_exploded/selectAllServlet"

    }).then(function(resp){

      _this.users=resp.data;

    })

  }

})

</script>

</body>

</html>

添加功能(这里仅展示.html界面的代码)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>添加界面</title>

</head>

<body>

<div id="app">

<center>

    <form action="" method="post">

<tr>

    <td>序号：</td>

  <input type="text" id="id" v-model="user.id" name="id">

</tr>

<p>

<tr>

    <td>用户名：</td>

    <input text="text" id="username" v-model="user.username" name="username">

</tr>

<p>

<tr>

    <td>密码：</td>

    <input text="text" id="password" v-model="user.password" name="password">

</tr>

<p>

<tr>

    <input type="button" id="btn" @click="submitForm" value="提交">

</tr>

    </form>

</center>

</div>

<script src="js/vue.js"></script>

<script>

    new Vue({

        el:"#app",

        data(){

            return{

                user:{}

            }

        },

        methods:{

            submitForm(){

                var _this = this;

                axios({

                    method:"post",

                    url:"http://localhost:8080/ttCookieLogin_war_exploded/addServlet",

                    data:_this.user

                }).then(function(resp){

                    if(resp.data=="success"){

                        location.href="http://localhost:8080/ttCookieLogin_war_exploded/Vue.html"

                    }

                })

            }

        }

    })

</script>

</body>

</html>

利用Vue技术实现的查询所有和添加功能的更多相关文章

  1. [.net 面向对象程序设计进阶] (20) 反射(Reflection)（上）利用反射技术实现动态编程

    [.net 面向对象程序设计进阶] (20) 反射(Reflection)(上)利用反射技术实现动态编程 本节导读:本节主要介绍什么是.NET反射特性,.NET反射能为我们做些什么,最后介绍几种常用的 ...

  2. 利用数据库视图实现WEB查询敏感信息接口动态脱敏

    前言: 利用数据库视图,实现web接口查询敏感信息时动态脱敏. 具体目标:某接口为用户信息查询接口,返回敏感用户信息(id,姓名.手机号[敏感].身份证号[敏感]),如果web用户为管理员角色,则查询 ...

  3. 🏃‍♀️点亮你的Vue技术栈，万字Nuxt.js实践笔记来了~

    前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...

  4. 利用Vue.js实现拼图游戏

    之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...

  5. #数据技术选型#即席查询Shib+Presto，集群任务调度HUE+Oozie

    郑昀 创建于2014/10/30 最后更新于2014/10/31   一)选型:Shib+Presto 应用场景:即席查询(Ad-hoc Query) 1.1.即席查询的目标 使用者是产品/运营/销售 ...

  6. VC中利用多线程技术实现线程之间的通信

    当前流行的Windows操作系统能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程提供了多任务处理的能力.用进程和线程的观点来研究软 ...

  7. SQLServer 2008 技术内幕——T-SQL 查询 笔记

    原文:SQLServer 2008 技术内幕--T-SQL 查询 笔记 1.SQL编程有许多独特之处,如:面向集合的思维方式.查询元素的逻辑处理顺序.三值逻辑.如果不掌握这些知识就开始用SQL编程,得 ...

  8. 利用kibana插件对Elasticsearch查询

    利用kibana插件对Elasticsearch查询 Elasticsearch是功能非常强大的搜索引擎,使用它的目的就是为了快速的查询到需要的数据. 查询分类: 基本查询:使用Elasticsear ...

  9. 利用vue写filter时 当传入是一个对象时注意

    vue或angular 写filter时,传入的是对象时一定注意,不能直接改变对象的值,因为在使用该filter的页面上,若传入的对象其他值发生变化,该filter也会重新运行,这样可能会报错,如下例 ...

  10. 利用neon技术对矩阵旋转进行加速（2）

    上次介绍的是顺时针旋转90度,最近用到了180度和270度,在这里记录一下. 1.利用neon技术将矩阵顺时针旋转180度: 顺时针旋转180度比顺时针旋转90度容易很多,如下图 A1 A2 A3 A ...

随机推荐

  1. Filament初探，全场景性能测试

    一直很想研究下Filament在移动端全场景(大约20万Triangle,约120个渲染实体)的实时帧率.终于在今天有时间腾出来研究下Filament在Android上的全场景PBR渲染性能. 这里以 ...

  2. Oracle 数据库升级过程中的主要步骤

    Oracle 数据库升级包括六个主要步骤. Oracle 数据库的升级步骤工作流 步骤 1:准备升级 Oracle 数据库 熟悉 Oracle 数据库新版本的特性. 确定新版本的升级路径. 选择升级方 ...

  3. 【SSO单点系列】（2）：CAS4.0 之 跨域 Ajax 登录实践

    CAS4.0 之 跨域 Ajax 登录实践 一.问题描述 CAS实现单点 实现一处登录 可访问多个应用 . 但是原登录是CAS默认登录页面和登出页面是无法重定向到自定义页面的   此处使用Ajax+I ...

  4. CentOS 7.9 环境下部署 Docker 服务

    sudo setenforce Permissive sudo vi /etc/selinux/config SELINUX=permissive sudo systemctl stop firewa ...

  5. redis分布式锁实现,setnx,nodejs版本

    const redis = require('ioredis'); const clienId = Math.random() * 100; //模拟客户端Id const lockKey = 'te ...

  6. javase我的笔记

    学习java编程 |--需要遵循其语法规范 |--在其开发环境下编程 准备开发java环境 |--安装jdk |--配置jdk jdk:含义是java提供的一套开发工具,包含jre\编译器等 |--编 ...

  7. CSS设置边距

    1.内边距 所有的 ​HTML ​元素基本都是以矩形为基础. 每个 HTML 元素周围的矩形空间由三个重要的属性来控制: ​padding(内边距)​ ​margin(外边距)​ ​border(边框 ...

  8. 虚拟机安装windows 7 32位 + sqlserver 2000

    安装包网盘地址:(https://pan.baidu.com/s/1ZoC-cTafBi8zZbCkvvmvNA?pwd=x1y2 提取码:x1y2 ) VMware 安装win7 32 位 http ...

  9. 高并发解决方案之 mysql悲观锁：select ... for update

    select ... for update 场景:多个进程都先读后写咋办,需要的是让他们串行执行. 比如库存的减少.一般这些操作都是很长一串并且是开启事务的.如果库存刚开始读的时候是1,而立马另一个进 ...

  10. Ai2022中文版(Illustrator 2022)Mac/win v26.4.1

    Adobe Illustrator 2022 Mac/win是设计行业中的矢量图形经典.数以百万计的设计人员和艺术家使用行业标准的矢量图形软件创作各类内容,从炫酷的 Web 和移动图形,到徽标.图标. ...