前言:
三個星期的實訓過去了大半,剩下的時間要開始搞實訓項目,所以花點時間整理一下實訓的收穫。感謝何老師,講得簡練清晰,引人入勝。感謝相遇。
開發環境:
IDE:Eclipse IDEA
JDK:JDK8
DB:MySql5.5
服務器:tomcat-7
瀏覽器:谷歌chrom
實現功能:
1.用戶登陸,通過查詢數據庫中是否含有該用戶實現登陸;
2.用戶註冊,通過向數據庫的表中添加用戶信息進行註冊;
3.優質用戶推薦,通過查詢數據庫表中的標識recommend判斷是否顯示在優質用戶欄;
4.管理員賬戶admin可實現用戶的信息過濾及查看詳細信息、修改用戶和刪除用戶;
5.用戶註銷。
詳細設計:
1.數據庫的建立及jdbc的封裝;
①:user表:
hid爲主鍵;recommend默認爲0,等於1時爲優質用戶;flag默認爲0,等於1時爲用戶被刪除。
②:jdbc的封裝:
參考博客:https://blog.csdn.net/weixin_43912621/article/details/106871762.
2.Eclipse上配置tomcat;
參考博客: https://blog.csdn.net/weixin_43912621/article/details/107041596.大體記錄了一下過程。
3.jsp:
導包jjstl.jar和standard.jar;
4.目錄結構介紹:
①:bean爲封裝的用戶類,封裝了用戶的所有信息:
package bean;
public class User {
private int hid;
private String name;
private String password;
private int age;
private String email;
private String Picture;
private String intro;
private int recommend;
private int flag;
private int toage;
public int getHid() {
return hid;
}
public String getPicture() {
return Picture;
}
public void setPicture(String picture) {
Picture = picture;
}
public void setHid(int hid) {
this.hid = hid;
}
public String getIntro() {
return intro;
}
public void setIntro(String intro) {
this.intro = intro;
}
public int getRecommend() {
return recommend;
}
public void setRecommend(int recommend) {
this.recommend = recommend;
}
public int getFlag() {
return flag;
}
public void setFlag(int flag) {
this.flag = flag;
}
public User() {
}
public User(int uid, String name, String picture,String intro) {
this.hid = uid;
this.name = name;
this.Picture = picture;
this.intro = intro;
}
public int getToage() {
return toage;
}
public void setToage(int toage) {
this.toage = toage;
}
public User(int uid, String name, int age,int toage,int recommend) {
this.hid = uid;
this.name = name;
this.age = age;
this.toage = toage;
this.recommend = recommend;
}
public User(int uid, String name, int age,String email,int recommend) {
this.hid = uid;
this.name = name;
this.age = age;
this.email = email;
this.recommend = recommend;
}
public User(int uid, String name, String password, int age, String email,String picture,String intro,int recommend,int flag) {
this.hid = uid;
this.name = name;
this.password = password;
this.age = age;
this.email = email;
this.Picture = picture;
this.intro = intro;
this.recommend = recommend;
this.flag = flag;
}
public int getUid() {
return hid;
}
public void setUid(int uid) {
this.hid = uid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String toString() {
return name+"\t"+age+"\t"+email;
}
}
②:control爲servlet包:servlet是作爲來自 Web 瀏覽器或其他 HTTP 客戶端的請求和 HTTP 服務器上的數據庫或應用程序之間的中間層。
③:dao包用來與數據庫進行業務操作,返回業務操作結果;
package dao.Impl;
import bean.User;
import dao.IUserDao;
import util.DBconUtil;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
public class IUserDaoImpl implements IUserDao {
public int register(User user) {
// TODO Auto-generated method stub
int i = 0;
Connection conn = DBconUtil.getConn();
PreparedStatement pstmt = null;
String sql = "insert into users(name,password,age,email,picture,intro,recommend,flag)values(?,?,?,?,?,?,?,?)";
try {
//new Driver();
//Class c = Driver.class;
conn = DBconUtil.getConn();
pstmt = conn.prepareStatement(sql);
System.out.println("DB"+user.getName());
pstmt.setString(1,user.getName());
pstmt.setString(2,user.getPassword());
pstmt.setInt(3,user.getAge());
pstmt.setString(4,user.getEmail());
pstmt.setString(5,user.getPicture());
pstmt.setString(6,user.getEmail());
pstmt.setInt(7,user.getRecommend());
pstmt.setInt(8,user.getFlag());
i = pstmt.executeUpdate();
} catch(Exception e) {
e.printStackTrace();
}finally {
DBconUtil.close(null,pstmt,null,null);
}
return i;
}
public int login(User user) {
// TODO Auto-generated method stub
int hid = 0;
ResultSet rs = null;
Connection conn = DBconUtil.getConn();
PreparedStatement pstmt = null;
String sql = "select hid from users where name =? and password = ?";
try {
conn = DBconUtil.getConn();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,user.getName());
pstmt.setString(2,user.getPassword());
rs = pstmt.executeQuery();
if(rs.next()) {
hid = rs.getInt("hid");
}
} catch(Exception e) {
e.printStackTrace();
}finally {
DBconUtil.close(null,pstmt,null,rs);
}
return hid;
}
public List<User> getIndexUser(){
String sql = "select hid,name,picture,intro from users where recommend = 1";
ResultSet rs = null;
Connection conn = DBconUtil.getConn();
PreparedStatement pstmt = null;
List<User> list = null;
try {
conn = DBconUtil.getConn();
pstmt = conn.prepareStatement(sql);
list = new ArrayList<User>();
rs = pstmt.executeQuery();
while(rs.next()) {
int hid = rs.getInt("hid");
String name = rs.getString("name");
String picture = rs.getString("picture");
String intro = rs.getString("intro");
User user = new User(hid,name,picture,intro);
list.add(user);
}
} catch(Exception e) {
e.printStackTrace();
}finally {
DBconUtil.close(null,pstmt,null,rs);
}
return list;
}
public List<User> getAllUser(User user) {
String sql = "select hid,name,age,email,recommend from users where 1=1 and flag=0";
Connection conn = DBconUtil.getConn();
StringBuffer sb = new StringBuffer(sql);
List<Object> params = new ArrayList<Object>();
if(null != user.getName() && !"".equals(user.getName())) {
sb.append(" and name like ? ");
params.add("%"+user.getName()+"%");
}
if(user.getRecommend()!=2) {
sb.append(" and recommend = ? ");
params.add(user.getRecommend());
}
if(0 != user.getAge()) {
sb.append(" and age>= ? ");
params.add(user.getAge());
}
if(0 != user.getToage()) {
sb.append(" and age<= ? ");
params.add(user.getToage());
}
sql=sb.toString();
//System.out.println(sql);
PreparedStatement pstmt = null;
ResultSet rs = null;
List<User> list = null;
try {
pstmt = conn.prepareStatement(sql);
for(int i=0;i<params.size();i++) {
pstmt.setObject(i+1, params.get(i));
}
rs = pstmt.executeQuery();
list = new ArrayList<User>();
while(rs.next()) {
int uid = rs.getInt("hid");
String name = rs.getString("name");
int age = rs.getInt("age");
String email = rs.getString("email");
int recommend = rs.getInt("recommend");
User user_ = new User(uid,name,age,email,recommend);
list.add(user_);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBconUtil.close(null, pstmt, null, rs);
}
return list;
}
public User getUserById(int uid) {
String sql = "select name,password,age,email,picture,intro,recommend from users where hid = ?";
PreparedStatement pstmt = null;
ResultSet rs = null;
Connection conn = DBconUtil.getConn();
User user = null;
try {
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, uid);
rs = pstmt.executeQuery();
if(rs.next()) {
String name = rs.getString("name");
String password = rs.getString("password");
int age = rs.getInt("age");
String email = rs.getString("email");
String intro = rs.getString("intro");
String picture = rs.getString("picture");
int recommend = rs.getInt("recommend");
user = new User(uid,name,password,age,email,picture,intro,recommend,0);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBconUtil.close(null, pstmt, null, rs);
}
System.out.println(user);
return user;
}
public int updateUser(User user) {
String sql="update users set age=?,email=?,recommend=?,intro=? where hid = ?";
Connection conn = DBconUtil.getConn();
int i = 0;
System.out.println("dao-------------"+user.getEmail());
PreparedStatement pstmt = null;
try {
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, user.getAge());
pstmt.setString(2, user.getEmail());
pstmt.setInt(3, user.getRecommend());
pstmt.setString(4, user.getIntro());
pstmt.setInt(5, user.getUid());
System.out.println("dao-------------"+user.getEmail());
i = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBconUtil.close(null, pstmt, null, null);
}
return i;
}
public int deleteUserById(int uid) {
String sql="delete from users where hid = ?";
Connection conn = DBconUtil.getConn();
int i = 0;
PreparedStatement pstmt = null;
try {
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, uid);
i = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBconUtil.close(null, pstmt, null, null);
}
return i;
}
public int updateUserById(int uid,int flag) {
String sql="update users set flag = ? where hid = ?";
Connection conn = DBconUtil.getConn();
int i = 0;
PreparedStatement pstmt = null;
try {
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, flag);
pstmt.setInt(2, uid);
i = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBconUtil.close(null, pstmt, null, null);
}
return i;
}
}
④:service包用來接收dao包業務操作後的結果,傳給control包;
package service.Impl;
import java.util.List;
import bean.User;
import dao.IUserDao;
import dao.Impl.IUserDaoImpl;
import service.IUserServices;
public class IUserServicesImpl implements IUserServices {
private IUserDao iuserDao = new IUserDaoImpl();
public boolean register(User user) {
int i = iuserDao.register(user);
return i>0?true:false;
}
public boolean login(User user) {
// TODO Auto-generated method stub
int hid = iuserDao.login(user);
return hid>0?true:false;
}
public List<User> getIndexUser() {
List<User> list = iuserDao.getIndexUser();
if(null == list || list.size() == 0) {
return null;
}
return list;
}
public List<User> getAllUser(User user) {
List<User> list = iuserDao.getAllUser(user);
if(null == list || list.size() == 0) {
return null;
}
return list;
}
public User getUserById(int uid) {
User user = iuserDao.getUserById(uid);
return user;
}
public boolean updateUser(User user) {
int i = iuserDao.updateUser(user);
return i>0?true:false;
}
public boolean deleteUserById(int uid) {
int i = iuserDao.deleteUserById(uid);
return i>0?true:false;
}
public boolean updateUserById(int uid,int flag) {
int i = iuserDao.updateUserById(uid,flag);
return i>0?true:false;
}
}
⑤:util爲封裝的jdbc工具包,用來進行數據庫的業務操作。
4.登錄:
前端頁面login.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄</title>
<link rel ="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
<script type = "text/javascript" href="./js/jquery.js"></script>
<script type = "text/javascript" href="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--hearder-->
<jsp:include page="header.jsp"></jsp:include>
<h3 class="text-center">用戶登錄</h3>
<span style="margin-left: 290px;color:red;">${info }</span>
<form class="form-horizontal" style="padding-left:150px;" role="form" action="login.do" method="post">
<div class="form-group">
<label for="user" class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-6">
<input type="text" name="user" class="form-control" id="user" placeholder="請輸入用戶名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-6">
<input type="password" name="password" class="form-control" id="password" placeholder="請輸入密碼">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-info">登錄</button>
</div>
</div>
</form>
</div>
</body>
</html>
header.jsp爲上方導航欄:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
body{padding-top:70px}
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<img src="./images/logo.jpg" style="margin-top:2px" width="120" height="45">
</div>
<div>
<p class="navbar-text navbar-left">
<c:if test="${name!=null }">
歡迎:${name }${info }
<a href="index.do">首頁</a>
<a href="#">個人資料</a>
</c:if>
<c:if test="${name==null }">
<a href="login.jsp">登錄</a>
<a href="register.jsp">註冊</a>
<a href="index.do">首頁</a>
</c:if>
<c:if test="${name == 'admin'}">
<a href="userindex.do">用戶管理</a>
</c:if>
</p>
<p class="navbar-text navbar-right" style="margin-right:2px">
<a href-"">消息<span class="badge" style="background-color:#f00;margin-top:-2px">42</span></a>
<a href="loginout.do" style="">註銷</a>
</p>
</div>
</div>
</nav>
</body>
</html>
登錄的action=“login.do”,login.do通過獲取login.jsp中輸入的用戶名和密碼,判斷是否登陸成功。
package control;
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 bean.User;
import service.IUserServices;
import service.Impl.IUserServicesImpl;
/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
private IUserServices iuserServices = new IUserServicesImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");//編碼方式
String name = request.getParameter("user");//獲取前端輸入的用戶名
String password = request.getParameter("password");//獲取前端輸入的密碼
//封裝爲User類
User user = new User();
user.setName(name);
user.setPassword(password);
boolean result = iuserServices.login(user);//判斷是否登錄成功
if(result) {
request.getSession().setAttribute("name",name);//若成功傳參name到header.jsp 用來歡迎
response.sendRedirect("index.do");
}else {
request.setAttribute("info", "用戶名或密碼錯誤");
request.getRequestDispatcher("login.do").forward(request, response);
}
}
}
5.用戶管理:
只用管理員admin才能進行用戶管理,header.jsp這裏:
<c:if test="${name == 'admin'}">
<a href="userindex.do">用戶管理</a>
</c:if>
那麼userindex.do通過輸入條件進行查詢,如果不輸入即輸出表中的全部內容。:
package control;
import java.io.IOException;
import java.util.List;
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 bean.User;
import service.IUserServices;
import service.Impl.IUserServicesImpl;
/**
* Servlet implementation class UserIndexServlet
*/
@WebServlet("/userindex.do")
public class UserIndexServlet extends HttpServlet {
private IUserServices iuserServices = new IUserServicesImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("user");
String recommend = request.getParameter("recommend");
String age = request.getParameter("age");
String toage = request.getParameter("toage");
if(null == age || "".equals(age)) {
age = "0";
}
if(null == toage || "".equals(toage)) {
toage = "0";
}
if(null == recommend || "".equals(recommend)) {
recommend = "2";
}
User user = new User(0,name,Integer.parseInt(age),Integer.parseInt(toage),Integer.parseInt(recommend));
List<User> list = iuserServices.getAllUser(user);
request.setAttribute("list", list);
request.setAttribute("user", user);
request.getRequestDispatcher("/userIndex.jsp").forward(request, response);
}
}
前端頁面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶管理</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript">
//toastr.options = {"timeOut":1000};
var uid = 0;
var trobj;
$(function(){
/*
當點擊確認刪除時:
獲取當前uid
Ajax調用servlet刪除記錄
根據刪除結果提示用戶
*/
$("#ok").click(function(){
$("#myModal").modal('hide');
$.ajax({
url:"userdelete.do",
type:"post",
dataType:"json",
async:true,
data:"uid="+uid,
success:function(data){
if(data==1){
// 隱藏當前行
trobj.hide();
//toastr.success("刪除成功!");
}else{
//toastr.success("刪除失敗!");
}
}
})
})
})
function showd(uid_,obj){
// 橋接對象
uid = uid_;
trobj = $(obj).parent().parent();
$('#myModal').modal("show");
}
</script>
</head>
<body>
<div class="container">
<!--hearder-->
<jsp:include page="header.jsp"></jsp:include>
<h3>用戶列表</h3>
<form class="form-horizontal" style="margin-left: -140px;margin-top:40px; ">
<div class="form-group">
<label for="user" class="col-sm-2 control-label">用戶名:</label>
<div class="col-sm-2">
<input type="text" name="user" class="form-control" value="${user.name }" id="user" placeholder="請輸入用戶名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">推 薦:</label>
<input name="recommend" type="radio" value="2" ${user.recommend==2?"checked":"" } ${user.name==null?"checked":"" } style="margin:10px 13px 0px;">全部
<input name="recommend" type="radio" value="1" ${user.recommend==1?"checked":"" } style="margin:10px 13px 0px;">已推薦
<input name="recommend" type="radio" value="0" ${user.recommend==0?"checked":"" } style="margin:10px 13px 0px;">未推薦
</div>
<!--如何讓兩個input並排顯示?用.form-inline-->
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年 齡:</label>
<div class="col-sm-2 form-inline">
<input type="text" name="age" value="${user.age==0?'':user.age }" class="form-control" id="age" placeholder="">
</div>
<!-- width可以覆蓋掉掉col-sm-2 的設定-->
<label for="toage" class="col-sm-2 control-label" style="width: 0px;margin-left: 20px;">TO</label>
<div class="col-sm-2 form-inline">
<input type="text" name="toage" value="${user.toage==0?'':user.toage }" class="form-control" id="toage" placeholder="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-sm btn-info">查詢</button>
</div>
</div>
</form>
<table class="table table-hover" style="margin-top: 70px;">
<caption>查詢結果:</caption>
<thead>
<tr>
<th>用戶名</th>
<th>年齡</th>
<th>郵箱</th>
<th>是否推薦</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list }" var="user">
<tr>
<td>${user.name }</td>
<td>${user.age }</td>
<td>${user.email }</td>
<td>${user.recommend==1?"已推薦":"未推薦" }</td>
<td>
<a href="userinfo.do?hid=${user.hid }&flag=0" class="btn btn-primary btn-xs">查看</a>
<a href="userinfo.do?hid=${user.hid }&flag=1" class="btn btn-warning btn-xs">修改</a>
<button type="button" class="btn btn-danger btn-xs" onclick="showd(${user.hid},this)">刪除 </button>
</td>
</tr>
</c:forEach>
<c:if test="${empty list }">
<tr><td colspan="5" class="text-center">此查詢無數據!</td></tr>
</c:if>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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">提示:</h4>
</div>
<div class="modal-body">
<p>是否確認刪除?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" id="ok" class="btn btn-primary">確認</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
每一個用戶會有三個按鍵,各自實現不同的功能:
<a href="userinfo.do?hid=${user.hid }&flag=0" class="btn btn-primary btn-xs">查看</a>
<a href="userinfo.do?hid=${user.hid }&flag=1" class="btn btn-warning btn-xs">修改</a>
<button type="button" class="btn btn-danger btn-xs" onclick="showd(${user.hid},this)">刪除 </button>
拿刪除來說,點擊後會彈出:
點擊確認後,js中進行userdelete.do。功能就介紹這兩個,其他的大致相仿,優質用戶推薦就是取出recommend等於1的用戶展示出來。源碼請參考https://download.csdn.net/download/weixin_43912621/12567991
.
後記:
記錄一下小插曲:
1.刪除的提示一直不彈出,找陳大佬一起改了一下午,最後是jq的路徑搞錯了,我········;當然,輪播圖不輪播也是這個問題。
2.亂碼,修改數據庫中表的內容時,中文亂碼,一步一步定位,最後定位到數據庫這裏,只需要改一句jdbc:mysql://127.0.0.1:3306/數據庫名?useUnicode=true&characterEncoding=utf8。
3.醉裏挑燈看劍,夢迴吹角連營。八百里分麾下炙,五十弦翻塞外聲,沙場秋點兵。
馬作的盧飛快,弓如霹靂弦驚。了卻君王天下事,贏得生前身後名。可憐白髮生!