用户管理系统【案例一】

一、项目介绍 

本项目是基于JavaWeb工程的用户管理系统,编写的目的在于更好的学习JavaWeb,博客最后附上详细的视频讲解,欢迎大家观看。

 


二、项目所设计的技术点

 Jsp、JDBC、Servlet、Filter、JSTL、JQuery, MySQL数据库

三、项目的功能:

  1. 展示用户和角色列表,按生日日期区间查询
  2. 跳到添加报销页面部门从数据库加载、费用项目从数据库加载
  3. 校验年龄必须是数字,不是数字不能提交
  4. 修改 选中一条记录,点击修改,跳到添加页面数据回显
  5. 删除选择一条记录,点击删除,从数据库中删除,如果没有选择,则提示“请选择要删除的数据.

(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>

到这里了,我们的代码,已经写完了,接下来,看下最后的作品。
五:
作品展示

 增加的展示:

 修改的回显:

好文推荐:

Web基础理论总结

SQL语法终极版

用户管理系统视频讲解

3D初级旋转相册

3D中级旋转相册

宿舍管理开发流程

宿舍管理开发视频讲解

如果我的博客对你有帮助,也是你所喜欢的内容,请“点赞”   “评论”  “收藏”   一键三连,就是对我最大的支持!

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明天会更好fjy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值