✅作者简介：热爱国学的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 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 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.class), args);} catch (SQLException e) {e.printStackTrace();}return null;}@Overridepublic List selectAll() {String sql = "select * from user;";try {return queryRunner.query(sql, new BeanListHandler(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.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.class), isbn);} catch (SQLException e) {e.printStackTrace();}return null;}@Overridepublic List selectAll() {String sql = "select * from book;";try {return queryRunner.query(sql, new BeanListHandler(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 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 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 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 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("
姓名或者学号错误，无法登录
");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 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("
删除失败！
");}}@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("");printWriter.println("");printWriter.println("");printWriter.println("
商品修改
");printWriter.println("
");printWriter.println("
图书编号：
");printWriter.println("
国际标准书号：
");printWriter.println("
书名：
");printWriter.println("
作者：
");printWriter.println("
出版社：
");printWriter.println("
价格：
");printWriter.println("
分类：
");printWriter.println("
" +"返 回
");printWriter.println("
");printWriter.println("
");}@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("
修改失败！
");}}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

运行效果：

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

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

1、用户注册

1）新用户注册页面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编写

欢迎登陆
用户名：
密 码：

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知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。