【基于Java+MySQL+JDBC+tomcat+JSP+JavaScript+CSS的信息管理系统】

基于Java+MySQL+JDBC+tomcat+JSP+JavaScript+CSS的信息管理系统

基于Java+MySQL+JDBC+tomcat+JSP+JavaScript+CSS的信息管理系统
1.主界面效果
2.MySQL
- 2.1SQL文件
3.Java
- 3.1持久化类User
- 3.2JDBC工具类UserDBUtil
- 3.3信息操作类UserDao
4.JSP
- 4.1主界面
- - 4.1.1https://blog.csdn.net/weixin_55987175/article/details/user.jsp
- 4.2注册(录入)
- - 4.2.1https://blog.csdn.net/weixin_55987175/article/details/index.jsp
  - 4.2.2index_deal.jsp
- 4.3修改
- - 4.3.1https://blog.csdn.net/weixin_55987175/article/details/change.jsp
  - 4.3.2change_deal.jsp
- 4.4删除
- - 4.4.1https://blog.csdn.net/weixin_55987175/article/details/mode.jsp
- 4.5查询
- - 4.5.1seekByName.jsp
  - 4.5.2seekBySkill.jsp
  - 4.5.3seekBySex.jsp
  - 4.5.4seekByAge.jsp
5.JavaScript
- 5.1updatenull.js
6.CSS
- 6.1login.css
7.所需jar
- 7.1mysql-connector-java-5.1.41-bin

1.主界面效果

2.MySQL 2.1SQL文件

自动增加的编号：userid，用户名username，
密码userpassword，性别usersex，
年龄userage，编程语言技能userskill，
手机号userphone。

create database if not exists User1 
default charset utf8;
use User1;
create table User1user(
userid int primary key auto_increment,
username varchar(30) not null,
userpassword varchar(40) not null,
usersex varchar(10) not null,
userage int not null,
userskill varchar(40) not null,
userphone varchar(30) not null)
default charset=utf8;
insert into User1user(
username,userpassword,usersex,
userage,userskill,userphone) 
values('顾北辰','123456abcd','男',
19,'C++','18675894653');
insert into User1user(
username,userpassword,usersex,
userage,userskill,userphone) 
values('Ken','12345678abcd','男',
19,'Java','1867345544653');

3.Java 3.1持久化类User

public class User {
    private int userid;
    private String username;
    private String userpassword;
    private String usersex;
    private int userage;
    private String userskill;
    private String userphone;

    public User() {
    }

    public User(int userid, String username, String userpassword, String usersex, 
                int userage, String userskill, String userphone) {
        this.userid = userid;
        this.username = username;
        this.userpassword = userpassword;
        this.usersex = usersex;
        this.userage = userage;
        this.userskill = userskill;
        this.userphone = userphone;
    }

    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 getUserpassword() {
        return userpassword;
    }

    public void setUserpassword(String userpassword) {
        this.userpassword = userpassword;
    }

    public String getUsersex() {
        return usersex;
    }

    public void setUsersex(String usersex) {
        this.usersex = usersex;
    }

    public int getUserage() {
        return userage;
    }

    public void setUserage(int userage) {
        this.userage = userage;
    }

    public String getUserskill() {
        return userskill;
    }

    public void setUserskill(String userskill) {
        this.userskill = userskill;
    }

    public String getUserphone() {
        return userphone;
    }

    public void setUserphone(String userphone) {
        this.userphone = userphone;
    }

    @Override
    public String toString() {
        return "User{" +
                "userid=" + userid +
                ", username='" + username + ''' +
                ", userpassword='" + userpassword + ''' +
                ", usersex='" + usersex + ''' +
                ", userage=" + userage +
                ", userskill='" + userskill + ''' +
                ", userphone='" + userphone + ''' +
                '}';
    }
}

3.2JDBC工具类UserDBUtil

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class UserDBUtil {
    private String driver;
    private String url;
    private String username;
    private String userpass;

    public UserDBUtil() {
        driver="com.mysql.jdbc.Driver";
        url="jdbc:mysql://localhost:3306/user1";
        username="root";
        userpass="123456";
    }

    public String getDriver() {
        return driver;
    }

    public void setDriver(String driver) {
        this.driver = driver;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getUserpass() {
        return userpass;
    }

    public void setUserpass(String userpass) {
        this.userpass = userpass;
    }

    public Connection getConnection(){
        Connection c=null;
        try{
            Class.forName(driver);
        }catch (ClassNotFoundException ex){
            System.out.println("驱动程序加载失败");
            return null;
        }
        try {
            c= DriverManager.getConnection(url,username,userpass);
        }catch (SQLException e){
            System.out.println("数据库连接失败");
        }
        return c;
    }
}

3.3信息操作类UserDao

对数据库信息增删改查

import java.sql.*;
import java.util.ArrayList;

public class UserDao {
    //插入一条记录
    public static int insertUser(User u){
        int k=0;
        String sql=
        "insert into user1user(username,userpassword,usersex,userage,userskill,userphone) values(?,?,?,?,?,?)";
        Connection connection=null;
        UserDBUtil udb=new UserDBUtil();
        connection=udb.getConnection();
        if(connection==null){
            System.out.println("连接对象为空");
            return 0;
        }
        PreparedStatement ps=null;
        try {
            ps=connection.prepareStatement(sql);
            ps.setString(1,u.getUsername());
            ps.setString(2,u.getUserpassword());
            ps.setString(3,u.getUsersex());
            ps.setInt(4,u.getUserage());
            ps.setString(5,u.getUserskill());
            ps.setString(6,u.getUserphone());
            k=ps.executeUpdate();
        }catch (SQLException s){
            System.out.println("创建preparestatement对象失败"+sql);
        }finally {
            try {
                ps.close();
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return k;
    }

    //根据用户名修改记录
    public static int changeUser(User u){
        int k=0;
        String sql=
        "update user1user set userpassword=?,usersex=?,userage=?,userskill=?,userphone=? where username=?";
        Connection connection=null;
        UserDBUtil udb=new UserDBUtil();
        connection=udb.getConnection();
        if(connection==null){
            System.out.println("连接对象为空");
            return 0;
        }
        PreparedStatement ps=null;
        try {
            ps=connection.prepareStatement(sql);
            ps.setString(1,u.getUsername());
            ps.setString(2,u.getUserpassword());
            ps.setString(3,u.getUsersex());
            ps.setInt(4,u.getUserage());
            ps.setString(5,u.getUserskill());
            ps.setString(6,u.getUserphone());
            k=ps.executeUpdate();
        }catch (SQLException s){
            System.out.println("创建preparestatement对象失败"+sql);
        }finally {
            try {
                ps.close();
                connection.close();
            }catch (SQLException e){
                e.getStackTrace();
            }
        }
        return k;
    }

    //根据编号删除记录
    public static int modeUser(int userid){
        int k=0;
        String sql="delete from user1user where userid=?";
        Connection connection=null;
        UserDBUtil udb=new UserDBUtil();
        connection=udb.getConnection();
        if(connection==null){
            System.out.println("连接对象为空");
            return 0;
        }
        PreparedStatement ps=null;
        try{
            ps=connection.prepareStatement(sql);
            ps.setInt(1,userid);
            k=ps.executeUpdate();
        }catch (SQLException s){
            System.out.println("创建preparestatement对象失败"+sql);
        }finally {
            try {
                ps.close();
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return k;
    }

    //查询所有记录，返回集合
    public static ArrayList getAllUser(){
        ArrayList alu=new ArrayList();
        String sql="select * from user1user";
        Connection connection=null;
        UserDBUtil udb=new UserDBUtil();
        connection=udb.getConnection();
        if(connection==null){
            System.out.println("连接对象为空");
            return alu;
        }
        Statement s=null;
        try {
            s=connection.createStatement();
            ResultSet rs=s.executeQuery(sql);
            while (rs.next()){
                User u=new User();
                u.setUserid(rs.getInt("userid"));
                u.setUsername(rs.getString("username"));
                u.setUserpassword(rs.getString("userpassword"));
                u.setUsersex(rs.getString("usersex"));
                u.setUserage(rs.getInt("userage"));
                u.setUserskill(rs.getString("userskill"));
                u.setUserphone(rs.getString("userphone"));
                alu.add(u);
            }
            rs.close();
        }catch (SQLException ex){
            System.out.println("查询失败"+sql);
        }finally {
            try {
                s.close();
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return alu;
    }

    //根据技能查询，返回集合
    public static ArrayList seekByuserskill(String userskill){
        ArrayList alu=new ArrayList();
        String sql="select * from user1user where userskill=?";
        Connection connection=null;
        UserDBUtil udb=new UserDBUtil();
        connection=udb.getConnection();
        if(connection==null){
            System.out.println("连接对象为空");
            return alu;
        }
        ResultSet rs=null;
        User u=null;
        PreparedStatement ps=null;
        try {
            ps=connection.prepareStatement(sql);
            ps.setString(1,userskill);
            rs=ps.executeQuery();
            while (rs.next()){
                u=new User();
                u.setUserid(rs.getInt("userid"));
                u.setUsername(rs.getString("username"));
                u.setUserpassword(rs.getString("userpassword"));
                u.setUsersex(rs.getString("usersex"));
                u.setUserage(rs.getInt("userage"));
                u.setUserskill(rs.getString("userskill"));
                u.setUserphone(rs.getString("userphone"));
                alu.add(u);
            }
            //rs.close();
        }catch (SQLException s){
            System.out.println("查询失败");
        }finally {
            try {
                connection.close();
                ps.close();
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return alu;
    }

    //根据用户名查询，返回集合
    public static ArrayList seekByusername(String username){
        ArrayList alu=new ArrayList();
        String sql="select * from user1user where username=?";
        Connection connection=null;
        UserDBUtil udb=new UserDBUtil();
        connection=udb.getConnection();
        if(connection==null){
            System.out.println("连接对象为空");
            return alu;
        }
        ResultSet rs=null;
        User u=null;
        PreparedStatement ps=null;
        try {
            ps=connection.prepareStatement(sql);
            ps.setString(1,username);
            rs=ps.executeQuery();
            while(rs.next()){
                u=new User();
                u.setUserid(rs.getInt("userid"));
                u.setUsername(rs.getString("username"));
                u.setUserpassword(rs.getString("userpassword"));
                u.setUsersex(rs.getString("usersex"));
                u.setUserage(rs.getInt("userage"));
                u.setUserskill(rs.getString("userskill"));
                u.setUserphone(rs.getString("userphone"));
                alu.add(u);
            }
            rs.close();
        }catch (SQLException s){
            System.out.println("查询失败");
        }finally {
            try {
                connection.close();
                ps.close();
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return alu;
    }

    //根据性别查询，返回集合
    public static ArrayList seekByusersex(String usersex){
        ArrayList alu=new ArrayList();
        String sql="select * from user1user where usersex=?";
        Connection connection=null;
        UserDBUtil udb=new UserDBUtil();
        connection=udb.getConnection();
        if(connection==null){
            System.out.println("连接对象为空");
            return alu;
        }
        ResultSet rs=null;
        User u=null;
        PreparedStatement ps=null;
        try {
            ps=connection.prepareStatement(sql);
            ps.setString(1,usersex);
            rs=ps.executeQuery();
            while (rs.next()){
                u=new User();
                u.setUserid(rs.getInt("userid"));
                u.setUsername(rs.getString("username"));
                u.setUserpassword(rs.getString("userpassword"));
                u.setUsersex(rs.getString("usersex"));
                u.setUserage(rs.getInt("userage"));
                u.setUserskill(rs.getString("userskill"));
                u.setUserphone(rs.getString("userphone"));
                alu.add(u);
            }
            rs.close();
        }catch (SQLException s){
            System.out.println("查询失败");
        }finally {
            try {
                connection.close();
                ps.close();
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return alu;
    }

    //根据年龄查询，返回集合
    public static ArrayList seekByuserage(int userage){
        ArrayList alu=new ArrayList();
        String sql="select * from user1user where userage=?";
        Connection connection=null;
        UserDBUtil udb=new UserDBUtil();
        connection=udb.getConnection();
        if(connection==null){
            System.out.println("连接对象为空");
            return alu;
        }
        ResultSet rs=null;
        User u=null;
        PreparedStatement ps=null;
        try {
            ps=connection.prepareStatement(sql);
            ps.setInt(1,userage);
            rs=ps.executeQuery();
            while (rs.next()){
                u=new User();
                u.setUserid(rs.getInt("userid"));
                u.setUsername(rs.getString("username"));
                u.setUserpassword(rs.getString("userpassword"));
                u.setUsersex(rs.getString("usersex"));
                u.setUserage(rs.getInt("userage"));
                u.setUserskill(rs.getString("userskill"));
                u.setUserphone(rs.getString("userphone"));
                alu.add(u);
            }
            rs.close();
        }catch (SQLException s){
            System.out.println("查询失败");
        }finally {
            try {
                connection.close();
                ps.close();
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return alu;
    }
}

4.JSP 4.1主界面

查询所有记录，返回集合Array List，展示现在表单中。

4.1.1https://blog.csdn.net/weixin_55987175/article/details/user.jsp

<%@ page import="java.util.ArrayList" %>
<%@ page import="USEjava.UserDao" %>
<%@ page import="USEjava.User" %>
<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    user






    
    
    
    
    
        
        
        
        
        
        
        

    用户信息
    
        <%
            ArrayList user= UserDao.getAllUser();
            for(User u:user){
        %>
        
        <%
            }
        %>
    
        
            
添加用户

        
        
                
                
            
                
                
            
                
                
            
                
                
        编号 用户名 密码 性别
            年龄 技能 手机号 管理

            <%=u.getUserid()%>
            <%=u.getUsername()%>
            <%=u.getUserpassword()%>
            <%=u.getUsersex()%>
            <%=u.getUserage()%>
            <%=u.getUserskill()%>
            <%=u.getUserphone()%>
            修改
                删除

添加用户

编号	用户名	密码	性别	年龄	技能	手机号	管理
<%=u.getUserid()%>	<%=u.getUsername()%>	<%=u.getUserpassword()%>	<%=u.getUsersex()%>	<%=u.getUserage()%>	<%=u.getUserskill()%>	<%=u.getUserphone()%>	修改删除

4.2注册(录入)

插入一条记录

4.2.1https://blog.csdn.net/weixin_55987175/article/details/index.jsp

<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

  
    index
  
  
  
  
  
    
    
    
    
    
      
      
      
      
      
      
  
    
      
        用户注册
        用户名： 
        密码： 
        性别： 男
          女
        年龄： 
        技能： 
        手机号：

用户注册
用户名：
密码：
性别：	男女
年龄：
技能：
手机号：

4.2.2index_deal.jsp

<%@ page import="USEjava.UserDao" %>
<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    deal



    
    
    <%
        int z= UserDao.insertUser(u);
        if(z>0)
            out.print("保存成功");
        else
            out.print("保存失败");
        response.setHeader("Refresh", "1;url=https://blog.csdn.net/weixin_55987175/article/details/user.jsp");
    %>
    返回

4.3修改

根据用户名修改

4.3.1https://blog.csdn.net/weixin_55987175/article/details/change.jsp

<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    change





    
    
    
    
    
        
        
        
        
        
        

    
        
            修改用户信息
            用户名： 
            密码： 
            性别： 男
                女
            年龄： 
            技能： 
            手机号：

修改用户信息
用户名：
密码：
性别：	男女
年龄：
技能：
手机号：

4.3.2change_deal.jsp

<%@ page import="USEjava.UserDao" %>
<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    deal



    
    
    <%
        int z= UserDao.changeUser(u);
        if(z>0)
            out.print("修改成功");
        else
            out.print("修改失败");
        response.setHeader("Refresh", "1;url=https://blog.csdn.net/weixin_55987175/article/details/user.jsp");
    %>
    返回

4.4删除

根据编号删除一条

4.4.1https://blog.csdn.net/weixin_55987175/article/details/mode.jsp

<%@ page import="USEjava.UserDao" %>
<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    mode



    
    
    <%
        String id=request.getParameter("userid");
        if(id!=null)
        {
            int n=Integer.parseInt(id);
            int y= UserDao.modeUser(n);
            if(y>0)
                out.print("删除成功");
            else
                out.print("删除失败");
            response.setHeader("Refresh", "1;url=https://blog.csdn.net/weixin_55987175/article/details/user.jsp");
        }
    %>
    返回

4.5查询

分别根据name，skill，age，sex查询一条或多条记录

4.5.1seekByName.jsp

根据名字查询

<%@ page import="USEjava.UserDao" %>
<%@ page import="USEjava.User" %>
<%@ page import="java.util.ArrayList" %>
<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    seek






    
    
    
    
    
        
        
        
        
        
        
        

    用户信息
    返回
        <%
            String Name=request.getParameter("username");
            if(Name!=null&&Name!=""){
                ArrayList user= UserDao.seekByusername(Name);
                for(User u:user){
        %>
        
        <%
                }
            }
        %>
    
        
        编号 用户名 密码 性别
            年龄 技能 手机号 管理

            <%=u.getUserid()%>
            <%=u.getUsername()%>
            <%=u.getUserpassword()%>
            <%=u.getUsersex()%>
            <%=u.getUserage()%>
            <%=u.getUserskill()%>
            <%=u.getUserphone()%>
            修改
                删除

编号	用户名	密码	性别	年龄	技能	手机号	管理
<%=u.getUserid()%>	<%=u.getUsername()%>	<%=u.getUserpassword()%>	<%=u.getUsersex()%>	<%=u.getUserage()%>	<%=u.getUserskill()%>	<%=u.getUserphone()%>	修改删除

4.5.2seekBySkill.jsp

根据技能查询

<%@ page import="USEjava.User" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="USEjava.UserDao" %>
<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    seek






    
    
    
    
    
        
        
        
        
        
        
        

    用户信息
    返回
        <%
            String Skill=request.getParameter("userskill");
            if(Skill!=null&&Skill!=""){
            ArrayList user= UserDao.seekByuserskill(Skill);
            for(User u:user){
        %>
        
        <%
                }
            }
        %>
    
        
        编号 用户名 密码 性别
            年龄 技能 手机号 管理

            <%=u.getUserid()%>
            <%=u.getUsername()%>
            <%=u.getUserpassword()%>
            <%=u.getUsersex()%>
            <%=u.getUserage()%>
            <%=u.getUserskill()%>
            <%=u.getUserphone()%>
            修改
                删除

编号	用户名	密码	性别	年龄	技能	手机号	管理
<%=u.getUserid()%>	<%=u.getUsername()%>	<%=u.getUserpassword()%>	<%=u.getUsersex()%>	<%=u.getUserage()%>	<%=u.getUserskill()%>	<%=u.getUserphone()%>	修改删除

4.5.3seekBySex.jsp

根据性别查询

<%@ page import="USEjava.UserDao" %>
<%@ page import="USEjava.User" %>
<%@ page import="java.util.ArrayList" %>
<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    seek






    
    
    
    
    
        
        
        
        
        
        
        

    用户信息
    返回
        <%
            String Sex=request.getParameter("usersex");
            if(Sex!=null&&Sex!=""){
                ArrayList user= UserDao.seekByusersex(Sex);
                for(User u:user){
        %>
        
        <%
                }
            }
        %>
    
        
        编号 用户名 密码 性别
            年龄 技能 手机号 管理

            <%=u.getUserid()%>
            <%=u.getUsername()%>
            <%=u.getUserpassword()%>
            <%=u.getUsersex()%>
            <%=u.getUserage()%>
            <%=u.getUserskill()%>
            <%=u.getUserphone()%>
            修改
                删除

编号	用户名	密码	性别	年龄	技能	手机号	管理
<%=u.getUserid()%>	<%=u.getUsername()%>	<%=u.getUserpassword()%>	<%=u.getUsersex()%>	<%=u.getUserage()%>	<%=u.getUserskill()%>	<%=u.getUserphone()%>	修改删除

4.5.4seekByAge.jsp

根据年龄查询

<%@ page import="USEjava.UserDao" %>
<%@ page import="USEjava.User" %>
<%@ page import="java.util.ArrayList" %>
<%request.setCharacterEncoding("UTF-8");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    seek






    
    
    
    
    
        
        
        
        
        
        
        

    用户信息
    返回
        <%
            String Age=request.getParameter("userage");
            if(Age!=null&&Age!=""){
                int age=Integer.parseInt(Age);
                ArrayList user= UserDao.seekByuserage(age);
                for(User u:user){
        %>
        
        <%
                }
            }
        %>
    
        
        编号 用户名 密码 性别
            年龄 技能 手机号 管理

            <%=u.getUserid()%>
            <%=u.getUsername()%>
            <%=u.getUserpassword()%>
            <%=u.getUsersex()%>
            <%=u.getUserage()%>
            <%=u.getUserskill()%>
            <%=u.getUserphone()%>
            修改
                删除

编号	用户名	密码	性别	年龄	技能	手机号	管理
<%=u.getUserid()%>	<%=u.getUsername()%>	<%=u.getUserpassword()%>	<%=u.getUsersex()%>	<%=u.getUserage()%>	<%=u.getUserskill()%>	<%=u.getUserphone()%>	修改删除

5.JavaScript 5.1updatenull.js

查询记录后，点击返回链接则清空输入框

function updatenull() {
    var skill=skillform.userskill;
    var name=nameform.username;
    var sex=sexform.usersex;
    var age=ageform.userage;
    skill.value="";
    name.value="";
    sex.value="";
    age.value="";
}

6.CSS 6.1login.css

做出半透明，动态的界面背景


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



section {
    
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}



section .color {
    
    position: absolute;
    
    filter: blur(200px);
}



section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}

section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}

section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}

.box {
    position: relative;
}



.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    
    filter: hue-rotate(calc(var(--x) * 70deg));
    
    animation: animate 10s linear infinite;
    
    animation-delay: calc(var(--x) * -1s);
}



@keyframes animate {
    0%, 100%{
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}

.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}

.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}

.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}

.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}



.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}



.form h2 {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}



.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}

.form h2:hover:before {
    width: 53px;
}

.form .inputBox {
    width: 100%;
    margin-top: 20px;
}



.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form .inputBox input::placeholder {
    color: #fff;
}



.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 100px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}

.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}

.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

7.所需jar 7.1mysql-connector-java-5.1.41-bin

项目还有其他版本，比如使用上JSTL，Servlet，ssm轻量级框架等等。文章仅仅展示了比较简单的一个版本。展示的代码已经是项目所有源代码。本项目根据自己这两个学期所学知识创作，谢谢大家点个赞。

【基于Java+MySQL+JDBC+tomcat+JSP+JavaScript+CSS的信息管理系统】

用户信息

用户信息

用户信息

用户信息

用户信息

Java相关栏目本月热门文章