目录

javawebd-JSP-利用表格显示数据库的信息

javawebd -JSP-利用表格显示数据库的信息

在本篇文章中,小编将介绍在jsp页面中通过表格显示数据库的实现:下面我们以“新闻发布系统”中显示一级标题的信息为例进行讲述,在新闻发布系统中存在一二级标题,在后台可以对标题进行管理,可查询标题等信息

【step one】

1-1 建立数据库

在jsp中,我们使用的是mysql数据库,对于此数据的优缺点本篇不予以讲述,首先建立news数据库,其数据库中表的信息为:

https://i-blog.csdnimg.cn/blog_migrate/eb52a0213fbd47b2f2ab77f3d299d240.png

eg:< id :1 ; name:娱乐; creator:ibbon;createTime:2014-11-21 22:17:43>

【step two】 建立web项目(news)

2-1:首先,我们在web项目的src文件夹写入链接数据库的相关的类,他们分别是:链接数据库的类,数据的实体类


2-1-1 : 数据库实体类,在此类中主要含有数据库的字段,<包: cn.edu.bzu.entity ;实体类: Title.java ;>

https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif

 1 package cn.news.jsp.entity;
 2 
 3 import java.sql.Date;
 4 
 5 public class Title {
    /**
     *下面这四个属性为数据库表中的四个属性
     */
 6     private int id;   
 7     private String name;
 8     private String creator;
 9     private Date createTime;
10     
11     public int getId() {
12         return id;
13     }
14     public void setId(int id) {
15         this.id = id;
16     }
17     public String getName() {
18         return name;
19     }
20     public void setName(String name) {
21         this.name = name;
22     }
23     public String getCreator() {
24         return creator;
25     }
26     public void setCreator(String creator) {
27         this.creator = creator;
28     }
29     public Date getCreateTime() {
30         return createTime;
31     }
32     public void setCreateTime(Date createTime) {
33         this.createTime = createTime;
34     }
35     public Title(int id, String name, String creator, Date createTime) {
36         super();
37         this.id = id;
38         this.name = name;
39         this.creator = creator;
40         this.createTime = createTime;
41     }
42     
43 }

https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif

ps:<实体类的作用>

/**

*实体类的作用

*在JAVAWeb中,实体类里面的某一个类,相当于是数据库里的一张表,一个类里面的某个字段相当于表的列名

*在实体里有getter和setter方法,getter是只读,setter是写入

*/


2-2-2 数据库操作类 :下面以对数据库的查询功能书写代码,<包: cn.edu.bzu.dao ;类: TitleDAO.java

https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif

 1 package cn.edu.bzu.dao;
 2 import java.sql.*;
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import cn.edu.bzu.entity.Title;
 7 
 8 public class TitleDAO {
 9     public List readFirstTitle(){
10         List<Title> list =new ArrayList<Title>();
11         Connection con=null;
12         PreparedStatement psmt=null;
13         ResultSet rs=null;
14         try {
15             Class.forName("com.mysql.jdbc.Driver");
16         } catch (ClassNotFoundException e) {
17             e.printStackTrace();
18         }
19         
20         try {
21             con=DriverManager.getConnection("jdbc:mysql://localhost:3306/news","root","baby123");
22             String sql="select * from title";
23             psmt=con.prepareStatement(sql);
24             rs=psmt.executeQuery();
25             
26             while(rs.next())
27             {
28                 int id=rs.getInt("id");
29                 String name=rs.getString("name");
30                 String creator=rs.getString("creator");
31                 Date createTime=rs.getDate("createTime");
32                 Title tl=new Title(id, name, creator, createTime);
33                 list.add(tl);
34             }
35             
36         } catch (SQLException e) {
37             e.printStackTrace();
38         }finally
39         {
40             try {
41                 if(rs!=null)
42                 {
43                     rs.close();
44                 }
45                 if(psmt!=null)
46                 {
47                     psmt.close();
48                 }
49                 if(con!=null)
50                 {
51                     con.close();
52                 }
53             } catch (SQLException e) {
54                 e.printStackTrace();
55             }
56         }
57         return list;
58     }
59     
60 }

https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif

ps:现在分析一下上述代码,

one:创建方法(public List readFirstTitle()),之所以选择返回值是List是因为一个标题含有id,name,creator,cteateTime信息,这些信息存在集合中,便于管理,操作

two:创建变量,链接数据库,在这个web project使用的是JDBC技术链接的数据库,这技术需要一类三接口<DriverManager类,Connection接口,Statement接口,ResultSet接口>

https://i-blog.csdnimg.cn/blog_migrate/7deadb0ab427931cddbdfcd244d3a868.png

ps:与数据库建立链接的步骤:1.注册数据库驱动;2.获取数据库连接;3.获取statement对象;4.关闭资源;

具体的实现步骤,请看上述代码

three:在数据库中读取的信息需要使用List接口,以实现对数据库的一列信息进行封装起来进行来进行后续的使用,就好比:在桌子上有很多的糖,装糖的瓶子,装瓶子的箱子——–»»>就好比之前的属性为糖,好几个属性为一个瓶子,好几个瓶子放在箱子中(List)

Four:下面进行细节讲解:

public List readFirstTitle()方法对每一行的数据进行封装, 通过为实体类建立对象(entity),调用他的构造方法,通过构造方法的方式进行复制,然后把通过赋值完成的数据加入list集合中,这样一行的数据就进行封装完成,通过while()循环,从而实现对数据的遍历,进而实现对多行数据的存储,但是在此之前需要创建list对象,并且导入list对象的相关类————-List list =new ArrayList<Title>();</p> <p><img class="lazyload" src="/TechBlog/svg/loading.min.svg" data-src="https://i-blog.csdnimg.cn/blog_migrate/da85cc0610e073ebfafd4bf0c101d9cf.png" data-srcset="https://i-blog.csdnimg.cn/blog_migrate/da85cc0610e073ebfafd4bf0c101d9cf.png, https://i-blog.csdnimg.cn/blog_migrate/da85cc0610e073ebfafd4bf0c101d9cf.png 1.5x, https://i-blog.csdnimg.cn/blog_migrate/da85cc0610e073ebfafd4bf0c101d9cf.png 2x" data-sizes="auto" alt="https://i-blog.csdnimg.cn/blog_migrate/da85cc0610e073ebfafd4bf0c101d9cf.png" title="https://i-blog.csdnimg.cn/blog_migrate/da85cc0610e073ebfafd4bf0c101d9cf.png" /></p> <hr> <p>2-2-3   在web页面中显示数据库信息< <strong>在webroot下建立titleList.jsp,使用TitleDao.java中的查询方法得到所有的记录,然后用表格在页面显示</strong></p> <blockquote> <p>其具体的代码:</p></blockquote> <p><img class="lazyload" src="/TechBlog/svg/loading.min.svg" data-src="https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" data-srcset="https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif, https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif 1.5x, https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif 2x" data-sizes="auto" alt="https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" title="复制代码" /></p> <div class="code-block code-line-numbers open" style="counter-reset: code-block 0"> <div class="code-header language-bash"> <span class="code-title"><i class="arrow fas fa-chevron-right fa-fw" aria-hidden="true"></i></span> <span class="ellipses"><i class="fas fa-ellipsis-h fa-fw" aria-hidden="true"></i></span> <span class="copy" title="复制到剪贴板"><i class="far fa-copy fa-fw" aria-hidden="true"></i></span> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"> 1 <span class="err"><</span>%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> </span></span><span class="line"><span class="cl"> 2 <span class="err"><</span>%@page import="cn.edu.bzu.dao.TitleDAO,cn.edu.bzu.entity.Title"%> </span></span><span class="line"><span class="cl"> 3 <span class="err"><</span>% </span></span><span class="line"><span class="cl"> 4 String path = request.getContextPath(); </span></span><span class="line"><span class="cl"> 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; </span></span><span class="line"><span class="cl"> 6 %> </span></span><span class="line"><span class="cl"> 7 </span></span><span class="line"><span class="cl"> 8 <span class="cp"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span> </span></span><span class="line"><span class="cl"> 9 <span class="p"><</span><span class="nt">html</span><span class="p">></span> </span></span><span class="line"><span class="cl">10 <span class="p"><</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl">11 <span class="p"><</span><span class="nt">title</span><span class="p">></span>Test-newsTitle<span class="p"></</span><span class="nt">title</span><span class="p">></span> </span></span><span class="line"><span class="cl">12 <span class="p"></</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl">13 </span></span><span class="line"><span class="cl">14 <span class="p"><</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl">15 <span class="p"><</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span> </span></span><span class="line"><span class="cl">16 <span class="p"><</span><span class="nt">tr</span><span class="p">></span> </span></span><span class="line"><span class="cl">17 <span class="p"><</span><span class="nt">td</span><span class="p">></span>id<span class="p"></</span><span class="nt">td</span><span class="p">></span> </span></span><span class="line"><span class="cl">18 <span class="p"><</span><span class="nt">td</span><span class="p">></span>name<span class="p"></</span><span class="nt">td</span><span class="p">></span> </span></span><span class="line"><span class="cl">19 <span class="p"><</span><span class="nt">td</span><span class="p">></span>creator<span class="p"></</span><span class="nt">td</span><span class="p">></span> </span></span><span class="line"><span class="cl">20 <span class="p"><</span><span class="nt">td</span><span class="p">></span>createTime<span class="p"></</span><span class="nt">td</span><span class="p">></span> </span></span><span class="line"><span class="cl">21 <span class="p"></</span><span class="nt">tr</span><span class="p">></span> </span></span><span class="line"><span class="cl">22 <span class="err"><</span>% </span></span><span class="line"><span class="cl">23 TitleDAO dao=new TitleDAO(); </span></span><span class="line"><span class="cl">24 List<span class="p"><</span><span class="nt">Title</span><span class="p">></span> list =dao.readFirstTitle(); </span></span><span class="line"><span class="cl">25 for(Title tl:list) </span></span><span class="line"><span class="cl">26 {%> </span></span><span class="line"><span class="cl">27 <span class="p"><</span><span class="nt">tr</span><span class="p">></span> </span></span><span class="line"><span class="cl">28 <span class="p"><</span><span class="nt">td</span><span class="p">></span><span class="err"><</span>%=tl.getId() %><span class="p"></</span><span class="nt">td</span><span class="p">></span> </span></span><span class="line"><span class="cl">29 <span class="p"><</span><span class="nt">td</span><span class="p">></span><span class="err"><</span>%=tl.getName() %><span class="p"></</span><span class="nt">td</span><span class="p">></span> </span></span><span class="line"><span class="cl">30 <span class="p"><</span><span class="nt">td</span><span class="p">></span><span class="err"><</span>%=tl.getCreator() %>><span class="p"></</span><span class="nt">td</span><span class="p">></span> </span></span><span class="line"><span class="cl">31 <span class="p"><</span><span class="nt">td</span><span class="p">></span><span class="err"><</span>%=tl.getCreateTime() %><span class="p"></</span><span class="nt">td</span><span class="p">></span> </span></span><span class="line"><span class="cl">32 <span class="p"></</span><span class="nt">tr</span><span class="p">></span> </span></span><span class="line"><span class="cl">33 <span class="err"><</span>%} </span></span><span class="line"><span class="cl">34 %> </span></span><span class="line"><span class="cl">35 <span class="p"></</span><span class="nt">table</span><span class="p">></span> </span></span><span class="line"><span class="cl">36 <span class="p"></</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl">37 <span class="p"></</span><span class="nt">html</span><span class="p">></span></span></span></code></pre></div></div><p><img class="lazyload" src="/TechBlog/svg/loading.min.svg" data-src="https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" data-srcset="https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif, https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif 1.5x, https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif 2x" data-sizes="auto" alt="https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" title="复制代码" /></p> <p>ps: <%%>小脚本的内容解释:</p> <p>1.通过TitleDAO dao=new TitleDAO();   创建对象</p> <p>2.List <Title> list =dao.readFIrstTitle();  接口List创建list对象,然后通过对象dao调用TitleDAO中的readFirstTitle()方法,从而把返回的list赋予给list</p> <p>3.for-each()进行数据的遍历</p> <p>4.遍历的需要放在行(<tr></tr>)标签外面,这样的话才能把数据进行行存储,由于使用了遍历,所以说明把数据库中的Title表中的数据全部以表格的形式输出</p> <p>5.具体美化,敬请学习html+css</p> </div><div class="post-footer" id="post-footer"> <div class="post-info"> <div class="post-info-line"> <div class="post-info-mod"> <span>更新于 2024-10-04</span> </div></div> <div class="post-info-line"> <div class="post-info-md"></div> <div class="post-info-share"> <span><a href="javascript:void(0);" title="分享到 X" data-sharer="x" data-url="https://linjonh.github.io/TechBlog/2024-10-04-82354455/" data-title="javawebd-JSP-利用表格显示数据库的信息" data-hashtags="Java"><i class="fab fa-x-twitter fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://linjonh.github.io/TechBlog/2024-10-04-82354455/" data-hashtag="Java"><i class="fab fa-facebook-square fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://linjonh.github.io/TechBlog/2024-10-04-82354455/" data-title="javawebd-JSP-利用表格显示数据库的信息"><i class="fab fa-hacker-news fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://linjonh.github.io/TechBlog/2024-10-04-82354455/" data-title="javawebd-JSP-利用表格显示数据库的信息"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@14.9.0/icons/line.svg" aria-hidden="true"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://linjonh.github.io/TechBlog/2024-10-04-82354455/" data-title="javawebd-JSP-利用表格显示数据库的信息" data-image="https://bing.ee123.net/img/rand?artid=82354455"><i class="fab fa-weibo fa-fw" aria-hidden="true"></i></a></span> </div> </div> </div> <div class="post-info-more"> <section class="post-tags"><i class="fas fa-tags fa-fw" aria-hidden="true"></i> <a href="/TechBlog/tags/java/">Java</a></section> <section> <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span> | <span><a href="/TechBlog/">主页</a></span> </section> </div> <div class="post-nav"><a href="/TechBlog/2024-10-04-106802320/" class="prev" rel="prev" title="半路转前端,优势和不足"><i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>半路转前端,优势和不足</a> <a href="/TechBlog/2024-10-05-134341105/" class="next" rel="next" title="千帆SDK开源到GitHub,开发者可免费下载使用">千帆SDK开源到GitHub,开发者可免费下载使用<i class="fas fa-angle-right fa-fw" aria-hidden="true"></i></a></div> </div> <div id="comments"><div id="giscus" class="comment"></div><noscript> Please enable JavaScript to view the comments powered by <a href="https://giscus.app">Giscus</a>. </noscript></div></article></div> </main><footer class="footer"> <div class="footer-container"><div class="footer-line" itemscope itemtype="http://schema.org/CreativeWork"><i class="far fa-copyright fa-fw" aria-hidden="true"></i><span itemprop="copyrightYear">2018 - 2025</span><span class="author" itemprop="copyrightHolder"> <a href="/TechBlog/" target="_blank">JAY.LIN</a></span> | <span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div> </div> </footer></div> <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部"> <i class="fas fa-arrow-up fa-fw" aria-hidden="true"></i> </a> </div> <div id="fixed-buttons-hidden"><a href="#" id="view-comments" class="fixed-button" title="查看评论"> <i class="fas fa-comment fa-fw" aria-hidden="true"></i> </a> </div><script src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.38.1/dist/autocomplete.min.js"></script><script src="https://cdn.jsdelivr.net/npm/algoliasearch@5.20.2/dist/lite/builds/browser.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"></script><script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script><script src="https://cdn.jsdelivr.net/npm/sharer.js@0.5.2/sharer.min.js"></script><script>window.config={"comment":{"giscus":{"category":"Announcements","categoryId":"DIC_kwDON5YUqc4Cm9Ln","darkTheme":"dark","emitMetadata":"0","inputPosition":"bottom","lang":"zh-CN","lazyLoading":false,"lightTheme":"light","mapping":"pathname","reactionsEnabled":"1","repo":"linjonh/blog_comment_repo","repoId":"R_kgDON5YUqQ"}},"search":{"algoliaAppID":"LWD9RXY9DT","algoliaIndex":"prod_techblog_index","algoliaSearchKey":"496be2c0d0b37c0789b0c2ffc9602471","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script src="/TechBlog/js/theme.min.js"></script><script> window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js', new Date()); gtag('config', 'G-75ZRFNZ5Y8'); </script><script src="https://www.googletagmanager.com/gtag/js?id=G-75ZRFNZ5Y8" async></script><aside id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="false"> <div class="toast-header"> <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body text-center pt-0"> <p class="px-2 mb-3">发现新版本的内容。</p> <button type="button" class="btn btn-primary" aria-label="Update"> 更新 </button> </div> </aside></body> </html>