前言

希望本篇博客能够帮助新手小白搭建一个入门级的简易web管理系统，原则是使用尽可能少的web前端、后端技术，不使用设计模式，只展示搭建一个web管理系统的大致流程。所涉及技术：前端：HTML 后端：Maven、Tomcat、Servlet、Mybatis、Mysql、Jsp

一.项目概述

简易的图书管理系统包括：用户登录功能，图书查询与添加功能

二.搭建过程

1.配置环境

（1）数据库创建：

创建数据库：user_db

create database user_db;
use user_db;

创建用户表：user_account

create table user_account(
    name varchar(20),
    password varchar(20)
);
insert into user_account(name, password) values ('YiLu','147'),('Mike','159');

在这里插入图片描述创建图书表：books

create table books
(
    name   varchar(20),
    author varchar(20),
    sum    tinyint,
    borrow tinyint,
    keep   tinyint
);
insert into books(name, author, sum, borrow, keep)
VALUES ('三体', '刘慈欣', 100, 90, 10),
       ('Java', '廖雪峰', 120, 100, 20),
       ('海贼王', '尾田荣一郎', 100, 90, 10);

在这里插入图片描述

（2）创建POJO类

创建与user_account表对应的User类

package com.YiLuLearner.pojo;

public class User {
    String name;
    String password;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

创建与books表对应的Book类

package com.YiLuLearner.pojo;

public class Book {
    String name;
    String author;
    Integer sum;
    Integer borrow;
    Integer keep;

    public Book(String name, String author, Integer sum, Integer borrow, Integer keep) {
        this.name = name;
        this.author = author;
        this.sum = sum;
        this.borrow = borrow;
        this.keep = keep;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public Integer getSum() {
        return sum;
    }

    public void setSum(Integer sum) {
        this.sum = sum;
    }

    public Integer getBorrow() {
        return borrow;
    }

    public void setBorrow(Integer borrow) {
        this.borrow = borrow;
    }

    public Integer getKeep() {
        return keep;
    }

    public void setKeep(Integer keep) {
        this.keep = keep;
    }
}

（3）依赖导入

需要导入如下依赖的坐标：junit,mysql,servlet,mybatis,jsp,jstl以及tomcat插件

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>org.example</groupId>
    <artifactId>PersonalManagementSystem</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>PersonalManagementSystem Maven Webapp</name>
    <url>http://maven.apache.org</url>
    <dependencies>
        <!--junit-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>
        <!-- mybatis -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.5</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.34</version>
        </dependency>

        <!--servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!--jsp-->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>
        <!--jstl-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>javax.annotation</groupId>
            <artifactId>javax.annotation-api</artifactId>
            <version>1.2</version>
        </dependency>

    </dependencies>
    <build>
        <finalName>PersonalManagementSystem</finalName>
        <plugins>
            <!--Tomcat插件-->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <port>80</port><!--访问端口号 -->
                    <!--项目访问路径
                        未配置访问路径: http://localhost:80/tomcat-demo2/a.html
                        配置/后访问路径: http://localhost:80/a.html
                        如果配置成 /hello,访问路径会变成什么?
                            答案: http://localhost:80/hello/a.html
                    -->
                    <path>/</path>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

2.用户登录功能实现

（1）编写一个用户登录HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户大人</title>
</head>
<body>
<div id="userLoginDiv">
    <form action="/userLoginServlet" method="post" id="form">
        <h1 id="loginMsg">User LOGIN IN</h1>
        <p>Username:<input id="name" name="name" type="text"></p>
        <p>Password:<input id="password" name="password" type="password"></p>
        <div id="subDiv">
            <input type="submit" class="button" value="login up">
        </div>
    </form>
</div>
</body>
</html>

在这里插入图片描述

（2）编写mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--起别名-->
    <typeAliases>
        <package name="com.YiLuLearner.pojo"/>
    </typeAliases>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql:///user_db?useSSL=false&amp;useServerPrepStmts=true"/>
                <property name="username" value="root"/>
                <property name="password" value="14777"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="com.YiLuLearner.mapper"/>
    </mappers>
</configuration>

（3）编写UserMapper接口

package com.YiLuLearner.mapper;

import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import com.YiLuLearner.pojo.User;

import javax.servlet.annotation.WebServlet;

@WebServlet("/userLoginServlet")
public interface UserMapper {
    @Select("select * from user_db.user_account where name = #{name} and password = #{password}")
    User select(@Param("name") String name, @Param("password")  String password);
}

（4）编写userLoginServlet

package com.YiLuLearner.servlet;

import com.YiLuLearner.mapper.UserMapper;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import com.YiLuLearner.pojo.User;

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.InputStream;
import java.io.PrintWriter;
@WebServlet("/userLoginServlet")
public class UserLoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 获取前端数据
        String name=req.getParameter("name");
        String password=req.getParameter("password");
        //2. 调用MyBatis完成查询
        //2.1 获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //2.4 调用方法
        User user = userMapper.select(name, password);
        //2.5 释放资源
        sqlSession.close();

        //获取字符输出流，并设置content type
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        //3. 判断user释放为null
        if(user != null){
            // 登陆成功
            req.getRequestDispatcher("/choose.jsp").forward(req,resp);
        }else {
            // 登陆失败
            writer.write("登陆失败");
        }
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

3.增加和查询功能实现

（1）编写功能选择choose.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能选择</title>
</head>
<body>
<div>
    <a href="add.html">增加书籍信息</a>
</div>
    <a href="query.html">查阅书籍信息</a>
<div>
</div>
</body>
</html>

（2）编写图书查询books.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书信息</title>
</head>
<body>
<hr>
<table border="1" cellspacing="0" width="80%">
    <tr>
        <th>书名</th>
        <th>作者</th>
        <th>总数</th>
        <th>已借</th>
        <th>未借</th>
    </tr>

    <c:forEach items="${books}" var="book">
        <tr align="center">
            <td>${book.name}</td>
            <td>${book.author}</td>
            <td>${book.sum}</td>
            <td>${book.borrow}</td>
            <td>${book.keep}</td>

        </tr>
    </c:forEach>
</table>
</body>
</html>

（3）编写add.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add</title>
</head>
<body>
  <div class="formDiv">
    <form action="/addServlet" method="post" id="form">
      <h1 id="loginMsg">Add</h1>
      <p>书名:<input id="name" name="name" type="text"></p>

      <p>作者:<input id="author" name="author" type="text"></p>

      <p>数量:<input id="sum" name="sum" type="number"></p>

      <div class="buttons">
        <input value="提交" type="submit" id="add_btn">
      </div>
    </form>
  </div>
</body>
</html>

在这里插入图片描述

（4）编写query.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Query</title>
</head>
<body>
<form action="/queryServlet" method="post" id="form">
    <div class="buttons">
        <input value="一键查询" type="submit" id="query_btn">
    </div>
</form>
</body>
</html>

在这里插入图片描述

（5）编写BookMapper接口

package com.YiLuLearner.mapper;

import com.YiLuLearner.pojo.Book;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface BookMapper {
    @Insert("insert into user_db.books values(#{name},#{author},#{sum},#{borrow},#{keep})")
    void add(Book book);
    @Select("select * from user_db.books")
        //@ResultMap("bookResultMap")
    List<Book> selectAllBooks();
}

（6）编写QueryServlet

package com.YiLuLearner.servlet;

import com.YiLuLearner.mapper.BookMapper;
import com.YiLuLearner.pojo.Book;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

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.InputStream;
import java.util.List;

@WebServlet("/queryServlet")
public class QueryServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //2. 调用MyBatis完成查询
        //2.1 获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
        List<Book> books=bookMapper.selectAllBooks();
        //2. 存入request域中
        req.setAttribute("books",books);
        //3. 转发到brand.jsp
        req.getRequestDispatcher("/book.jsp").forward(req,resp);
    }

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

（7）编写AddServlet

package com.YiLuLearner.servlet;

import com.YiLuLearner.mapper.BookMapper;
import com.YiLuLearner.pojo.Book;
import com.YiLuLearner.mapper.BookMapper;
import com.YiLuLearner.pojo.Book;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

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.InputStream;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name=req.getParameter("name");
        String author=req.getParameter("author");
        int sum=Integer.valueOf(req.getParameter("sum"));
        int keep=sum;
        int borrow=0;
        Book book=new Book(name,author,sum,borrow,keep);
        //获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //获取Mapper
        BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
        //调用方法
        bookMapper.add(book);
        //释放资源
        sqlSession.commit();
        sqlSession.close();
        req.getRequestDispatcher("/choose.jsp").forward(req,resp);
    }

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

在这里插入图片描述

总结

至此一个简易的web管理系统已经搭建完成，新手小白可以根据自己的情况在此基础上进行扩充（如优化前端页面效果、增加系统设置图书信息、删除图书信息功能、增加普通用户和图书管理员权限）。不管怎么说，至此你已经迈出了web开发的第一步！！！

新手向，从0到1搭建简易的图书管理系统

前言

一.项目概述

二.搭建过程

1.配置环境

（1）数据库创建：

（2）创建POJO类

（3）依赖导入

2.用户登录功能实现

（1）编写一个用户登录HTML页面

（2）编写mybatis-config.xml

（3）编写UserMapper接口

（4）编写userLoginServlet

3.增加和查询功能实现

（1）编写功能选择choose.jsp文件

（2）编写图书查询books.jsp文件

（3）编写add.html页面

（4）编写query.html页面

（5）编写BookMapper接口

（6）编写QueryServlet

（7）编写AddServlet

总结