利用Vue技术实现的查询所有和添加功能
就是根据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技术实现的查询所有和添加功能的更多相关文章
- [.net 面向对象程序设计进阶] (20) 反射(Reflection)（上）利用反射技术实现动态编程
[.net 面向对象程序设计进阶] (20) 反射(Reflection)(上)利用反射技术实现动态编程 本节导读:本节主要介绍什么是.NET反射特性,.NET反射能为我们做些什么,最后介绍几种常用的 ...
- 利用数据库视图实现WEB查询敏感信息接口动态脱敏
前言: 利用数据库视图,实现web接口查询敏感信息时动态脱敏. 具体目标:某接口为用户信息查询接口,返回敏感用户信息(id,姓名.手机号[敏感].身份证号[敏感]),如果web用户为管理员角色,则查询 ...
- 🏃♀️点亮你的Vue技术栈，万字Nuxt.js实践笔记来了~
前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...
- 利用Vue.js实现拼图游戏
之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...
- #数据技术选型#即席查询Shib+Presto，集群任务调度HUE+Oozie
郑昀 创建于2014/10/30 最后更新于2014/10/31 一)选型:Shib+Presto 应用场景:即席查询(Ad-hoc Query) 1.1.即席查询的目标 使用者是产品/运营/销售 ...
- VC中利用多线程技术实现线程之间的通信
当前流行的Windows操作系统能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程提供了多任务处理的能力.用进程和线程的观点来研究软 ...
- SQLServer 2008 技术内幕——T-SQL 查询 笔记
原文:SQLServer 2008 技术内幕--T-SQL 查询 笔记 1.SQL编程有许多独特之处,如:面向集合的思维方式.查询元素的逻辑处理顺序.三值逻辑.如果不掌握这些知识就开始用SQL编程,得 ...
- 利用kibana插件对Elasticsearch查询
利用kibana插件对Elasticsearch查询 Elasticsearch是功能非常强大的搜索引擎,使用它的目的就是为了快速的查询到需要的数据. 查询分类: 基本查询:使用Elasticsear ...
- 利用vue写filter时 当传入是一个对象时注意
vue或angular 写filter时,传入的是对象时一定注意,不能直接改变对象的值,因为在使用该filter的页面上,若传入的对象其他值发生变化,该filter也会重新运行,这样可能会报错,如下例 ...
- 利用neon技术对矩阵旋转进行加速（2）
上次介绍的是顺时针旋转90度,最近用到了180度和270度,在这里记录一下. 1.利用neon技术将矩阵顺时针旋转180度: 顺时针旋转180度比顺时针旋转90度容易很多,如下图 A1 A2 A3 A ...
随机推荐
- 攻防世界Web进阶篇——warmup
打开链接,发现是一张滑稽 查看页面源代码,发现文件 于是打开source.php,发现 打开hint.php,根据提示得知flag在ffffllllaaaagggg文件中 回到source.php,检 ...
- [iOS] 对 UItableView 等界面(ClipsToBounds) 同时使用 圆角和阴影
展示内容的界面会被 ClipsToBounds = YES(按边缘剪切),但同时需要圆角和阴影效果. 一个界面,ClipsToBounds = YES 之后,阴影会被剪切,不再展示. 感觉只能使用多个 ...
- 解决通过Eclipse启动Tomcat-Run On Server无法选择Tomcat v7.0的问题
在eclipse中配置Tomcat并启动右键项目 -> Run As -> Run on Server可能会出现无法选择Tomcat v7.0的现象如下图,不慌菜鸟小编带你解决!1.定位到 ...
- MongoDB 副本集(Replica Set)
副本集(Replica Set) 副本集概念 此集群拥有一个主节点(Master)和多个从节点(Slave),与主从复制模式类似,但是副本集与主从复制的区别在于:当集群中主节点发生故障时,副本集可以自 ...
- CF960G
首先我们考虑$n$的情况,显然以$n$为分界线可以将整个序列分成两部分,就像这样: . 那么我们考虑:在这个东西前面才会有前缀最大的统计,在这个东西后面才会有后缀最大的统计 这样就剩下了$n-1$个元 ...
- Flask之反向生成url
from flask import Flask, url_forapp = Flask(__name__)endpoint:用来给url起别名,通过url_for来反向生成url,如果不写则默认是函数 ...
- Python从dic中随机取值
import random a = {'lab-1': '短视频', 'lab-1': '直播'} print(random.choice(list(a.keys()))) # 从keys的list中 ...
- 关于CSS3中的min-height等的使用
一.min-height 当我们需要让某个容器不能低于某个高度,但是不能将高度固定在这个高度,希望其能够随着容器内内容的增多而变高时,我们可以对容器设置一个min-height来让该容器获得该特性.( ...
- Windows 10 ~ Docker 安装
Windows安装Docker 不推荐在Windows系统安装Docker,会有一些奇怪的坑不容易解决,建议windows环境安装虚拟机,通过虚拟机中的Linux系统安装Docker 官方安装文档 9 ...
- 西瓜书3.4 解题报告（python 多分类学习 十折交叉法）
偷懒找了UCI上最小的一个数据集,数据大约是集装箱起重机的转动速度.角度,判断其力量大小(我不懂起重机啊啊啊) 虽然不懂但并不妨碍写代码分类,显然标记就是力量,分为0.3.0.5.0.7三种.具体的模 ...