力战Servlet之再上层楼！

目录

从Servlet中获取数据

封装公共工具类JsonUtil

Vue优化页面展示数据

---

从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>