javaWeb项目介绍: 1、没有使用maven 2、使用注解加文件配置xml(只配置了错误页面)方式 3、只是用一个index.jsp页面配合js来完成整个项目, 4、使用原生js、axios方式请求数据 5、项目不完善,只适合javaWeb初级项目,可以练练手 6、… 项目gif图片
零、Tomcat服务器 1、下载和注意事项 可以在官网下载,但是速度太慢了官网 推荐使用镜像网站下载镜像网站 请注意各个版本对应的jdk版本 注意: 1 若版本为10.1.x则jdk最低为11,否则tomcat启动不了 2 要解压在没有中文字符的文件夹中 2、文件夹介绍 bin文件夹 可执行文件 conf文件夹全局配置文件 lib文件夹依赖的jar包 logs文件夹存放tomcat运行日志 temp文件夹临时文件夹 webapps文件夹放项目之地 work 文件夹 一、 数据库 1、新建数据库weblibrary create database weblibrary charset utf8; use weblibrary;
2、创建用户表lbuser create table if not exists lbUser( id int primary key auto_increment , uid varchar ( 30 ) unique not null default '' , uname varchar ( 50 ) default '' , upwd varchar ( 32 ) not null default '' , uage int default 18 , uphone char ( 11 ) default '' , uquestion varchar ( 50 ) default '' , uanwser varchar ( 50 ) default '' ) charset utf8;
3、创建图书表books create table books( id int primary key auto_increment , bname varchar ( 50 ) not null default '' , bwriter varchar ( 30 ) not null default '' , btype varchar ( 30 ) not null default '' , bcomny varchar ( 30 ) not null default '' , bnum int default 0 , bstate int default 0 , bbnum int default 0 ) ;
insert into weblibrary. books ( id, bname, bwriter, btype, bcomny, bnum, bstate, bbnum) values ( 1 , '小王子' , '埃克苏佩里' , '童话' , '光明出版社' , 8 , 0 , 6 ) , ( 2 , '天路历程' , '约翰班杨' , '文学' , '光明出版社' , 10 , 0 , 13 ) , ( 3 , '活着' , '余华' , '文学' , '光明出版社' , 8 , 0 , 6 ) , ( 4 , '岛上书店' , '加泽文' , '文学' , '光明出版社' , 10 , 0 , 0 ) , ( 5 , '吞噬星空' , '我吃西红柿' , '小说' , '阅文集团' , 10 , 0 , 21 ) , ( 6 , '平凡的世界' , '路遥' , '文学' , '光明出版社' , 10 , 0 , 0 ) , ( 7 , '雨有时横着走' , '郭怀宽' , '诗歌' , '光明出版社' , 10 , 0 , 10 ) , ( 8 , '百年孤独' , '加西亚马尔科' , '小说' , '光明出版社' , 10 , 0 , 0 ) , ( 9 , '三体' , '刘慈欣' , '小说' , '光明出版社' , 1 , 0 , 54 ) , ( 10 , '斗罗大陆' , '唐家三少' , '小说' , '阅文集团' , 0 , 0 , 79 ) ;
4、创建用户借阅表borrhistory create table borrhistory( id int primary key auto_increment , uid varchar ( 11 ) , bid int not null , bname varchar ( 30 ) not null default '' , bwriter varchar ( 30 ) not null default '' , btype varchar ( 30 ) not null default '' , btime datetime , rtime datetime , bstate int default 0 ) ;
二、开始建javaWeb项目 0、导入jar包:在WEB-INF下的lib包中导入相应的jar包
然后把他们添加到项目中 打开此项目设置,在设置中添加jar包 1、包的目录
2、在utils包中创建 a、创建db.properties driverClassName= com. mysql. cj. jdbc. Driver url= jdbc: mysql: / / localhost: 3306 / weblibrary" />= Asia / ShangHai #? ? ? ? ? username= root#? ? password= 123456 #? ? ? ? ? initialSize= 10 # ? ? ? ? ? ? maxActive= 100 # ? ? ? ? ? ? maxWait= 3000
b、创建JDBCDruid.java public class JDBCDruid { private static DataSource ds= null ; static { try { Properties p= new Properties ( ) ; p. load ( new InputStreamReader ( JDBCDruid . class . getClassLoader ( ) . getResourceAsStream ( "com/liu/libraryOS/utils/db.properties" ) ) ) ; ds= DruidDataSourceFactory . createDataSource ( p) ; } catch ( Exception e) { throw new RuntimeException ( e) ; } } public static Connection getConn ( ) { try { return ds. getConnection ( ) ; } catch ( SQLException e) { throw new RuntimeException ( e) ; } } public static void getClose ( ResultSet rs, Statement st, Connection conn) { try { if ( rs!= null ) { rs. close ( ) ; } if ( st!= null ) { st. close ( ) ; } if ( conn!= null ) { conn. close ( ) ; } } catch ( SQLException e) { throw new RuntimeException ( e) ; } } }
3、在pojo包中创建 a、创建Books.java类 public class Books implements Serializable { private Integer id; private String bname; private String bwriter; private String btype; private String bcomny; private Integer bnum; private Integer bstate; private Integer bbnum; public Books ( ) { } public Integer getId ( ) { return id; } public void setId ( Integer id) { this . id = id; } public String getBname ( ) { return bname; } public void setBname ( String bname) { this . bname = bname; } public String getBwriter ( ) { return bwriter; } public void setBwriter ( String bwriter) { this . bwriter = bwriter; } public String getBtype ( ) { return btype; } public void setBtype ( String btype) { this . btype = btype; } public String getBcomny ( ) { return bcomny; } public void setBcomny ( String bcomny) { this . bcomny = bcomny; } public Integer getBnum ( ) { return bnum; } public void setBnum ( Integer bnum) { this . bnum = bnum; } public Integer getBstate ( ) { return bstate; } public void setBstate ( Integer bstate) { this . bstate = bstate; } public Integer getBbnum ( ) { return bbnum; } public void setBbnum ( Integer bbnum) { this . bbnum = bbnum; } }
b、创建借阅历史类BorrHistory.java public class BorrHistory implements Serializable { private Integer id; private String uid; private Integer bid; private String bname; private String bwriter; private String btype; private String btime; private String rtime; private String bstate; public BorrHistory ( ) { } public String getUid ( ) { return uid; } public void setUid ( String uid) { this . uid = uid; } public Integer getId ( ) { return id; } public void setId ( Integer id) { this . id = id; } public Integer getBid ( ) { return bid; } public void setBid ( Integer bid) { this . bid = bid; } public String getBname ( ) { return bname; } public void setBname ( String bname) { this . bname = bname; } public String getBwriter ( ) { return bwriter; } public void setBwriter ( String bwriter) { this . bwriter = bwriter; } public String getBtype ( ) { return btype; } public void setBtype ( String btype) { this . btype = btype; } public String getBtime ( ) { return btime; } public void setBtime ( String btime) { this . btime = btime; } public String getRtime ( ) { return rtime; } public void setRtime ( String rtime) { this . rtime = rtime; } public String getBstate ( ) { return bstate; } public void setBstate ( String bstate) { this . bstate = bstate; } }
c、创建用户类LbUser public class LbUser implements Serializable { private Integer id; private String uid; private String uname; private int uage; private String uquestion; private String uanwser; private String udate; public LbUser ( ) { } public Integer getId ( ) { return id; } public void setId ( Integer id) { this . id = id; } public String getUid ( ) { return uid; } public void setUid ( String uid) { this . uid = uid; } public String getUname ( ) { return uname; } public void setUname ( String uname) { this . uname = uname; } public int getUage ( ) { return uage; } public void setUage ( int uage) { this . uage = uage; } public String getUquestion ( ) { return uquestion; } public void setUquestion ( String uquestion) { this . uquestion = uquestion; } public String getUanwser ( ) { return uanwser; } public void setUanwser ( String uanwser) { this . uanwser = uanwser; } public String getUdate ( ) { return udate; } public void setUdate ( String udate) { this . udate = udate; } }
4、在dao包中创建 a、创建父类BasicDao.java public class BasicDao < T > { private QueryRunner qr = new QueryRunner ( ) ; private Connection conn = null ; public List < T > getAllData ( String sql, Class < T > clazz, Object . . . obj) { try { conn = JDBCDruid . getConn ( ) ; return qr. query ( conn, sql, new BeanListHandler < > ( clazz) , obj) ; } catch ( SQLException e) { throw new RuntimeException ( e) ; } finally { JDBCDruid . getClose ( null , null , conn) ; } } public T getOneData ( String sql, Class < T > clazz, Object . . . obj) { try { conn = JDBCDruid . getConn ( ) ; return qr. query ( conn, sql, new BeanHandler < > ( clazz) , obj) ; } catch ( SQLException e) { throw new RuntimeException ( e) ; } finally { JDBCDruid . getClose ( null , null , conn) ; } } public boolean update ( String sql, Object . . . obj) { int num = 0 ; try { conn = JDBCDruid . getConn ( ) ; conn. setAutoCommit ( false ) ; num = qr. update ( conn, sql, obj) ; conn. commit ( ) ; } catch ( SQLException e) { try { conn. rollback ( ) ; } catch ( SQLException ex) { ex. printStackTrace ( ) ; } throw new RuntimeException ( e) ; } finally { JDBCDruid . getClose ( null , null , conn) ; } return num> 0 ; } public Connection startTransaction ( ) { try { conn = JDBCDruid . getConn ( ) ; conn. setAutoCommit ( false ) ; return conn; } catch ( SQLException e) { throw new RuntimeException ( e) ; } } public void rollBack ( Connection conn) { try { conn. rollback ( ) ; } catch ( SQLException e) { e. printStackTrace ( ) ; } } }
b、创建BooksDao.java public class BooksDao extends BasicDao < Books > { }
c、创建BorrHistory.java public class BorrHistoryDao extends BasicDao < BorrHistory > { }
d、创建LbUser.java public class LbUserDao extends BasicDao < LbUser > { }
5、在service包下创建 a、创建BookService.java public class BooksService { private BooksDao bd = new BooksDao ( ) ; private String sql = "" ; public List < Books > getAllBook ( ) { sql = "select*from books where bnum>0" ; return bd. getAllData ( sql, Books . class ) ; } public List < Books > paiHangBook ( ) { sql = "select*from books where bbnum>0 order by bbnum desc limit 0,5" ; return bd. getAllData ( sql, Books . class ) ; } public List < Books > alreadyOverBook ( ) { sql = "select*from books where bnum<1 " ; return bd. getAllData ( sql, Books . class ) ; } public Books queryById ( String bid) { sql = "select*from books where id=?" ; return bd. getOneData ( sql, Books . class , bid) ; } }
b、创建BorrHistoryService public class BorrHistoryService { private BorrHistoryDao bd = new BorrHistoryDao ( ) ; private BooksService bs = new BooksService ( ) ; private String sql = "" ; public List < BorrHistory > getAllData ( String uid) { sql = "select * from borrhistory where uid=?" ; return bd. getAllData ( sql, BorrHistory . class , uid) ; } public BorrHistory queryByBidCo ( String count, String bid) { sql = "select*from borrhistory where uid=? and bid=? and bstate=0" ; return bd. getOneData ( sql, BorrHistory . class , count, bid) ; } public boolean borrowBook ( String count, String bid) { Connection conn = bd. startTransaction ( ) ; QueryRunner qr = new QueryRunner ( ) ; int num = 0 ; try { sql = "update books set bnum=(bnum-1) where id=?" ; num = qr. update ( conn, sql, bid) ; if ( num > 0 ) { Books b = bs. queryById ( bid) ; sql = "insert into borrhistory(uid,bid,bname,bwriter,btype,btime) values (?,?,?,?,?,now())" ; num = qr. update ( conn, sql, count, bid, b. getBname ( ) , b. getBwriter ( ) , b. getBtype ( ) ) ; conn. commit ( ) ; } } catch ( SQLException e) { bd. rollBack ( conn) ; e. printStackTrace ( ) ; } finally { JDBCDruid . getClose ( null , null , conn) ; } return num > 0 ; } public boolean updateBorrHistory ( String count, String bid) { Connection conn = bd. startTransaction ( ) ; QueryRunner qr = new QueryRunner ( ) ; int num = 0 ; try { sql = "update borrhistory set bstate=1,rtime=now() where uid=? and bid=? and bstate=0" ; num = qr. update ( conn, sql, count, bid) ; if ( num > 0 ) { sql = "update books set bnum=(bnum+1),bbnum=(bbnum+1) where id=?" ; num = qr. update ( conn, sql, bid) ; if ( num > 0 ) { conn. commit ( ) ; } } } catch ( SQLException e) { bd. rollBack ( conn) ; e. printStackTrace ( ) ; } finally { JDBCDruid . getClose ( null , null , conn) ; } return num> 0 ; } }
c、创建LbUserService.java public class LbUserService { private LbUserDao ld= new LbUserDao ( ) ; private String sql= "" ; public LbUser logInByPD ( String count, String pwd) { sql= "select * from lbuser where uid=? and upwd=md5(?)" ; return ld. getOneData ( sql, LbUser . class , count, pwd) ; } public LbUser queryByCount ( String count) { sql= "select * from lbuser where uid=?" ; return ld. getOneData ( sql, LbUser . class , count) ; } public boolean updatePerson ( String count, String name, int age) { sql= "update lbuser set uname=?,uage=? where uid=?" ; return ld. update ( sql, name, age, count) ; } public boolean addPerson ( String count, String name, String pwd, String ques, String anw, String date) { sql= "insert into lbuser(uid,uname,upwd,uquestion,uanwser,udate) values(?,?,md5(?),?,?,?)" ; return ld. update ( sql, count, name, pwd, ques, anw, date) ; } public LbUser queryOfFindPwd ( String count, String ques, String anw) { sql= "select *from lbuser where uid=? and uquestion=? and uanwser=?" ; return ld. getOneData ( sql, LbUser . class , count, ques, anw) ; } public boolean updateOfFindPwd ( String count, String pwd) { sql= "update lbuser set upwd=MD5(?) where uid=?" ; return ld. update ( sql, pwd, count) ; } }
6、在servlet包下创建 a、创建GetBooksServlet.java(首页:数据展示) @WebServlet ( "/getBooks" ) public class GetBooksServlet extends HttpServlet { private BooksService bs= new BooksService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { HttpSession session = req. getSession ( ) ; session. setAttribute ( "currPage" , 1 ) ; resp. setContentType ( "text/html;charset=utf8" ) ; PrintWriter w = resp. getWriter ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; List < Books > liubooks = ( List < Books > ) session. getAttribute ( "liubooks" ) ; if ( liubooks== null || liubooks. size ( ) < 1 ) { liubooks= bs. getAllBook ( ) ; session. setAttribute ( "liubooks" , liubooks) ; } hs. put ( "code" , 200 ) ; hs. put ( "msg" , "ok" ) ; hs. put ( "data" , liubooks) ; String rs = JSONObject . toJSONString ( hs) ; w. write ( rs) ; w. close ( ) ; } }
b、创建PaiHangServlet.java(图书排行) @WebServlet ( "/paiHang" ) public class PaiHangServlet extends HttpServlet { private BooksService bs= new BooksService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { HttpSession session = req. getSession ( ) ; session. setMaxInactiveInterval ( 1000 * 60 * 60 ) ; session. setAttribute ( "currPage" , 2 ) ; resp. setContentType ( "text/html;charset=utf8" ) ; PrintWriter w = resp. getWriter ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; List < Books > books = ( List < Books > ) session. getAttribute ( "paihang" ) ; if ( books== null || books. size ( ) < 1 ) { books = bs. paiHangBook ( ) ; session. setAttribute ( "paihang" , books) ; } hs. put ( "code" , 200 ) ; hs. put ( "msg" , "ok" ) ; hs. put ( "data" , books) ; String rs = JSONObject . toJSONString ( hs) ; w. write ( rs) ; w. close ( ) ; } }
c、创建AlreadyOvServlet .java(已借完的书籍) @WebServlet ( "/yiJieWan" ) public class AlreadyOvServlet extends HttpServlet { private BooksService bs= new BooksService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { HttpSession session = req. getSession ( ) ; session. setAttribute ( "currPage" , 3 ) ; resp. setContentType ( "text/html;charset=utf8" ) ; PrintWriter w = resp. getWriter ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; List < Books > books = ( List < Books > ) session. getAttribute ( "yijiewan" ) ; if ( books== null ) { books = bs. alreadyOverBook ( ) ; session. setAttribute ( "yijiewan" , books) ; } hs. put ( "code" , 200 ) ; hs. put ( "msg" , "ok" ) ; hs. put ( "data" , books) ; String rs = JSONObject . toJSONString ( hs) ; w. write ( rs) ; w. close ( ) ; } }
d、创建GetBorrowHistoryServlet .java(个人借阅历史,需要先登录) @WebServlet ( "/getHistory" ) public class GetBorrowHistoryServlet extends HttpServlet { private BorrHistoryService bs= new BorrHistoryService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { resp. setContentType ( "text/html;charset=utf8" ) ; HttpSession session = req. getSession ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; session. setAttribute ( "currPage" , 4 ) ; PrintWriter w = resp. getWriter ( ) ; LbUser user = ( LbUser ) session. getAttribute ( "userInf" ) ; if ( user== null ) { hs. put ( "msg" , "notLogIn" ) ; } else { List < BorrHistory > allData = ( List < BorrHistory > ) session. getAttribute ( "borrowhis" + user. getUid ( ) ) ; if ( allData== null ) { allData = bs. getAllData ( user. getUid ( ) ) ; session. setAttribute ( "borrowhis" + user. getUid ( ) , allData) ; } if ( allData. size ( ) == 0 ) { hs. put ( "msg" , "kong" ) ; } else { hs. put ( "msg" , "ok" ) ; hs. put ( "data" , allData) ; } } hs. put ( "code" , "200" ) ; String s = JSONObject . toJSONString ( hs) ; w. write ( s) ; w. close ( ) ; } }
e、创建LogInServlet .java(登录) @WebServlet ( "/logIn" ) public class LogInServlet extends HttpServlet { private LbUserService ls= new LbUserService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { resp. setContentType ( "text/html;charset=utf8" ) ; req. setCharacterEncoding ( "utf8" ) ; PrintWriter w = resp. getWriter ( ) ; HttpSession session = req. getSession ( ) ; session. setMaxInactiveInterval ( 1000 * 60 * 60 * 24 ) ; session. setAttribute ( "currPage" , 5 ) ; String uid = req. getParameter ( "uid" ) ; if ( uid== null || "" . equals ( uid) ) { setErr ( "手机号不能为空!" , w) ; return ; } else if ( uid. length ( ) != 11 ) { setErr ( "请输入11位的手机号!" , w) ; return ; } LbUser isCun = ls. queryByCount ( uid) ; if ( isCun== null ) { setErr ( "errCount" , w) ; return ; } String upwd = req. getParameter ( "upwd" ) ; if ( upwd== null || "" . equals ( upwd) ) { setErr ( "密码不能为空!" , w) ; return ; } else if ( upwd. length ( ) < 6 || upwd. length ( ) > 18 ) { setErr ( "密码最少6位最多18位" , w) ; return ; } LbUser user = ls. logInByPD ( uid, upwd) ; if ( user== null ) { setErr ( "errPwd" , w) ; return ; } setSuccess ( user, w) ; session. setAttribute ( "userInf" , user) ; } private void setSuccess ( LbUser user, PrintWriter w) { setResult ( user, "ok" , w) ; } private void setErr ( String msg, PrintWriter w) { setResult ( null , msg, w) ; } private void setResult ( LbUser user, String msg, PrintWriter w) { HashMap < String , Object > hs = new HashMap < > ( ) ; hs. put ( "code" , "200" ) ; hs. put ( "msg" , msg) ; hs. put ( "data" , user) ; String rs = JSONObject . toJSONString ( hs) ; w. write ( rs) ; w. close ( ) ; } }
f、创建RegisterServlet .java(注册) @WebServlet ( "/registerPerson" ) public class RegisterServlet extends HttpServlet { private LbUserService ls= new LbUserService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { resp. setContentType ( "text/html;charset=utf8" ) ; HttpSession session = req. getSession ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; session. setAttribute ( "currPage" , 5 ) ; PrintWriter w = resp. getWriter ( ) ; SimpleDateFormat sdf= new SimpleDateFormat ( "yyyy-MM-dd HH:mm:ss" ) ; String uid = req. getParameter ( "uid" ) ; String upwd = req. getParameter ( "upwd" ) ; String uname = req. getParameter ( "uname" ) ; String uquestion = req. getParameter ( "uquestion" ) ; String uanwser = req. getParameter ( "uanwser" ) ; LbUser us = ls. queryByCount ( uid) ; if ( us!= null ) { hs. put ( "msg" , "isAlready" ) ; } else { boolean b = ls. addPerson ( uid, uname, upwd, uquestion, uanwser, sdf. format ( new Date ( ) ) ) ; if ( ! b) { hs. put ( "msg" , "addErr" ) ; } else { hs. put ( "msg" , "ok" ) ; } } hs. put ( "code" , "200" ) ; String s = JSONObject . toJSONString ( hs) ; w. write ( s) ; w. close ( ) ; } }
g、创建UserInfoServlet .Java(个人中心) @WebServlet ( "/userInfo" ) public class UserInfoServlet extends HttpServlet { @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { resp. setContentType ( "text/html;charset=utf8" ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; PrintWriter w = resp. getWriter ( ) ; HttpSession session = req. getSession ( ) ; session. setAttribute ( "currPage" , 5 ) ; LbUser use = ( LbUser ) session. getAttribute ( "userInf" ) ; if ( use== null ) { hs. put ( "msg" , "kong" ) ; } else { hs. put ( "msg" , "ok" ) ; } hs. put ( "code" , 200 ) ; hs. put ( "data" , use) ; String rs = JSONObject . toJSONString ( hs) ; w. write ( rs) ; w. close ( ) ; } }
h、创建UpdateUser .java(修改) @WebServlet ( "/updateInfo" ) public class UpdateUser extends HttpServlet { private LbUserService ls= new LbUserService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { resp. setContentType ( "text/html;charset=utf8" ) ; req. setCharacterEncoding ( "utf8" ) ; PrintWriter w = resp. getWriter ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; HttpSession session = req. getSession ( ) ; session. setAttribute ( "currPage" , 5 ) ; String count = req. getParameter ( "count" ) ; String name = req. getParameter ( "name" ) ; String age = req. getParameter ( "age" ) ; session. setAttribute ( "currPage" , 5 ) ; boolean rs = ls. updatePerson ( count, name, Integer . parseInt ( age) ) ; if ( rs) { LbUser user = ls. queryByCount ( count) ; hs. put ( "msg" , "ok" ) ; hs. put ( "data" , user) ; session. setAttribute ( "userInf" , user) ; } else { hs. put ( "msg" , " errUpdate" ) ; } hs. put ( "code" , "200" ) ; String s = JSONObject . toJSONString ( hs) ; w. write ( s) ; w. close ( ) ; } }
i、创建FindPwdServlet.java(找回密码) @WebServlet ( "/findPwd" ) public class FindPwdServlet extends HttpServlet { private LbUserService ls= new LbUserService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { resp. setContentType ( "text/html;charset=utf8" ) ; HttpSession session = req. getSession ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; session. setAttribute ( "currPage" , 5 ) ; PrintWriter w = resp. getWriter ( ) ; String uid = req. getParameter ( "uid" ) ; String upwd = req. getParameter ( "upwd" ) ; String uquestion = req. getParameter ( "uquestion" ) ; String uanwser = req. getParameter ( "uanwser" ) ; LbUser user = ls. queryByCount ( uid) ; if ( user== null ) { hs. put ( "msg" , "isNotCun" ) ; } else { user= ls. queryOfFindPwd ( uid, uquestion, uanwser) ; if ( user== null ) { hs. put ( "msg" , "QOAIsErr" ) ; } else { boolean b = ls. updateOfFindPwd ( uid, upwd) ; if ( ! b) { hs. put ( "msg" , "findErr" ) ; } else { hs. put ( "msg" , "ok" ) ; } } } hs. put ( "code" , "200" ) ; String s = JSONObject . toJSONString ( hs) ; w. write ( s) ; w. close ( ) ; } }
j、创建ReturnBookServlet.java(还书) @WebServlet ( "/returnBook" ) public class ReturnBookServlet extends HttpServlet { private BorrHistoryService bs= new BorrHistoryService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { HttpSession session = req. getSession ( ) ; session. setAttribute ( "currPage" , 4 ) ; resp. setContentType ( "text/html;charset=utf8" ) ; PrintWriter w = resp. getWriter ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; String bid = req. getParameter ( "bid" ) ; LbUser user = ( LbUser ) session. getAttribute ( "userInf" ) ; if ( user== null ) { hs. put ( "msg" , "isNotLogIn" ) ; } else { BorrHistory bht = bs. queryByBidCo ( user. getUid ( ) , bid) ; if ( bht== null ) { hs. put ( "msg" , "notHistory" ) ; } else { boolean b = bs. updateBorrHistory ( user. getUid ( ) , bid) ; if ( ! b) { hs. put ( "msg" , "returnErr" ) ; } else { hs. put ( "msg" , "ok" ) ; session. removeAttribute ( "liubooks" ) ; session. removeAttribute ( "borrowhis" + user. getUid ( ) ) ; session. removeAttribute ( "paihang" ) ; session. removeAttribute ( "yijiewan" ) ; } } } hs. put ( "code" , "200" ) ; String s = JSONObject . toJSONString ( hs) ; w. write ( s) ; w. close ( ) ; } }
k、创建GetBorrowHistoryServlet.java (个人借阅历史) @WebServlet ( "/getHistory" ) public class GetBorrowHistoryServlet extends HttpServlet { private BorrHistoryService bs= new BorrHistoryService ( ) ; @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { resp. setContentType ( "text/html;charset=utf8" ) ; HttpSession session = req. getSession ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; session. setAttribute ( "currPage" , 4 ) ; PrintWriter w = resp. getWriter ( ) ; LbUser user = ( LbUser ) session. getAttribute ( "userInf" ) ; if ( user== null ) { hs. put ( "msg" , "notLogIn" ) ; } else { List < BorrHistory > allData = ( List < BorrHistory > ) session. getAttribute ( "borrowhis" + user. getUid ( ) ) ; if ( allData== null ) { allData = bs. getAllData ( user. getUid ( ) ) ; session. setAttribute ( "borrowhis" + user. getUid ( ) , allData) ; } if ( allData. size ( ) == 0 ) { hs. put ( "msg" , "kong" ) ; } else { hs. put ( "msg" , "ok" ) ; hs. put ( "data" , allData) ; } } hs. put ( "code" , "200" ) ; String s = JSONObject . toJSONString ( hs) ; w. write ( s) ; w. close ( ) ; } }
l、创建GoOutServlet .java(退出) @WebServlet ( "/goOut" ) public class GoOutServlet extends HttpServlet { @Override protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { doPost ( req, resp) ; } @Override protected void doPost ( HttpServletRequest req, HttpServletResponse resp) throws ServletException , IOException { resp. setContentType ( "text/html;charset=utf8" ) ; HttpSession session = req. getSession ( ) ; HashMap < String , Object > hs = new HashMap < > ( ) ; session. setAttribute ( "currPage" , 5 ) ; PrintWriter w = resp. getWriter ( ) ; LbUser user = ( LbUser ) session. getAttribute ( "userInf" ) ; if ( user!= null ) { hs. put ( "msg" , "ok" ) ; session. removeAttribute ( "userInf" ) ; } else { hs. put ( "msg" , "notLogIn" ) ; } hs. put ( "code" , "200" ) ; String s = JSONObject . toJSONString ( hs) ; w. write ( s) ; w. close ( ) ; } }
7、在web包下的static包创建 a、创建css包,包下创建index.css * { padding : 0; margin : 0; } body { min-width : 1200px; height : 800px; } #liu { width : 70%; height : 70%; margin : 20px auto auto auto; font-size : 18px; } #liu-head { width : 100%; height : 50px; background-color : #ead2ae; color : blueviolet; font-size : 18px; font-weight : bold; border-radius : 10px; } #liu-head ul { text-align : center; width : 100%; list-style : none; display : inline-block; line-height : 45px; margin : 2px auto; } #liu-head ul li { cursor : pointer; margin-left : 10px; border : #ed00ff 1px solid; border-radius : 15px; text-align : center; width : 20%; float : left; } #liu-head ul li:last-child { width : 10%; border-radius : 10px 40px; } #liu-head ul li:hover { background-color : #dc8ef1; } #liu-middle { width : 100%; height : 85%; margin : 10px auto; border : black 1px solid; border-radius : 10px; background-color : #ead2ae; } #biao { margin : 2px auto; width : 98%; text-align : center; border-collapse : collapse; border-spacing : 0px; } #biao-head { background-color : #00a290; } #biao tr { border : #000000 1px solid; line-height : 40px; } #biao-body tr:hover { background-color : #c4ffde; cursor : pointer; } #biao-body input { margin : 2px auto; line-height : 40px; width : 60px; border : yellow 1px solid; border-radius : 5px; font-size : 18px; color : #af4ed8; background-color : transparent; cursor : pointer; } #biao-body input:hover { font-size : 17px; } #user-info { width : 85%; height : 85%; margin : 30px auto; position : relative; text-align : center; } #user-info b { color : red; margin : 0; padding : 0; } #uinfo { width : 90%; height : 90%; position : absolute; margin : 10px auto; left : 5%; text-align : center; font-size : 25px; } #uinfo input { color : #b118f1; width : 50%; height : 35px; text-align : center; font-size : 25px; margin : 5px auto; outline : none; border : #5a9237 2px solid; background-color : transparent; border-radius : 5px; cursor : pointer; } #uinfo #count { color : #c27ede; } #uinfo span { color : #975403; font-weight : bold; } #uinfo button { width : 30%; background-color : transparent; line-height : 40px; font-size : 20px; border : #ff8901 1px solid; display : inline-block; float : right; margin-right : 3%; border-radius : 50px 20px; color : #036d2e; cursor : pointer; margin-top : 5px; } #uinfo button:last-child { width : 15%; float : left; margin-left : 10px; color : #db9090; } #login-div { width : 35%; height : 60%; border : #ac6b00 2px dashed; border-radius : 5px; margin : 50px auto; position : relative; } #login-div span { display : inline-block; font-size : 18px; color : red; width : 100%; height : 20px; line-height : 20px; text-align : center; } #login-div input { width : 90%; height : 40px; color : #e13cd7; font-size : 25px; text-align : center; margin : 5px 10px; border-radius : 20px; border : #158579 2px dotted; background-color : transparent; outline : none; } #login-div #login-dl { width : 90%; height : 40px; margin-top : 30px; margin-left : 10px; border-radius : 20px; border : #e77070 1px solid; background-color : transparent; font-size : 24px; line-height : 40px; color : #067221; } #login-div #login-bottom { width : 95%; height : 30px; border : #f323f3 1px dotted; position : absolute; border-radius : 15px 3px; font-size : 14px; font-style : italic; margin : auto 2%; color : #9f4e02; bottom : 5px; } #login-div #login-bottom ul { list-style : none; width : 100%; height : 100%; } #login-div #login-bottom ul li { width : 50%; text-align : center; height : 100%; line-height : 30px; display : inline-block; } #login-div #login-bottom ul li a { width : 100%; height : 100%; text-decoration : none; cursor : pointer; } #register-div { width : 50%; height : 70%; margin : 5% auto; border : #176f00 2px dotted; border-radius : 50px 10px; } #register-div span { display : inline-block; width : 80%; font-size : 18px; height : 25px; line-height : 25px; text-align : center; color : #f80000; margin : auto 8%; } #register-div input { display : inline-block; width : 80%; height : 30px; text-align : center; font-size : 20px; margin : 5px 8%; border : #9b0058 1px dotted; background-color : transparent; outline : none; border-radius : 10px; color : #b118f1; } #register-div select { color : #b118f1; display : inline-block; width : 80%; height : 30px; text-align : center; font-size : 20px; margin : 5px 8%; border : #9b0058 1px dotted; background-color : transparent; outline : none; border-radius : 10px; } #register-div button { color : #0280ce; display : inline-block; width : 60%; height : 30px; text-align : center; font-size : 20px; margin : 5% 18% 4% 18%; border : #00489b 2px dotted; background-color : transparent; outline : none; border-radius : 10px; line-height : 25px; cursor : pointer; } #register-div a { display : inline-block; width : 25%; height : 20px; font-size : 14px; font-style : italic; margin : auto 5px; color : #278d02; } #findPwd-div { width : 50%; height : 70%; margin : 5% auto; border : #176f00 2px dotted; border-radius : 50px 10px; } #findPwd-div span { display : inline-block; width : 80%; font-size : 18px; height : 25px; line-height : 25px; text-align : center; color : #f80000; margin : auto 8%; } #findPwd-div input { display : inline-block; width : 80%; height : 30px; text-align : center; font-size : 20px; margin : 5px 8%; border : #9b0058 1px dotted; background-color : transparent; outline : none; border-radius : 10px; color : #b118f1; } #findPwd-div select { color : #b118f1; display : inline-block; width : 80%; height : 30px; text-align : center; font-size : 20px; margin : 5px 8%; border : #9b0058 1px dotted; background-color : transparent; outline : none; border-radius : 10px; } #findPwd-div button { color : #0280ce; display : inline-block; width : 60%; height : 30px; text-align : center; font-size : 20px; margin : 5% 18% 4% 18%; border : #00489b 2px dotted; background-color : transparent; outline : none; border-radius : 10px; line-height : 25px; cursor : pointer; } #findPwd-div a { display : inline-block; width : 25%; height : 20px; font-size : 14px; font-style : italic; margin : auto 5px; color : #278d02; }
b、创建err包,包下创建 < % @ page contentType= "text/html;charset=UTF-8" language= "java" % > < html> < head> < meta charset= "UTF-8" > < title> 404 - 迷失方向了< / title> < / head> < body> < h1 id= "one" style= "text-align: center" > 怎么回事,灯怎么熄灭了,害得我迷失了方向< / h1> < script type= "text/javascript" > let one = document. getElementById ( "one" ) ; let str= one. innerText; let tim= 5 ; setInterval ( function ( ) { one. innerText= str+ "(" + tim+ ")" ; if ( tim== 0 ) { location. href= "../.." ; } tim-- ; } , 1000 ) ; < / script> < / body> < / html>
< % @ page contentType= "text/html;charset=UTF-8" language= "java" % > < html> < head> < meta charset= "UTF-8" > < title> 500 - 出现bug了< / title> < / head> < body> < h1 id= "one" style= "text-align: center" > 这是怎么了,为什么我从座位上掉下来了?< / h1> < script type= "text/javascript" > let one = document. getElementById ( "one" ) ; let str= one. innerText; let tim= 5 ; setInterval ( function ( ) { one. innerText= str+ "(" + tim+ ")" ; if ( tim== 0 ) { location. href= "../.." ; } tim-- ; } , 1000 ) ; < / script> < / body> < / html>
8、在web包下的WEB_INF包创建 a、创建lib包,此包放jar包
b、修在web.xml文件中 添加 < error-page> < error-code> 404</ error-code> < location> /static/err/404.jsp</ location> </ error-page> < error-page> < error-code> 500</ error-code> < location> /static/err/500.jsp</ location> </ error-page>
9、在web包下的index.jsp(一切操作都在这里面) < % @ page contentType= "text/html;charset=UTF-8" language= "java" % > < html> < head> < title> 楠小弟自助图书馆< / title> < / head> < script src= "https://unpkg.com/axios/dist/axios.min.js" > < / script> < link rel= "stylesheet" href= "static/css/index.css" > < body> < div id= "liu" > < ! -- 头部-- > < divid= "liu-head" > < ul> < li id= "head-1" > 自助图书系统< / li> < li id= "head-2" > 图书排行榜< / li> < li id= "head-3" > 暂空缺书籍< / li> < li id= "head-4" > 借阅记录< / li> < li id= "head-5" > 登录< / li> < / ul> < / div> < ! -- 中间-- > < div id= "liu-middle" > < / div> < / div> < script type= "text/javascript" charset= "UTF-8" > let head1 = document. getElementById ( "head-1" ) ; let head2 = document. getElementById ( "head-2" ) ; let head3 = document. getElementById ( "head-3" ) ; let head4 = document. getElementById ( "head-4" ) ; let head5 = document. getElementById ( "head-5" ) ; let middleBody = document. getElementById ( "liu-middle" ) ; function showOne ( ) { middleBody. innerHTML = '' ; let bhead = document. getElementById ( "biao-head" ) ; let bbody = document. getElementById ( "biao-body" ) bhead. innerHTML = "书名 作者 类型 出版社 库存 状态 操作 " ; axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/getBooks' , params : { } } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { alert ( '获取数据失败!' ) ; bbody. innerHTML = "图书资源获取失败,请联系楠小弟! " return } let htm = "" ; for ( let i = 0 ; i < d. data. length; i++ ) { let t = d. data[ i] ; htm += ( ""+ t. bname + " " + t. bwriter+ " " + t. btype+ " " + t. bcomny+ " " + t. bnum+ " " + ( t. bstate == 0 " />"可借阅" : "已借完" ) + " <input type='button' id='sjieyue' οnclick='sjieY("+ t. id+ ")' title='" + t. id + "' value='借阅'> " ) ; } bbody. innerHTML = htm; } ) ; } function sjieY ( id ) { let jy = document. getElementById ( "sjieyue" ) ; let b = confirm ( "确定借阅此书吗?" ) ; if ( ! b) { return ; } axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/borrowBook' , params : { bid : id} } ) . then ( function ( rs ) { let d= rs. dataif ( d. code!= '200' ) { alert ( "借书时,请求异常" ) ; return ; } if ( d. msg== 'isNotLogIn' ) { alert ( "请登陆后再来借阅!" ) ; return ; } else if ( d. msg== 'isNotReturn' ) { alert ( "上次借的这本书还没有归还哦!" ) ; return ; } else if ( d. msg== 'jieYueErr' ) { alert ( "借阅失败啦,请联系工作人员!" ) ; return ; } else if ( d. msg== 'ok' ) { alert ( "借阅成功,看完别忘记归还哦!" ) ; showOne ( ) ; return ; } } ) ; } function paiHTwo ( ) { middleBody. innerHTML = '' ; let bhead = document. getElementById ( "biao-head" ) ; let bbody = document. getElementById ( "biao-body" ) bhead. innerHTML = "排名 书名 作者 类型 状态 被借次数 " ; axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/paiHang' , params : { } } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { alert ( "数据获取失败!" ) return ; } let htm = "" ; for ( let i = 0 ; i < d. data. length; i++ ) { let t = d. data[ i] ; htm += "" + ( i + 1 ) + " " + t. bname+ " " + t. bwriter + " "+ t. btype + " "+ ( t. bnum >= 1 ? "可借阅" : "已借完" ) + " " + t. bbnum + " " ; } if ( d. data. length == 0 ) { htm = "店铺刚开张, 暂未产生数据, 请稍后再来! " ; } bbody. innerHTML = htm; } ) ; } function kongQThree ( ) { middleBody. innerHTML = '' ; let bhead = document. getElementById ( "biao-head" ) ; let bbody = document. getElementById ( "biao-body" ) bhead. innerHTML = "书名 作者 类型 出版社 库存 状态 " ; axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/yiJieWan' } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { alert ( "拉取数据失败!" ) bbody. innerHTML = "数据拉取失败,请联系楠小弟! " return ; } let htm = "" ; for ( let i = 0 ; i < d. data. length; i++ ) { let t = d. data[ i] ; htm += "" + t. bname + " " + t. bwriter+ " " + t. btype + " " + t. bcomny+ " " + t. bnum + " " + ( t. bnum >= 1 ? "可借阅" : "已借完" ) + " " ; } if ( d. data. length == 0 ) { htm = "所有图书, 都可正常 借阅观看哦! " ; } bbody. innerHTML = htm; } ) ; } function jieYueHistory ( ) { middleBody. innerHTML = '' ; let bhead = document. getElementById ( "biao-head" ) ; let bbody = document. getElementById ( "biao-body" ) bhead. innerHTML = "书名 作者 类型 借阅时间 归还时间 书籍状态 操作 " ; axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/getHistory' , params : { } } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { alert ( '获取历史记录数据失败!' ) ; return } let htm = "" ; if ( d. msg== 'notLogIn' ) { htm = "你还没有登陆, 请登陆后, 再来查看! " ; bbody. innerHTML = htm; alert ( "请登录后在来查看!" ) ; return ; } if ( d. msg == 'kong' ) { htm = "你还未借阅, 借阅的历史, 将在此展示! " ; bbody. innerHTML = htm; return ; } for ( let i = 0 ; i < d. data. length; i++ ) { let t = d. data[ i] ; htm += ( ""+ t. bname + " " + t. bwriter+ " " + t. btype+ " <td title='"+ t. btime+ "'>" + t. btime. substring ( 0 , 10 ) + "<td title='" + ( t. rtime== null ? "-" : t. rtime) + "'>" + ( t. rtime== null ? "-" : t. rtime. substring ( 0 , 10 ) ) + " " + ( t. bstate == 0 ? "在读" : "已归还" ) + " <input type='button' οnclick='returnBook(" + t. bid + ")' title='" + t. bstate + "' value='" + ( t. bstate == 0 ? "归还" : "已归还" ) + "'> " ) ; } bbody. innerHTML = htm; let inp = bbody. getElementsByTagName ( "input" ) ; for ( let e of inp) { if ( e. title> 0 ) { e. disabled= true ; } else { e. disabled= false ; } } } ) ; } function returnBook ( bid ) { let b = confirm ( "确认要归还当前的书籍吗?" ) ; if ( ! b) { return ; } axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/returnBook' , params : { bid : bid} } ) . then ( function ( rs ) { let d= rs. data; if ( d. code!= '200' ) { alert ( "归还书籍时,请求异常!" ) ; return ; } if ( d. msg== 'isNotLogIn' ) { alert ( "请登陆后再来操作!" ) ; return ; } else if ( d. msg== 'notHistory' ) { alert ( "当前书籍已经归还了!" ) ; return ; } else if ( d. msg== 'returnErr' ) { alert ( "还书失败了!!" ) ; return ; } else if ( d. msg== 'ok' ) { alert ( "还书成功!!" ) jieYueHistory ( ) ; } } ) ; } function personZone ( per ) { if ( per == null ) { return ; } let na = per. uname; if ( na. length > 3 ) { na = na. substring ( 0 , 3 ) + "..." ; } head5. innerText = na; let htm = ' ' + '账号: <input type="text"readonly value=' + per. uid + '> ' + '昵称: <input type="text" name="uname"value=' + per. uname + '> ' + '年龄: <input type="number" name="uage"value=' + per. uage + '> ' + '密保问题: <input type="text" readonly maxlength="50" name="question"value=' + per. uquestion + '> ' + '密保答案: <input οnclick="showAnw()" type="password" readonly name="answer"value=' + per. uanwser + '> ' + '注册时间: <input type="text" readonly name="udate"value=' + per. udate + '> ' + '修改当前信息 退出登录 ' + '' ; middleBody. innerHTML = htm; } function logining ( ) { let htm = '' + ' ' + ' ' + ' ' + '登录 ' + '' ; middleBody. innerHTML = htm; } function login_dl ( ) { let lg_msg = document. getElementById ( "login-msg" ) ; let lg_count = document. getElementById ( "login-count" ) ; let lg_pwd = document. getElementById ( "login-pwd" ) ; let lg_dl = document. getElementById ( "login-dl" ) ; if ( lg_count. value. length != 11 ) { lg_msg. innerText = "请输入有效的11位手机号" ; showTime ( lg_msg) return ; } if ( lg_pwd. value. length < 6 || lg_pwd. value. length > 18 ) { lg_msg. innerText = "密码最少6位最大18位" ; showTime ( lg_msg) return ; } axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/logIn' , params : { "uid" : lg_count. value, "upwd" : lg_pwd. value} } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { lg_msg. innerText = "登录时,请求数据异常!" ; showTime ( lg_msg) return ; } if ( d. msg == 'errCount' ) { lg_msg. innerText = "账号不存在,请检查!" ; showTime ( lg_msg) return ; } else if ( d. msg == 'errPwd' ) { lg_msg. innerText = "密码不匹配!" ; showTime ( lg_msg) return ; } else if ( d. msg == 'ok' ) { personZone ( d. data) ; } else { lg_msg. innerText = d. msg; showTime ( lg_msg) return ; } } ) ; } function registering ( ) { let htm = ' ' + ' ' + ' ' + ' ' + '你最喜欢的书籍你最喜欢的游戏你最喜欢的歌曲你最喜欢的运动 ' + ' ' + '确认注册 ' + '已有账号?去登陆' ; middleBody. innerHTML = htm; } function register_ok ( ) { let reg_msg = document. getElementById ( "register-msg" ) ; let reg_count = document. getElementById ( "register-count" ) . value; let reg_name = document. getElementById ( "register-name" ) . value; let reg_pwd = document. getElementById ( "register-pwd" ) . value; let reg_ques = document. getElementById ( "register-question" ) . value; let reg_anw = document. getElementById ( "register-anwser" ) . value; if ( reg_count. length!= 11 ) { reg_msg. innerText= "*请输入有效的11位手机号" showTime ( reg_msg) ; return ; } else if ( reg_name. length< 1 || reg_name. length> 20 ) { reg_msg. innerText= "*昵称至少1个至多20个" showTime ( reg_msg) ; return ; } else if ( reg_pwd. length< 6 || reg_pwd. length> 18 ) { reg_msg. innerText= "*密码至少6位至多18位" showTime ( reg_msg) ; return ; } else if ( reg_ques. length< 3 || reg_ques. length> 30 ) { reg_msg. innerText= "*密保问题长度至少3位至多30位" showTime ( reg_msg) ; return ; } else if ( reg_anw. length< 1 || reg_anw. length> 18 ) { reg_msg. innerText= "*密保答案长度至少1位至多18位" showTime ( reg_msg) ; return ; } let isQ = confirm ( "确认注册吗?" ) ; if ( ! isQ) { return ; } axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/registerPerson' , params : { "uid" : reg_count, "upwd" : reg_pwd, "uname" : reg_name, "uquestion" : reg_ques, "uanwser" : reg_anw} } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { reg_msg. innerText = "注册时,请求数据异常!" ; showTime ( reg_msg) return ; } if ( d. msg == 'isAlready' ) { reg_msg. innerText = "当前账号已存在,可试着找回密码!" ; showTime ( reg_msg) return ; } else if ( d. msg == 'addErr' ) { reg_msg. innerText = "注册失败啦!" ; showTime ( reg_msg) return ; } else if ( d. msg == 'ok' ) { alert ( "注册成功,将跳转到登陆页面!" ) ; logining ( ) ; } else { reg_msg. innerText = d. msg; showTime ( reg_msg) return ; } } ) ; } function updatePerson ( ) { let up_msg = document. getElementById ( "up-msg" ) ; let ucount = document. getElementById ( "count" ) ; let uname = document. getElementById ( "uname" ) ; let uage = document. getElementById ( "uage" ) ; if ( uname. value. length < 1 || uname. value. length > 18 ) { up_msg. innerText = "昵称最少一个最大18个字符" ; showTime ( up_msg) ; return ; } if ( uage. value < 1 || uage. value > 100 ) { up_msg. innerText = "请输入有效的年龄" ; showTime ( up_msg) ; return ; } let b = confirm ( "确认修改吗?" ) ; if ( ! b) { return ; } axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/updateInfo' , params : { count : ucount. value, name : uname. value, age : uage. value} } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { up_msg. innerText = "修改时,请求失败!" ; showTime ( up_msg) ; return ; } if ( d. msg == 'errUpdate' ) { up_msg. innerText = "修改失败啦!" ; showTime ( up_msg) ; return ; } else if ( d. msg == 'ok' ) { alert ( "修改成功!" ) ; personZone ( d. data) ; } } ) ; } function findPwd_ok ( ) { let find_msg = document. getElementById ( "findPwd-msg" ) ; let find_count = document. getElementById ( "findPwd-count" ) . value; let find_ques = document. getElementById ( "findPwd-question" ) . value; let find_anw = document. getElementById ( "findPwd-anwser" ) . value; let find_pwd = document. getElementById ( "findPwd-pwd" ) . value; if ( find_count. length!= 11 ) { find_msg. innerText= "请输入有效的11位手机号!" ; showTime ( find_msg) ; return ; } else if ( find_ques. length< 3 || find_ques. length> 18 ) { find_msg. innerText= "密保问题长度至少3至多18位!" ; showTime ( find_msg) ; return ; } else if ( find_anw. length< 1 || find_anw. length> 18 ) { find_msg. innerText= "密保答案长度至少1至多18位!" ; showTime ( find_msg) ; return ; } else if ( find_pwd. length< 6 || find_pwd. length> 18 ) { find_msg. innerText= "密码长度至少6至多18位!" ; showTime ( find_msg) ; return ; } let b = confirm ( "确认尝试找回密码吗?" ) ; if ( ! b) { return ; } axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/findPwd' , params : { 'uid' : find_count, 'uquestion' : find_ques, 'uanwser' : find_anw, 'upwd' : find_pwd} } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { find_msg. innerText = "修改时,请求失败!" ; showTime ( find_msg) ; return ; } if ( d. msg == 'isNotCun' ) { find_msg. innerText = "当前账号不存在!" ; showTime ( find_msg) ; return ; } else if ( d. msg == 'QOAIsErr' ) { find_msg. innerText = "密保问题与密保答案不一致!" ; showTime ( find_msg) ; return ; } else if ( d. msg == 'findErr' ) { find_msg. innerText = "密码找回失败!" ; showTime ( find_msg) ; return ; } else if ( d. msg == 'ok' ) { alert ( "密码更改成功,将跳到登陆页面!" ) ; logining ( ) ; } } ) ; } function findPwd ( ) { let htm = ' ' + ' ' + '你最喜欢的书籍你最喜欢的游戏你最喜欢的歌曲你最喜欢的运动 ' + ' ' + ' ' + '尝试更改 ' + '返回登陆?' ; middleBody. innerHTML = htm; } function goOut ( ) { let isT = confirm ( "确认退出当前账号吗?" ) ; if ( ! isT) { return ; } axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/goOut' , params : { } } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { alert ( "退出登录时,请求失败!" ) ; return ; } head5. innerText= "登录" ; logining ( ) ; } ) ; } head1. onclick = function ( ) { head1. style. backgroundColor= '#dc8ef1' ; head2. style. backgroundColor= 'transparent' ; head3. style. backgroundColor= 'transparent' ; head4. style. backgroundColor= 'transparent' ; head5. style. backgroundColor= 'transparent' ; showOne ( ) ; } head2. onclick = function ( ) { head1. style. backgroundColor= 'transparent' ; head2. style. backgroundColor= '#dc8ef1' ; head3. style. backgroundColor= 'transparent' ; head4. style. backgroundColor= 'transparent' ; head5. style. backgroundColor= 'transparent' ; paiHTwo ( ) ; } head3. onclick = function ( ) { head1. style. backgroundColor= 'transparent' ; head2. style. backgroundColor= 'transparent' ; head3. style. backgroundColor= '#dc8ef1' ; head4. style. backgroundColor= 'transparent' ; head5. style. backgroundColor= 'transparent' ; kongQThree ( ) ; } head4. onclick = function ( ) { head1. style. backgroundColor= 'transparent' ; head2. style. backgroundColor= 'transparent' ; head3. style. backgroundColor= 'transparent' ; head4. style. backgroundColor= '#dc8ef1' ; head5. style. backgroundColor= 'transparent' ; jieYueHistory ( ) ; } head5. onclick = function ( ) { head1. style. backgroundColor= 'transparent' ; head2. style. backgroundColor= 'transparent' ; head3. style. backgroundColor= 'transparent' ; head4. style. backgroundColor= 'transparent' ; head5. style. backgroundColor= '#dc8ef1' ; axios ( { method : 'post' , url : 'http://localhost:8080${pageContext.request.contextPath}/userInfo' , params : { } } ) . then ( function ( rs ) { let d = rs. data; if ( d. code != '200' ) { alert ( "登陆这里请求异常!!" ) return ; } if ( d. msg == 'kong' ) { console. log ( "还没有登陆,正在进入登陆页面" ) ; logining ( ) ; return ; } else if ( d. msg == 'ok' ) { personZone ( d. data) ; } } ) ; } head5. innerText = '${userInf==null?"登录":userInf.uname}' ; function showTime ( t ) { let tim = 5 ; let i = t. innerText; let ditime = setInterval ( dit, 1000 ) ; function dit ( ) { if ( tim == 0 ) { clearInterval ( ditime) ; tim = 5 ; t. innerHTML = "" ; } else { t. innerText = i + '(' + tim + ')' ; tim-- ; } } } function showAnw ( ) { let anw = document. getElementById ( "answer" ) ; let tim= 3 ; anw. type= "text" ; setInterval ( function ( ) { if ( tim<= 0 ) { anw. type= "password" ; } tim-- ; } , 1000 ) } let curr = ${ currPage== null ? 0 : currPage} ; console. log ( "curr=null:" + curr == null ) ; if ( curr == 0 ) { head1. click ( ) ; } if ( curr == 1 ) { head1. click ( ) ; } else if ( curr == 2 ) { head2. click ( ) ; } else if ( curr == 3 ) { head3. click ( ) ; } else if ( curr == 4 ) { head4. click ( ) ; } else if ( curr == 5 ) { head5. click ( ) ; } < / script> < / body> < / html>
三、页面展示 1、首页功能
2、图书排行
3、已被借完的书籍
4、借阅记录,需要登陆
5、登陆页面
6、注册页面
7、找回密码页面
8、登陆后信息展示页面
9、登陆后的 借阅记录功能
源码下载 源码在这里源码