maven-ssh实现简单的图书管理

1.maven pom.xml的配置

<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.ty</groupId>
    <artifactId>maven-ssh</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <!--版本号定义-->
    <properties>
        <!-- 名称是任意的,建议使用有意义的名字 -->
        <spring.version>5.0.0.RELEASE</spring.version>
        <hibernate.version>5.4.1.Final</hibernate.version>
        <struts.version>2.5.20</struts.version>
        <mysql.version>8.0.13</mysql.version>
        <druid.version>1.1.10</druid.version>
        <jstl.version>1.2</jstl.version>
        <servlet-api.version>4.0.0</servlet-api.version>
        <jsp-api.version>2.3.3</jsp-api.version>
        <jackson.version>2.9.8</jackson.version>
    </properties>
    <!-- 锁定版本 -->
    <dependencyManagement>
        <dependencies>
            <!--spring-->
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context</artifactId>
                <!-- OGNL 表达式  -->
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-aspects</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-orm</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-test</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-web</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <!--hibernate-->
            <dependency>
                <groupId>org.hibernate</groupId>
                <artifactId>hibernate-core</artifactId>
                <version>${hibernate.version}</version>
            </dependency>
            <!--struts2-->
            <dependency>
                <groupId>org.apache.struts</groupId>
                <artifactId>struts2-core</artifactId>
                <version>${struts.version}</version>
            </dependency>
            <!--struts2和spring整合-->
            <dependency>
                <groupId>org.apache.struts</groupId>
                <artifactId>struts2-spring-plugin</artifactId>
                <version>${struts.version}</version>
            </dependency>
        </dependencies>
    </dependencyManagement>
    <!--真正的依赖设置-->
    <dependencies>
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.2</version>
        </dependency>
        <!-- spring -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
        </dependency>
        <!-- junit单元测试 -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <!-- mysql驱动包 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <!-- druid阿里巴巴连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>${druid.version}</version>
        </dependency>
        <!--json-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>${jackson.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-json-plugin</artifactId>
            <version>2.3.1.2</version>
        </dependency>
        <!-- jsp -->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>${jstl.version}</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>${servlet-api.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>${jsp-api.version}</version>
            <scope>provided</scope>
        </dependency>
        <!--hibernate-->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>${hibernate.version}</version>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-jpamodelgen</artifactId>
            <version>${hibernate.version}</version>
        </dependency>
        <!--struts-->
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-core</artifactId>
            <version>${struts.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-spring-plugin</artifactId>
            <version>${struts.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-convention-plugin</artifactId>
            <version>${struts.version}</version>
        </dependency>
    </dependencies>
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <!---该路径下的.xml类型文件也要编译-->
                    <include>**/*.xml</include>
                    <!---该路径下的.properties类型文件也要编译-->
                    <include>**/*.properties</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.xml</include>
                    <include>**/*.properties</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>

        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <port>80</port>
                    <path>/</path>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

2.spring struts的相关配置

2.1 applicationContext.xml配置文件

<?xml version="1.0" encoding="utf-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd">
    <!--开启注解扫描-->
    <context:component-scan base-package="com.ty.*"/>

    <!--配置dataSource-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/20200217?serverTimezone=GMT%2B8"/>
        <property name="username" value="root"/>
        <property name="password" value="123456"/>
    </bean>
    <!--配置sessionFactory-->
    <bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <!--配置hibernate属性-->
        <property name="hibernateProperties">
           <props>
               <prop key="hibernate.show_sql">true</prop>
               <prop key="hibernate.format_sql">true</prop>
               <prop key="hibernate.hbm2ddl.auto">update</prop>
               <prop key="hibernate.dialect">org.hibernate.dialect.MySQL8Dialect</prop>
           </props>
        </property>
        <!--扫描映射文件-->
        <property name="mappingLocations" value="classpath:com/ty/entity/*.hbm.xml"></property>
    </bean>
    <!--配置hibernateTemplate-->
    <bean id="hibernateTemplate" class="org.springframework.orm.hibernate5.HibernateTemplate">
        <property name="sessionFactory" ref="sessionFactory"/>
    </bean>
    <!--配置事务相关-->
    <bean id="transactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
        <property name="sessionFactory" ref="sessionFactory"></property>
    </bean>
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="*" propagation="REQUIRED" read-only="false"/>
            <tx:method name="find*" propagation="SUPPORTS" read-only="true"/>
        </tx:attributes>
    </tx:advice>
    <aop:config>
        <aop:advisor advice-ref="txAdvice" pointcut="execution(* com.ty.service..*.*(..))"/>
    </aop:config>
</beans>

2.2 struts.xml配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <package name="myStruts" extends="struts-default">
        <action name="findAll" class="com.ty.action.BookAction" method="findAll">
            <result type="redirect">/bookManager/book-list.jsp</result>
        </action>
        <action name="findById" class="com.ty.action.BookAction" method="findById">
            <result type="redirect">/bookManager/update-book.jsp</result>
        </action>
        <action name="findByName" class="com.ty.action.BookAction" method="findByName">
            <result type="redirect">/bookManager/name-list.jsp</result>
        </action>
        <action name="addBook" class="com.ty.action.BookAction" method="addBook">
            <result type="redirectAction">findAll</result>
        </action>
        <action name="updateBook" class="com.ty.action.BookAction" method="updateBook">
            <result type="redirectAction">findAll</result>
        </action>
        <action name="deleteBook" class="com.ty.action.BookAction" method="deleteBook">
            <result type="redirectAction">findAll</result>
        </action>
    </package>
</struts>

3. web.xml的配置

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <!--配置sping监听器-->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    
    <!--配置struts-->
    <filter>
        <filter-name>struts</filter-name>
        <filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!--过滤器-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

4.实体类及映射文件的配置

package com.ty.entity;

public class Book {
    private Integer id;
    private String name;
    private String author;
    private String publish;
    private Integer pages;
    private Double price;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    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 String getPublish() {
        return publish;
    }

    public void setPublish(String publish) {
        this.publish = publish;
    }

    public Integer getPages() {
        return pages;
    }

    public void setPages(Integer pages) {
        this.pages = pages;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }
}

映射文件Book.hbm.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--映射文件的dtd约束信息-->
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
        "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
    <class name="com.ty.entity.Book">
        <id name="id" column="id">
            <generator class="native"></generator>
        </id>
        <property name="name" column="name"/>
        <property name="author" column="author"/>
        <property name="publish" column="publish"/>
        <property name="pages" column="pages"/>
        <property name="price" column="price"/>
    </class>
</hibernate-mapping>

5.持久层的实现

package com.ty.dao;

import com.ty.entity.Book;
import org.hibernate.HibernateException;
import org.hibernate.Session;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.orm.hibernate5.HibernateCallback;
import org.springframework.orm.hibernate5.HibernateTemplate;
import org.springframework.stereotype.Repository;

import java.io.Serializable;
import java.util.List;

@Repository
public class BookDao {
    @Autowired
    private HibernateTemplate hibernateTemplate;

    public void addBook(Book book){
        hibernateTemplate.save(book);

    }

    public void deleteBook(int id){
        Book book = hibernateTemplate.get(Book.class, id);
        hibernateTemplate.delete(book);
    }

    public void updateBook(Book book){
        hibernateTemplate.update(book);
    }

    public Book findByName(String name){
        List<Book> books = (List<Book>) hibernateTemplate.find("from Book b where b.name like ?0 ",name);
        if(books.size()>0) {
            return (books.get(0));
        }
        return null;
    }

    public Book findById(int id){
        return (Book) hibernateTemplate.get(Book.class,id);
    }

    /**
     * 分页查询
     * @param page 第几页
     * @param size 一页有几条数据
     * @return
     */
    public List<Book> findAll(String page,int size){
        return hibernateTemplate.execute(new HibernateCallback<List<Book>>() {
            public List<Book> doInHibernate(Session session) throws HibernateException{
                String q = "from Book";
                Query query = session.createQuery(q);
                query.setFirstResult((Integer.valueOf(page)-1)*size);
                query.setMaxResults(size);
                List list = query.list();
                return list;
            }

        });
    }

    /**
     * 获取总页数
     * @param size
     * @return
     */
    public int getCount(int size){
        List<Book> books = (List<Book>) hibernateTemplate.find(" from Book ");
        //将总记录数除以每页的记录数向上取整
        return (int) Math.ceil(1.0*books.size()/size);

    }
}

6.业务层的实现

package com.ty.service;

import com.ty.dao.BookDao;
import com.ty.entity.Book;
import com.ty.pageUtil.PageSize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Service
public class BookService {
    @Autowired
    private BookDao bookDao;

    public void deleteBook(int id){
        bookDao.deleteBook(id);
    }

    public void updateBook(Book book){
        bookDao.updateBook(book);
    }

    public void addBook(Book book){
        bookDao.addBook(book);
    }

    public Book findById(int id){
        return bookDao.findById(id);
    }

    public Book findByName(String name){
        return bookDao.findByName(name);
    }

    public Map<String ,Object> findAll(String page){
        //当没有页码传入时，我们默认它请求第一页
        if(page==null||page.equals("")) {
            page="1";
        }
        Map<String,Object> returnMap = new HashMap<>();
        List<Book> books = bookDao.findAll(page, PageSize.SIZE);
        int count = bookDao.getCount(PageSize.SIZE);//总页数
        returnMap.put("count",count);
        returnMap.put("book",books);
        returnMap.put("page",page);
        return returnMap;
    }

}

7.控制层的实现

package com.ty.action;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
import com.ty.entity.Book;
import com.ty.service.BookService;
import org.apache.struts2.ServletActionContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

@Controller
public class BookAction extends ActionSupport implements ModelDriven {
    private Book book = new Book();
    //属性驱动获取前台页码
    private String page;
    public String getPage() {
        return page;
    }
    public void setPage(String page) {
        this.page = page;
    }

    @Autowired
    private BookService bookService;
    @Override
    public Object getModel() {
        return book;
    }

    public String addBook(){
         bookService.addBook(book);
        return SUCCESS;
    }

    public String deleteBook(){
        bookService.deleteBook( book.getId());
        return SUCCESS;
    }

    public String updateBook(){
        bookService.updateBook(book);
        return SUCCESS;
    }

    public String findById(){
        HttpServletRequest request = ServletActionContext.getRequest();
        Book book1 = bookService.findById(this.book.getId());
        request.getSession().setAttribute("book",book1);
        return SUCCESS;
    }

    public String findByName(){
        Book book1 = bookService.findByName(this.book.getName());
        ServletActionContext.getRequest().getSession().setAttribute("book",book1);
        return SUCCESS;
    }

    public String findAll(){
        Map<String, Object> map = bookService.findAll(this.page);
        List<Book> o = (List<Book>) map.get(book);
        List list = new ArrayList();
        list.add(map.get(book));
        ServletActionContext.getRequest().getSession().setAttribute("books",map);
        return SUCCESS;
    }
}

8 分页查询定义的页码范围

package com.ty.pageUtil;

public interface PageSize {
    int SIZE=3;
}

9.jsp展示数据页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>图书展示</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
    <link rel="icon" href="../assets/img/icon.ico" type="image/x-icon"/>

    <!-- Fonts and icons -->
    <script src="../assets/js/plugin/webfont/webfont.min.js"></script>
    <script>
        WebFont.load({
            google: {"families":["Lato:300,400,700,900"]},
            custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['../assets/css/fonts.min.css']},
            active: function() {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/atlantis.min.css">
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link rel="stylesheet" href="../assets/css/demo.css">
    <link rel="stylesheet" type="text/css" href="../assets/pagination/pagination.css" media="screen">
</head>
<body>
<div class="wrapper">
    <div class="main-header">
        <!-- Logo Header -->
        <div id="logo-header"></div>
        <!-- End Logo Header -->
        <!-- Navbar Header -->
        <div id ="header"></div>
        <!-- End Navbar -->
    </div>

    <!-- Sidebar -->
    <div id="sidebar"></div>
    <!-- End Sidebar -->

    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex align-items-center">
                                   <a href="add-book.jsp"> <button class="btn btn-primary btn-round ml-auto" >
                                        <i class="fa fa-plus"></i>
                                        添加图书
                                    </button></a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="add-row" class="display table table-striped table-hover" >
                                       <%-- <span id="pageCount" style="display:none;">${books.count }</span>
                                        <span id="pageNo" style="display:none;">${books.page }</span>--%>
                                        <thead>
                                        <tr>
                                            <th>书名</th>
                                            <th>作者</th>
                                            <th>出版社</th>
                                            <th>总页数</th>
                                            <th>价格</th>
                                            <th style="width: 10%">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <c:forEach items="${books.book}" var="book">
                                            <tr>
                                                <td>${book.name}</td>
                                                <td>${book.author}</td>
                                                <td>${book.publish}</td>
                                                <td>${book.pages}</td>
                                                <td>${book.price}</td>
                                                <td>
                                                    <div class="form-button-action">
                                                        <a href="findById.action?id=${book.id}">
                                                        <button type="button" data-toggle="tooltip" title="修改" class="btn btn-link btn-primary btn-lg" data-original-title="Edit Task">
                                                            <i class="fa fa-edit"></i>
                                                        </button>
                                                        </a>
                                                        <a href="deleteBook.action?id=${book.id}">
                                                        <button type="" data-toggle="tooltip" title="删除" class="btn btn-link btn-danger" data-original-title="Remove" id="delBtn">
                                                            <i class="fa fa-times"></i>
                                                        </button>
                                                        </a>
                                                    </div>
                                                </td>
                                             </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                            <%--分页--%>
                            <div class="m-style M-box2" style="float:right;margin-right: 10px;margin-bottom: 10px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer"></div>
    </div>

</div>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.3.2.1.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>

<!-- jQuery UI -->
<script src="../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

<!-- jQuery Scrollbar -->
<script src="../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>

<!-- jQuery Sparkline -->
<script src="../assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>

<!-- Datatables -->
<script src="../assets/js/plugin/datatables/datatables.min.js"></script>

<!-- Bootstrap Notify -->
<script src="../assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="../assets/pagination/jquery.pagination.js"></script>

<script>
    $("#logo-header").load("common/logo-header.html");
    $("#header").load("common/header.html");
    $("#sidebar").load("common/sidebar.html");
    $("#footer").load("common/footer.html");
    $(function(){
        $('.M-box2').pagination({
            pageCount:${books.count},
            jump: true,
            coping: true,
            homePage: '首页',
            endPage: '末页',
            prevContent: '上页',
            nextContent: '下页',
            current:${books.page},
            callback: function (api) {
                console.log(api.getCurrent())
                location.href="findAll?page="+api.getCurrent();
            }
        });
        $("#delBtn").onClick(function () {
            alert("22");
            if(confirm("是否确定要删除该用户？")){
                alert("删除成功！");
                return true;
            }
            return false;
        })
    })

    Circles.create({
        id:'circles-1',
        radius:45,
        value:60,
        maxValue:100,
        width:7,
        text: 5,
        colors:['#f1f1f1', '#FF9E27'],
        duration:400,
        wrpClass:'circles-wrp',
        textClass:'circles-text',
        styleWrapper:true,
        styleText:true
    })

    Circles.create({
        id:'circles-2',
        radius:45,
        value:70,
        maxValue:100,
        width:7,
        text: 36,
        colors:['#f1f1f1', '#2BB930'],
        duration:400,
        wrpClass:'circles-wrp',
        textClass:'circles-text',
        styleWrapper:true,
        styleText:true
    })

    Circles.create({
        id:'circles-3',
        radius:45,
        value:40,
        maxValue:100,
        width:7,
        text: 12,
        colors:['#f1f1f1', '#F25961'],
        duration:400,
        wrpClass:'circles-wrp',
        textClass:'circles-text',
        styleWrapper:true,
        styleText:true
    })

    var totalIncomeChart = document.getElementById('totalIncomeChart').getContext('2d');

    var mytotalIncomeChart = new Chart(totalIncomeChart, {
        type: 'bar',
        data: {
            labels: ["S", "M", "T", "W", "T", "F", "S", "S", "M", "T"],
            datasets : [{
                label: "Total Income",
                backgroundColor: '#ff9e27',
                borderColor: 'rgb(23, 125, 255)',
                data: [6, 4, 9, 5, 4, 6, 4, 3, 8, 10],
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false,
            },
            scales: {
                yAxes: [{
                    ticks: {
                        display: false //this will remove only the label
                    },
                    gridLines : {
                        drawBorder: false,
                        display : false
                    }
                }],
                xAxes : [ {
                    gridLines : {
                        drawBorder: false,
                        display : false
                    }
                }]
            },
        }
    });

    $('#lineChart').sparkline([105,103,123,100,95,105,115], {
        type: 'line',
        height: '70',
        width: '100%',
        lineWidth: '2',
        lineColor: '#ffa534',
        fillColor: 'rgba(255, 165, 52, .14)'
    });
</script>
</body>
</html>

10 添加页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>添加图书</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
    <link rel="icon" href="../assets/img/icon.ico" type="image/x-icon"/>

    <!-- Fonts and icons -->
    <script src="../assets/js/plugin/webfont/webfont.min.js"></script>
    <script>
        WebFont.load({
            google: {"families":["Lato:300,400,700,900"]},
            custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['../assets/css/fonts.min.css']},
            active: function() {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/atlantis.min.css">
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link rel="stylesheet" href="../assets/css/demo.css">
</head>
<body>
<div class="wrapper">
    <div class="main-header">
        <!-- Logo Header -->
        <div id="logo-header"></div>
        <!-- End Logo Header -->
        <!-- Navbar Header -->
        <div id ="header"></div>
        <!-- End Navbar -->
    </div>

    <!-- Sidebar -->
    <div id="sidebar"></div>
    <!-- End Sidebar -->

    <div class="main-panel">
        <div class="content">
            <form action="addBook.action" method="post" id="addForm" >
                <div class="form-group form-inline">
                    <label for="inlineinput" class="col-md-2 col-form-label">书名</label>
                    <div class="col-md-10 p-0">
                        <input type="text" class="form-control input-fixed" id="inlineinput" name="name" placeholder="书名">
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label for="inlineinput1" class="col-md-2 col-form-label">作者</label>
                    <div class="col-md-10 p-0">
                        <input type="text" class="form-control input-fixed" id="inlineinput1" name="author" placeholder="作者">
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label for="inlineinput2" class="col-md-2 col-form-label">出版社</label>
                    <div class="col-md-10 p-0">
                        <input type="text" class="form-control input-fixed" id="inlineinput2" name="publish" placeholder="出版社">
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label for="inlineinput3" class="col-md-2 col-form-label">页数</label>
                    <div class="col-md-10 p-0">
                        <input type="text" class="form-control input-fixed" id="inlineinput3" name="pages" placeholder="页数">
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label for="inlineinput4" class="col-md-2 col-form-label">价格</label>
                    <div class="col-md-10 p-0">
                        <input type="text" class="form-control input-fixed" id="inlineinput4" name="price" placeholder="价格">
                    </div>
                </div>
                <div class="m-lg-3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-success"   >添加</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="reset" class="btn btn-danger" >清空</button>
                 </div>
            </form>

        </div>
        <div id="footer"></div>
    </div>

</div>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.3.2.1.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>

<!-- jQuery UI -->
<script src="../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

<!-- jQuery Scrollbar -->
<script src="../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>

<!-- jQuery Sparkline -->
<script src="../assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>

<!-- Datatables -->
<script src="../assets/js/plugin/datatables/datatables.min.js"></script>

<!-- Bootstrap Notify -->
<script src="../assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>


<!-- Sweet Alert -->
<script src="../assets/js/plugin/sweetalert/sweetalert.min.js"></script>

<!-- Atlantis JS -->
<script src="../assets/js/atlantis.min.js"></script>

<!-- Atlantis DEMO methods, don't include it in your project! -->
<script src="../assets/js/setting-demo.js"></script>
<script src="../assets/js/demo.js"></script>
<script>
    $("#logo-header").load("common/logo-header.html");
    $("#header").load("common/header.html");
    $("#sidebar").load("common/sidebar.html");
    $("#footer").load("common/footer.html");

    Circles.create({
        id:'circles-1',
        radius:45,
        value:60,
        maxValue:100,
        width:7,
        text: 5,
        colors:['#f1f1f1', '#FF9E27'],
        duration:400,
        wrpClass:'circles-wrp',
        textClass:'circles-text',
        styleWrapper:true,
        styleText:true
    })

    Circles.create({
        id:'circles-2',
        radius:45,
        value:70,
        maxValue:100,
        width:7,
        text: 36,
        colors:['#f1f1f1', '#2BB930'],
        duration:400,
        wrpClass:'circles-wrp',
        textClass:'circles-text',
        styleWrapper:true,
        styleText:true
    })

    Circles.create({
        id:'circles-3',
        radius:45,
        value:40,
        maxValue:100,
        width:7,
        text: 12,
        colors:['#f1f1f1', '#F25961'],
        duration:400,
        wrpClass:'circles-wrp',
        textClass:'circles-text',
        styleWrapper:true,
        styleText:true
    })

    var totalIncomeChart = document.getElementById('totalIncomeChart').getContext('2d');

    var mytotalIncomeChart = new Chart(totalIncomeChart, {
        type: 'bar',
        data: {
            labels: ["S", "M", "T", "W", "T", "F", "S", "S", "M", "T"],
            datasets : [{
                label: "Total Income",
                backgroundColor: '#ff9e27',
                borderColor: 'rgb(23, 125, 255)',
                data: [6, 4, 9, 5, 4, 6, 4, 3, 8, 10],
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false,
            },
            scales: {
                yAxes: [{
                    ticks: {
                        display: false //this will remove only the label
                    },
                    gridLines : {
                        drawBorder: false,
                        display : false
                    }
                }],
                xAxes : [ {
                    gridLines : {
                        drawBorder: false,
                        display : false
                    }
                }]
            },
        }
    });

    $('#lineChart').sparkline([105,103,123,100,95,105,115], {
        type: 'line',
        height: '70',
        width: '100%',
        lineWidth: '2',
        lineColor: '#ffa534',
        fillColor: 'rgba(255, 165, 52, .14)'
    });
</script>
</body>
</html>

实现后的效果展示页