一、切片1：楼宇管理列表（用vue+axios实现）
1.1、原型图（axure）
用axure现场画
1.2、实现需求
1.2.1、需求分析
需求分解：
1、设计基础样式的html文件（list.html)
2、在Servlet中获取楼宇的列表数据，并将该数据通过HttpResponse对象响应
3、使用双向绑定将页面的列表与楼宇列表绑定
4、通过vue+axios的方式请求楼宇列表
复制代码1.2.2、需求实现
1、Servlet代码沿用上周末的案例，一行不改
2、list_vue.html前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.min-v2.5.16.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr v-for="b in buildings">
<td>{{b.no}}</td>
<td>{{b.unit}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
buildings:null
},
//生命周期函数，初始化：data和methods都已经初始化好了
created:function () {
// var _self = this;
axios
.get('GetList')
// .then(function (response) {
// console.log(response);
// _self.buildings = response.data;
// })
// .then(response => (this.buildings = response.data))
.then(response => { //ES6的Lambda表达式写法
this.buildings = response.data;
})
.catch(function (err) {
console.log(err)
});
}
});
</script>
</body>
</html>
复制代码运行效果：
1.3、知识点补充
1.3.1、什么是axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 axios的github:github.com/axios/axios
引入axios
首先就是引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
复制代码扩展：如果你使用es6，只需要安装axios模块之后
import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios
复制代码1.3.2、用axios处理get请求
//通过给定的ID来发送请求
axios
.get('/user?ID=12345')
.then(response => {
//ES6的Lambda表达式写法
console.log(response)
})
.catch(function(err){
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios
.get('/user',{
params:{
ID:12345
}
})
.then(response => {
//ES6的Lambda表达式写法
console.log(response)
})
.catch(function(err){
console.log(err);
});
复制代码1.3.3、用axios处理post请求
axios
.post('/user?ID=12345')
.then(response => {
//ES6的Lambda表达式写法
console.log(response)
})
.catch(function(err){
console.log(err);
});
复制代码1.3.4、扩展：针对于RESTful API接口风格的支持
为方便起见，针对于RESTful API接口风格，axios提供了多种别名，对于增、删、改、查的请求做了细致的划分
| 增 | 删 | 改 | 查 |
|---|---|---|---|
| axios.post | axios.delete | axios.put | axios.get |
1.3.5、常用生命周期函数
每个Vue实例从创建到销毁的整个生命过程，乘为Vue的生命周期。此部分详细内容在重难点补充中讲解。
开发中常用的生命周期函数
- created ：数据已经绑定到了对象实例，这时候data和methods都已经初始化好了，可以用了
- mounted：生成页面上真正的dom，在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作
- updated：将改变更新到 dom上面，完成更新
- destroyed：虽然叫实例的销毁，但实际上vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据 与view的绑定
1.4、拓展案例
案例一：显示用户列表
需求：按图实现效果
使用到的知识点
1、Servlet
2、双向绑定
3、axios
复制代码参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.min-v2.5.16.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr v-for="u in usrs">
<td>{{u.username}}</td>
<td>{{u.sex}}</td>
<td>{{u.birth | myDateFormat}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
usrs:null
},
created:function () {
axios
.get('GetUserList')
.then(response => { //ES6的Lambda表达式写法
this.usrs = response.data;
})
.catch(function (err) {
console.log(err)
});
},
filters:{
myDateFormat: function (oldValue) {
var dt = new Date(oldValue);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0'); //保留2位，首位用0补齐
var d = dt.getDate().toString().padStart(2, '0');
// var hh = dt.getHours().toString().padStart(2, '0');
// var mm = dt.getMinutes().toString().padStart(2, '0');
// var ss = dt.getSeconds().toString().padStart(2, '0');
return y+'/'+m+'/'+d;
}
}
});
</script>
</body>
</html>
复制代码案例效果
二、切片2：扩展用户列表功能
2.1、原型图（axure）
在拓展案例一的基础上添加功能
复制代码
2.2、实现需求
2.2.1、需求分析
需求分解：
1、将用户的生日由【年-月-日】，改成【年/月/日】
复制代码2.2.2、需求实现
<td>{{u.birth | myDateFormat}}</td>
复制代码//与created生命周期函数平齐，自定义过滤器
filters:{
myDateFormat: function (oldValue) {
var dt = new Date(oldValue);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0'); //保留2位，首位用0补齐
var d = dt.getDate().toString().padStart(2, '0');
// var hh = dt.getHours().toString().padStart(2, '0');
// var mm = dt.getMinutes().toString().padStart(2, '0');
// var ss = dt.getSeconds().toString().padStart(2, '0');
return y+'/'+m+'/'+d;
}
}
复制代码案例效果
未使用过滤器前：
使用过滤器后：
2.3、知识点补充
2.3.1、过滤器
过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
定义过滤器
//与created生命周期函数平齐，自定义私有过滤器，私有过滤器仅作用于当前HTML文件
filters:{
myDateFormat: function (oldValue) {
var dt = new Date(oldValue);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0'); //保留2位，首位用0补齐
var d = dt.getDate().toString().padStart(2, '0');
// var hh = dt.getHours().toString().padStart(2, '0');
// var mm = dt.getMinutes().toString().padStart(2, '0');
// var ss = dt.getSeconds().toString().padStart(2, '0');
return y+'/'+m+'/'+d;
}
}
复制代码使用过滤器
<!-- 将过滤器添加在 JavaScript 表达式的尾部，由“管道”符指示-->
<td>{{u.birth | myDateFormat}}</td>
复制代码3.4、案例拓展
案例一：使用过滤器格式化用户性别
需求：按图实现效果
使用到的知识点
1、双向绑定
2、axios请求
3、自定义过滤器
复制代码参考代码
Servlet代码
package manager;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "Test2", value = "/GetUserList")
public class Test2Manager extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String jsonStr = "[";
jsonStr += "{"username":"admin", "sex":"0", "birth":"1998-2-8"},";
jsonStr += "{"username":"tom", "sex":"1", "birth":"2002-1-24"},";
jsonStr += "{"username":"lily", "sex":"2", "birth":"2000-2-05"}";
jsonStr += "]";
resp.setContentType("application/json;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print(jsonStr);
pw.close();
}
}
复制代码HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.min-v2.5.16.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr v-for="u in usrs">
<td>{{u.username}}</td>
<td>{{u.sex | mySexFormat}}</td>
<td>{{u.birth}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
usrs:null
},
created:function () {
axios
.get('GetUserList')
.then(response => { //ES6的Lambda表达式写法
this.usrs = response.data;
})
.catch(function (err) {
console.log(err)
});
},
filters:{
mySexFormat: function (value) {
var sex = '';
switch (value) {
case '0':
sex = '女';
break;
case '1':
sex = '男';
break;
default:
sex = '未知';
}
return sex;
}
}
});
</script>
</body>
</html>
复制代码四、扩展：中文乱码的解决方案
4.1、IDEA设置项目的编码集
4.2、解决Servlet中文乱码
//设置编码集
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=utf-8");
复制代码4.3、解决tomcat中HTML中文乱码
第1步：在config/server.xml中添加URIEncoding=“UTF-8”:
第2步：在config/web.xml进行修改，在servlet标签中添加fileEncoding属性：
第3步：切记要将之前你已经建成的html删除后在重建，这步很重要，不然你还是会发现上面的方法没用，因为已经建好的html文件其编码格式早已经改变。
第4步：启动tomcat
五、课程小结
5.1、课后作业
需求定义
按照原型图实现功能，已知版本号数据后台返回的是102、132、241，状态返回的数据是1、0、1
需求分解
1、绘制HTML页面
2、使用axios请求列表数据
3、使用过滤器适配数据的格式
复制代码原型设计
作者：大坏蛋_
链接：https://juejin.cn/post/7162071329867300894
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
