目录
-
基本架构
-
代码详解
-
运行结果
-
附参考源码
基本架构
我们可以将前面文章JDBC入门中的com.hp包复制过来,但需要注意的是controller包中累的变化,这也是我们实现这个基础应用的关键一步:
然后就是我们的webapp包中的内容,vue包需要导入我们需要用到的两个js包,当然,别忘了导入jar包,这关系到我们上面服务层的运作。最后是我们执行JavaWeb操作必不可少的html文件。
不懂得如何操作的小伙伴可以去看看前面的文章哈
代码详解
由于其他的包都跟前面jdbc入门中一样,所以这里详细讲解DeptC类
这各类当中的代码是一个部门控制类,使用了Servlet技术来实现HTTP请求的处理。根据注解@WebServlet("/deptC")
,该Servlet的访问路径为/deptC
。在doGet
方法中,首先通过deptService.list()
方法获取部门列表,然后将列表数据转换为JSON格式,并通过JsonUtil.transJson(list,resp)
方法将JSON响应给客户端。
-
@WebServlet("/deptC")
:使用@WebServlet注解,指定了Servlet的访问路径为/deptC
。当客户端访问该路径时,容器会调用相应的Servlet类进行处理。 -
public class DeptC extends HttpServlet
:定义了一个名为DeptC
的公共类,该类继承自HttpServlet类,表示它是一个Servlet。 -
private IDeptService deptService=new DeptServiceImpl();
:创建一个私有的IDeptService
类型的对象deptService
,并初始化为DeptServiceImpl
类的实例。这里使用了服务层的实现类来处理业务逻辑。 -
@Override
:表示该方法是对父类或接口方法的重写。 -
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
:重写了父类HttpServlet
的doGet
方法,该方法用于处理HTTP GET请求。 -
System.out.println("测试访问doget...");
:打印一条调试信息,用于测试doGet
方法是否被访问。 -
List<Dept> list=deptService.list();
:调用deptService
对象的list
方法,获取部门列表数据,并将其存储在List<Dept>
类型的变量list
中。 -
System.out.println(list);
:打印部门列表,用于测试是否成功获取部门数据。 -
JsonUtil.transJson(list,resp);
:使用JsonUtil
工具类的transJson
方法,将部门列表数据转换为JSON格式,并将JSON响应给客户端。
完成了这个类的创建,并进行部署,我们就可以调取数据库中的数据,如运行结果中图1所示
接下来我们要编写一个html文件使其按照表格的形式展现出来:
-
<script src="/vue/vue.min.js"></script>
:引入Vue.js库。 -
<script src="/vue/axios.min.js"></script>
:引入axios库,用于发送HTTP请求。 -
<div id="app">
:定义一个id为"app"的div元素,作为Vue实例的挂载点。 -
<button @click="showDept">点击显示数据</button>
:定义一个按钮,点击按钮会触发Vue实例的showDept
方法。 -
<table>
:定义一个表格,用于展示部门数据。 -
<tr>序号</tr>
:表头行,显示标题。 -
<tr v-for="dept in deptList">
:使用Vue指令v-for
循环遍历deptList
数组中的每一个部门对象。 -
<td>{{dept.did}}</td>
:表格的一列,显示部门的ID。 -
<td>{{dept.dname}}</td>
:表格的一列,显示部门的名称。 -
<td>{{dept.dlocation}}</td>
:表格的一列,显示部门的位置。 -
<td>{{dept.leader}}</td>
:表格的一列,显示部门的领导。 -
new Vue({
:创建一个Vue实例。 -
el:'#app',
:指定Vue实例挂载的元素为id为"app"的div。 -
data: {deptList:[]},
:定义Vue实例的初始数据对象,其中deptList
是一个空数组,用于存储部门数据。 -
methods: {showDept(){axios.get('http://localhost:8080/deptC').then((resp)=>{console.log(resp,resp.data)this.deptList=resp.data})}}
:定义Vue实例的方法showDept()
,方法中使用axios发送GET请求到http://localhost:8080/deptC
路径,并在接收到响应后将部门数据存储到deptList
中。
完成以上操作打开后就可以看到我们导出的数据库制表了。
注:代码边写完成之后千万别忘了进行部署哦!
运行结果
图1(由于大小原因,只截取部分)
附参考源码
DeptC类:
package com.hp.controller; import com.alibaba.fastjson.JSON; import com.hp.pojo.Dept; import com.hp.service.IDeptService; import com.hp.service.impl.DeptServiceImpl; import com.hp.utils.JsonUtil; 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.util.List; //每一个类,继承HttpServlet,该类就是一个servlet,每一个servlet都有一个访问路径 @WebServlet("/deptC") //部门控制类 public class DeptC extends HttpServlet { //引入service层 private IDeptService deptService=new DeptServiceImpl(); @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格式,再响应给服务器 JsonUtil.transJson(list,resp); } }
html文件:
<!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="1" cellpadding="20" cellspacing="0"> <tr>序号</tr> <tr>部门名称</tr> <tr>部门位置</tr> <tr>部门领导</tr> <tr v-for="dept in deptList"> <td>{{dept.did}}</td> <td>{{dept.dname}}</td> <td>{{dept.dlocation}}</td> <td>{{dept.leader}}</td> </tr> </table> </div> </body> <script> new Vue({ el:'#app', data: { deptList:[] }, methods:{ showDept(){ axios.get('http://localhost:8080/deptC').then((resp)=>{ console.log(resp,resp.data) this.deptList=resp.data }) } } }) </script> </html>