一、实现的功能:
- 用户的登录(将登录信息存入到session中)
- 展示图书列表(从数据库中取出所有图书信息,存入到List集合中)
- 点击查看详情,可以查看图书的具体信息。
二、项目结构:
com.hlk.action—Controller控制层
com.hlk.dao—数据持久层
com.hlk.pojo—普通的bean对象
com.hlk.util—工具类
三、运行截图:
将从数据库中取出的图书信息放到一个List集合中,然后将该集合存到session中。
用户名和图书信息都是从session中获取显示。
主页面:
点击查看详情:
四:代码实现:
1、数据库的工具类:JdbcUtil.java
public class JdbcUtil {
private static final String driver="com.mysql.jdbc.Driver";
private static final String url="jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=UTF-8";
private static final String username="root";
private static final String password="";
public static Connection getConnection() {
Connection conn=null;
try {
Class.forName(driver); //注册驱动
conn = DriverManager.getConnection(url,username,password);//获得连接对象
} catch (ClassNotFoundException e) { //捕获驱动类无法找到异常
e.printStackTrace();
} catch (SQLException e) { //捕获SQL异常
e.printStackTrace();
}
return conn;
}
public static void close(Connection conn,Statement st,ResultSet rs){
try {
if(rs!=null)
rs.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
if(st!=null)
st.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
if(conn!=null)
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
2、Dao层(数据持久层)
UserDao.java:
public class UserDao {
public User findUser(String username,String password) {
Connection conn = JdbcUtil.getConnection();
PreparedStatement stmt = null;
ResultSet rs = null;
User user = null;
String sql = "SELECT username,password FROM user WHERE";
sql+=" username = ? AND password = ?";
try {
stmt = conn.prepareStatement(sql);
stmt.setString(1, username);
stmt.setString(2, password);
rs = stmt.executeQuery();
while (rs.next()) {
user = new User();
user.setUsername(rs.getString(1));
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
JdbcUtil.close(conn, stmt, rs);
}
return user;
}
}
BookDao.java:
public class BookDao {
public List<Book> list() {
List<Book> books = new ArrayList<Book>();
Connection conn = JdbcUtil.getConnection();
Statement st = null;
ResultSet rs = null;
try {
st = conn.createStatement();
String sql = "select * from book";
rs = st.executeQuery(sql);
while(rs.next()) {
Book book = new Book();
book.setId(rs.getInt("id"));
book.setName(rs.getString("name"));
book.setInfo(rs.getString("info"));
book.setDate(rs.getDate("date"));
book.setAuthor(rs.getString("author"));
books.add(book);
}
return books;
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally {
JdbcUtil.close(conn, st, rs);
}
return null;
}
}
3、Action类:(Controller控制层)
UserAction.java:
public class UserAction extends ActionSupport implements ModelDriven<User>,SessionAware {
private static final long serialVersionUID = 1L;
private Map<String,Object> session;
public Map<String, Object> getSession() {
return session;
}
public void setSession(Map<String, Object> session) {
this.session = session;
}
User user = new User();
public User getModel() {
return user;
}
public String login() throws Exception {
UserDao userDao = new UserDao();
User session_user = userDao.findUser(user.getUsername(),user.getPassword());
if(session_user == null) {
return "error";
} else {
session.put("session_user", user.getUsername());
return "success";
}
}
}
BookAction.java:
public class BookAction extends ActionSupport implements SessionAware {
private static final long serialVersionUID = 1L;
private Map<String, Object> session;
public Map<String, Object> getSession() {
return session;
}
public void setSession(Map<String, Object> session) {
this.session = session;
}
List<Book> books = new ArrayList<Book>();
public String list() throws Exception {
// TODO Auto-generated method stub
BookDao bookDao = new BookDao();
books = bookDao.list();
session.put("books", books);
return "success";
}
}
4、View层:
book.jsp:
<body>
<div class="container">
<h1>图书管理系统</h1>
系统提示:您好,<s:property value="#session.session_user"/>,登录成功!
<hr/>
<h3>所有图书 <a href="" type="button" class="btn btn-primary btn-sm">添加</a></h3>
<table class="table table-bordered table-striped" id="table">
<tr>
<th>ID</th>
<th>书名</th>
<th>照片</th>
<th>信息</th>
<th>发布日期</th>
<th>作者</th>
<th>操作</th>
</tr>
<s:iterator id="book" value="#session.books" status="vs">
<tr>
<td><s:property value="#book.id"/></td>
<td>《<s:property value="#book.name"/>》</td>
<td><img src="images/<s:property value="#book.name"/>.jpg" /></td>
<td><s:property value="#book.info"/></td>
<td><s:property value="#book.date"/></td>
<td><s:property value="#book.author"/></td>
<td>
<a id="<s:property value="#vs.index+1"/>" onclick="editInfo(this)" type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#my_modal">详情</a>
<a type="button" class="btn btn-sm btn-warning">修改</a>
<a type="button" class="btn btn-sm btn-danger">删除</a>
</td>
</tr>
</s:iterator>
</table>
</div>
<div class="modal" id="my_modal" tabindex="-1" role="dialog" aria-labelleby="myModallabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModallabel">详细信息</h4>
</div>
<div class="modal-body" id="b">
书名: <scan id="b_name"></scan><hr/>
信息: <scan id="b_info"></scan><hr/>
作者: <scan id="b_author"></scan><hr/>
日期: <scan id="b_date"></scan>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function editInfo(obj) {
var id = $(obj).attr("id");
//获取表格中的一行数据
var t = $('#table')[0];
var name = t.rows[id].cells[1].innerText;
var info = t.rows[id].cells[3].innerText;
var date = t.rows[id].cells[4].innerText;
var author = t.rows[id].cells[5].innerText;
//向模态框中传值
$('#b_name').text(name);
$('#b_info').text(info);
$('#b_date').text(date);
$('#b_author').text(author);
}
</script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
在这里使用了<s:iterator></s:iterator>迭代标签,通过stutus.index遍历元素的索引。这里注意一下,元素的索引是从0开始的。
<a id="<s:property value="#vs.index+1"/>" onclick="editInfo(this)" type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#my_modal">详情</a>
点击详情,启动了模态框的同时,调用了editInfo的方法,向模态框中写入了信息。