目录
从Servlet中获取数据
上一章,我们已经完成了Servlet服务器的搭建和启动。始终牢记我们的目标,就是打通前后端,能访问数据库,能把数据给前端。
我们先创建一个部门表deptC来测试一下,Servlet是如何对数据进行访问的
不是创建任意一个类,都是Servlet类,只有创建的类继承了HttpServlet,才表明该类是Servlet类
Servlet类不是jdk包下的类,而是Tomcat包下面的类,所以我们需要导入Tomcat包(前面创建服务器时已经导入过了)
当一个类是Servlet类时,就可以被页面访问,但是一个项目可能会有很多类,所以我们得给其添加访问路径
当页面通过路径访问到该类后,会自动启用该类中的doGet()方法
@WebServlet("deptC")
public class DeptC extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("测试doGet方法...");
}
}
当控制台输出 测试doGet方法... 后,那么此时就表明我们通过Servlet连接并打通前后端
接下来,我们需要去通过Servlet打通三层架构,为了节约时间,我们可以之间将之前JDBC的三层架构复制过来。
接下来通过对DeptC类演示Servlet如何打通前后端
注意:这是t_dept数据表的数据!
// 每一个继承HttpServlet,都是一个Servlet类,都有一个访问路径
@WebServlet("/deptC")
public class DeptC extends HttpServlet {
// 导入service层,放在doGet方法中
private IDeptService deptService = new DeptServiceImpl();
// 当该类的地址被访问后,会自动访问doGet()方法
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("测试doGet...");
// 这里虽然能获取到,但是这里输出只是在控制台输出
List<Dept> list = deptService.list();
System.out.println(list);
// 如果想要在页面响应,需要使用resp.getWriter().write()方法
resp.getWriter().write(list.toString());
}
}
可以发现,输出的结果非常的乱,并且中文都是??乱码。
我们需要页面的数据结果修改成JSON格式,就需要导入一个 fastjson-1.2.9.jar包
// 每一个继承HttpServlet,都是一个Servlet类,都有一个访问路径
@WebServlet("/deptC")
public class DeptC extends HttpServlet {
// 导入service层,放在doGet方法中
private IDeptService deptService = new DeptServiceImpl();
// 当该类的地址被访问后,会自动访问doGet()方法
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("测试doGet...");
// 这里虽然能获取到,但是这里输出只是在控制台输出
List<Dept> list = deptService.list();
System.out.println(list);
// 将页面的输出结果修改为JSON格式
String jsonString = JSON.toJSONString(list);
// 如果想要在页面响应,需要使用resp.getWriter().write()方法
resp.getWriter().write(jsonString);
}
}
可以看到现在的页面就是JSON格式(键:值)的形式
但是中午还是乱码,接着我们来解决中文乱码的问题
// 每一个继承HttpServlet,都是一个Servlet类,都有一个访问路径
@WebServlet("/deptC")
public class DeptC extends HttpServlet {
// 导入service层,放在doGet方法中
private IDeptService deptService = new DeptServiceImpl();
// 当该类的地址被访问后,会自动访问doGet()方法
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("测试doGet...");
// 这里虽然能获取到,但是这里输出只是在控制台输出
List<Dept> list = deptService.list();
System.out.println(list);
// 将页面的输出结果修改为JSON格式
String jsonString = JSON.toJSONString(list);
// 解决中文乱码的问题
resp.setContentType("application/json;charset=utf-8");
// 如果想要在页面响应,需要使用resp.getWriter().write()方法
resp.getWriter().write(jsonString);
}
}
到此,我们从数据库访问数据并以JSON格式成功展示在页面上。
完成通过Servlet打通前后端
封装公共工具类JsonUtil
// 将页面的输出结果修改为JSON格式
String jsonString = JSON.toJSONString(list);
// 解决中文乱码的问题
resp.setContentType("application/json;charset=utf-8");
// 如果想要在页面响应,需要使用resp.getWriter().write()方法
resp.getWriter().write(jsonString);
仔细看这三句话,会发现
- 页面的输出格式都应该是JSON格式的
- 都必须要解决中文乱码的问题
- 都必须要让数据在页面进行响应
所以我们可以将这三句话封装成工具类JsonUtil
public class JsonUtil {
public static void transJson(Object obj, HttpServletResponse resp){
try {
// 将页面的输出结果修改为JSON格式
String jsonString = JSON.toJSONString(obj);
// 解决中文乱码的问题
resp.setContentType("application/json;charset=utf-8");
// 如果想要在页面响应,需要使用resp.getWriter().write()方法
resp.getWriter().write(jsonString);
}catch (Exception e){
e.printStackTrace();
}
}
}
封装后,控制层直接调用该类中的方法
// 每一个继承HttpServlet,都是一个Servlet类,都有一个访问路径
@WebServlet("/deptC")
public class DeptC extends HttpServlet {
// 导入service层,放在doGet方法中
private IDeptService deptService = new DeptServiceImpl();
// 当该类的地址被访问后,会自动访问doGet()方法
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("测试doGet...");
// 这里虽然能获取到,但是这里输出只是在控制台输出
List<Dept> list = deptService.list();
System.out.println(list);
// 调用JsonUtil中的方法,在页面响应数据
JsonUtil.transJson(list,resp);
}
}
Vue优化页面展示数据
虽然现在我们的页面能显示数据库中的数据,并且是JSON格式的。
但是真正的页面是不能出现这中格式的数据,一般都是表格形式。
所以我们得通过Vue来对页面数据进行优化管理
首先在web包下,创建dept包,在dept包下创建html文件,在vue包下导入两个.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/vue/vue.min.js"></script>
<script src="/vue/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="showDept">点击生成列表</button>
<table border="1px" cellpadding="20" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>公司分部</th>
<th>公司地址</th>
<th>公司领导</th>
</tr>
</thead>
<tbody>
<!--
v-for语句,对列表的值进行循环
{{}},是模板语法,用来占位,实际值根据列表循环得到
-->
<tr v-for="dept in deptList">
<td>{{dept.did}}</td>
<td>{{dept.dname}}</td>
<td>{{dept.dlocation}}</td>
<td>{{dept.leader}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
deptList:[]
},
methods:{
// 事件的依赖函数,当点击按钮之后执行代码
showDept(){
// axios.get()方法获取deptC中访问到的数据
axios.get('http://localhost:8080/deptC').then((resp)=>{
// 表示将resp中获取到的data数据存入到deptList数组中
console.log(resp,resp.data)
this.deptList = resp.data
})
}
}
})
</script>
</html>