图书管理系统【Servlet+HTML综合应用】

news/2025/2/19 8:26:04/

在这里插入图片描述

✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：Java案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：图书管理系统【Servlet+HTML综合应用】
更多内容点击👇
      ValidateCode验证码的使用详解（初学看完都会用）

【本文目录】

    • ⛳️ 项目需求
    • ⛳️ 覆盖知识
    • ⛳️ 开发思路
    • ⛳️ 开发步骤
      • 【1】项目配置
      • 【2】JDBC+Apache方法操作数据库
      • 【3】HTML+CSS+JS 实现页面编写
        • 1、用户注册
        • 2、用户登录
    • ⛳️ 项目源码分享

在这里插入图片描述

⛳️ 项目需求

  • 首先输入用户名和密码登陆系统，如若登录错误，调到注册界面注册用户，再跳转到登录界面去登陆，登陆成功后显示所有图书信息。
  • 登陆成功后，显示数据库存在的所有图书信息，已经添加图书，删除图书和修改图书的相关操作按钮。
  • 添加图书：进入增加图书的界面，会跳转到新的界面，添加图书界面，此界面可以添加新的图书，填写完毕后，提交数据，则跳转到显示所有图书的界面中去。
  • 修改图书：跟添加图书的逻辑差不多，唯一不同的是，修改图书会把你当下选择的图书信息带入到新跳转的修改图书的界面中去，去修改部分数据后提交数据，然后返回到显示所有图书的界面中。
  • 删除图书：点击删除按钮，会提示是否确定删除，点击确定则删除本界面中的当前数据，并从所有数据中删除这一条数据。

⛳️ 覆盖知识

  • java部分：程序基本概念、数据类型、流程控制、顺序、选择 、循环、跳转语句、变量、类、方法、实用类、JDBC、三层架构Druid连接池、Apache的DBUtils使用、Servlet等。
  • 数据库部分：创建表、增删改查语句的书写等。
  • 前端部分：HTML、CSS、jQuery、JavaScript等。

⛳️ 开发思路

  • 明确需求
  • 编码顺序
    • 添加项目需要使用的各种jar包
    • HTML 页面表单的编写
    • Apache方法的DBUtils编写
    • 实体类的数据初始化（添加私有变量、有参/无参构造、get/set方法、toString() 方法重写）
    • 完成 用户和图书 的数据表创建
    • 完成 用户和图书 三层架构的搭建（dao层接口和实现类的编写、service层接口和实现类的编写、view层的Servlet类的编写）
  • 测试

⛳️ 开发步骤

【1】项目配置

1、用IDEA创建项目，File—>New—>Project，选择默认的new project即可，创建一个项目名称，点击Create完成创建。

在这里插入图片描述

2、然后鼠标右击项目Add Framework support，选择Web Application来添加Web框架；

在这里插入图片描述

3、在web目录下的WEB-INF上右单击，新建一个Directory目录，命名为lib；

在这里插入图片描述
然后把项目需要的jar包放在lib中：
在这里插入图片描述
IDEA创建Java web项目的详细步骤可以参考我的一篇博文：IDEA创建Java Web项目

【2】JDBC+Apache方法操作数据库

1、创建database.properties文件，用来配置注册驱动和数据库连接对象的相关数据。

driver=com.mysql.jdbc.Driverurl=jdbc\:mysql\://localhost\:3306/idea_databaseusername=rootpassword=huanghuanginitialSize=10maxActive=30maxIdle=5maxWait=3000

2、创建数据表：

user 表

CREATE TABLE `user` (`uname` varchar(20) NOT NULL,`upassword` varchar(20) NOT NULL
)

book 表

CREATE DATABASE IF NOT EXISTS `java221804`;
CREATE TABLE IF NOT EXISTS book(`name` VARCHAR(20),`state` INT,`date` INT,`count` INT
);

3、创建工具目录，存放工具类

DBUtils.java

package utils;import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;import javax.sql.DataSource;import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;public class DBUtils {private static DruidDataSource druidDataSource;static {Properties properties = new Properties();try {InputStream is = DBUtils.class.getResourceAsStream("/database.properties");properties.load(is);druidDataSource = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);} catch (IOException e) {e.printStackTrace();} catch (Exception e) {e.printStackTrace();}}public static DataSource getDataSource(){return druidDataSource;}}

4、创建实体类

User类

package cn.lqgx.entity;public class User {private String uname;private String upassword;public User() {}public User(String uname, String upassword) {this.uname = uname;this.upassword = upassword;}public String getUname() {return uname;}public void setUname(String uname) {this.uname = uname;}public String getUpassword() {return upassword;}public void setUpassword(String upassword) {this.upassword = upassword;}@Overridepublic String toString() {return "User{" + "uname='" + uname + '\'' + ", upassword='" + upassword + '\'' + '}';}
}

Book类

package entity;import java.util.Date;public class Student {private int sid;private String sname;private int sage;private String ssex;private String saddress;private String sphoneNum;public Student() {super();}public Student(int sid, String sname, int sage, String ssex, String saddress, String sphoneNum) {this.sid = sid;this.sname = sname;this.sage = sage;this.ssex = ssex;this.saddress = saddress;this.sphoneNum = sphoneNum;}public int getSid() {return sid;}public void setSid(int sid) {this.sid = sid;}public String getSname() {return sname;}public void setSname(String sname) {this.sname = sname;}public int getSage() {return sage;}public void setSage(int sage) {this.sage = sage;}public String getSsex() {return ssex;}public void setSsex(String ssex) {this.ssex = ssex;}public String getSaddress() {return saddress;}public void setSaddress(String saddress) {this.saddress = saddress;}public String getSphoneNum() {return sphoneNum;}public void setSphoneNum(String sphoneNum) {this.sphoneNum = sphoneNum;}@Overridepublic String toString() {return "Student{" +"sid=" + sid +", sname='" + sname + '\'' +", sage=" + sage +", ssex='" + ssex + '\'' +", saddress='" + saddress + '\'' +", sphoneNum='" + sphoneNum + '\'' +'}';}
}

5、创建数据访问层DAO层的接口

UserDao接口

package cn.lqgx.dao;import cn.lqgx.entity.User;import java.util.List;public interface UserDao {//增int insert(User user);//删int delete(User user);//改int update(User user);//查一个User selectOne(User user);//查全部List<User> selectAll();}

BookDao接口

package cn.lqgx.dao;import cn.lqgx.entity.Book;import java.util.List;public interface BookDao {//增int insert(Book book);//删int delete(int bid);//改int update(Book book);//查一个Book selectById(int bid);Book selectByIsbn(String isbn);//查全部List<Book> selectAll();
}

6、创建数据访问层DAO层接口的实现类

UserDaoImpl实现类

package cn.lqgx.dao.Impl;import cn.lqgx.dao.UserDao;
import cn.lqgx.entity.User;
import cn.lqgx.utils.DBUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;import java.sql.SQLException;
import java.util.List;public class UserDaoImpl implements UserDao {QueryRunner queryRunner=new QueryRunner(DBUtils.getDataSource());@Overridepublic int insert(User user) {String sql="INSERT INTO `user`(`uname`,`upassword`) VALUES(?,?);";Object[] args={user.getUname(),user.getUpassword()};try {return queryRunner.update(sql,args);} catch (SQLException e) {e.printStackTrace();}return 0;}@Overridepublic int delete(User user) {String sql = "delete from user where uname=? and upassword=?;";Object[] args={user.getUname(),user.getUpassword()};try {return queryRunner.update(sql, args);} catch (SQLException e) {e.printStackTrace();}return 0;}@Overridepublic int update(User user) {String sql="update `user` set `upassword`=? where uname=?;";Object[] args={user.getUpassword(),user.getUname()};try {return queryRunner.update(sql,args);} catch (SQLException e) {e.printStackTrace();}return 0;}@Overridepublic User selectOne(User user) {String sql = "select * from user where uname=? and upassword=?;";Object[] args={user.getUname(),user.getUpassword()};try {return queryRunner.query(sql, new BeanHandler<User>(User.class), args);} catch (SQLException e) {e.printStackTrace();}return null;}@Overridepublic List<User> selectAll() {String sql = "select * from user;";try {return queryRunner.query(sql, new BeanListHandler<User>(User.class));} catch (SQLException e) {e.printStackTrace();}return null;}
}

BookDaoImpl实现类

package cn.lqgx.dao.Impl;import cn.lqgx.dao.BookDao;
import cn.lqgx.entity.Book;
import cn.lqgx.utils.DBUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;import java.sql.SQLException;
import java.util.List;public class BookDaoImpl implements BookDao {QueryRunner queryRunner = new QueryRunner(DBUtils.getDataSource());@Overridepublic int insert(Book book) {String sql = "INSERT INTO `book`(`isbn`,`name`,`author`,`press`,`price`,`classification`) VALUES(?,?,?,?,?,?);";Object[] args = {book.getIsbn(), book.getName(), book.getAuthor(),book.getPress(), book.getPrice(), book.getClassification()};try {return queryRunner.update(sql, args);} catch (SQLException e) {e.printStackTrace();}return 0;}@Overridepublic int delete(int bid) {String sql = "delete from book where bid=?;";try {return queryRunner.update(sql, bid);} catch (SQLException e) {e.printStackTrace();}return 0;}@Overridepublic int update(Book book) {String sql = "update `book` set `isbn`=?,`name`=?,`author`=?,`press`=?,`price`=?,`classification`=? where bid=?;";Object[] args = {book.getIsbn(), book.getName(), book.getAuthor(),book.getPress(), book.getPrice(), book.getClassification(), book.getBid()};try {return queryRunner.update(sql, args);} catch (SQLException e) {e.printStackTrace();}return 0;}@Overridepublic Book selectById(int bid) {String sql = "select * from book where bid=?;";try {return queryRunner.query(sql, new BeanHandler<Book>(Book.class), bid);} catch (SQLException e) {e.printStackTrace();}return null;}@Overridepublic Book selectByIsbn(String isbn) {String sql = "select * from book where isbn=?;";try {return queryRunner.query(sql, new BeanHandler<Book>(Book.class), isbn);} catch (SQLException e) {e.printStackTrace();}return null;}@Overridepublic List<Book> selectAll() {String sql = "select * from book;";try {return queryRunner.query(sql, new BeanListHandler<Book>(Book.class));} catch (SQLException e) {e.printStackTrace();}return null;}
}

7、创建服务层Service层的接口

UserService接口

package cn.lqgx.service;import cn.lqgx.entity.User;import java.util.List;public interface UserService {//增int addPUser(User user);//删int delPUser(User user);//改int updatePUser(User user);//查一个User selectPUser(User user);//查全部List<User> selectAllPUsers();}

BookService接口

package cn.lqgx.service;import cn.lqgx.entity.Book;import java.util.List;public interface BookService {//增int insertBook(Book book);//删int deleteBook(int bid);//改int updateBook(Book book);//查一个Book selectBookById(int bid);Book selectBookByIsbn(String isbn);//查全部List<Book> selectAllBooks();
}

8、创建服务层Service层接口的实现类

UserServiceImpl实现类

package cn.lqgx.service.Impl;import cn.lqgx.dao.Impl.UserDaoImpl;
import cn.lqgx.dao.UserDao;
import cn.lqgx.entity.User;
import cn.lqgx.service.UserService;import java.util.List;public class UserServiceImpl implements UserService {UserDao pUserDao=new UserDaoImpl();@Overridepublic int addPUser(User user) {return pUserDao.insert(user);}@Overridepublic int delPUser(User user) {return pUserDao.delete(user);}@Overridepublic int updatePUser(User user) {return pUserDao.update(user);}@Overridepublic User selectPUser(User user) {return pUserDao.selectOne(user);}@Overridepublic List<User> selectAllPUsers() {return pUserDao.selectAll();}
}

BookServiceImpl实现类

package cn.lqgx.service.Impl;import cn.lqgx.dao.BookDao;
import cn.lqgx.dao.Impl.BookDaoImpl;
import cn.lqgx.entity.Book;
import cn.lqgx.service.BookService;import java.util.List;public class BookServiceImpl implements BookService {BookDao bookDao=new BookDaoImpl();@Overridepublic int insertBook(Book book) {return bookDao.insert(book);}@Overridepublic int deleteBook(int bid) {return bookDao.delete(bid);}@Overridepublic int updateBook(Book book) {return bookDao.update(book);}@Overridepublic Book selectBookById(int bid) {return bookDao.selectById(bid);}@Overridepublic Book selectBookByIsbn(String isbn) {return bookDao.selectByIsbn(isbn);}@Overridepublic List<Book> selectAllBooks() {return bookDao.selectAll();}
}

9、视图层的测试类

1）ServletLogin用户登录类

package cn.lqgx.Servlet;import cn.lqgx.entity.User;
import cn.lqgx.service.Impl.UserServiceImpl;
import cn.lqgx.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 java.io.IOException;
import java.io.PrintWriter;@WebServlet(name = "ServletLogin", value = "/ServletLogin")
public class ServletLogin extends HttpServlet {UserService pUserService=new UserServiceImpl();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//通过response输出在控制台PrintWriter printWriter  =response.getWriter();String pUserName= request.getParameter("pUserName");String pUserPassword= request.getParameter("pUserPassword");User pUserNew=new User(pUserName,pUserPassword);User pUser=pUserService.selectPUser(pUserNew);if(pUser!=null){response.sendRedirect("ServletShow");}else{
//            printWriter.println("<h2>姓名或者学号错误，无法登录</h2>");response.sendRedirect("/Books/userRegister.html");}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

运行效果：

在这里插入图片描述

2）ServletRegister用户注册类

package cn.lqgx.Servlet;import cn.lqgx.entity.User;
import cn.lqgx.service.Impl.UserServiceImpl;
import cn.lqgx.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 java.io.IOException;
import java.io.PrintWriter;@WebServlet(name = "ServletRegister", value = "/ServletRegister")
public class ServletRegister extends HttpServlet {UserService pUserService=new UserServiceImpl();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//通过response输出在控制台PrintWriter printWriter  =response.getWriter();String pUserName= request.getParameter("pUserName");String pUserPassword= request.getParameter("pUserPassword");User pUserNew=new User(pUserName,pUserPassword);User pUser=pUserService.selectPUser(pUserNew);if(pUser==null){int num=pUserService.addPUser(pUserNew);if(num>0){response.sendRedirect("/Books/userLogin.html");}}else{}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

运行效果：

在这里插入图片描述

3）登陆成功后跳转到ServletShow界面

package cn.lqgx.Servlet;import cn.lqgx.entity.Book;
import cn.lqgx.service.BookService;
import cn.lqgx.service.Impl.BookServiceImpl;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(name = "ServletShow", value = "/ServletShow")
public class ServletShow extends HttpServlet {BookService bookService=new BookServiceImpl();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {List<Book> bookList = bookService.selectAllBooks();request.setAttribute("allInfos",bookList);request.getRequestDispatcher("/ServletShowAll").forward(request,response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

运行效果：
在这里插入图片描述

4）删除图书信息的测试类

package cn.lqgx.Servlet;import cn.lqgx.service.BookService;
import cn.lqgx.service.Impl.BookServiceImpl;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.io.PrintWriter;@WebServlet(name = "ServletDel", value = "/ServletDel")
public class ServletDel extends HttpServlet {BookService bookService=new BookServiceImpl();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//通过response输出在控制台PrintWriter printWriter  =response.getWriter();int bid= Integer.parseInt(request.getParameter("bid"));//删除int num =bookService.deleteBook(bid);if(num>0){//重新显示所有信息
//            ShowAll.ShowAllEmployee(request, response);response.sendRedirect("ServletShow");}else {
//            printWriter.println("<h1>删除失败！</h1>");}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

运行效果：
在这里插入图片描述

5）修改图书信息的测试类

package cn.lqgx.Servlet;import cn.lqgx.entity.Book;
import cn.lqgx.service.BookService;
import cn.lqgx.service.Impl.BookServiceImpl;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;@WebServlet(name = "ServletUpdate", value = "/ServletUpdate")
public class ServletUpdate extends HttpServlet {BookService bookService=new BookServiceImpl();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {int bid= Integer.parseInt(request.getParameter("bid"));Book book =bookService.selectBookById(bid);request.setAttribute("product",book);request.getRequestDispatcher("/ServletUpdateHtml").forward(request,response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

package cn.lqgx.Servlet;import cn.lqgx.entity.Book;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.io.PrintWriter;@WebServlet(name = "ServletUpdateHtml", value = "/ServletUpdateHtml")
public class ServletUpdateHtml extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");Book book=(Book)request.getAttribute("product");//通过response输出在控制台PrintWriter printWriter  =response.getWriter();printWriter.println("<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>商品修改</title>");printWriter.println("<link rel=\"stylesheet\"href=\"css/insert.css\">");printWriter.println("</head>");printWriter.println("<body><div><h2>商品修改</h2>");printWriter.println("<form action='ServletUpdateTrue' method='post'>");printWriter.println("<p>图书编号：<input type=\"text\" name=\"bid\"  value='"+book.getBid()+"'/></p>");printWriter.println("<p>国际标准书号：<input type=\"text\" name=\"isbn\" value='"+book.getIsbn()+"'/></p>");printWriter.println("<p>书名：<input type=\"text\" name=\"name\" value='"+book.getName()+"'/></p>");printWriter.println("<p>作者：<input type=\"text\" name=\"author\" value='"+book.getAuthor()+"'/></p>");printWriter.println("<p>出版社：<input type=\"text\" name=\"press\" value='"+book.getPress()+"'/></p>");printWriter.println("<p>价格：<input type=\"text\" name=\"price\" value='"+book.getPrice()+"'/></p>");printWriter.println("<p>分类：<input type=\"text\" name=\"classification\" value='"+book.getClassification()+"'/></p>");printWriter.println("<p class=\"pBtn\"><input class=\"inputBtn\" type=\"submit\" value=\"确 定\"/>" +"<a href='/Books/ServletShow'>返 回</a></p>");printWriter.println("</form>");printWriter.println("</div></body></html>");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

运行效果
在这里插入图片描述

6）增加学生的测试类

package cn.lqgx.Servlet;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;@WebServlet(name = "ServletInsert", value = "/ServletInsert")
public class
ServletInsert extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.sendRedirect("insert.html");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}
package cn.lqgx.Servlet;import cn.lqgx.entity.Book;
import cn.lqgx.service.BookService;
import cn.lqgx.service.Impl.BookServiceImpl;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;@WebServlet(name = "ServletInsertTrue", value = "/ServletInsertTrue")
public class ServletInsertTrue extends HttpServlet {BookService bookService=new BookServiceImpl();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//通过response输出在控制台String isbn= request.getParameter("isbn");String name= request.getParameter("name");String author= request.getParameter("author");String press= request.getParameter("press");double price= Double.parseDouble(request.getParameter("price"));String classification= request.getParameter("classification");Book book=bookService.selectBookByIsbn(isbn);
//        System.out.println(product);if(book==null) {Book bookNew=new Book(isbn,name,author,press,price,classification);//先查询要添加的数据是否存在数据库中int num =bookService.insertBook(bookNew);
//            System.out.println(productNew+""+num);if(num>0){//重新显示所有信息response.sendRedirect("ServletShow");}else {
//            printWriter.println("<h1>修改失败！</h1>");}}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

运行效果：

在这里插入图片描述

【3】HTML+CSS+JS 实现页面编写

  对应java中操作图书及用户信息的各个测试类中，我们在各个类中写了@WebServlet 注解的形式，将Servlet测试类与HTML页面实了现数据的交互。

1、用户注册

1）新用户注册页面HTML编写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册界面</title><link rel="stylesheet" href="css/login.css"><script src="js/jQuery-3.6.1.js"></script><script src="js/login.js"></script>
</head>
<body>
<div><h2>欢迎注册</h2><form action="ServletRegister" method="post"><p>用户名：<input type="text" name="pUserName"/><span></span></p><p>密 码：<input type="password" name="pUserPassword"/><span></span></p><p><input class="btnInput" type="submit" value="确定注册"/></p></form>
</div>
</body>
</html>

2）新用户注册的CSS样式

body{background-image: url("../img/2.gif");/*background-repeat: round;*/background-size: cover;
}
div{/*border: 1px solid #F00;*/border-radius: 50px;width: 500px;margin: 50px auto;padding: 20px;background-image: url("../img/3.gif");background-repeat: round;color: yellow;
}
form{margin-left: 50px;
}
input{width: 120px;border-color: #ccc;outline: none;
}
.btnInput{margin-left: 42%;margin-bottom: -20px;padding: 3px;width: 100px;background: rgba(0,0,255,30%);color: yellow;font-weight: bold;
}
span{margin-left: 10px;color: #ccc;font-size: 15px;color: rgba(173,255,47,40%);
}

3）新用户注册的JS文件

  从下图结构中可知，需要添加一个jQuery，我这边网上下载的jQuery-3.6.1.js，添加到js目录中，然后创建一个newstu.js文件。

在这里插入图片描述

  newstu.js文件

$(function() {//姓名框获得焦点，给出提示，中文组成，长度为2-4位$('input').eq(0).focus(function() {//给其后面的span标签插入账号的提示信息$('span').eq(0).text('中文组成，长度为2-4位')$('input').eq(0).css('border-color', '#00f');$('span').eq(0).css('color', '#ccc');});//姓名框失去焦点$('input').eq(0).blur(function() {$('input').eq(0).css('border-color', '#CCC');//定义姓名内容的正则表达式var patter0 = /[\u4e00-\u9fa5]/g;//获取你在姓名框中输入的内容是否为空var result2 = $('input').eq(0).val();//对内容进行非空判断if (result2.length == 0) {$('span').eq(0).text('姓名不能为空');$('span').eq(0).css('color', '#f00');} else if (result2.length < 2 || result2.length > 4) {$('span').eq(0).text('姓名长度为2-4位');$('span').eq(0).css('color', '#f00');} else if (!patter0.test(result2)) { //当你输入的内容是非法字符的时候，给出内容组成不合法提示$('span').eq(0).text('姓名只能由中文组成');$('span').eq(0).css('color', '#f00');} else {show(0);}});//给密码标签注册获得焦点事件$('input').eq(1).focus(function() {//给其后面的span标签插入学号的提示信息$('span').eq(1).text('密码由数字组成，长度6位')$('input').eq(1).css('border-color', '#00f');$('span').eq(1).css('color', '#ccc');});//给密码标签注册失去焦点事件$('input').eq(1).blur(function() {$('input').eq(1).css('border-color', '#CCC');//定义密码内容的正则表达式var patter = /[^0-9]/g;//获取你在密码框中输入的内容是否为空var result1 = $('input').eq(1).val();//对密码内容进行非空判断if (result1.length == 0) {$('span').eq(1).text('密码不能为空');$('span').eq(1).css('color', '#f00');} else if (result1.length !=6) {$('span').eq(1).text('密码长度为6位');$('span').eq(1).css('color', '#f00');} else if (patter.test(result1)) { //当你输入的密码内容是非法字符的时候，给出内容组成不合法提示$('span').eq(1).text('密码只能由数字组成');$('span').eq(1).css('color', '#f00');} else {show(1);}});//正确显示样式方法function show(num) {$('span').eq(num).text('✔');$('span').eq(num).css('color', '#5FDDA4');};
});

2、用户登录

1）用户登录页面HTML编写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆界面</title><link rel="stylesheet" href="css/login.css"><script src="js/jQuery-3.6.1.js"></script><script src="js/login.js"></script>
</head>
<body>
<div><h2>欢迎登陆</h2><form action="ServletLogin" method="post"><p>用户名：<input type="text" name="pUserName"/></p><p>密 码：<input type="password" name="pUserPassword"/></p><p><input class="btnInput" type="submit" value="登 陆"/></p></form>
</div>
</body>
</html>

2）用户登录页面CSS编写

body{background-image: url("../img/2.gif");/*background-repeat: round;*/background-size: cover;
}
div{/*border: 1px solid #F00;*/border-radius: 50px;width: 500px;margin: 50px auto;padding: 20px;background-image: url("../img/3.gif");background-repeat: round;color: yellow;
}
form{margin-left: 50px;
}
input{width: 120px;border-color: #ccc;outline: none;
}
.btnInput{margin-left: 42%;margin-bottom: -20px;padding: 3px;width: 100px;background: rgba(0,0,255,30%);color: yellow;font-weight: bold;
}
span{margin-left: 10px;color: #ccc;font-size: 15px;color: rgba(173,255,47,40%);
}

3）用户登录页面JS编写和注册的一样

⛳️ 项目源码分享

链接：https://download.csdn.net/download/hh867308122/87338282

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。

在这里插入图片描述


http://www.ppmy.cn/news/5993.html

相关文章

RabbitMQ如何确保消息发送和消息接收

RabbitMQ如何确保消息发送和消息接收

RabbitMQ如何确保消息发送和消息接收: 消息发送确认&#xff1a; 1.ConfirmCallback方法 ConfirmCallback 是一个回调接口&#xff0c;消息发送到Broker后触发回调&#xff0c;确认消息是否到达Broker服务器&#xff0c;也就是只确认是否正确到达Exchange中 2.ReturnCallback…
阅读更多...
【设计模式】我终于读懂了装饰者模式。。。

【设计模式】我终于读懂了装饰者模式。。。

文章目录&#x1f451;星巴克咖啡订单项目&#xff08;咖啡馆&#xff09;&#x1f452;装饰者模式定义&#x1f45e; 装饰者模式解决星巴克咖啡订单&#x1f302;装饰者模式下的订单&#xff1a;2 份巧克力一份牛奶的 LongBlack&#x1f4bc;下面我们跟着代码debug下去看一下&…
阅读更多...
2022年全国职业院校技能大赛中职组网络安全竞赛试题B模块 ——wirehark数据分析与取证hack.pcapng（解析教程）

2022年全国职业院校技能大赛中职组网络安全竞赛试题B模块 ——wirehark数据分析与取证hack.pcapng（解析教程）

2022年全国职业院校技能大赛中职组网络安全竞赛试题B模块 wirehark数据分析与取证hack.pcapng（解析教程） wiresharek Wireshark（前称Ethereal）是一个网络封包分析软件。网络封包分析软件的功能是检索取网络封包，并同时显示出最详细的网络封包数据。Wireshark使用WinPCAP作…
阅读更多...
【JavaEE】【Servlet API详解】重点！！！

【JavaEE】【Servlet API详解】重点！！！

努力经营当下&#xff0c;直至未来明朗&#xff01; 文章目录【Servlet API概述】【HttpServlet】【HttpServletRequest】【HttpServletResponse】写例子&#xff1a;表白墙表白墙参考代码小结坚持一定很酷&#xff01; 【Servlet API概述】 API其实就是一组类/方法Servlet提…
阅读更多...
移动WEB开发之响应式布局--响应式开发

移动WEB开发之响应式布局--响应式开发

响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置&#xff0c;从而适配不同设备的目的。 响应式布局容器 响应式需要一个父级做为布局容器&#xff0c;来配合子级元素来实现变化效果。 原理就是在不同屏幕下&#xff0c;通过媒体查询来改变这个布局…
阅读更多...
【深入浅出Spring原理及实战】「开发实战系列」SpringSecurity技术实战之通过注解表达式控制方法权限

【深入浅出Spring原理及实战】「开发实战系列」SpringSecurity技术实战之通过注解表达式控制方法权限

Spring Security权限控制机制 Spring Security中可以通过表达式控制方法权限&#xff0c;其中有四个支持使用表达式的注解&#xff0c;分别是PreAuthorize、PostAuthorize、PreFilter和PostFilter。其中前两者可以用来在方法调用前或者调用后进行权限检查&#xff0c;后两者可…
阅读更多...
发现一只常量

发现一只常量

啊&#xff0c;我又来了&#xff01; 我决定讲vbs&#xff08;yyds&#xff01;&#xff09; 往期回顾&#xff08;什么嘛&#xff0c;就一期&#xff09; 关于如何创造VBS编程环境 目录 一、哎&#xff0c;常量是什么啊&#xff1f; 1. 自然常量 2、自定义常量 二、好像没有二…
阅读更多...
想成为一名黑客怎么办？

想成为一名黑客怎么办？

想要成为一名黑客&#xff0c;首先第一点就是要坚持。怀抱着黑客英雄主义情怀&#xff0c;只要沿着网络安全这条河堤走&#xff0c;保证自己不分心&#xff0c;三年如一日像《一拳超人》光头侠一样坚持做黑客&#xff0c;你必然能成为安全攻防某个领域的专家。不管你是想做白帽…
阅读更多...
最新文章

Copyright @ 2022~2023