一、项目介绍
本项目是基于JavaWeb工程的宿舍管理系统，编写的目的在于更好的学习JavaWeb,若文章对你有所收获，末尾记得一键三连。
二、项目所设计的技术点
Jsp、JDBC、Servlet、Filter、JSTL、JQuery, MySQL数据库
要求：搭建JavaWeb项目
创建宿舍信息表：sushe，字段：id ,name
创建学生信息表：xuesheng，字段：id ,name ,xingbie,aihao,zhaopian,did
三：实现的功能：
1、ajax校验学生姓名不能为空，不能重复，否则不能提交
数据正确的添加到数据库中
2 、查询学生信息关联查询学生所在宿舍信息
正确展示数据库中的所有信息
完成根据学生姓名搜索。
3、删除功能
点击删除按钮，弹窗提示是否要删除本条数据
删除后展示最新数据，并停留在当前分页
4、修改功能
完成修改回显功能
CREATE TABLE sushe (
sid int PRIMARY key,
sname VARCHAR (20)
);
CREATE TABLE xuesheng(
id int PRIMARY key auto_increment,
name VARCHAR (20),
xingbie VARCHAR (20),
aihao VARCHAR (20),
zhaopian VARCHAR (255),
did int,
FOREIGN key (did) REFERENCES sushe (sid)
)
insert into sushe values
(1,'301'),
(2,'302'),
(3,'303');
insert into xuesheng values
(0,'于谦','男','[跑步，篮球]','',1),
(0,'郭dei','男','[旅游，篮球]','',2),
(0,'周九良','男','[敲打码，篮球]','',3);
sql 语句：
select *from sushe s ,xuesheng x where s.sid=x.did;
注意：关联表的时候，外键不要关联错了
打开自己的开发工具
创建三层架构
1 控制器； controller
2业务层 service
3 数据层 dao层
4 实体类 封装
在web下面导入须要的lib包
首先我们先写展示所有的代码：show
注意：在写的时候一定不要忘记增加编码格式;不然会出现乱码情况
展示过后：转发到前端
需要创建service层对象
@WebServlet("/show")
public class Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet (request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码格式
request.setCharacterEncoding ("utf-8");
response.setContentType ("text/html;charset=utf-8");
service service = new service ();
List<Xue> list = service.show ();
request.setAttribute ("list",list);
//转发
request.getRequestDispatcher ("show.jsp").forward (request, response);
}service 层代码：
需要创建dao层对象
package service;
import dao.dao;
import pojo.Xue;
import java.util.List;
public class service implements s1 {
dao w=new dao ();
@Override
public List<Xue> show() {
return w.show ();
}
@Override
public void add(Xue a) {
w.add (a);
}
@Override
public void set(Xue a) {
w.set (a);
}
public List<Xue> like(String name) {
List<Xue> like=null;
if(name==null||"".equals (name)){
return w.show ();
}else {
like= w.like(name);
}
return like;
}
public void shan(String id) {
w.shan(id);
}
public long getc(String name) {
return w.getco(name);
}
public Xue getid(String id) {
return w.getidw(id);
}
}dao 层的代码：
package dao;
import com.mchange.v2.c3p0.ComboPooledDataSource;
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 pojo.Xue;
import java.sql.SQLException;
import java.util.List;
public class dao implements d1{
//创建连接池，连接数据库
QueryRunner q=new QueryRunner (new ComboPooledDataSource ());
@Override
public List<Xue> show() {
List<Xue> list = null;
try {
list = q.query ("select *from sushe s ,xuesheng x where s.sid=x.did", new BeanListHandler<> (Xue.class));
} catch (SQLException e) {
e.printStackTrace ();
}
return list;
}
@Override
public void add(Xue a) {
try {
q.update ("insert into xuesheng (name,xingbie,aihao,zhaopian,did) values (?,?,?,?,?)",a.getName (),
a.getXingbie (),a.getAihao (),a.getZhaopian (),a.getDid ());
} catch (SQLException e) {
e.printStackTrace ();
}
}
@Override
public void set(Xue a) {
try {
q.update ("update xuesheng set name=?,xingbie=?,aihao=?,zhaopian=?,did=? where id=?",a.getName (),
a.getXingbie (),a.getAihao (),a.getZhaopian (),a.getDid (),a.getId ());
} catch (SQLException e) {
e.printStackTrace ();
}
}
public List<Xue> like(String name) {
List<Xue> list = null;
try {
list = q.query ("select *from sushe s ,xuesheng x where s.sid=x.did and name regexp ?", new BeanListHandler<> (Xue.class), name);
} catch (SQLException e) {
e.printStackTrace ();
}
return list;
}
public void shan(String id) {
try {
q.update ("delete from xuesheng where id=?",id);
} catch (SQLException e) {
e.printStackTrace ();
}
}
public int getid(String id) {
int update = 0;
try {
update = q.update ("select *from sushe s ,xuesheng x where s.sid=x.did and id=?", new BeanHandler<> (Xue.class), id);
} catch (SQLException e) {
e.printStackTrace ();
}
return update;
}
public long getco(String name) {
long query = 0;
try {
query = (long)q.query ("select count(*) from sushe s ,xuesheng x where s.sid=x.did and name=?", new ScalarHandler (), name);
} catch (SQLException e) {
e.printStackTrace ();
}
return query;
}
public Xue getidw(String id) {
Xue query = null;
try {
query = q.query ("select *from sushe s ,xuesheng x where s.sid=x.did and id=?", new BeanHandler<> (Xue.class), id);
} catch (SQLException e) {
e.printStackTrace ();
}
return query;
}
}
前端代码：展示所有：
注意：1.一定要添加 标签不添加会报错也 不会展示信息
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><script src="js/jquery-1.7.2.js"></script>
<script>
</script>2.搜索的提示： placeholder="根据名字搜索"
3.提示：是否需要删除：需要用到这个函数：
onclick="return confirm('是否删除')"
4：图片的标签不要写错：设置宽高
<img src="/${a.zhaopian}" alt="" width="50" height="50"><%--
Created by IntelliJ IDEA.
User: dell
Date: 2021/8/17
Time: 22:25
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/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
</script>
</head>
<body>
<form action="/like" method="post">
<input type="button" value="增加" onclick="w2()">
<input type="text" name="name" placeholder="根据名字搜索">
<input type="submit" value="搜索">
</form>
<table cellpadding="0" border="1" width="600" height="300">
<tr>
<td>学生Id</td>
<td>学生姓名</td>
<td>学生性别</td>
<td>学生爱好</td>
<td>学生照片</td>
<td>学生宿舍</td>
<td>学生操作</td>
</tr>
<c:forEach items="${list}" var="a">
<tr>
<td>${a.id}</td>
<td>${a.name}</td>
<td>${a.xingbie}</td>
<td>${a.aihao}</td>
<td><img src="/${a.zhaopian}" alt="" width="50" height="50"></td>
<td>${a.sname}</td>
<td>
<a href="/de?id=${a.id}" onclick="return confirm('是否删除')">删除</a>
<a href="/xiu?id=${a.id}">修改</a>
</td>
</tr>
</c:forEach>
</table>
</body>
<script>
function w2() {
$.get("add.jsp",function (data) {
location.href="/show1";
})
}
</script>
</html>
增加的功能：
注意：
图片添加：
1.必须使用表单，而不能是超链接；
2.表单的method必须是POST，而不能是GET；
3.表单的enctype必须是multipart/form-data；
4.在表单中添加file表单字段
ajax 验证：
定义：
var flag=false;<%--
Created by IntelliJ IDEA.
User: dell
Date: 2021/8/17
Time: 22:31
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/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function () {
$(".q").click(function () {
if($(this).val()==""){
alert("名字不能为空")
}
})
})
</script>
</head>
<body>
<form action="/add" method="post" onsubmit="return go()" enctype="multipart/form-data">
学生姓名<input type="text" name="name" class="q" onblur="w3()"><span class="t"></span> <br>
学生性别<input type="radio" name="xingbie" value="男">男
<input type="radio" name="xingbie" value="女">女 <br>
学生爱好
<input type="checkbox" name="aihao" value="跑步">跑步
<input type="checkbox" name="aihao" value="篮球">篮球
<input type="checkbox" name="aihao" value="旅游">旅游
<input type="checkbox" name="aihao" value="敲代码">敲代码 <br>
学生照片<input type="file" name="zhaopian"> <br>
学生宿舍
<select name="did">
<option>--请选择宿舍-</option>
<c:forEach var="w" items="${list}">
<option value="${w.sid}">${w.sname}</option>
</c:forEach>
</select> <br>
<input type="submit" value="增加">
</form>
</body>
<script>
var flag=false;
function w3() {
var n=$(".q").val();
$.post("aj",{"name":n},function (data) {
if (data=="true"){
$(".t").html("名字重复");
$(".t").css("color","red");
flag=true;
}else {
$(".t").html("名字可用");
$(".t").css("color","red");
flag=false;
}
},"text");
}
function go() {
if (flag==true){
return false;
}else {
return true;
}
}
</script>
</html>
增加servlet中的代码:
注意：
多选框选择：
获取前端的的数据：把爱好转换成字符中，存入对象：
图片：
获取图片，不要写错：以及路径
//设置编码格式
request.setCharacterEncoding ("utf-8");
response.setContentType ("text/html;charset=utf-8");
Map<String, String[]> map = request.getParameterMap ();
Xue a=new Xue ();
try {
BeanUtils.populate (a,map);
} catch (IllegalAccessException e) {
e.printStackTrace ();
} catch (InvocationTargetException e) {
e.printStackTrace ();
}
String aihao = Arrays.toString (request.getParameterValues ("aihao"));
a.setAihao (aihao);
//获取图片
Part img = request.getPart ("zhaopian");
//获取图片名称
String fileName = img.getSubmittedFileName ();
String s = fileName.substring (fileName.lastIndexOf ("."));
fileName= UUID.randomUUID ().toString ()+s;
a.setZhaopian (fileName);
String realPath = request.getSession ().getServletContext ().getRealPath ("/");
img.write (realPath+fileName);
service service = new service ();
service.add (a);
response.sendRedirect ("/show");修该页面代码：
注意：
复选框按钮回显的时候，一定要加：
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
标签，
<c:if test="${fn:contains(a.aihao,'篮球' )}">checked</c:if>if判断里面：篮球必须是单引号引起来的，不是双引号，不然会报错。
<%--
Created by IntelliJ IDEA.
User: dell
Date: 2021/8/17
Time: 22:31
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/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
</script>
</head>
<body>
<form action="/set" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="${a.id}">
学生姓名<input type="text" name="name" value="${a.name}"> <br>
学生性别<input type="radio" name="xingbie" value="男" <c:if test="${a.xingbie='男'}">checked</c:if>>男
学生性别<input type="radio" name="xingbie" value="女" <c:if test="${a.xingbie='女'}">checked</c:if>>女 <br>
学生爱好
<input type="checkbox" name="aihao" value="跑步"
<c:if test="${fn:contains(a.aihao,'跑步' )}">checked</c:if>
>跑步
<input type="checkbox" name="aihao" value="篮球"
<c:if test="${fn:contains(a.aihao,'篮球' )}">checked</c:if>
>篮球
<input type="checkbox" name="aihao" value="旅游"
<c:if test="${fn:contains(a.aihao,'旅游' )}">checked</c:if>
>旅游
<input type="checkbox" name="aihao" value="敲代码"
<c:if test="${fn:contains(a.aihao,'敲代码' )}">checked</c:if>
>敲代码 <br>
学生照片<input type="file" name="zhaopian" value="${a.zhaopian}"> <br>
学生宿舍
<select name="did">
<option>--请选择宿舍-</option>
<c:forEach var="w" items="${list}">
<option value="${w.sid}" <c:if test="${w.sid==a.did}">selected</c:if>>${w.sname}</option>
</c:forEach>
</select> <br>
<input type="submit" value="增加">
</form>
</body>
<script>
</script>
</html>
删除的代码：
查询：
修改：
注意：
修改的回显：
1。是通过ID去查的，然后存入域中：
2.获取宿舍的信息：
3转发到修改的jsp
//设置编码格式
request.setCharacterEncoding ("utf-8");
response.setContentType ("text/html;charset=utf-8");
String id = request.getParameter ("id");
service service = new service ();
Xue a =service.getid(id);
ser ser = new ser ();
List<Su> list = ser.show1 ();
request.setAttribute ("list",list);
request.setAttribute ("a",a);
//转发
request.getRequestDispatcher ("up.jsp").forward (request, response);作品展示：
到这里了，我们的代码，已经写的差不多了，接下来，看下最后的作品展示：
增加：
非空验证：
删除：
回显
好文推荐：
如果我的博客对你有帮助，也是你所喜欢的内容，请“点赞” “评论” “收藏” 一键三连，就是对我最大的支持！
3207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
