使用Vue 简化 用户查询/添加功能

1. 查询功能

需求在页面加载完成之后向服务器查询列表并展示在页面

旧方法
在window.onload绑定的函数内发送axios请求
服务端发回JSON数据
客户端将响应数据resp.data 循环取出拼接成字符串最后赋值给表格的innerHTML属性

简化

• 页面完成的逻辑之前由DOM操作 window.onload 实现现在可以用Vue的生命周期 mounted 属性函数mounted即表示挂载完成时自动执行来实现将axios写在 mounted中以此给服务端发送请求

• 遍历展示数据时之前是在axios的回调函数中 拼接字符串再通过DOM操作赋给表格的innerHTML属性现在使用 v-for 来遍历v-for遍历的数据要来自于Vue对象

过程

1. 载入vue.js文件放到main-webapp-js目录并在HTML中引入vue和axios的js文件

2. 创建Vue核心对象el属性对应<div标签的 id <div 标签规定了vue的作用范围

3. 在mounted属性函数中使用axios发送异步请求查询数据

4. 将axios获取的响应数据赋给Vue的模型数据brands
   mounted中
   使用v-for遍历服务端发来的响应数据brands而brands要在v-for中使用所以需要将brands变成模型数据模型数据要在data中声明
   要把axios收到的响应数据给Vue对象axios不是html没法用v-model双向绑定所以在axios外面先建立一个Vue对象的变量_this这样就能在axios中将服务端返回的数据赋给Vue对象的模型数据brands了

注意

1. axios的this是window对象因为axios是由浏览器发出即axios的调用者是window对象
   此时需要的是Vue对象所以在axios外面先建立一个Vue的this的变量_this这样就能在axios中将服务端返回的数据赋给Vue中的模型数据brands了

准备
引入axios和Vue的js文件

1.1 Vue核心对象

注意axios获取响应数据resp.data后要将数据赋给Vue的模型数据brands这样才可以在v-dor中使用brands进行遍历

1.2 brand.html

循环遍历Vue对象的brands模型数据而不用再去axios的回调函数中去拼接字符串再赋值给表格的innerHTML属性DOM操作
brands是JSON格式的数组可以直接通过 json.name 的方式获取属性

<div id="app">   注意id对应Vue对象的el属性 

</div>

1.3 selectAllServlet无变化

收到请求后查询出列表brands并将其序列化为JSON放入response并返回给axios

2. 添加功能

需求
客户端点击button后服务端将浏览器输入参数添加到数据库并跳转展示需要使用JSON的反序列化

旧方法
将button的onclick事件属性绑定函数在函数中建立js对象并将表单的数据逐个赋给js对象再把js对象放入data传给服务端
服务端反序列化为Java对象添加到数据库返回标记
浏览器接收响应后跳转页面

简化

1. button的事件属性onclick换成@click v-on 缩写对应的函数写在Vue的methods属性中
2. 给每一个表单项使用v-model 双向绑定表单 — 模型当表单项用户输入改变则模型的属性自动变化而不需要再用DOM操作逐个去赋值给js对象

过程
1.建立Vue核心对象el 属性为app对应 <div id=”app”>
2.将v-on:click属性绑定函数submitForm并将函数写在Vue的methods中将来button被点击则会执行submitForm函数
3.在submitForm中使用axios发送请求发送的data是模型数据模型则需要先在Vue的data中先定义模型数据brand然后将brand赋给axios的data发给服务端
4.brand的值来源于表单在表单中使用v-model 双向绑定 这样表单输入的值就会到模型数据brand当中此时就能把brand直接发给服务端了

准备
引入axios和Vue的js文件

2.1 addBrandhtml

绑定button的click属性事件 v-on:click 简写为 @click
将表单项数据和brand模型数据双向绑定

2.2 Vue核心对象

客户端发送axios请求时会去获取data数据由于brand模型对象和表单项数据是双向绑定的所以表单的数据同步到了brand模型对象中以JSON方式发送到了服务端
服务端添加数据并返回响应客户端执行回调函数跳转页面

2.3 addServlet无变化

• 在servlet获取HTTP请求报文的请求体再调用JOSN.parseObject()反序列化为Java对象
• 将对象放入response传给客户端

注意

1. 由于AJAX使用了POST的方式请求数据在请求体中使用request.getReader() 读取
2. request.getParameter()的方式不能接收JSON格式的数据 这个方法切割的是HTTP请求报文的字符串而JSON 的格式不一样
   JSON数据不管多长都是一行

效果
访问addBrand.html并填写表单后台收到数据会添加到数据库前端再跳转页面
由于表单输入的数据和模型双向绑定不再需要DOM操作将表单数据逐个赋值给js对象

点击提交后跳转