一、项目介绍
本项目是基于JavaWeb工程的用户管理系统,编写的目的在于更好的学习JavaWeb,博客最后附上详细的视频讲解,欢迎大家观看。
二、项目所设计的技术点
Jsp、JDBC、Servlet、Filter、JSTL、JQuery, MySQL数据库
三、项目的功能:
- 展示用户和角色列表,按生日日期区间查询
- 跳到添加报销页面部门从数据库加载、费用项目从数据库加载
- 校验年龄必须是数字,不是数字不能提交
- 修改 选中一条记录,点击修改,跳到添加页面数据回显
- 删除选择一条记录,点击删除,从数据库中删除,如果没有选择,则提示“请选择要删除的数据.
(1)、
创建表并且增加数据:
注意:id,可以设置主键自增,图片 必学是:img VARCHAR (255) 类型的 设置小了会报错
CREATE TABLE user1 (
id int PRIMARY key auto_increment,
username VARCHAR (20),
password VARCHAR (20),
r_id int,
nickname VARCHAR (20),
birthday VARCHAR (20),
age int,
img VARCHAR (255),
FOREIGN key (r_id) REFERENCES role1 (rid)
)
CREATE TABLE role1 (
rid int PRIMARY key,
name VARCHAR (20)
)
insert into role1 values
(1,'读者'),
(2,'作者'),
(3,'管理员');
insert into user1 values
(0,'list','123sa',1,'小李','1990-10-10',25,''),
(0,'wangyu','123sa',2,'我吃西红柿','1980-10-10',25,''),
(0,'liu','123sa',3,'小','2000-10-10',25,''),
(0,'ass','123sa',1,'李','2010-10-10',25,'');
select *from user1 u ,role1 r where u.r_id=r.rid;
注意事项:
两表添加的时候,id,name 不能相同,外键不能关键错误,否则导致错误。
(2)、
打开自己的开发工具:
创建三层建构
(1) 控制器: controller;
(2)业务层: service
(3) 数据层:dao 层
(4)实体:pojo
封装数据:
注意:
封装的数据要和数据库的字段一致
对外提供公共的访问方法
package pojo;
public class User {
private int id ;
private String username ;
private String password ;
private int r_id ;
private String nickname ;
private String birthday ;
private int age ;
private String img ;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int getR_id() {
return r_id;
}
public void setR_id(int r_id) {
this.r_id = r_id;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getImg() {
return img;
}
public void setImg(String img) {
this.img = img;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
第二表的数据:
展示所有代码:
package controller;
import pojo.User;
import service.service;
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 java.io.IOException;
import java.util.List;
@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<User> list = service.show ();
request.setAttribute ("list",list);
//转发
request.getRequestDispatcher ("show.jsp").forward (request, response);
}
}
注意事项:
创建service 对象
设置编码格式,不要写错,最后进行转发
service 代码:
注意:
查询的时候:括号不能漏写,不然丢失数据
package service;
import dao.dao;
import pojo.User;
import java.util.List;
public class service implements s1 {
dao w = new dao ();
@Override
public List<User> show() {
return w.show ();
}
@Override
public void add(User a) {
w.add (a);
}
@Override
public void set(User a) {
w.set (a);
}
public void sha(String[] ids) {
for (String id : ids) {
w.shan (id);
}
}
public List<User> like(String start, String end) {
List<User> like = null;
if (start == null || "".equals (start) && (end == null || "".equals (end))) {
return like = w.show ();
} else if ((start != null) && (end == null || "".equals (end))) {
like = w.get2 (start);
} else if ((end != null) && (start == null || "".equals (start))) {
like = w.get3 (end);
} else {
like = w.zui (start, end);
}
return like;
}
public User getid(String id) {
return w.getid(id);
}
public long getname(String username) {
return w.getna(username);
}
}
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.User;
import java.sql.SQLException;
import java.util.List;
public class dao implements d1 {
QueryRunner q=new QueryRunner (new ComboPooledDataSource ());
@Override
public List<User> show() {
List<User> list = null;
try {
list = q.query ("select *from user1 u ,role1 r where u.r_id=r.rid", new BeanListHandler<> (User.class));
} catch (SQLException e) {
e.printStackTrace ();
}
return list;
}
@Override
public void add(User a) {
try {
q.update ("insert into user1 (username,password,r_id,nickname,birthday,age,img) values (?,?,?,?,?,?,?)",a.getUsername (),a.getPassword (),
a.getR_id (),a.getNickname (),a.getBirthday (),a.getAge (),a.getImg ());
} catch (SQLException e) {
e.printStackTrace ();
}
}
@Override
public void set(User a) {
try {
q.update ("update user1 set username=?,password=?,r_id=?,nickname=?,birthday=?,age=?,img=? where id=?",a.getUsername (),a.getPassword (),
a.getR_id (),a.getNickname (),a.getBirthday (),a.getAge (),a.getImg (),a.getId ());
} catch (SQLException e) {
e.printStackTrace ();
}
}
public void shan(String id) {
try {
q.update ("delete from user1 where id=?",id);
} catch (SQLException e) {
e.printStackTrace ();
}
}
public List<User> get2(String start) {
List<User> list = null;
try {
list = q.query ("select *from user1 u ,role1 r where u.r_id=r.id and birthday>=? ", new BeanListHandler<> (User.class),start);
} catch (SQLException e) {
e.printStackTrace ();
}
return list;
}
public List<User> get3(String end) {
List<User> list = null;
try {
list = q.query ("select *from user1 u ,role1 r where u.r_id=r.rid and birthday<=? ", new BeanListHandler<> (User.class),end);
} catch (SQLException e) {
e.printStackTrace ();
}
return list;
}
public List<User> zui(String start, String end) {
List<User> list = null;
try {
list = q.query ("select *from user1 u ,role1 r where u.r_id=r.rid and birthday between ? and ? ", new BeanListHandler<> (User.class),start,end
);
} catch (SQLException e) {
e.printStackTrace ();
}
return list;
}
public User getid(String id) {
User query = null;
try {
query = q.query ("select *from user1 u ,role1 r where u.r_id=r.rid and u.id=?", new BeanHandler<> (User.class), id);
} catch (SQLException e) {
e.printStackTrace ();
}
return query;
}
public long getna(String username) {
long query = 0;
try {
query = (long) q.query ("select count(*) from user1 u ,role1 r where u.r_id=r.rid and username=? ", new ScalarHandler (), username);
} catch (SQLException e) {
e.printStackTrace ();
}
return query;
}
}
注意事项:
查询的时候:返回的是list;
增加的时候:形参传入的是对象
删除的时候:通过Id;
ajax 校验的时候;统计用户名重复的问题:
count(*) 中间不要有空格 ScalarHandler,写错
区间查询的时候:传的参数不要漏写
前端的展示:
<%--
Created by IntelliJ IDEA.
User: dell
Date: 2021/8/18
Time: 15:15
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 () {
$(".d").click(function () {
if($(".q:checked").length<1){
alert("至少选择一条");
}else {
var str="";
$(".q:checked").each(function () {
var id=$(this).val();
str+=id+",";
})
if(confirm('是否删除')){
location.href=("/de?ids="+str);
}
}
})
})
</script>
</head>
<body>
<form action="/like" method="post">
生日查询 <input type="text" name="start">--<input type="text" name="end">
<input type="submit" value="查询">
<input type="button" value="增加" onclick="w2()">
<input type="button" value="批量删除" class="d">
</form>
<table cellpadding="0" border="1" width="600" height="300">
<tr>
<td><input type="checkbox" onclick="fan(this)"></td>
<td>用户名</td>
<td>密码</td>
<td>角色</td>
<td>昵称</td>
<td>生日</td>
<td>年龄</td>
<td>头像</td>
<td>操作</td>
</tr>
<c:forEach items="${list}" var="a">
<tr>
<td><input type="checkbox" value="${a.id}" class="q"></td>
<td>${a.username}</td>
<td>${a.password}</td>
<td>${a.name}</td>
<td>${a.nickname}</td>
<td>${a.birthday}</td>
<td>${a.age}</td>
<td><img src="/${a.img}" alt="" height="50" width="50"></td>
<td>
<a href="/xiu?id=${a.id}">修改</a>
</td>
</tr>
</c:forEach>
</table>
</body>
<script>
function w2() {
$.get("add.jsp",function (data) {
location.href="show1";
})
}
function fan(r) {
$(".q").prop("checked",r.checked);
}
</script>
</html>
注意事项:
<script src="js/jquery-1.7.2.js"></script> <script> </script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
图片标签 设置 宽 高
删除提示用的函数:
confirm('是否删除')
增加的代码:
<%--
Created by IntelliJ IDEA.
User: dell
Date: 2021/8/18
Time: 15:23
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="/add" method="post" onsubmit="return go()" enctype="multipart/form-data">
用户名<input type="text" name="username" class="y" onblur="w7()"> <span class="v"></span> <br>
密码<input type="text" name="password"> <br>
角色
<select name="r_id">
<option>--请选择角色</option>
<c:forEach var="w" items="${list}">
<option value="${w.rid}">${w.name}</option>
</c:forEach>
</select><br>
昵称<input type="text" name="nickname"> <br>
生日<input type="text" name="birthday"> <br>
年龄<input type="text" name="age" class="d" onblur="w5()"><span class="t"> </span> <br>
头像<input type="file" name="img"> <br>
<input type="submit" value="提交">
</form>
</body>
<script>
var flag=false;
function w5() {
var rep=/^[0-9]*$/;
var n=$(".d").val();
if(rep.test(n)){
$(".t").html("");
flag=false;
}else {
$(".t").html("必须是数字");
$(".t").css("color","red");
flag=true;
}
}
function go() {
if(flag==true){
return false;
}else {
return true;
}
}
function w7() {
var h=$(".y").val();
$.post("aj",{"name":h},function (data) {
if(data=="true"){
$(".v").html("名字重复");
$(".v").css("color","red");
flag=true;
}else {
$(".v").html("名字可用");
$(".v").css("color","red");
flag=false;
}
},"text");
}
</script>
</html>
注意事项:
增加的时候是表单,不是超链接;
method 是post,而不是get;
表单中的entype 必须是multipart/form-data
必须增加form 表单
get是通过地址栏提交数据,不安全,数据大小有限制
post是通过请求体提交数据,安全,数据大小没有限制
下拉框中:
name='从表的外键''
名字校验的时候注意定义:var flag=false;
ajax 里面的,“text” 不要漏写
注解:不要漏写
servlet 的代码:
注意事项:
获取图片以及路径不要写错
//设置编码格式
request.setCharacterEncoding ("utf-8");
response.setContentType ("text/html;charset=utf-8");
Map<String, String[]> map = request.getParameterMap ();
//user对象
User a=new User ();
try {
BeanUtils.populate (a,map);
} catch (IllegalAccessException e) {
e.printStackTrace ();
} catch (InvocationTargetException e) {
e.printStackTrace ();
}
//获取图片
Part img = request.getPart ("img");
//图片名称
String fileName = img.getSubmittedFileName ();
String s = fileName.substring (fileName.lastIndexOf ("."));
fileName= UUID.randomUUID ().toString ()+s;
//存入对象
a.setImg (fileName);
//图片路径
String realPath = request.getSession ().getServletContext ().getRealPath ("/");
img.write (realPath+fileName);
service service = new service ();
service.add (a);
response.sendRedirect ("/show");
删除的代码:
注意:
获取前端传的值,需要进行拆分,转换成数组,再删
request.setCharacterEncoding ("utf-8");
response.setContentType ("text/html;charset=utf-8");
String id = request.getParameter ("ids");
String[] ids = id.split (",");
service service = new service ();
service.sha(ids);
response.sendRedirect ("/show");
查询的代码:
注意:
service 代码:括号不要漏写。
修改的回显:
注意:通过ID去查找 ,存入域
前端的代码:
<%--
Created by IntelliJ IDEA.
User: dell
Date: 2021/8/18
Time: 15:23
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="username" value="${a.username}"> <br>
密码<input type="text" name="password" value="${a.password}"> <br>
角色
<select name="r_id">
<option>--请选择角色</option>
<c:forEach var="w" items="${list}">
<option value="${w.rid}" <c:if test="${a.r_id==w.rid}">selected</c:if>>${w.name}</option>
</c:forEach>
</select><br>
昵称<input type="text" name="nickname" value="${a.nickname}"> <br>
生日<input type="text" name="birthday" value="${a.birthday}"> <br>
年龄<input type="text" name="age" value="${a.age}"> <br>
头像<input type="file" name="img" value="${a.img}"> <br>
<input type="submit" value="提交">
</form>
</body>
<script>
</script>
</html>
到这里了,我们的代码,已经写完了,接下来,看下最后的作品。
五:
作品展示
增加的展示:
修改的回显:
好文推荐:
如果我的博客对你有帮助,也是你所喜欢的内容,请“点赞” “评论” “收藏” 一键三连,就是对我最大的支持!