JavaWeb案例整体分析---》差旅费报销管理信息系统->>登录与注册

合集 - Javaweb(54)

1.2024/10/16 日 日志 --》关于MySQL的中 基础操作的整理以及 DQL的初步学习笔记与整理2024-10-162.2024/10/17日 日志 --》关于MySQL中的 约束、多表查询的初步学习笔记与整理2024-10-173.2024/10/18日 日志 --》关于MySQL中的 事务 以及JDBC的初步学习笔记与整理2024-10-184.2024/10/19日 日志--》关于MySQL中 JDBC的API 详解的整理简述2024-10-195.2024/10/21 日 日志 --》关于Mysql中的数据库连接池 简述笔记整理2024-10-216.2024/10/22日 日志 --》关于Maven的基础学习 笔记整理2024-10-227.2024/10/23日 日志--》关于Maven的基础学习--2 坐标与依赖范围2024-10-238.2024/10/24日 日志 --》关于Mybatis的学习笔记整理 - 环境与性质 以及ResultMap2024-10-249.2024/10/25日 日志 --》关于使用Mybatis进行增删改查 ---1 查询2024-10-2510.2024/10/26 日 使用Mybatic --》关于Mybatis 进行增删改查 ---2 添加、修改与删除2024-10-2611.2024/10/28日 使用Mybatic --》关于Mybatis 的参数传递与注解开发2024-10-2812.2024/10/29 HTML --》关于HTML的快速入门与标签2024-10-2913.2024/10/30 日 日志 --》关于CSS的学习2024-10-3114.2024/11/1日 日志 关于JavaScript简介&引入方式 以及基础语法的学习2024-11-0215.2024/11/4日 日志 关于JavaScript 变量、数据类型、类型转换和流程控制语句以及对象的学习2024-11-0416.2024/11/5日 日志 关于BOM浏览器对象模型和DOM文档对象模型的学习与笔记整理2024-11-0517.2024/11/6日 日志 正则表达式,web与HTTP2024-11-0618.2024/11/7日 日志 Tomcat简介&基本使用2024-11-0719.2024/11/8日 日志 关于Servlet ----（上）2024-11-0820.2024/11/11日 日志 关于Servlet ----HttpServlet（下）2024-11-1121.2024/11/12日 日志 关于Servlet ---- Request(请求)& Response(响应) 的补充2024-11-1222.2024/11/13日 日志 代码优化 以及 JSP 的快速入门、原理、脚本、缺点 和 EL表达式 以及 JSTL标签2024-11-1423.2024/11/14日 日志 关于 MVC 分层开发模式2024-11-1424.2024/11/15日 日志 关于 会话跟踪技术--- Cookie & Session2024-11-1625.2024/11/20日 日志 关于 Filter & Listener2024-11-2126.2024/11/21日 日志 关于AJAX & Axious异步框架 & JSON2024-11-2227.2024/11/27日 日志 关于Vue && Element2024-11-2828.JavaWeb案例整体分析---》差旅费报销管理信息系统->>题目详情2024-12-22

29.JavaWeb案例整体分析---》差旅费报销管理信息系统->>登录与注册2024-12-22

30.JavaWeb案例整体分析---》差旅费报销管理信息系统->>数据库操作和Mybatis配置以及pom.xml2024-12-2231.JavaWeb案例整体分析---》差旅费报销管理信息系统->>出差申请与报销部分2024-12-2232.2024/1/13日 日志 关于Vue && Element 的后续---》综合案例（1）02-1733.2024/1/14日 日志 关于Vue && Element 的后续---》综合案例（2）02-1734.2024/1/16日 日志 关于Vue && Element 的后续---》综合案例（4）02-1735.2024/1/17日 日志 关于Vue && Element 的后续---》综合案例（5）02-1736.2024/1/18日 日志 关于Vue && Element 的后续---》综合案例（6）02-1737.2024/1/19日 日志 关于Vue && Element 的后续---》综合案例（7）02-1738.2024/1/20日 日志 关于Vue && Element 的后续---》综合案例（8.1）02-1739.2024/1/21日 日志 关于Vue && Element 的后续---》综合案例（8.2）02-1740.2024/1/22日 日志 期末考试案例回顾与分析---》综合案例（1）02-1741.2024/1/23日 日志 期末考试案例回顾与分析---》综合案例（2）02-1842.2024/1/24日 日志 期末考试案例回顾与分析---》综合案例（3）02-1843.2024/1/25日 日志 期末考试案例回顾与分析---》综合案例（4）02-1844.2024/1/26日 日志 期末考试案例回顾与分析---》综合案例（5）02-1845.2024/1/27日 日志 期末考试案例回顾与分析---》综合案例（6）02-1846.2024/2/3日 日志 期末考试案例回顾与分析---》综合案例（7）02-1847.2024/2/4日 日志 期末考试案例回顾与分析---》综合案例（8）02-1848.2024/2/5日 日志 期末考试案例回顾与分析---》综合案例（9）02-1849.2024/2/6日 日志 期末考试案例回顾与分析---》综合案例（10）02-1850.2024/2/7日 日志 期末考试案例回顾与分析---》综合案例（汇总）02-1851.2024/2/24日 日志 第一次测试案例分析(1)--题目02-2752.2024/2/25日 日志 第一次测试案例分析(2)--数据库层面02-2753.2024/2/26日 日志 第一次测试案例分析(3)--基础准备02-2754.2024/2/27日 日志 第一次测试案例分析(4)--登录与注册和仓库方面02-27

收起

Mapper与mapper.xml

package com.Moonbeams.mapper;

import com.Moonbeams.pojo.Reimburse;
import com.Moonbeams.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.ResultMap;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface UserMapper {
    /**
     * 根据用户名和密码查询用户对象
     * @param username
     * @param password
     * @return
     */
    @Select("select *from ter_user where username = #{username} and password = #{password}")
    @ResultMap("UserResultMap")
    User select(@Param("username") String username, @Param("password") String password);

    /**
     * 根据用户名查询用户对象
     *
     * @param username
     * @return
     */
    @Select("select *from ter_user where username = #{username}")
    @ResultMap("UserResultMap")
    User selectByUsername(@Param("username") String username);

    /**
     * 添加用户
     * @param user
     */
    @Insert("insert into ter_user values(null,#{username},#{password},#{position},#{department})")
    @ResultMap("UserResultMap")
    void add(User user);

    @ResultMap("ReimburseResultMap")
    List<Reimburse> searchApprovedReimbursements(@Param("name") String name, @Param("department") String department, @Param("totalAmountGreaterThan") Integer totalAmountGreaterThan);


}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.Moonbeams.mapper.UserMapper">
    <resultMap id="UserResultMap" type="user">
        <result column="id" property="id"/>
        <result column="username" property="username"/>
        <result column="password" property="password"/>
        <result column="position" property="position"/>
        <result column="department" property="department"/>
    </resultMap>
</mapper>

PoJo,util，Service,Servlet

    package com.Moonbeams.pojo;

    public class User {

        private Integer id;
        private String username;
        private String password;
        private String position;
        private String department;

        public Integer getId() {
            return id;
        }

        public void setId(Integer 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 String getPosition() {
            return position;
        }

        public void setPosition(String position) {
            this.position = position;
        }

        public String getDepartment() {
            return department;
        }

        public void setDepartment(String department) {
            this.department = department;
        }

        @Override
        public String toString() {
            return "User{" +
                    "id=" + id +
                    ", username='" + username + '\'' +
                    ", password='" + password + '\'' +
                    ", position='" + position + '\'' +
                    ", department='" + department + '\'' +
                    '}';
        }
    }

package com.Moonbeams.util;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.Random;

/**
 * 生成验证码工具类
 */
public class CheckCodeUtil {

    public static final String VERIFY_CODES = "123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    private static Random random = new Random();


    /**
     * 输出随机验证码图片流,并返回验证码值（一般传入输出流，响应response页面端，Web项目用的较多）
     *
     * @param w
     * @param h
     * @param os
     * @param verifySize
     * @return
     * @throws IOException
     */
    public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException {
        String verifyCode = generateVerifyCode(verifySize);
        outputImage(w, h, os, verifyCode);
        return verifyCode;
    }

    /**
     * 使用系统默认字符源生成验证码
     *
     * @param verifySize 验证码长度
     * @return
     */
    public static String generateVerifyCode(int verifySize) {
        return generateVerifyCode(verifySize, VERIFY_CODES);
    }

    /**
     * 使用指定源生成验证码
     *
     * @param verifySize 验证码长度
     * @param sources    验证码字符源
     * @return
     */
    public static String generateVerifyCode(int verifySize, String sources) {
        // 未设定展示源的字码，赋默认值大写字母+数字
        if (sources == null || sources.length() == 0) {
            sources = VERIFY_CODES;
        }
        int codesLen = sources.length();
        Random rand = new Random(System.currentTimeMillis());
        StringBuilder verifyCode = new StringBuilder(verifySize);
        for (int i = 0; i < verifySize; i++) {
            verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1)));
        }
        return verifyCode.toString();
    }

    /**
     * 生成随机验证码文件,并返回验证码值 (生成图片形式，用的较少)
     *
     * @param width 图片宽度
     * @param height 图片高度
     * @param outputFile 输出流
     * @param verifySize 数据长度
     * @return 验证码数据
     * @throws IOException
     */
    public static String outputVerifyImage(int width, int height, File outputFile, int verifySize) throws IOException {
        String verifyCode = generateVerifyCode(verifySize);
        outputImage(width, height, outputFile, verifyCode);
        return verifyCode;
    }



    /**
     * 生成指定验证码图像文件
     *
     * @param w
     * @param h
     * @param outputFile
     * @param code
     * @throws IOException
     */
    public static void outputImage(int w, int h, File outputFile, String code) throws IOException {
        if (outputFile == null) {
            return;
        }
        File dir = outputFile.getParentFile();
        //文件不存在
        if (!dir.exists()) {
            //创建
            dir.mkdirs();
        }
        try {
            outputFile.createNewFile();
            FileOutputStream fos = new FileOutputStream(outputFile);
            outputImage(w, h, fos, code);
            fos.close();
        } catch (IOException e) {
            throw e;
        }
    }

    /**
     * 输出指定验证码图片流
     *
     * @param w
     * @param h
     * @param os
     * @param code
     * @throws IOException
     */
    public static void outputImage(int w, int h, OutputStream os, String code) throws IOException {
        int verifySize = code.length();
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Random rand = new Random();
        Graphics2D g2 = image.createGraphics();
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

        // 创建颜色集合，使用java.awt包下的类
        Color[] colors = new Color[5];
        Color[] colorSpaces = new Color[]{Color.WHITE, Color.CYAN,
                Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE,
                Color.PINK, Color.YELLOW};
        float[] fractions = new float[colors.length];
        for (int i = 0; i < colors.length; i++) {
            colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)];
            fractions[i] = rand.nextFloat();
        }
        Arrays.sort(fractions);
        // 设置边框色
        g2.setColor(Color.GRAY);
        g2.fillRect(0, 0, w, h);

        Color c = getRandColor(200, 250);
        // 设置背景色
        g2.setColor(c);
        g2.fillRect(0, 2, w, h - 4);

        // 绘制干扰线
        Random random = new Random();
        // 设置线条的颜色
        g2.setColor(getRandColor(160, 200));
        for (int i = 0; i < 20; i++) {
            int x = random.nextInt(w - 1);
            int y = random.nextInt(h - 1);
            int xl = random.nextInt(6) + 1;
            int yl = random.nextInt(12) + 1;
            g2.drawLine(x, y, x + xl + 40, y + yl + 20);
        }

        // 添加噪点
        // 噪声率
        float yawpRate = 0.05f;
        int area = (int) (yawpRate * w * h);
        for (int i = 0; i < area; i++) {
            int x = random.nextInt(w);
            int y = random.nextInt(h);
            // 获取随机颜色
            int rgb = getRandomIntColor();
            image.setRGB(x, y, rgb);
        }
        // 添加图片扭曲
        shear(g2, w, h, c);

        g2.setColor(getRandColor(100, 160));
        int fontSize = h - 4;
        Font font = new Font("Algerian", Font.ITALIC, fontSize);
        g2.setFont(font);
        char[] chars = code.toCharArray();
        for (int i = 0; i < verifySize; i++) {
            AffineTransform affine = new AffineTransform();
            affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize / 2, h / 2);
            g2.setTransform(affine);
            g2.drawChars(chars, i, 1, ((w - 10) / verifySize) * i + 5, h / 2 + fontSize / 2 - 10);
        }

        g2.dispose();
        ImageIO.write(image, "jpg", os);
    }

    /**
     * 随机颜色
     *
     * @param fc
     * @param bc
     * @return
     */
    private static Color getRandColor(int fc, int bc) {
        if (fc > 255) {
            fc = 255;
        }
        if (bc > 255) {
            bc = 255;
        }
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }

    private static int getRandomIntColor() {
        int[] rgb = getRandomRgb();
        int color = 0;
        for (int c : rgb) {
            color = color << 8;
            color = color | c;
        }
        return color;
    }

    private static int[] getRandomRgb() {
        int[] rgb = new int[3];
        for (int i = 0; i < 3; i++) {
            rgb[i] = random.nextInt(255);
        }
        return rgb;
    }

    private static void shear(Graphics g, int w1, int h1, Color color) {
        shearX(g, w1, h1, color);
        shearY(g, w1, h1, color);
    }

    private static void shearX(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(2);

        boolean borderGap = true;
        int frames = 1;
        int phase = random.nextInt(2);

        for (int i = 0; i < h1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(0, i, w1, 1, (int) d, 0);
            if (borderGap) {
                g.setColor(color);
                g.drawLine((int) d, i, 0, i);
                g.drawLine((int) d + w1, i, w1, i);
            }
        }

    }

    private static void shearY(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(40) + 10; // 50;

        boolean borderGap = true;
        int frames = 20;
        int phase = 7;
        for (int i = 0; i < w1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(i, 0, 1, h1, 0, (int) d);
            if (borderGap) {
                g.setColor(color);
                g.drawLine(i, (int) d, i, 0);
                g.drawLine(i, (int) d + h1, i, h1);
            }

        }

    }
}

package com.Moonbeams.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils {
    private static SqlSessionFactory sqlSessionFactory;

    static{
        //静态代码块会随着类的加载而自动执行，且只执行一次
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    public static SqlSessionFactory getSqlSessionFactory(){return sqlSessionFactory;}
}

package com.Moonbeams.web;


import com.Moonbeams.pojo.User;
import com.Moonbeams.service.UserService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    private UserService service = new UserService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //获取复选框数据
        String remembe = request.getParameter("remembe");

        //2.调用Service查询
        User user = service.login(username, password);

        //3.判断
        if (user != null) {
            //登录成功，存储用户信息到会话

            //判断用户是否勾选记住我
            if(("1".equals(remembe))) {
                //勾选了，发送cookie

                //1. 创建cookie 对象
                //Cookie cookie = new Cookie("uname",URLEncoder.encode(uname,"UTF-8")); 创建时设置字符集
                Cookie c_username = new Cookie("username", username);
                Cookie c_password = new Cookie("password", password);
                //设置cookie存活时间
                c_username.setMaxAge(60*60*24*7);
                c_password.setMaxAge(60*60*24*7);
                //2. 发送
                response.addCookie(c_username);
                response.addCookie(c_password);
            }

            //将登陆成功后的User对象，存储到session
            HttpSession session = request.getSession();
            session.setAttribute("user", user);

            String contextPath = request.getContextPath();
            if (user.getPosition().equalsIgnoreCase("总经理")) {
                response.sendRedirect(contextPath + "/generalManager.jsp");
            } else if(user.getPosition().equalsIgnoreCase("部门经理")){
                response.sendRedirect(contextPath + "/departmentManager.jsp");
            }else if(user.getPosition().equalsIgnoreCase("财务人员")){
                response.sendRedirect(contextPath + "/financialStaff.jsp");
            }else if(user.getPosition().equalsIgnoreCase("普通职员")){
                response.sendRedirect(contextPath + "/employee.jsp");
            }
        } else{
            //登录失败

            //存储错误信息到request
            request.setAttribute("login_msg", "用户名或密码错误");

            //跳转到login.jsp
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

}

package com.Moonbeams.web;


import com.Moonbeams.pojo.User;
import com.Moonbeams.service.UserService;

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 javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    private UserService service = new UserService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        //1. 获取对应用户名和密码数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String position = request.getParameter("position");
        String department = request.getParameter("department");

        //获取用户输入的验证码
        String checkCode = request.getParameter("checkCode");

        //获取程序生成的验证码，从Session中获取
        HttpSession session = request.getSession();
        String checkCodeGen =(String) session.getAttribute("checkCodeGen");

        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        user.setPosition(position);
        user.setDepartment(department);

        //比对验证码
        if(!checkCodeGen.equalsIgnoreCase(checkCode)){
            request.setAttribute("register_msg","验证码错误");
            request.getRequestDispatcher("/register.jsp").forward(request, response);
            //不允许注册
            return;
        }

        //2. 调用service注册
        boolean flag = service.register(user);
        //判断注册成功与否
        if (flag) {
            //注册成功,跳转到登录页面

            request.setAttribute("register_msg", "注册成功，请登录");
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        }else{
            //注册失败，跳转到注册页面

            request.setAttribute("register_msg", "注册失败，用户名已存在");
            request.getRequestDispatcher("/register.jsp").forward(request, response);
        }


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

package com.Moonbeams.web;


import com.Moonbeams.service.UserService;
import com.Moonbeams.util.CheckCodeUtil;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    private UserService service = new UserService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //生成验证码
        ServletOutputStream os = response.getOutputStream();
        String checkCode = CheckCodeUtil.outputVerifyImage(100,50,os,4);

        //存入session
        HttpSession session = request.getSession();
        session.setAttribute("checkCodeGen",checkCode);<details>
<summary>点击查看代码</summary>

</details>

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

CSS,IMGS,JSP

index.jsp

点击查看代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>出差报销系统</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"> <!-- 可选的样式文件 -->
</head>
<body>
<h1>出差报销系统</h1>
<h2>欢迎使用出差报销系统！^_^</h2>
<nav>
    <ul>
        <li><a href="login.jsp">登录</a></li>
        <li><a href="register.jsp">注册</a></li>
    </ul>
</nav>
</body>
</html>

login.jsp

点击查看代码

<%--
  Created by IntelliJ IDEA.
  User: 20713
  Date: 2024/11/10
  Time: 22:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>login</title>
  <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv" style="height: 350px">
  <form action="loginServlet" id="form">
    <h1 id="loginMsg">登 录</h1>
    <div id="errorMsg">${login_msg} ${register_msg}</div>
    <p>Username:<input id="username" name="username" value= "${cookie.username.value}" type="text"></p>
    <p>Password:<input id="password" name="password" value="${cookie.password.value}" type="password"></p>
    <p>Remember:<input id="remember" name="remember" value="1" type="checkbox"></p>
    <div id="subDiv">
      <input type="submit" class="button" value="login up">
      <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
      <a href="register.jsp">没有账号？</a>
    </div>
  </form>
</div>

</body>
</html>

register.jsp

点击查看代码

<%--
  Created by IntelliJ IDEA.
  User: 20713
  Date: 2024/11/11
  Time: 21:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>欢迎注册</title>
  <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
  <div class="reg-content">
    <h1>欢迎注册</h1>
    <span>已有帐号？</span> <a href="login.jsp">登录</a>
  </div>
  <form id="reg-form" action="registerServlet" method="post">

    <table>
      <tr>
        <td>用户名</td>
        <td class="inputs">
          <input required name="username" type="text" id="username">
          <br>
          <span id="username_err" class="err_msg" >${register_msg}</span>
        </td>

      </tr>

      <tr>
        <td>密码</td>
        <td class="inputs">
          <input required name="password" type="password" id="password">
          <br>
          <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
        </td>
      </tr>

      <tr>
        <td>职位</td>
        <td class="inputs">
          <input required name="position" type="text" id="position">
          <br>
          <span id="position_err" class="err_msg" style="display: none">职务填写有误</span>
        </td>
      </tr>

      <tr>
        <td>部门</td>
        <td class="inputs">
          <input required name="department" type="text" id="department">
          <br>
          <span id="department_err" class="err_msg" style="display: none">职务填写有误</span>
        </td>
      </tr>

      <tr>
        <td>验证码</td>
        <td class="inputs">
          <input name="checkCode" type="text" id="checkCode">
          <img id ="checkCodeImg" src="/travelAllowance/checkCodeServlet">
          <a href="#" id="changeImg">看不清？</a>
        </td>
      </tr>

    </table>

    <div class="buttons">
      <input value="注 册" type="submit" id="reg_btn">
    </div>
    <br class="clear">
  </form>

</div>
<script>
    document.getElementById("changeImg").onclick = function (){
      document.getElementById("checkCodeImg").src = "/travelAllowance/checkCodeServlet?"+new Date().getMilliseconds();
    }
    document.getElementById("checkCodeImg").onclick = function (){
      document.getElementById("checkCodeImg").src = "/travelAllowance/checkCodeServlet?"+new Date().getMilliseconds();
    }


</script>

</body>
</html>

logout.jsp

点击查看代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    session.invalidate(); // 清除 session
    response.sendRedirect("login.jsp"); // 重定向到登录页面
%>


imgs
Desert1.jpg

flower.jpg

reg_bg_min.jpg

a.jpg

login.css

点击查看代码

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url("../imgs/flower.png")no-repeat 0px 0px;
    background-repeat: no-repeat;
    background-attachment: fixed;

    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#loginDiv {
    width: 37%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 380px;
    background-color: rgba(75, 81, 95, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 5px;
}

#name_trip {
    margin-left: 50px;
    color: red;
}

p {
    margin-top: 30px;
    margin-left: 20px;
    color: azure;
}


#remember{
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    padding-left: 10px;
    height: 20px;
    width: 20px;
}
#username{
    width: 200px;
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;
}
#password{
    width: 202px;
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;
}
.button {
    border-color: cornsilk;
    background-color: rgba(100, 149, 237, .7);
    color: aliceblue;
    border-style: hidden;
    border-radius: 5px;
    width: 100px;
    height: 31px;
    font-size: 16px;
}

#subDiv {
    text-align: center;
    margin-top: 30px;
}
#loginMsg{
    text-align: center;
    color: aliceblue;
}
#errorMsg{
    text-align: center;
    color:red;
}

register.css

点击查看代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 添加此行以更好地处理盒模型 */
}

body {
    background: url("../imgs/flower.png")no-repeat 0px 0px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    font-family: Arial, sans-serif; /* 添加字体 */
}

.form-div {
    background-color: rgba(255, 255, 255, 0.9); /* 增加背景的不透明度 */
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin: 150px auto; /* 使用 auto 居中 */
    padding: 30px 20px; /* 为顶部和底部增加内边距 */
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}

h1 {
    margin-bottom: 20px; /* 为标题增加下边距 */
    color: #333; /* 增加标题颜色 */
}

table {
    width: 100%; /* 表格宽度为100% */
    margin: 20px 0; /* 为表格增加上下边距 */
}

td {
    padding: 15px; /* 增加单元格内边距 */
}

.inputs {
    vertical-align: top;
}

input[type="text"], input[type="password"], input[type="email"] {
    width: calc(100% - 22px); /* 计算宽度以适应内边距 */
    padding: 10px;
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    border: 1px solid #D4D4D4;
    color: #333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 10px 15px;
    background-color: #3c6db0;
    border-radius: 5px;
    border: none;
    color: #FFF;
    cursor: pointer; /* 更改鼠标指针 */
    transition: background-color 0.3s; /* 添加过渡效果 */
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

.err_msg {
    color: red;
    margin-top: 5px; /* 增加顶部间距 */
}

.footer {
    color: rgba(64, 64, 64, 1.00);
    font-size: 12px;
    margin-top: 30px;
}

.buttons {
    text-align: right; /* 右对齐按钮 */
}

#checkCodeImg {
    vertical-align: middle; /* 垂直对齐 */
    cursor: pointer;
    margin-left: 10px; /* 为验证码图片和输入框之间添加间距 */
}

#changeImg {
    color: aqua;
    cursor: pointer; /* 更改鼠标指针 */
    margin-left: 5px; /* 为更换验证码链接和验证码图片之间添加间距 */
    vertical-align: middle; /* 确保更换验证码链接在垂直方向上居中 */
}
table {
    width: 100%;
    margin: 20px 0;
    border-spacing: 0; /* 去除表格单元格之间的间隙 */
}
td:first-child {
    width: 90px; /* 为标签列设置固定宽度 */
    text-align: right; /* 标签右对齐 */
    padding-right: 10px; /* 为标签和输入框之间添加间距 */
}
tr {
    display: flex;
    justify-content: space-between; /* 使td标签分散对齐 */
    align-items: center; /* 使td标签在交叉轴上居中对齐 */
}
.inputs {
    flex-grow: 1; /* 使输入框区域占据剩余空间 */
    text-align: left; /* 输入框左对齐 */
}

styles.css

点击查看代码

/* Reset some basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
    text-align: center;
    background-image: url("../imgs/flower.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Links styles */
a {
    text-decoration: none;
    color: #3c6db0;
    transition: color 0.3s;
}

a:hover {
    color: #5a88c8;
}

/* Headings */
h1 {
    margin-bottom: 20px;
}

/* Table styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

/* Form styles */
form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: left;
}

input[type="text"], input[type="password"], input[type="email"], input[type="date"], select, textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="submit"], input[type="button"] {
    background-color: #5cb85c;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover, input[type="button"]:hover {
    background-color: #4cae4c;
}

/* Error message styles */
.err_msg {
    color: red;
    padding-right: 170px;
}

/* Responsive design */
@media (max-width: 600px) {
    form {
        width: auto;
    }
}
/* Navigation bar styles */
nav {
    background: none; /* 移除背景颜色 */
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    border-radius: 5px; /* 圆角边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 轻微的阴影 */
}

nav ul li {
    display: inline-block; /* 使用inline-block以保持布局 */
    margin: 0 5px; /* 为按钮添加间隔 */
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s, transform 0.3s;
    display: inline-block;
    background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

nav ul li a:hover {
    background: rgba(0, 0, 0, 0.7); /* 鼠标悬停时更深的背景 */
    transform: translateY(-2px); /* 鼠标悬停时按钮上移 */
}

nav ul li a:active {
    background: rgba(0, 0, 0, 0.9); /* 点击时更深的背景 */
    transform: translateY(2px); /* 点击时按钮下移 */
}
/* 透明框框的基本样式 */
.transparent-box {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    border: 2px solid transparent; /* 透明边框 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 轻微的阴影，增加立体感 */
    padding: 20px; /* 内边距 */
    margin: 20px auto; /* 外边距，自动居中 */
    max-width: 600px; /* 最大宽度 */
    transition: box-shadow 0.3s; /* 阴影过渡效果 */
}

/* 鼠标悬停时的效果 */
.transparent-box:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 鼠标悬停时阴影更明显 */
}

/* 输入框和按钮的样式 */
.transparent-box input[type="text"],
.transparent-box input[type="password"],
.transparent-box input[type="email"],
.transparent-box input[type="date"],
.transparent-box select,
.transparent-box textarea,
.transparent-box input[type="submit"] {
    width: 100%; /* 宽度100% */
    padding: 10px; /* 内边距 */
    margin-top: 5px; /* 上边距 */
    border: 1px solid #ccc; /* 边框颜色 */
    border-radius: 5px; /* 圆角边框 */
    box-sizing: border-box; /* 边框盒模型 */
}

/* 提交按钮的样式 */
.transparent-box input[type="submit"] {
    background-color: #5cb85c; /* 背景颜色 */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标手型 */
    transition: background-color 0.3s; /* 背景色过渡 */
}

.transparent-box input[type="submit"]:hover {
    background-color: #4cae4c; /* 鼠标悬停时背景色变深 */
}
.row-unapproved {
    background-color: #ffffcc; /* 未审批行的背景色 */
}

.row-approved {
    background-color: #ccffcc; /* 已审批行的背景色 */
}