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">
<button class="btn btn-success" >添加</button>
<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>
实现后的效果展示页