JSP+Servlet实现前端展现数据库中的数据

学了很长时间的JSP和Servlet，虽然还是没有完全的理解其中的原理，但是总会一点点的技术，这次，就来实现把数据库中的数据在前端展示出来。

一、需求

实现数据库中的数据展现在前端界面

二、设计 

技术选型：Servlet  JSP  Mysql  JDBC  Druid  BeanUtil  Tomcat  

数据库设计：这是我第一次做这个小小的案例，所以就设计一张物品表

                     id name value  三个字段，id是主键，这张的表中的值事先都是添加好的，直接使用即可

具体的设计思路如下：

 

画了一小会的思路图片，虽然不好看，但是思路很清晰，接着就是根据设计思路，写代码啦！ 

三、开发

 环境搭建：创建数据库环境，创建项目导入jar包

编码如下：

导入的jar包：

 

文件的目录结构：

 这样一切都准备就绪了，那我们从哪开始写代码呢？

目前我是从dao层开始，不知道你们从哪开始？

首先写dao层：

在写dao层之前，应该先写连接数据库的工具类和一些配置文件：

DruidUtil类;

package util;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Properties;


/**
 * druid数据库连接池的工具类
 */
public class DruidUtil {

    private static DataSource ds;

    static {
        //加载配置文件和建立连接池
        try {
            Properties pro = new Properties();
            InputStream resourceAsStream = DruidUtil.class.getClassLoader().getResourceAsStream("Druid.properties");
            pro.load(resourceAsStream);
            ds = DruidDataSourceFactory.createDataSource(pro);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取数据库连接池
     * @return
     */
    public static DataSource getDataSource(){
        return ds;
    }


    /**
     * 获取连接池中的一个连接
     * @return
     * @throws SQLException
     */
    public Connection getconnection() throws SQLException {
        return ds.getConnection();

    }


    /**
     * 关闭数据库的资源  三个对象都存在时
     * @param conn
     * @param res
     * @param pstmt
     */
    public static void close(Connection conn, ResultSet res, PreparedStatement pstmt){
        if (conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (res!=null){
            try {
                res.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (pstmt!=null){
            try {
                pstmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 关闭数据库的连接（只存在Connection和PreparedStatement对象时）
     * @param conn
     * @param pstmt
     */
    public void close(Connection conn,PreparedStatement pstmt){
        if (conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (pstmt!=null){
            try {
                pstmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

}

Druid.properties

driverClassName = com.mysql.cj.jdbc.Driver

url=jdbc:mysql:///student?serverTimezone=GMT&useSSL=false
username=root
password=yanzhiguo140710
#初始化连接数量#
initialSize = 5
#最大连接数量
maxACtive = 10
#等待时间 3秒
maxWait = 3000

写完之后，就可以写dao层的代码了：

首先写UserDao接口，然后写UserDaoImpl的实现类

UesrDao接口：

package dao;

import domain.Users;

import java.util.List;

public interface UsersDao {
    public List<Users> findAll();
}

UserDaoImpl实现类：

package dao.impl;

import dao.UsersDao;
import domain.Users;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import util.DruidUtil;

import java.util.List;

/**
 * dao层 操纵数据库
 * 从数据库中拿出数据 传给servive层
 */
public class UsersDaoImpl implements UsersDao {
    private JdbcTemplate template  = new JdbcTemplate(DruidUtil.getDataSource());
    @Override
    public List<Users> findAll() {

        String sql = "select * from goods";
        List<Users> query = template.query(sql, new BeanPropertyRowMapper<Users>(Users.class));
        return query;
    }
}

这样就写完了dao层的代码

对了没还有一个重要的Javabean还没写：

package domain;

/**
 * 用户类 把数据用类对象展示
 * 相当于JavaBean
 */
public class Users {
    Integer id;
    String name;
    Integer value;
    public Users(Integer id, String name, Integer value) {

        this.id = id;
        this.name = name;
        this.value = value;
    }
    public Users(){

    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getValue() {
        return value;
    }

    public void setValue(Integer value) {
        this.value = value;
    }

    @Override
    public String toString() {
        return "Users{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", value=" + value +
                '}';
    }
}

Service层

根据设计思路，先写UserService接口：

package service;

import domain.Users;

import java.util.List;

public interface UsersService {
    public List<Users> findAll();
}

USerServiceImpl实现类：

package service.impl;

import dao.UsersDao;
import dao.impl.UsersDaoImpl;
import domain.Users;
import service.UsersService;

import java.util.List;

/**
 * 调用dao层中Usersdao中方法 获得数据库中的数据
 */
public class UsersServiceImpl implements UsersService {
    @Override
    public List<Users> findAll() {
        UsersDaoImpl dao = new UsersDaoImpl();
        List<Users> users_list = dao.findAll();
        return users_list;
    }
}

这样Service层就写完了

view层：

这主要是处理请求的代码：

package web.servlet;

import domain.Users;
import service.UsersService;
import service.impl.UsersServiceImpl;

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;

@WebServlet("/userServletList")
public class UserServletList extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //用service层来完成数据库的查询
        UsersService usersservice = new UsersServiceImpl();
        List<Users> list = usersservice.findAll();
        //将数据存在数据域中
        System.out.println(list);
        request.setAttribute("list",list);
        //转发到list.jsp中
        request.getRequestDispatcher("/list.jsp").forward(request,response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

这样三层就基本写完了，剩下的就是前端页面的展示，我在写的过程中，利用了bootstrap框架没这样，这样写代码简单。

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: yzg
  Date: 2019/4/6
  Time: 13:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
  <head>
    <title>志国出品</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>
  </head>

  <body>
  <div align="center">
    <a href="${pageContext.request.contextPath}/userServletList">
      点击查看信息
    </a>
  </div>
  </body>
</html>

list.jsp:

<%--
  Created by IntelliJ IDEA.
  User: yzg
  Date: 2019/4/6
  Time: 13:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<html>
<head>
    <title>Title</title>
    <title>物品列表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h3 align="center">物品信息列表</h3>
        <table class="table table-bordered table-hover">
            <tr class="success">
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
            </tr>
            <c:forEach var="li" items="${list}" varStatus="s">
                <tr>
                    <td>${s.count}</td>
                    <td>${li.name}</td>
                    <td>${li.value}</td>
                </tr>

            </c:forEach>
        </table>
    </div>
</body>

</html>

这样就基本写完了，剩下的时间就是努力找Bug了

总结

1、Java中导入包的时候将lib文件夹变成Add as library

2、导入jar包，要注意千万别导错了！！！！

3、要熟悉jsp中的对象，以及他们的用法

4、使用EL和JSTL时，要注意使用的是否正确，别忘了$

5、写前端代码时，可以参考bootstrap文档

6、dao层的代码一定要细心，否数据都拿不出来

7、关键时Servlet的书写，这部分最难理解，还需加强

8、花了1个小时写代码，找Bug花了好几个小时，啊啊啊啊啊啊啊啊，痛苦啊，不过最终还是写出来了，还是很高兴的。

最后，希望每个人都能在这条道路上继续坚持下去，加油！！！