文章目录
- 1 Vue简介
- 2 Vue快速入门
- 3 Vue常用指令
- 3.1 [v-text](https://vue.docschina.org/v2/api/#v-text)和[v-html](https://vue.docschina.org/v2/api/#v-html)
- 3.2 [v-if](https://vue.docschina.org/v2/api/#v-if)和[v-show](https://vue.docschina.org/v2/api/#v-show)
- 3.3 [v-on](https://vue.docschina.org/v2/api/#v-on)
- 3.4 [v-for](https://cn.vuejs.org/v2/api/#v-for)
- 3.5 [v-bind](https://vue.docschina.org/v2/api/#v-bind)
- 3.6 [v-model](https://vue.docschina.org/v2/api/#v-model)
- 4 Vue的生命周期
- 5 Vue的Ajax异步请求 axios
- 6 综合案例
1 Vue简介
1.1 Vue概述
Vue.JS是优秀的前端 JavaScript 框架
库和框架的区别:
-
库(如jQuery)
库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API
-
框架
框架提供了一套完整解决方案,
使用者要按照框架所规定的某种规范进行开发
为什么学习Vue：
随着项目业务场景的复杂,传统模式（html+jquery）已无法满足需求
就出现了Angular/React/Vue等框架
- 企业需求
- 主流框架之一(React Angular Vue)
- 易用、灵活、高效
学习链接：
1.2 Vue核心特性
- 双向数据绑定
- 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML
- 解耦视图与数据
- 可复用组件
- 虚拟DOM
- M-V-VM模型
- 数据驱动视图
2 Vue快速入门
2.1 安装Vue
直接下载源码然后通过路径引入
- 开发版本：https://vuejs.org/js/vue.js
- 生产版本：https://vuejs.org/js/vue.min.js
2.2 Vue入门程序 HelloWorld
作用:将数据应用在html页面中
1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...
new Vue({选项:值});
5. 在<div id='app'></div>中通过{{ }}使用data中的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue快速入门</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--Vue对象中的 data键中的值 ,值也是对象, 值中的键message-->
{{message}} {{fun1()}}
</div>
<script type="text/javascript">
/**
* 使用vue框架
* 1: 创建对象 vue对象 new Vue({});
* 2: 构造方法传递参数
* 3: el data methods
*/
new Vue({
//传递参数, 参数是json格式 键:值
el:"#app", //el 给他标签,vue对象接管此区域
data: {
message:"我是发起request后从服务器端response返回的数据(json格式的数据)"
} , //数据,页面中展示的数据: json格式
methods:{
fun1:function(){
console.log("=====");
}
} //函数,定义方法
});
</script>
</body>
</html>
2.3 Vue参数详解
el作用: 指定当前Vue实例所管理的视图,值通常是id选择器
- el的值可以是css选择器,通常是id选择器
- el的值不能是html标签和body标签
data作用: 指定当前Vue实例的数据对象
- data中的数据是响应式数据
- 值可以是一个对象 {属性: 值}
- 所有数据部分写在data中
- 在当前Vue实例所管理的视图中通过属性名使用data中的数据
- 可以通过vm.$data.属性 访问数据
- 也可以通过vm.属性 访问数据(更简单)
methods作用:指定当前Vue实例中的方法
-
可以直接通过vm实例访问这些方法，
-
方法中的 this 自动绑定为 Vue 实例。
作用:会将绑定的数据实时的显示出来:
- 通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
- 在插值表达式中不能写js语句, 例如
var a = 10; 分支语句 循环语句
格式
{{js表达式、三目运算符、方法调用等}}
代码演示
<body>
<div id="app">
{{message}} <br>
{{message+'呵呵'}} <br>
{{message.split("l")}} <br>
{{age+1}} <br>
{{age > 10 ?"大于9":"小于9"}}
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"hello",
age:10
},
methods:{}
});
</script>
</body>
3 Vue常用指令
3.1 v-text和v-html
很像innerText和innerHTML
document.getElementById("mydiv").innerHTML = "<h1>海马</h1>"; // 有html效果
document.getElementById("mydiv").innerText = "<h1>海马</h1>"; // 没有html效果, 将整个作为字符串处理
- v-text:更新标签中的内容
- v-text和插值表达式的区别
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
- v-text和插值表达式的区别
- v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 设置vue所管理的视图 -->
<div id="app">
<!-- 获取Vue对象中data里的数据 -->
<p>{{text}},我是p标签中的内容</p>
<p v-text="text">我是p标签中的内容</p>
<p v-text="html">我是p标签中的内容</p>
<p v-html="text">我是p标签中的内容</p>
<p v-html="html">我是p标签中的内容</p>
</div>
<!-- 引入Vue.js文件 -->
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 创建Vue对象 -->
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
text:'点我试试看',
html:'<a href="http://www.itcast.cn">试试就试试</a>'
}
});
</script>
</body>
</html>
3.2 v-if和v-show
作用:根据表达式的bool值进行判断是否渲染该元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的指令-if-show</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--
根据布尔值,判断是否渲染标签,是否显示
v-show 取值是false 采用CSS技术 display=none 隐藏
v-if 取值是false, 浏览器中没有该标签了
-->
<p v-if="message">v-if</p>
<p v-show="message">v-show</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:false
}
});
</script>
</body>
</html>
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用
v-show较好；如果在运行时条件很少改变，则使用
v-if较好。
3.3 v-on
-
作用:使用
v-on指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。 -
语法:
v-on:事件名.修饰符 = "methods中的方法名"; v-on的简写方法:@事件名.修饰符 = "methods中的方法名"
-
修饰符
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="location.href='http://www.baidu.com'">百度</button>
<button onclick="method1()">百度</button>
<div id="app">
<!--需求: 点击按钮 修改 点击次数-->
<!--在事件内 直接书写js代码-->
<!--1 原始方式-->
<button v-on:click="count++">按钮1</button>
<!--2 简化方式-->
<button @click="count++">按钮2</button>
<!--3 给事件绑定方法-->
<button @click="fn1()">按钮3</button>
<!--4 给事件绑定方法, 还要给方法传递参数-->
<button @click="fn2(count)">按钮4</button>
<!--5 限制点击事件只会被执行一次-->
<button @click="fn3()">按钮5</button>
<button @click="fn3">按钮52222222</button>
<button @click.once="fn3()">按钮6</button>
<p>上面的按钮被点击的次数: {{count}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el : "#app",
data : {
count : 0
},
methods : {
fn1 : function() {
console.info("方法一 被调用了... ...")
this.count++;
},
fn2 : function(cou) {
console.info("按钮被点击的次数: " + cou);
},
fn3 : function () {
console.info("方法三 被调用了... ...")
}
}
});
</script>
</body>
</html>
3.4 v-for
v-for作用: 列表渲染,当遇到相似的标签结构时,就用v-for去渲染：遍历数组，遍历对象，遍历对象数组
-
格式
(item,index) in 数组或集合 参数item:数组中的每个元素 参数index:数组中元素的下标(value, key, index) in 对象 参数index:对象中每对key-value的索引 从0开始 参数key:键 参数value:值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的指令v-for</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--
v-for指令,循环 数组
语法: v-for(元素,索引) in 数组键名
取出数组元素和索引 ,插值表达式
-->
<p v-for="(item,index) in arr"> {{item}} === {{index}} </p>
<!--
v-for指令,循环 对象
v-for(值,键,索引) in 对象键名
值: 刘备
键 name
-->
<p v-for="(value,key,index) in person"> {{value}} === {{key}} === {{index}} </p>
<hr>
<!--
v-for指令,循环, 数组,数组的元素是对象
v-for(数组元素,索引) in 遍历的数组的键名
-->
<p v-for="(person,index) in personArr"> {{person.name}} ==={{person.age}} ==={{person.gender}} === {{index}} </p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
arr:["刘备", "关羽", "张飞"],
person : {name:"刘备", age:"25", gender:"男"},
personArr : [
{name:"刘备", age:"25", gender:"男"},
{name:"关羽", age:"28", gender:"男"},
{name:"张飞", age:"29", gender:"男"},
]
}
});
</script>
</body>
</html>
3.5 v-bind
作用: 可以绑定标签上的任何属性。
格式:
v-bind:属性="值"
简写格式
:属性="值"
属性值一部分进行替换的格式
:属性="'常亮值' + vue对象data中的数据"
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue指令v-bind</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind 指令可以给标签的属性赋值 -->
<font v-bind:color="ys1">文本颜色</font> <hr>
<font :color="ys2">文本颜色</font> <hr>
<a :href="jd">京东</a> <hr>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"yellow",
jd:"http://www.jd.com"
}
});
</script>
</body>
</html>
3.6 v-model
作用: 表单元素的绑定
特点: 双向数据绑定
- vue对象中的数据发生变化可以更新到界面
- 通过界面可以更改vue对象中数据
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在data选项中声明初始值。
格式:
在表单控件或者组件上创建双向绑定。细节请看下面的代码演示。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue指令v-model</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--
数据的双向绑定
页面中的文本框,获取到vue对象中的数据
文本框中获取值后,页面可以修改,Vue对象中的数据也改了
Vue对象中的数据也改,文本框的数据跟随改变
-->
用户名:<input type="text" v-model="username"><br>
密的码:<input type="text" v-model="password"><br>
<button @click="fun1()">修改按钮</button>
<button @click="fun2()">手动修改按钮</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
username:"tom",
password:"123"
},
methods:{
/**
* 函数fun1中,使用data键中的数据
*/
fun1:function(){
console.log(this.username+"=="+this.password);
},
/**
* 函数fun2中,手动修改username和password值
* 反映到文本框中
*/
fun2:function () {
this.username="jerry";
this.password="7890";
}
}
});
</script>
</body>
</html>
4 Vue的生命周期
Vue生命周期是指Vue实例或者组件从诞生到消亡经历的每一个阶段，在这些阶段的前后可以设置一些函数当做事件来调用。
vue生命周期可以分为八个阶段，分别是：
beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）
我们如果想在页面加载完毕后就要执行一些操作的话，可以使用created和mounted钩子函数，如下：略
5 Vue的Ajax异步请求 axios
Vue框架支持ajax技术,异步请求。
在Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。
- vue-resource: Vue.js的插件，已经不维护，不推荐使用
- axios :不是vue的插件，可以在任何地方使用，推荐
说明: 既可以在浏览器端又可以在node.js中使用的发送http请求的库，支持Promise，不支持jsonp
如果遇到jsonp请求, 可以使用插件
jsonp实现
- 通过Http请求的不同类型(POST/DELETE/PUT/GET)来判断是什么业务操作(CRUD )
HTTP方法规则举例
| HTTP方法 | 数据处理 | 说明 |
|---|---|---|
| POST | Create | 新增一个没有id的资源 |
| GET | Read | 取得一个资源 |
| PUT | Update | 更新一个资源。或新增一个含 id 资源(如果 id 不存在) |
| DELETE | Delete | 删除一个资源 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/axios-0.18.0.js"></script>
</head>
<body>
<!--
Vue框架支持ajax技术,异步请求
需要插件: axios.js
-->
<div id="app">
<button @click="ajaxGet()">GET请求</button>
<input type="text" v-model="message">
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"ajax"
},
methods:{
ajaxGet:function(){
//this表示vue对象,保存起来备用
var _this = this;
/*
*get的异步请求
* axios插件,扩展了Vue功能
* 插件定义对象 axios,对象方法get
* get函数: 请求服务器地址
* 方法调用链
* 调用函数 then() catch()
* then()服务器响应成功的回调函数
* catch()服务器响应失败的回调函数
*
* then()传递匿名函数,传递参数 response,服务器响应 回来的数据
*/
axios.get("/ajaxServlet?name=lisi&age=20").
then(function(response){
//响应回来的是json数据,json中的键data,
console.log(response.data);
//response对象的键data,赋值到message
//this当前对象,当前对象axios, this.message
_this.message=response.data;
}).
catch(function(error){
console.log(error);
});
}
}
});
</script>
</body>
</html>
tips：注意this是指vue对象还是axios对象
改进：使用箭头函数 response => {} 表示 参数 传给 匿名函数（箭头函数ES6新特性），这样就不用重新复制this对象
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: "ajax"
},
methods: {
ajaxGet: function () {
//插件发请求
axios.get("/ajaxServlet?name=lisi&age=20").//响应成功调用then
//then我们自己的匿名函数,服务器响应的信息传递response
//箭头函数 (参数)->{}
then(response => {
//服务器响应回来的数据,赋值到message键
//箭头函数,this表示Vue对象
this.message = response.data;
}).catch();
}
}
});
</script>
axios.post(请求路径, 携带参数)
.then(response=>{
xxx
})
.catch(error => {
yyyy
});
为方便起见，为所有支持的请求方法提供了别名
- axios.request(confifig)
- axios.get(url[, confifig])
- axios.delete(url[, confifig])
- axios.head(url[, confifig])
- axios.post(url[, data[, confifig]])
- axios.put(url[, data[, confifig]])
- axios.patch(url[, data[, confifig]])
6 综合案例
使用vue框架的 关于用户信息的 CRUD
6.1 查（Read 基础）
1 创建vue对象，根据id=app找到div标签体，在methods中定义查询方法：发送请求
new Vue({
el:"#app",
data:{
//定义对象,存储单个用户数据
userInfo:{},
//定义数组,存储多个用户数据
userList:[]
},
methods:{
//定义函数,发生异步请求,获取所有的用户数据 ,响应json数据
findAll:function(){
//发生get请求
axios.get("/user?operator=findAll").
then( response=>{
console.log(response);
//响应回来json(数组)赋值给 userList键
this.userList = response.data;
}).
catch(error=>{
console.log("服务器响应失败"+error);
});
}
//生命周期的钩子函数
//对象挂载完成,调用函数,发生请求
mounted:function(){
this.findAll();
}
});
2 在页面加载完成后，要执行查询findAll方法，这时候要考虑到vue对象的生命周期，vue挂载完成，调用findAll方法，发送get请求。
//生命周期的钩子函数
//对象挂载完成,调用函数,发生请求
mounted:function(){
this.findAll();
}
3 servlet中根据get请求调用findAll方法，从数据库中找到userList，转为json，response给界面
public void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/**
* 调用业务层,获取数据集合
* 转成json响应
*/
List<User> userList = service.findAll();
String json = mapper.writeValueAsString(userList);
response.getWriter().write(json);
}
4 在js的then方法中，将response的data数据传给事先定义的userList
then( response=>{
console.log(response);
//响应回来json(数组)赋值给 userList键
this.userList = response.data;
}).
5 界面中v-for解析userList，显示到界面中
<!--循环次tr,插值表达式赋值 -->
<!--vue的指令 v-for 标签遍历-->
<tr v-for="(item,index) in userList" align="center">
<!--取出数组的元素,填充到 td中,插值表达式-->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.money}}</td>
<td>
<!--按钮修改,绑定点击事件,调用函数findById 传递主键!!-->
<button type="button" class="btn btn-info" @click="findById(item.id)">修改</button>
<button type="button" class="btn btn-danger" @click="deleteUser(item.id)">删除</button>
</td>
</tr>
6.2 增（Create-insert）
点击add增加操作，先弹窗（bootstrap实现），再新增
1 界面绑定add事件
<div class="box-header">
<button type="button" class="btn btn-success" @click="add()">添加</button>
</div>
2 js中写add方法，打开弹窗
//定义函数添加事件
add:function () {
//打开窗口即可
//jQuery获取div,调用bootstrap前端框架方法 model()
$("#add_modal").modal("show");
}
3 页面中使用双向绑定v-model，将新增的数据保存到userInfo中，点击添加按钮执行register()注册事件
<form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">账户名</label>
<div class="col-sm-10">
<!--数据双向绑定技术 vue对象中键:userInfo中的数据放在文本框中-->
<input type="text" class="form-control" id="inputEmail3"
placeholder="name" v-model="userInfo.name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3"
class="col-sm-2 control-label">余额</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3"
placeholder="money" v-model="userInfo.money">
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="button" class="btn btn-outline" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-outline" data-dismiss="modal" @click="register()">添加
</button>
</div>
<!-- /.box-footer -->
</form>
4 js中编写register方法，post请求servlet处理
//定义注册函数,添加用户的数据
register:function(){
//获取对象userInfo的数据
//console.log( this.userInfo );
//服务器发生请求,提交参数 填写用户名和余额
//数据封装到了userInfo
axios.post("/user?operator=register",this.userInfo).
then(response=>{
//调用findAll()
this.findAll();
}).
catch(error=>{
})
},
5 servlet中执行注册事件，获取json数据转为user对象存入数据库中
public void register(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/**
* 用户注册,新增
* 获取客户端请求的参数
* name,money 传递业务层,写入数据库
*
* 注意: 客户端请求的数据格式是json格式 {"name":"张三","money":"10000"} 对象,对象中有2个键
* request对象的方法 getParameter,getParameterValues(), getParameterMap() 全部失去意义
* 只能获取 k=v&k=v
*
* 客户端和服务器通信: 无论请求的数据是什么,IO流实现
* request.getInputStream 字节输入流
*/
InputStream inputStream = request.getInputStream();
byte[] bytes = new byte[1024];
int len = inputStream.read(bytes);
String json = new String(bytes,0,len,"utf-8");//{"name":"张三","money":"10000"}
//json数据转成User对象
User user = mapper.readValue(json, User.class);
//调用业务层传递 user对象
service.register(user);
response.getWriter().write("添加成功");
}
6 js的then方法执行findAll方法发送get请求，更新界面
6.3 修改（Update）
修改分为两个功能：先回显数据，后修改
1 页面注册事件 @click=“findById(item.id)”，注意传入id，根据id进行查找（回显功能）
<!--循环次tr,插值表达式赋值 -->
<!--vue的指令 v-for 标签遍历-->
<tr v-for="(item,index) in userList" align="center">
<!--取出数组的元素,填充到 td中,插值表达式-->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.money}}</td>
<td>
<!--按钮修改,绑定点击事件,调用函数findById 传递主键!!-->
<button type="button" class="btn btn-info" @click="findById(item.id)">修改</button>
<button type="button" class="btn btn-danger" @click="deleteUser(item.id)">删除</button>
</td>
</tr>
2 js中编写findById(item.id) 功能，发送get请求给Servlet处理，注意传入id值
//定义函数,修改之前的数据回显
findById:function(id){
//发生请求,服务器提交要查询的主键
axios.get("/user?operator=findById&id="+id).
then( response=>{
//response响应回来结果 键data json数据
//json数据,赋值Vue对象中的键 userInfo
this.userInfo = response.data;
//弹出修改对话框
$("#update_modal").modal("show");
} ).
catch(error=>{
});
},
3 servlet根据传入的get请求，编写对应方法findById，数据转为json格式，response回给界面解析
/**
* 修改数据之前的回显
*/
public void findById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
User user = service.findById(id);
response.getWriter().write(mapper.writeValueAsString(user));
}
4 js的then中this.userInfo = response.data;
5 界面解析进行双向绑定，并用隐藏域保存id值
<!--隐藏域,保存主键-->
<input type="hidden" class="form-control" v-model="userInfo.id">
<div class="box-body">
<div class="box-body">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">账户名</label>
<div class="col-sm-10">
<!--双向绑定,Vue对象的userInfo获取-->
<input type="text" class="form-control" placeholder="name" v-model="userInfo.name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label" >余额</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="money" v-model="userInfo.money">
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-outline" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-outline" data-dismiss="modal" @click="update()">修改
</button>
</div>
</div>
6 完成修改后，点击修改按钮，绑定update事件@click="update()，执行第二个功能修改功能
7 js中通过post请求servlet进行处理，并将双向绑定的json数据传给servlet（注意post请求，在servlet中不能用getParameter进行获取传递的参数，只能用getInputStream获取字节流）
//定义函数,实现修改数据
update:function(){
//获取修改后的数据,提交服务器
axios.post("/user?operator=update",this.userInfo).
then(response=>{
//展示全部数据
this.findAll();
}).
catch(error=>{
});
},
8 servlet中通过request.getInputStream()获取json数据，并将json数据转为user对象，对数据库执行更新操作
/**修改的请求
* */
public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取客户端请求的数据,(json)
InputStream inputStream = request.getInputStream();
byte[] bytes = new byte[1024];
int len = inputStream.read(bytes);
//读取到数组变成字符串
String json = new String( bytes,0,len,"utf-8" );
//json转成User对象
User user = mapper.readValue(json, User.class);
service.update(user);
response.getWriter().write("修改成功");
}
9 更新完，js中的then调用findAll方法，发送新的get请求重新展示界面
6.4 删除（Delete）
1 页面中绑定事件deleteUser
<td>
<!--按钮修改,绑定点击事件,调用函数findById 传递主键!!-->
<button type="button" class="btn btn-info" @click="findById(item.id)">修改</button>
<button type="button" class="btn btn-danger" @click="deleteUser(item.id)">删除</button>
</td>
2 js中写deleteUser方法，发送请求
//定义函数,实现删除
deleteUser:function(id){
//提示用户
if(confirm("确定要删除吗")){
//发生请求
axios.get("/user?operator=delete&id="+id).
then(response=>{
//展示全部数据
this.findAll();
}).
catch(error=>{
});
}
},
3 servlet中根据传递的id，进行删除
/**
* 删除用户数据
*/
public void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
service.delete(id);
response.getWriter().write("删除成功");
}
4 js的then中执行findAll方法，发送get请求，更新界面数据
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
