JavaWeb基础应用

最新推荐文章于 2024-08-18 21:36:31 发布

伏笔未续

最新推荐文章于 2024-08-18 21:36:31 发布

阅读量210

点赞数

文章标签： java tomcat intellij-idea html5

本文链接：https://blog.csdn.net/2301_77083521/article/details/131713523

版权

这各类当中的代码是一个部门控制类，使用了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>

伏笔未续

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb基础应用

我们可以将前面文章JDBC入门中的com.hp包复制过来，但需要注意的是controller包中累的变化，这也是我们实现这个基础应用的关键一步：然后就是我们的webapp包中的内容，vue包需要导入我们需要用到的两个js包，当然，别忘了导入jar包，这关系到我们上面服务层的运作。最后是我们执行JavaWeb操作必不可少的html文件。不懂得如何操作的小伙伴可以去看看前面的文章哈。
复制链接

扫一扫