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/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/aophttp://www.springframework.org/schema/aop/spring-aop.xsdhttp://www.springframework.org/schema/txhttp://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 {@Autowiredprivate 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 {@Autowiredprivate 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;}@Autowiredprivate BookService bookService;@Overridepublic 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>

实现后的效果展示页