目录
前言：这几天照着别人的项目写的，可算是大概清楚整个项目的流程,整个的前后端交互，当然自己对html css js 基础都其实还不太懂，只能大概的看懂一点。做完后，对MVC的设计模式 ，也是进一步了解。也让我收获了许多，其实我倒是觉得项目里面的分页的设计挺耐人寻味的，虽然了解之后索然无味，但是谁让我不好好一步一步学呢，基础渣的要命。
写这个博客，就是想弄清楚这些交互设计的思想，之前没有做项目的时候，脑子里一团浆糊，不知道，前后端到底怎样去交互设计。
哎！真的的是啥都不懂，任重道远啊
项目的总体设计
登陆界面
这个前端设计一下，后端接收到的登陆信息进行一些判断，所给的一些权限。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri ="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script
src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
<body background="img/background.jpg" style="width: 100%; height: 100%;">
<div align="center" style="margin-top: 20px">
<img alt="图书管理系统" src="img/logo_index.jpg" width="400";height="100";></div>
<MARQUEE bgcolor="yellow" scrollAmount=5 direction=left color = "blue">为之则易 不为则难</MARQUEE>
<form style="margin-left:40%;margin-top:5%;" action="LoginCheck" method="post" >
<divclass="form-group">
<label for="user" style="display: inline;">账户： </label>
<input type="text" class="form-control" name = "username" style="display: inline;width:200px" autocomplete="off"/>
</div>
<div class="form-group">
<label for="password" style="display: inline;">密码： </label>
<input type="password" class="form-control" name = "password" style="display: inline;width:200px" autocomplete="off"/>
</div>
<div class="from-group">
<label for="usertype" style="disply:inline">类型：</label>
<select class="dropdown" name="usertype" style="disply:inline;">
<option value = "-1">系统管理员</option>
<option value = "0">图书管理员</option>
<option value = "1">读者</option>
</select>
</div>
<button type="submit" class="btn">登录</button>
</form>
<%
String mess = (String)session.getAttribute("message");
if(mess==null){
}
else{%>
<script type="text/javascript">
alert("<%=mess%>");
</script>
<%
session.setAttribute("message", null);
%>
<%
}
%>
</body>
</html>import java.io.IOException;
import java.sql.ResultSet;
import java.sql.SQLException;
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 com.yyl.myfirstweb.bean.User;
import com.yyl.myfirstweb.daoimpl.UserDaoImpl;
/**
* Servlet implementation class LoginCheck
*/
@WebServlet("/LoginCheck")
public class LoginCheck extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginCheck() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("---------------------");
User user = null;
ResultSet rs = null;
String username = request.getParameter("username");
String password = request.getParameter("password");
String usertype = request.getParameter("usertype");
request.getSession().setAttribute("usertype", usertype);
try {
user = new UserDaoImpl().searchUserForLogin(username, password, usertype);
} catch (SQLException e) {
e.printStackTrace();
}
if(user == null) {
request.getSession().setAttribute("message", "用户名或密码或用户类型错误！！！");
response.sendRedirect("index.jsp");
}else {
System.out.println("欢迎用户:"+user.getUsername());
request.getSession().setAttribute("userid", user.getUserid());
request.getSession().setAttribute("username", username);
request.setAttribute("loginFlag", 1);
if(usertype.equals("-1")) {
request.getRequestDispatcher("/Super/Super_about.jsp").forward(request, response);
}else if(usertype.equals("0")) {
request.getRequestDispatcher("/bookManager/bookManager_about.jsp").forward(request, response);
}else if(usertype.equals("1")) {
request.getRequestDispatcher("/Reader/Reader.jsp").forward(request, response);
}
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
首页界面
这个界面基本上没涉及到的后端，基本上是各个jsp的调用。
用户信息的设计
建立User类，并建立Userdao类，也就是User的接口类，封装了User的一些使用方法（比如在数据库中取出一页的用户信息），再建立UserdaoImpl类，也就是Userdao的具体实现方法类，在建立一个UserListServlet,像这个，在我看来，它此时 的jsp就是视图层，UserListServlet就是控制层，其他关于User的一些类就是模型层
import java.util.Date;
public class User {
private int userid;
private String username;
private String passwords;
private Date birthday;
private String sex;
private int usertype;
private String isfull;
private double money;
public int getUserid() {
return userid;
}
public void setUserid(int userid) {
this.userid = userid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPasswords() {
return passwords;
}
public void setPasswords(String passwords) {
this.passwords = passwords;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getusertype() {
return usertype;
}
public void setusertype(int usertype) {
this.usertype = usertype;
}
public String getIsfull() {
return isfull;
}
public void setIsfull(String isfull) {
this.isfull = isfull;
}
public double getMoney() {
return money;
}
public void setMoney(double money) {
this.money = money;
}
public User() {
super();
// TODO Auto-generated constructor stub
}
public User(int userid, String username, String passwords, Date birthday, String sex, int usertype, String isfull,
double money) {
super();
this.userid = userid;
this.username = username;
this.passwords = passwords;
this.birthday = birthday;
this.sex = sex;
this.usertype = usertype;
this.isfull = isfull;
this.money = money;
}
@Override
public String toString() {
return "User [userid=" + userid + ", username=" + username + ", passwords=" + passwords + ", birthday="
+ birthday + ", sex=" + sex + ", usertype=" + usertype + ", isfull=" + isfull + ", money=" + money
+ "]";
}
}
import java.sql.SQLException;
import java.util.List;
import com.yyl.myfirstweb.bean.PageBean;
import com.yyl.myfirstweb.bean.User;
public interface UserDao {
int PAGE_SIZE = 5; //�?页显示多少条记录
/**
* 查询当页的用户数�?
* @param currentPage
* @return
* @throws SQLException
*/
List<User> findUserByPage(int currentPage) throws SQLException;
List<User> findAll() throws SQLException ;
/**
* 添加用户
* @param User �?要添加到数据库的用户对象
* @throws SQLException
*/
void insert(User user) throws SQLException ;
/**
* 模糊查询
* @param username
* @param usertype
* @return
* @throws SQLException
*/
User searchUserForLogin(String username,String password,String usertype) throws SQLException ;
List<User> searchUser(String username,String usertype) throws SQLException ;
/**
* 删除用户
* @param userid
* @throws SQLException
*/
void delete(int userid) throws SQLException ;
/**
* 更改用户数据
* @param user
* @throws SQLException
*/
void update (User user) throws SQLException ;
//根据id找用
User findUserById(int userid) throws SQLException;
//查询总记录数
int findCount()throws SQLException ;
//分页查询用户信息
public PageBean findUserByPages(int currentPage) throws SQLException;
}
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import com.yyl.myfirstweb.bean.PageBean;
import com.yyl.myfirstweb.bean.User;
import com.yyl.myfirstweb.daoimpl.UserDaoImpl;
import com.yyl.myfirstweb.tool.JDBCUtil;
import com.yyl.myfirstweb.tool.TextUtils;
import com.yyl.myfirstweb.dao.UserDao;
public class UserDaoImpl implements UserDao{
public List<User> findAll() throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
return runner.query("select * from users", new BeanListHandler<User>(User.class));
}
public void insert(User user) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
runner.update("insert into users ( `username`, `passwords`, `birthday`, `sex`, `usertype`, `isfull`, `money`) values(?,?,?,?,?,?,?)" ,
user.getUsername(),
user.getPasswords(),
user.getBirthday(),
user.getSex(),
user.getusertype(),
user.getIsfull(),
user.getMoney()
);
}
public List<User> searchUser(String username, String usertype) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
String sql = "select * from users where 1=1 ";
List<String> list = new ArrayList<String> ();
if(!TextUtils.isEmpty(username)){
sql = sql + " and username like ?";
list.add("%"+username+"%");
}
System.out.println(username);
if(!TextUtils.isEmpty(usertype)){
sql = sql + " and usertype = ?";
list.add(String.valueOf(usertype));
}
System.out.println(usertype);
System.out.println(sql);
return runner.query(sql, new BeanListHandler<User>(User.class),list.toArray());
}
public void delete(int userid) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
runner.update("delete from users where userid = ?",userid);
System.out.println("delete from users where userid = "+userid);
}
public void update(User user) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
runner.update("update users set username = ?,passwords = ?,birthday = ? , sex = ? , usertype = ? , isfull = ?,money = ? where userid = ? " ,
user.getUsername(),
user.getPasswords(),
user.getBirthday(),
user.getSex(),
user.getusertype(),
user.getIsfull(),
user.getMoney(),
user.getUserid()
);
}
public User findUserById(int userid) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
return runner.query("select * from users where userid = ?", new BeanHandler<User>(User.class),userid);
}
public int findCount() throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
Long result = (Long) runner.query("SELECT COUNT(*) FROM users" , new ScalarHandler() );
return result.intValue();
}
public List<User> findUserByPage(int currentPage) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
System.out.println("这实现方法");
return runner.query("select * from users limit ? offset ?", new BeanListHandler<User>(User.class), PAGE_SIZE , (currentPage-1)*PAGE_SIZE);
}
public User searchUserForLogin(String username, String password,String usertype) throws SQLException {
System.out.println(username+"---"+password+"-----"+usertype);
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
User user = runner.query("select * from users where username=? and passwords=? and usertype = ?", new BeanHandler<User>(User.class),username,password,usertype);
System.out.println(user);
return runner.query("select * from users where username=? and passwords=? and usertype = ?", new BeanHandler<User>(User.class),username,password,usertype);
}
public PageBean findUserByPages(int currentPage) throws SQLException {
//封装分页的该页数据
PageBean<User> pageBean = new PageBean<User>();
int pageSize = UserDao.PAGE_SIZE ;
pageBean.setCurrentPage(currentPage); //设置当前页
pageBean.setPageSize(pageSize); //设置每页显示多少记录
UserDao dao = new UserDaoImpl() ;
List<User> list =dao .findUserByPage(currentPage);
pageBean.setList(list); //设置这一页的学生数据
//总的记录数， 总的页数。
int count = dao.findCount();
System.out.println(count);
pageBean.setTotalSize(count); //设置总的记录数
//200 ， 10 ==20 201 ， 10 = 21 201 % 10 == 0 ?201 / 10 :201 % 10 + 1
pageBean.setTotalPage(count % pageSize==0 ? count / pageSize : (count / pageSize) + 1); //总页数
return pageBean;
}
}import java.io.IOException;
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 com.yyl.myfirstweb.bean.PageBean;
import com.yyl.myfirstweb.dao.UserDao;
import com.yyl.myfirstweb.daoimpl.UserDaoImpl;
/**
* Servlet implementation class UserListServlet
*/
@WebServlet("/UserListServlet")
public class UserListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UserListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1. 获取需要显示的页码数
int currentPage = 1;
if(request.getParameter("currentPage")!=null) {
currentPage =Integer.parseInt( request.getParameter("currentPage"));
}
//2. 根据指定的页数，去获取该页的数据回来
//List<User> --- list.jsp
System.out.println("这是userlist");
UserDao service = new UserDaoImpl();
PageBean pageBean= service.findUserByPages(currentPage);
request.setAttribute("pageBean", pageBean);
//3. 跳转界面。
request.getRequestDispatcher("/Super/User_selectAll.jsp").forward(request, response);
}catch (Exception e) {
// TODO: handle exception
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
图书信息的设计
和用户信息设计相似，建立Book类，在建立BookDao类，再建立BookImpl类，再建一个BookListServlet
添加用户的设计
建立AddUserServlet，使用UserDao类进行添加到数据库
添加图书的设计
建立AddBookServlet
一些细节的设计
分页的设计
第一个想说的是，select * from book limit a offset b，这个意思是跳过b个数据，读取a个数据，比如说现在是跳转到第二页的数据，并且一页的数据是10，则，那么久跳过（2-1）*10的数据，在读取一页的数据
public List<Book> findBookByPage(int currentPage) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
return runner.query("select * from book limit ? offset ?", new BeanListHandler<Book>(Book.class), PAGE_SIZE , (currentPage-1)*PAGE_SIZE);
}
public PageBean findBookByPages(int currentPage) throws SQLException {
//封装分页的该页数据
PageBean<Book> pageBean = new PageBean<Book>();
int pageSize = BookDao.PAGE_SIZE ;
pageBean.setCurrentPage(currentPage); //设置当前页
pageBean.setPageSize(pageSize); //设置每页显示多少记录
BookDao dao = new BookDaoImpl() ;
List<Book> list =dao .findBookByPage(currentPage);
pageBean.setList(list); //设置这一页的学生数据
//总的记录数， 总的页数。
int count = dao.findCount();
pageBean.setTotalSize(count); //设置总的记录数
//200 ， 10 ==20 201 ， 10 = 21 201 % 10 == 0 ?201 / 10 :201 % 10 + 1
pageBean.setTotalPage(count % pageSize==0 ? count / pageSize : (count / pageSize) + 1); //总页数
return pageBean;
}数据库用的c3p0连接的，
c3p0的xml文件是要自己去配置的，当然网上直接就能搜到，改一下用户名和密码就能直接用
关于这个生日的应用
是用了前端框架bootstrap-datetimepicker
1122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
