一、系统简介


本项目采用eclipse工具开发,jsp+servlet+jquery技术编写,数据库采用的是mysql,navicat开发工具。

系统一共分为1个角色分别是:用户

二、模块简介

用户

1、登录

2、图书管理

3、图书类型管理

4、学生管理

5、借阅管理

难度等级:✩
用户类型:1角色(用户)
设计模式:MVC
项目架构:B/S架构
开发语言:Java语言
前端技术:HTML、CSS、JS、JQuery等
后端技术:JSP、servlet框架
运行环境:Windows7或10、JDK1.8
运行工具:本系统采用Eclipse开发,仅支持Eclipse运行,不支持MyEclipse和IDEA运行,因为三者的骨架不一样,强行导入打开运行可能会导致出现未知的错误。(如若想用idea运行,需要转换!!!!)
数  据  库:MySQL5.5/5.7/8.0版本
运行服务器:Tomcat7.0/8.0/8.5/9.0等版本
是否基于Maven环境:否
是否采用框架:是
数据库表数量:5张表
JSP页面数量:10多张
是否有分页:有分页

相关截图


 

 

 相关代码

登录

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统登录</title>
  <!-- 引入favicon图标 -->
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
</head>
<style>
  /* 初始化代码 */
  * {
    margin: 0;
    padding: 0;
  }

  html,
  body {
    width: auto;
    height: 100%;
  }

  /* 初始化代码结束 */


  .container {
    width: 100%;
    height: 100%;
    background:url("static/img/preview.gif") no-repeat;
    background-size: 100% 100%;
  }

  .w {

    margin: 14% auto;
    width: 800px;
  }

  /* 这是左边的框框内容!!!!!!! ! */
  .container .login-left .login-logo img {
    display: block;
    width: 80%;
    height: 80%;
    margin: 40px auto;
  }

  .login-left {
    width: 400px;
    height: 400px;
    float: left;
    background-color: #ffffff55;
    border-radius: 4px;
    box-shadow: 0 0 2px #fff;
  }

  /* 这是右边的框框内容!!!!!!!!! */

  .login-right {
    width: 400px;
    height: 400px;
    float: left;
    background-color: #fff;
    opacity: 0.9;
    border-radius: 4px;
    box-shadow: 0 0 2px #fff;
  }

  .login-right .biaoti {
    margin-top: 40px;
    text-align: center;
  }

  .form {
    margin-top: 10px;
    padding: 40px 40px 10px 10px;
  }

  .form i {
    font-size: 18px;
    color: #333;
  }

  .form a {
    display: block;
    float: right;
    text-decoration: none;
    color: #333;
  }

  .form .login-btn {
    width: 90%;
    margin-top: 10px;
    background-color: rgb(100,204,195);
  }

  .footer {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    color: rgb(0, 0, 0);
  }
  /*验证码*/
  .vcode-box{
    position: relative;
  }
  .vcode-box img{
    position: absolute;
    top: 1px;
    right: 5%;
    cursor: pointer;
  }
</style>
<!-- 引入jquery.js-->
<script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
<!-- 引入bootstrap.js-->
<script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
<script>
  function login(){
	  var username = $("#username").val();
	  var password = $("#password").val();
	  $.post("./LoginController",{"username" : username,"password" : password},function(data){
		 if(data === "success") {
			 
			 location.href = "./home.html";
		 }else{
			 alert("用户名或密码错误!!!");
		 }
	  })
  }
</script>
<body>
<div class="container">
  <div class="w">
    <div class="login-left">
      <div class=login-logo>
       <!--  <p><img src="./static/img/logo.png" alt=""></p> -->
      </div>
    </div>
    <div class="login-right">
      <h1 class="biaoti">登录</h1>
      <form class="form-horizontal form" id="myForm" action="/pm/users/login">
        <div class="form-group">
          <label class="col-md-2 control-label"><i class="glyphicon glyphicon-home"></i></label>
          <div class="col-md-10">
            <input type="text" class="form-control" id="username" name="username" placeholder="用户">
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label"><i class="glyphicon glyphicon-lock"></i></label>
          <div class="col-md-10">
            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
          </div>
        </div>
        
        <div class="form-group">
          <div class="col-md-offset-2 col-md-10">
            <div class="checkbox">
              <label> <input type="checkbox"> 记住密码
              </label>
              <a href="">忘记密码</a>
            </div>

          </div>
        </div>
        <div class="form-group">
          <div class="col-md-offset-2 col-md-10">
            <button type="button" class="btn btn-default login-btn" id="login-btn" onclick="login()">登录</button>
          </div>
        </div>
      </form>
    </div>
    <div class="footer">
      <p>技术支持</p>
    </div>
  </div>
</div>
</body>

</html>
package com.yq.bookmgr.controller;

import java.io.IOException;
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 com.yq.bookmgr.entity.UserEntity;
import com.yq.bookmgr.service.UserService;
import com.yq.bookmgr.service.impl.UserServiceImpl;


@WebServlet("/LoginController")
public class LoginController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private UserService userService = new UserServiceImpl();
		
    public LoginController() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		
		UserEntity user = new UserEntity(username,password);
		
		if(userService.login(user)) {
			response.getWriter().append("success");
		}else {
			response.getWriter().append("failed");
		}
		response.getWriter().flush();
		
		
	}

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

}

其他相关代码都是类似的,主要是前端jsp和后端servlet交互比较重要!!!非开源!!!!!!
其他模块代码都是类似的,此项目适合初学者学习借鉴,项目整体比较简单
喜欢的朋友的点赞加关注,感兴趣的同学可以研究!!!!!
感谢  = v =

项目截图中的数据,很多是用来测试的,需要自行添加合适的数据图片!!

Logo

快速构建 Web 应用程序

更多推荐