目錄

我有話(huà)說(shuō):

1 項(xiàng)目簡(jiǎn)介

2 項(xiàng)目展示

2.1 首先創(chuàng)建數(shù)據(jù)庫(kù)和表信息

2.2 預(yù)先準(zhǔn)備操作

2.3?開(kāi)始配置項(xiàng)目

2.4 開(kāi)始web層

3 圖片展示

4 附上源碼文件(百度網(wǎng)盤(pán)):

我有話(huà)說(shuō):

• 首先 內(nèi)容比較多,篇幅比較長(zhǎng),有需要的可以耐心看完.
• 這個(gè)項(xiàng)目最開(kāi)始是跟著狂神寫(xiě)下來(lái)的,附上狂神的詳細(xì)視頻鏈接及詳細(xì)筆記:

17、ssm整合：Mybatis層_嗶哩嗶哩_bilibilihttps://www.bilibili.com/video/BV1aE41167Tu?p=17&vd_source=b1036c3d2e010aa91f6ccb4fed6293ec狂神SSM教程- 專(zhuān)欄 -KuangStudyhttps://www.kuangstudy.com/zl/ssm#1377532368339955713

"如果沒(méi)有SSM框架的基礎(chǔ),建議先學(xué)完SSM的基礎(chǔ)知識(shí),這樣聽(tīng)起來(lái)會(huì)容易很多".

• 跟著狂神寫(xiě)項(xiàng)目的期間沒(méi)有遇到報(bào)錯(cuò),但是寫(xiě)完之后覺(jué)得如果只是這樣我并不滿(mǎn)足,所以把我會(huì)的內(nèi)容基本上都在這個(gè)項(xiàng)目中寫(xiě)出來(lái)了,我認(rèn)為這是我的一種進(jìn)步.
• 正常來(lái)說(shuō)一個(gè)項(xiàng)目從開(kāi)始到結(jié)束應(yīng)該是一步一步來(lái)的,這里因?yàn)闀r(shí)間問(wèn)題,無(wú)法一步一步展示.
• 雖然內(nèi)容是整個(gè)項(xiàng)目的,但是建議還是再純手打一遍,因?yàn)閺?fù)制粘貼總會(huì)有些不必要的問(wèn)題,哪怕正確的代碼,復(fù)制粘貼可能還是有問(wèn)題.
• 項(xiàng)目中的jsp頁(yè)面可以先用vscode寫(xiě)一遍然后復(fù)制到j(luò)sp頁(yè)面即可.
• 所謂框架,就是搭好一個(gè)架子,然后所有的操作都在框架的內(nèi)部進(jìn)行,不需要對(duì)框架進(jìn)行其他的修改,而且一些操作交給Spring框架就可以幫你完成.
• 在寫(xiě)這個(gè)項(xiàng)目中遇到的一些問(wèn)題:前段信息亂碼,分頁(yè)查詢(xún),大部分的js操作,有的時(shí)候可能并不是代碼的問(wèn)題...等等,但是好在堅(jiān)持下來(lái)并逐一解決,這個(gè)項(xiàng)目在一些方面還是可以改進(jìn),比如多表查詢(xún),頁(yè)面跳轉(zhuǎn)動(dòng)畫(huà),分頁(yè)的信息,一些好看的css樣式等.
• 知識(shí)沒(méi)有白學(xué)的,學(xué)無(wú)止境.

1 項(xiàng)目簡(jiǎn)介

1.開(kāi)發(fā)環(huán)境:

• JDK1.8; mysql8.0.31; mybatis3.5.2; mybatis-spring2.0.2; spring-webmvc及springjdbc都是5.1.9.RELEASE(個(gè)人認(rèn)為目前是用的最舒服的一版)

2.開(kāi)發(fā)軟件:

• 可視化前段:VSCode; 數(shù)據(jù)庫(kù):navicat; 后端: IDEA2021.3.3; 服務(wù)器: Tomcat

3.其他類(lèi)插件:lombok PageHelper?fileupload

4.該項(xiàng)目通過(guò)SSM框架實(shí)現(xiàn),功能包括"基本的CRUD; 用戶(hù)的登錄注冊(cè)注銷(xiāo); 攔截器; 分頁(yè); 文件上傳及文件下載,及一些前段操作等"

2 項(xiàng)目展示

2.1 首先創(chuàng)建數(shù)據(jù)庫(kù)和表信息

? ?1. book表

CREATE DATABASE javawork;
USE javawork;
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book`  (
  `bookid` int(0) NOT NULL AUTO_INCREMENT COMMENT 'uuid',
  `bookname` varchar(20) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '圖書(shū)名稱(chēng)',
  `author` varchar(30) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '作者',
  `publish` varchar(30) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '出版社',
  `introduction` varchar(50) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '簡(jiǎn)介',
  `price` double NOT NULL COMMENT '價(jià)格',
  `booktype` varchar(10) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '書(shū)籍類(lèi)型',
  PRIMARY KEY (`bookid`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 19 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci COMMENT = '圖書(shū)信息' ROW_FORMAT = Dynamic;


INSERT INTO `book` VALUES (1, '西游記', '吳承恩', '人民文學(xué)出版社', '師徒四人去西天取真經(jīng)', 42, '奇幻類(lèi)');
INSERT INTO `book` VALUES (2, '三國(guó)演義', '羅貫中', '清華大學(xué)出版社', '東漢末年分三國(guó)。。。', 48, '歷史類(lèi)');
INSERT INTO `book` VALUES (3, '紅樓夢(mèng)', '曹雪芹', '機(jī)械工業(yè)出版社', '寶玉與眾多男女之間故事', 39, '歷史類(lèi)');
INSERT INTO `book` VALUES (4, '資本論', '馬克思', '原子能出版社', '馬克思的剩余價(jià)值理論', 42, '經(jīng)濟(jì)類(lèi)');
INSERT INTO `book` VALUES (5, '經(jīng)濟(jì)學(xué)原理', '馬歇爾', '機(jī)械工業(yè)出版社', '西方經(jīng)濟(jì)學(xué)界公認(rèn)為劃時(shí)代的著作', 66, '經(jīng)濟(jì)類(lèi)');
INSERT INTO `book` VALUES (6, '大變局下的中國(guó)法治', '李衛(wèi)東', '北京大學(xué)出版社', '十大經(jīng)典法學(xué)著作', 42, '政治類(lèi)');
INSERT INTO `book` VALUES (7, '從你的全世界路過(guò)', '張嘉佳', '湖南文藝出版社', '38個(gè)愛(ài)情故事的小說(shuō)集', 36, '愛(ài)情類(lèi)');
INSERT INTO `book` VALUES (8, '天才在左,瘋子在右', '高銘', '武漢大學(xué)出版社', '國(guó)內(nèi)第一本精神病人訪(fǎng)談手記', 30, '教育類(lèi)');
INSERT INTO `book` VALUES (9, '追風(fēng)箏的人', '卡勒德·胡賽尼', '上海人民出版社', '人性的背叛與救贖', 36, '情感類(lèi)');
INSERT INTO `book` VALUES (10, '水滸傳', '施耐庵', '人民文學(xué)出版社', '108位梁山好漢', 52, '武俠類(lèi)');
INSERT INTO `book` VALUES (11, '羊脂球', '莫泊桑', '北京聯(lián)合出版公司', '法國(guó)社會(huì)各階層的丑惡嘴臉', 41, '社會(huì)類(lèi)');
INSERT INTO `book` VALUES (12, '百年孤獨(dú)', '加西亞·馬爾克斯', '上海譯文出版社', '布恩迪亞家族七代人的百年興衰', 55, '文學(xué)類(lèi)');
INSERT INTO `book` VALUES (13, '平凡的世界', '路遙', '北京十月文藝出版社', '中國(guó)西北農(nóng)村的歷史變革', 58, '文學(xué)類(lèi)');
INSERT INTO `book` VALUES (14, '三體', '劉慈欣', '科幻世界出版社', '征服世界的中國(guó)科幻神作', 62, '科幻類(lèi)');
INSERT INTO `book` VALUES (15, '解憂(yōu)雜貨店', '東野圭谷', '南海出版公司', '收集煩惱和困擾的雜貨店', 54, '文學(xué)類(lèi)');
INSERT INTO `book` VALUES (16, '白鹿原', '陳忠實(shí)', '人民文學(xué)出版社', '中國(guó)農(nóng)村的50年變革', 40, '文學(xué)類(lèi)');
INSERT INTO `book` VALUES (17, '茶館', '舒慶春(老舍)', '社會(huì)科學(xué)文獻(xiàn)出版社', '一個(gè)茶館的近50年經(jīng)歷', 35, '文學(xué)類(lèi)');
INSERT INTO `book` VALUES (18, '圍城', '錢(qián)鍾書(shū)', '上海晨光出版社', '外邊的人想進(jìn)去，里面的人想出來(lái)', 30, '文學(xué)類(lèi)');
INSERT INTO `book` VALUES (19, '海邊的卡夫卡', '村上春樹(shù)', '上海譯文出版社', '田村卡夫卡的精神救贖', 40, '文學(xué)類(lèi)');
INSERT INTO `book` VALUES (20, '我這一輩子', '舒慶春(老舍)', '中國(guó)華僑出版社', '舒慶春的一生', 36, '其他類(lèi)');
INSERT INTO `book` VALUES (21, '世上另一個(gè)我', '薩拉·帕坎南', '湖南文藝出版社', '我在別人設(shè)定的角色里拼命掙扎,以為那是我想要的人生', 28, '親情類(lèi)');
INSERT INTO `book` VALUES (22, '看見(jiàn)', '柴靜', '廣西師范大學(xué)出版社', '中國(guó)社會(huì)十年變遷的備忘錄', 40, '社會(huì)文學(xué)類(lèi)');

2. user表

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int(0) NOT NULL AUTO_INCREMENT COMMENT '用戶(hù)id',
  `username` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '用戶(hù)名',
  `password` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '用戶(hù)密碼\r\n',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 16 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;


INSERT INTO `user` VALUES (1, 'admin', '123456');

2.2 預(yù)先準(zhǔn)備操作

新建Maven項(xiàng)目"Book"?

1. 右鍵單擊Book模塊,選擇框架支持,選擇web應(yīng)用程序(4.0版本);也可以在選擇Maven項(xiàng)目是使用web-app模板,但是不推薦.

然后在項(xiàng)目中會(huì)多出來(lái)一個(gè)web的文件夾,注意:文件夾圖標(biāo)的小圓點(diǎn)一定要是亮著的,否則去Facet中調(diào)整選擇到當(dāng)前的項(xiàng)目.?

?2. 引入依賴(lài)

<?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.gcx</groupId>
    <artifactId>Book</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <!--    導(dǎo)入依賴(lài)-->
    <dependencies>
        <!--Junit單元測(cè)試-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <!--數(shù)據(jù)庫(kù)驅(qū)動(dòng)-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.31</version>
        </dependency>
        <!-- 數(shù)據(jù)庫(kù)連接池 -->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>
        <!--Servlet - JSP -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <!--Mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.2</version>
        </dependency>
        <!--Spring/SpringMVC-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
<!--        實(shí)體類(lèi)插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.24</version>
        </dependency>
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.7</version>
        </dependency>
<!--        文件上傳-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
        </dependency>
<!--        myBatis分頁(yè)插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.3.2</version>
        </dependency>
    </dependencies>
    <!--    靜態(tài)資源導(dǎo)出-->
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>

</project>

3.為了避免出現(xiàn)404,創(chuàng)建lib文件(必須確保所有依賴(lài)已加入到maven中)

單擊加號(hào)后選擇庫(kù)文件,全選,添加,應(yīng)用即可

4. 配置Tomcat服務(wù)器

?然后應(yīng)用,確認(rèn)即可

5. 測(cè)試Tomcat服務(wù)器能否正常運(yùn)行

?啟動(dòng)Tomcat后瀏覽器進(jìn)入名為$Title$的index.jsp頁(yè)面,并顯示$END信息,表示Tomcat配置沒(méi)問(wèn)題

?2.3? 開(kāi)始配置項(xiàng)目

1. 創(chuàng)建項(xiàng)目結(jié)構(gòu)

java文件夾下屬于源碼文件,resources文件夾下屬于資源文件,web下是前端的一些配置文件及頁(yè)面.

?2. 開(kāi)始編寫(xiě)實(shí)體類(lèi)

實(shí)體類(lèi)名需要與數(shù)據(jù)庫(kù)表名一致

Book

package com.gcx.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
@SuppressWarnings("all")
public class Book {
    private int bookid;
    private String bookname;
    private String author;
    private String publish;
    private String introduction;
    private Double price;
    private String booktype;
}

User

package com.gcx.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}

?3. 編寫(xiě)持久層(dao層)

BookMapper接口

package com.gcx.dao;

import com.gcx.pojo.Book;
import com.gcx.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface BookMapper {
    //    增加一本書(shū)
    int addBook(Book book);
    //    刪除一本書(shū)
    int deleteBookById(@Param("bookid") int id);
    //    更新一本書(shū)
    int updateBook(Book book);
    //    查詢(xún)一本書(shū)
    Book queryBookById(@Param("bookid") int id);
    //    通過(guò)書(shū)名查詢(xún)書(shū)籍,因?yàn)榭赡苁且粋€(gè)集合,所以用List
    List<Book> queryBookByName(@Param("bookname") String bookname);
    //    獲取登錄信息
    User findUserByNameAndPassword(User user);
    //    分頁(yè)
    List<Book> findList();
    //    注冊(cè)
    int adduser(User user);


}

因?yàn)橐ㄟ^(guò)mybatis鏈接數(shù)據(jù)庫(kù),所以要配置它的核心配置文件: mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <typeAliases>
        <package name="com.gcx.pojo"/>
    </typeAliases>
    <mappers>
        <mapper class="com.gcx.dao.BookMapper"/>
    </mappers>
</configuration>

?database.properties

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/javawork?useSSL=true&useUnicode=true&characterEncoding=utf8&ServerTimezone=Asia/Shanghai
jdbc.username=root
jdbc.password=123456

spring-dao.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"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
    <Context:property-placeholder location="classpath:database.properties"/>
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="password" value="${jdbc.password}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="driverClass" value="${jdbc.driver}"/>
        <!--    配置數(shù)據(jù)庫(kù)連接池屬性-->
        <property name="maxPoolSize" value="30"/>
        <property name="minPoolSize" value="10"/>
        <!-- 關(guān)閉連接后不自動(dòng)commit -->
        <property name="autoCommitOnClose" value="false"/>
        <!-- 獲取連接超時(shí)時(shí)間 -->
        <property name="checkoutTimeout" value="10000"/>
        <!-- 當(dāng)獲取連接失敗重試次數(shù) -->
        <property name="acquireRetryAttempts" value="2"/>
    </bean>
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!--        配置分頁(yè)插件-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <value>
                            helperDialect = mysql
                            reasonable = true
                        </value>
                    </property>
                </bean>
            </array>
        </property>
    </bean>

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <property name="basePackage" value="com.gcx.dao"/>
    </bean>

</beans>

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"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd">
    <import resource="classpath:spring-service.xml"/>
    <import resource="classpath:spring-dao.xml"/>
    <import resource="classpath:spring-mvc.xml"/>
</beans>

有報(bào)錯(cuò)先不用管,是因?yàn)檫€沒(méi)有配置對(duì)應(yīng)的XML文件.

注意,這里上邊會(huì)提示要配置應(yīng)用程序的上下文

?點(diǎn)擊配置應(yīng)用程序上下文,創(chuàng)建新的程序上下文

點(diǎn)擊確定就可以了,進(jìn)入項(xiàng)目設(shè)置,點(diǎn)擊模塊,查看是否配置成功

?到此數(shù)據(jù)庫(kù)鏈接完成,配置BookMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gcx.dao.BookMapper">
    <insert id="addBook" parameterType="book">
        insert into book(bookname,author,publish,introduction,price,booktype)
        values(#{bookname},#{author},#{publish},#{introduction},#{price},#{booktype});
    </insert>
    <delete id="deleteBookById" parameterType="int">
        delete from book where bookid =#{bookid};
    </delete>
    <update id="updateBook" parameterType="book">
        update book set bookname=#{bookname},author=#{author},publish=#{publish},introduction=#{introduction},price=#{price},booktype=#{booktype}
        where bookid=#{bookid};
    </update>
    <select id="queryBookById" resultType="book">
        select *from book where bookid = #{bookid};
    </select>
    <select id="queryBookByName" resultType="book">
        select *from book where bookname = #{bookname};
    </select>
    <select id="findUserByNameAndPassword" resultType="User">
        select *
        from user
        where username = #{username} and password = #{password};
    </select>
    <select id="findList" resultMap="booksresultmap">
        select *
        from book
    </select>
    <resultMap id="booksresultmap" type="com.gcx.pojo.Book">
        <id property="bookid" column="bookid" jdbcType="INTEGER"/>
        <result property="bookname" column="bookname" jdbcType="VARCHAR"/>
        <result property="author" column="author" jdbcType="VARCHAR"/>
        <result property="publish" column="publish" jdbcType="VARCHAR"/>
        <result property="introduction" column="introduction" jdbcType="VARCHAR"/>
        <result property="price" column="price" jdbcType="DOUBLE"/>
        <result property="booktype" column="booktype" jdbcType="INTEGER"/>
    </resultMap>
    <insert id="adduser" parameterType="user">
        insert into user(username,password)
        values (#{username},#{password});
    </insert>
</mapper>

4. 編寫(xiě)業(yè)務(wù)層代碼(service接口及實(shí)現(xiàn)類(lèi))

BookService

package com.gcx.service;

import com.gcx.pojo.Book;
import com.gcx.pojo.User;
import com.github.pagehelper.PageInfo;

public interface BookService {
    //    增加一本書(shū)
    int addBook(Book book);
    //    刪除一本書(shū)
    int deleteBookById(int id);
    //    更新一本書(shū)
    int updateBook(Book book);
    //    查詢(xún)一本書(shū)
    Book queryBookById(int id);
    //    通過(guò)書(shū)名查詢(xún)書(shū)籍
    PageInfo<Book> queryBookByName(String bookname);
    //    獲取登錄信息
    User findUserByNameAndPassword(User user);
    //    分頁(yè)查詢(xún)
    PageInfo<Book> findList(Integer pageNum, Integer pageSize);
    //    注冊(cè)
    int adduser(User user);
}

BookServiceImpl

package com.gcx.service;

import com.gcx.dao.BookMapper;
import com.gcx.pojo.Book;
import com.gcx.pojo.User;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

public class BookServiceImpl implements BookService {
    private BookMapper bookMapper;

    public void setBookMapper(BookMapper bookMapper) {
        this.bookMapper = bookMapper;
    }

    @Override
    public int addBook(Book book) {
        return bookMapper.addBook(book);
    }

    @Override
    public int deleteBookById(int id) {
        return bookMapper.deleteBookById(id);
    }

    @Override
    public int updateBook(Book book) {
        return bookMapper.updateBook(book);
    }

    @Override
    public Book queryBookById(int id) {
        return bookMapper.queryBookById(id);
    }

    @Override
    public PageInfo<Book> queryBookByName(String bookname) {
        List<Book> list = bookMapper.queryBookByName(bookname);
        return new PageInfo<>(list);
    }

    @Override
    public User findUserByNameAndPassword(User user) {
        return bookMapper.findUserByNameAndPassword(user);
    }

    @Override
    public PageInfo<Book> findList(@RequestParam Integer pageNum,
                                   @RequestParam Integer pageSize) {
        //        每頁(yè)顯示多少數(shù)據(jù)
        if (pageSize== null){
            pageSize=5;
        }
        PageHelper.startPage(pageNum,pageSize);
        List<Book> list = bookMapper.findList();
//        for (Books books : list) {
//            System.out.println("書(shū)籍信息:"+books);
//        }
        PageInfo PageInfo = new PageInfo(list);
        System.out.println("總頁(yè)數(shù):"+PageInfo.getPages());
        System.out.println("總記錄數(shù):"+PageInfo.getTotal());
        System.out.println("當(dāng)前頁(yè)數(shù):"+PageInfo.getPageNum());
        System.out.println("當(dāng)前頁(yè)面記錄數(shù):"+PageInfo.getPageSize());
        return new PageInfo<>(list);
    }

    @Override
    public int adduser(User user) {
        return bookMapper.adduser(user);
    }
}

?配置spring-service.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/cache"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/cache http://www.springframework.org/schema/cache/spring-cache.xsd">
    <Context:component-scan base-package="com.gcx.service"/>
    <bean id="BookServiceImpl" class="com.gcx.service.BookServiceImpl">
        <property name="bookMapper" ref="bookMapper"/>
    </bean>
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

</beans>

配置上下文為applicationContext.xml.

5. 配置spring-mvc.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:mvc="http://www.springframework.org/schema/mvc"
       xmlns:Context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
<!--    開(kāi)啟注解-->
    <mvc:annotation-driven/>
<!--    過(guò)濾靜態(tài)資源-->
    <mvc:default-servlet-handler/>
<!--    掃描包下注解-->
    <Context:component-scan base-package="com.gcx.controller"/>
<!--    視圖解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
<!--    配置攔截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/book/**"/>
            <bean class="com.gcx.interceptor.LoginInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>
    <!--文件上傳配置-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 請(qǐng)求的編碼格式，必須和jSP的pageEncoding屬性一致，以便正確讀取表單的內(nèi)容，默認(rèn)為ISO-8859-1 -->
        <property name="defaultEncoding" value="utf-8"/>
        <!-- 上傳文件大小上限，單位為字節(jié)（10485760=10M） -->
        <property name="maxUploadSize" value="10485760"/>
        <property name="maxInMemorySize" value="40960"/>
    </bean>
</beans>

如果在配置攔截器的地方報(bào)錯(cuò),是因?yàn)檫€沒(méi)有些攔截器的類(lèi),可以先創(chuàng)建一個(gè)不寫(xiě)內(nèi)容.

配置上下文為applicationContext.xml

此時(shí)在Spring的模塊中顯示如下:

到這里,底層代碼基本完成了.然后就是前后端的鏈接:

在mvc中是通過(guò)Servlet層的HttpServlet來(lái)實(shí)現(xiàn)的,在SpringMVC中,則是通過(guò)Controller層的添加注解或繼承Controller接口來(lái)實(shí)現(xiàn)的.

6. BookController

package com.gcx.controller;

import com.gcx.pojo.Book;
import com.gcx.pojo.User;
import com.gcx.service.BookService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.*;
import java.net.URLEncoder;
/**
 * author: labixiaoxin@
 * advice: Controller層可以寫(xiě)的更分工明確;
 * 新建LoginController來(lái)寫(xiě)登錄.注冊(cè).注銷(xiāo)的實(shí)現(xiàn);
 * 新建PageController用來(lái)寫(xiě)分頁(yè)的實(shí)現(xiàn);
 * ...其他類(lèi)似
 */

@Controller
@RequestMapping("/book")
@SuppressWarnings("all")
public class BookController {
    @Autowired
    @Qualifier("BookServiceImpl")
    private BookService bookService;

    //    跳轉(zhuǎn)到登錄頁(yè)
    @RequestMapping("toLogin")
    public String Login() {
        return "Login";
    }
    
//    進(jìn)入登錄頁(yè)
    /**
     *
     * @param session 將數(shù)據(jù)保存在session中
     * @param user    數(shù)據(jù)庫(kù)內(nèi)的用戶(hù)登錄信息
     * @param model   將數(shù)據(jù)通過(guò)el表達(dá)式顯示在頁(yè)面
     * @return 跳轉(zhuǎn)頁(yè)面
     */
    @RequestMapping("Login")
    public String Login(HttpSession session, User user, Model model) {
//        用來(lái)獲取user內(nèi)的信息
        User userByNP = bookService.findUserByNameAndPassword(user);
        /**
         *
         * 調(diào)用業(yè)務(wù)層接口內(nèi)方法
         * 判斷用戶(hù)信息是否正確,且用戶(hù)信息不為空.
         * 將user信息保存在session中,并進(jìn)入首頁(yè)
         * 否則返回error1信息
         */
        if (userByNP != null) {
            session.setAttribute("userLoginInfo", user);
            System.out.println(user);
            return "redirect:/book/allbook/1";
        } else {
            model.addAttribute("error1", "賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入");
            return "Login";
        }
    }

    //   跳轉(zhuǎn)注冊(cè)
    @RequestMapping("toregisterPage")
    public String toregisterPage() {
        return "register";
    }

    //    注冊(cè)sql
    /**
     *
     * @param username
     * @param password 用@RequestParam獲取前段傳遞的信息獲取用戶(hù)名和密碼
     * @param session
     * @return
     */
    @GetMapping("register")
    public String register(
            @RequestParam("username") String username,
            @RequestParam("password") String password, HttpSession session) {
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        bookService.adduser(user);
        session.setAttribute("userLoginInfo", user);
        System.out.println(user);
        return "Login";
    }

    /**
     *
     * 兩種方法:
     *      1.removeAttribute 移除指定的信息
     *      2.invalidate 移除session中所有信息
     * @param
     * @return
     */
    @RequestMapping("destory")
    public String destory(HttpSession session) {
        session.removeAttribute("userLoginInfo");
//        session.invalidate();
//        User user = new User();
//         驗(yàn)證是否注銷(xiāo)成功
//        System.out.println(user.toString());
        return "Login";
    }

    //    登錄頁(yè)面進(jìn)入首頁(yè)
    @RequestMapping("toallbook")
    public String toallbook() {
        return "allbook";
    }
    
    //    查詢(xún)?nèi)繒?shū)籍(首頁(yè))
    /**
     *
     *對(duì)展示頁(yè)面進(jìn)行分頁(yè)
     * @param pageIndex 當(dāng)前頁(yè)碼
     * @param model     給前端傳信息
     *                  if:如果當(dāng)前頁(yè)碼<=1,則設(shè)置為第一頁(yè)
     *                  pageSize=null=5
     * 在Service接口中返回PageInfo類(lèi)型,保存到"PageInfo"中,方便前段調(diào)用PageInfo屬性
     * @return
     */
    @GetMapping("allbook/{num}")
    public String list(@PathVariable("num") Integer pageIndex, Model model) {
        if (pageIndex <= 1) {
            pageIndex = 1;
        }
        PageInfo<Book> list = bookService.findList(pageIndex, null);
        model.addAttribute("PageInfo", list);
        return "allbook";
    }
    
    //跳轉(zhuǎn)到新增書(shū)籍頁(yè)面
    @RequestMapping("toAddBook")
    public String toAddPaper() {
        return "addBook";
    }

    //執(zhí)行sql新增書(shū)籍
    @RequestMapping("addBook")
    public String addBook(Book book) {
        bookService.addBook(book);
        return "redirect:/book/allbook/1";
    }

    //    跳轉(zhuǎn)到更改書(shū)籍頁(yè)面
    @RequestMapping("toupdateBook")
    public String toupdatePaper(int id, Model model) {
        Book book = bookService.queryBookById(id);
        model.addAttribute("Book", book);
        return "updatebook";
    }

    //    執(zhí)行sql更改書(shū)籍
    @RequestMapping("updateBook")
    public String updateBook(Book book) {
        bookService.updateBook(book);
        return "redirect:/book/allbook/1";
    }
    
//    執(zhí)行sql刪除書(shū)籍
    /**
     *
     * @param id restful風(fēng)格
     * @return
     */
    @RequestMapping("deletebook/{bookid}")
    public String deleteBook(@PathVariable("bookid") int id) {
        bookService.deleteBookById(id);
        return "redirect:/book/allbook/1";
    }
    
//    執(zhí)行SQL(根據(jù)書(shū)籍名稱(chēng))查詢(xún)書(shū)籍
    /**
     *
     * @param queryBookname 查詢(xún)書(shū)籍的名字
     * @param model
     * @return
     */
    @GetMapping("querybook")
    public String queryBook(@RequestParam("queryBookname") String queryBookname,
                            Model model) {
        PageInfo<Book> list = bookService.queryBookByName(queryBookname);
//        如果輸入為空或輸入的信息不存在,返回error信息
//        if (queryBookname == null) {
//            list = bookService.queryAllBook();
//            model.addAttribute("error1", "沒(méi)有該書(shū)籍,請(qǐng)重新查詢(xún)");
//        }
            System.out.println(list);
            model.addAttribute("PageInfo", list);
            return "allbook";
    }
    
    /**
     * 文件上傳
     * @param file
     * @param request
     * @return
     * @throws IOException
     *
     * @RequestParam("file") 將name=file控件得到的文件封裝成CommonsMultipartFile 對(duì)象
     * 批量上傳CommonsMultipartFile則為數(shù)組即可
     */
    @RequestMapping("/upload")
    public String fileUpload(@RequestParam("file") CommonsMultipartFile file , HttpServletRequest request) throws IOException {
//      file.getOriginalFilename() :獲取文件名;
        String uploadFileName = file.getOriginalFilename();
//      如果文件名為空，直接回到首頁(yè)！
            if ("".equals(uploadFileName)){
                return "redirect:/book/allbook/1";
            }
        System.out.println("上傳文件名 : "+uploadFileName);
//      上傳路徑保存設(shè)置(絕對(duì)路徑)
        String path = "C:\\Users\\Gu_cx\\Desktop\\Book\\web\\upload";
//      如果路徑不存在，創(chuàng)建一個(gè)
        File realPath = new File(path);
            if (!realPath.exists()){
                realPath.mkdir();
            }
        System.out.println("上傳文件保存地址："+realPath);
        InputStream is = file.getInputStream(); //文件輸入流
        OutputStream os = new FileOutputStream(new File(realPath,uploadFileName)); //文件輸出流
//      讀取寫(xiě)出
        int len=0;
        byte[] buffer = new byte[1024];
        while ((len=is.read(buffer))!=-1){
            os.write(buffer,0,len);
            os.flush();
        }
        os.close();
        is.close();
        return "redirect:/book/allbook/1";
    }
    
//    下載圖片
    @RequestMapping(value="/download")
    public String downloads(HttpServletResponse response , HttpServletRequest request) throws Exception{
//      要下載的圖片地址(絕對(duì)路徑)
        String path = "C:\\Users\\Gu_cx\\Desktop\\Book\\web\\img\\idea.png";
        String fileName = path.substring(path.lastIndexOf("\\")+1);
//      1、設(shè)置response 響應(yīng)頭
            response.reset(); //設(shè)置頁(yè)面不緩存,清空buffer
            response.setCharacterEncoding("UTF-8"); //字符編碼
            response.setContentType("multipart/form-data"); //二進(jìn)制傳輸數(shù)據(jù)
//      設(shè)置響應(yīng)頭(百度web下載文件的頭信息)
            response.setHeader("Content-Disposition",
                "attachment;fileName="+ URLEncoder.encode(fileName, "UTF-8"));
//      2、 讀取文件--輸入流
        InputStream input=new FileInputStream(path);
//      3、 寫(xiě)出文件--輸出流
        OutputStream out = response.getOutputStream();
        byte[] buff =new byte[1024];
        int index=0;
//      4、執(zhí)行 寫(xiě)出操作
        while((index= input.read(buff))!= -1){
            out.write(buff, 0, index);
            out.flush();
        }
        out.close();
        input.close();
        return null;
    }
}

7. LoginInterceptor攔截器

package com.gcx.interceptor;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
/**
*
*因?yàn)槭莃oolean 的返回類(lèi)型,true代表可以通過(guò)攔截器,false代表被攔截器攔截,不能夠通過(guò)
*/
//      設(shè)置編碼格式
        request.setCharacterEncoding("UTF-8");
        HttpSession session = request.getSession();
//     通過(guò)Controller中的setAttribute保存的信息,在這里通過(guò)get獲取到,如果userLoginInfo內(nèi)不為空時(shí)可以通過(guò)
        if ( session.getAttribute("userLoginInfo")!=null){
            System.out.println("執(zhí)行了登錄攔截器=>111");
            return true;
        }
//     getRequestURI().contains屬于獲取URL的地址,讓URL進(jìn)入到toLogin;Login;toregisterPage;register時(shí)可以通過(guò)
        if (request.getRequestURI().contains("toLogin")){
            System.out.println("執(zhí)行了登錄攔截器=>222");
            return true;
        }
        if (request.getRequestURI().contains("Login")){
            System.out.println("執(zhí)行了登錄攔截器=>333");
            return true;
        }
        if (request.getRequestURI().contains("toregisterPage")){
            System.out.println("執(zhí)行了登錄攔截器=>444");
            return true;
        }
        if (request.getRequestURI().contains("register")){
            System.out.println("執(zhí)行了登錄攔截器=>555");
            return true;
        }
//        判斷當(dāng)不滿(mǎn)足以上條件使,都要被攔截器攔截,不能通過(guò)并重定向到Login.jsp頁(yè)面
        request.getRequestDispatcher("/WEB-INF/jsp/Login.jsp").forward(request,response);
        return false;
    }
}

?到這里,源碼及配置文件層都已經(jīng)完成

2.4 開(kāi)始web層

首先,因?yàn)橐晥D解析器中的前綴是WEB-INF下的jsp文件夾,所以在WEB-INF下新建jsp文件

?1. 首先index.jsp(跳轉(zhuǎn)進(jìn)入頁(yè))

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 蠟筆小鑫
  Date: 2022/12/29
  Time: 15:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">
  <title>首頁(yè)</title>
<%--    使用純jquery實(shí)現(xiàn)輪播圖;
優(yōu)點(diǎn):適合新手;
缺點(diǎn):浪費(fèi)資源,每次加載頁(yè)面都要更新請(qǐng)求,占用內(nèi)存和網(wǎng)絡(luò)--%>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <link  rel="stylesheet">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
  <script src="js/index.js">
  </script>
</head>
<body>
<table>
    <tr>
        <td>
            <header>

                <div class="bigBox" id="oImg">
                    <!-- 輪流播放圖片 -->
                    <img id="insert" src="indexImg/1.jpg"/>
                </div>
                <p class="left" onclick="goBack()"></p>
                <p class="right" onclick="goForward()"></p>
                <ul id="nav">
                    <!-- 指定某張圖片 -->
                    <li id="1" onclick="move(this)">1</li>
                    <li id="2" onclick="move(this)">2</li>
                    <li id="3" onclick="move(this)">3</li>
                    <li id="4" onclick="move(this)">4</li>
                    <li id="5" onclick="move(this)">5</li>
                    <li id="6" onclick="move(this)">6</li>
                </ul>
            </header>
        </td>
        <td>
            <h1 class="threesolid">歡迎進(jìn)入書(shū)籍管理系統(tǒng)</h1>
            <div class="texts">
               <!-- 所有的轉(zhuǎn)發(fā)地址都要養(yǎng)成寫(xiě)${pageContext.request.contextPath}的習(xí)慣 -->
                <a class="btn btn--stripe" href="${pageContext.request.contextPath}/book/toLogin">登錄</a><br>
                <a class="btn btn--stripe" href="${pageContext.request.contextPath}/book/allbook">進(jìn)入書(shū)籍頁(yè)面</a>
            </div>
        </td>
    </tr>

</table>
</body>
</html>

?2. 首頁(yè) allbook

<%--
  Created by IntelliJ IDEA.
  User: 蠟筆小鑫
  Date: 2022/12/25
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>書(shū)籍展示</title>
    <link  rel="stylesheet">
    <style>
        .title{
            font-family:"華文彩云";/*設(shè)置字體*/
            font-size:64px; /*設(shè)置字體大小*/
            font-weight:normal; /*設(shè)置字體粗細(xì)*/
            -webkit-text-stroke:1px #0000FF;        /*文字描邊*/
            -webkit-text-fill-color:transparent;    /*設(shè)置文字的填充顏色*/
        }
    </style>
    <script>
    /*頁(yè)面彈窗*/
    function ok(){
            alert("刪除成功");
        }
    </script>
</head>
<body>
<div class="title">書(shū)籍展示</div>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>書(shū)籍列表----顯示所有書(shū)籍</small>
                </h1>
                <div style="text-align: right">
                    <a href="${pageContext.request.contextPath}/book/allbook/1" title="返回顯示全部書(shū)籍">首頁(yè)</a>
                    <a href="${pageContext.request.contextPath}/book/toLogin" title="返回登錄頁(yè)面">登錄</a>
                    <a href="${pageContext.request.contextPath}/book/destory" title="注銷(xiāo)當(dāng)前用戶(hù)信息">注銷(xiāo)</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 column">
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">新增書(shū)籍</a>
            </div>
            <div class="col-md-4 column">
            </div>
            <div class="col-md-4 column">
                <form action="${pageContext.request.contextPath}/book/querybook" method="get" style="float: right">
                    <table>
                        <tr>
                            <%--                            <td style="width: 170px">--%>
                            <%--                                <span style="color: red;font-weight: bold;text-align: right">${error1}</span>--%>
                            <%--                            </td>--%>
                            <td>
                                <input type="text" name="queryBookname" class="form-control" placeholder="請(qǐng)輸入要查詢(xún)的書(shū)籍名稱(chēng)">
                            </td>
                            <td>&nbsp;</td>
                            <td>
                                <input type="submit" value="查詢(xún)" class="btn btn-primary">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <div class="row clearfix ">
        <div col-md-12 column class=" table-responsive" >
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>書(shū)籍名稱(chēng)</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>書(shū)籍編號(hào)</th>
                    <th>詳情</th>
                    <th>價(jià)格</th>
                    <th>書(shū)籍類(lèi)別</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                    /*調(diào)用PageInfo里的list屬性*/
                <c:forEach items="${PageInfo.list}" var="book" >
                    <tr>
                        <td>${book.bookname}</td>
                        <td>${book.author}</td>
                        <td>${book.publish}</td>
                        <td>${book.bookid}</td>
                        <td>${book.introduction}</td>
                        <td>${book.price}</td>
                        <td>${book.booktype}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/book/toupdateBook?id=${book.bookid}">修改</a>
                            &nbsp;|&nbsp;
                            <a href="${pageContext.request.contextPath}/book/deletebook/${book.bookid}" onclick="ok()">刪除</a>
                            <span>

                            </span>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>

            <ul class="pagination">
                <%--    如果當(dāng)前頁(yè)碼-1>=0,則顯示首頁(yè),即在第一頁(yè)時(shí)不顯示首頁(yè)--%>
                <c:if test="${PageInfo.prePage-1>=0}">
                    <li><a href="${PageInfo.navigateFirstPage}">首頁(yè)</a></li>
                </c:if>
                <%--            當(dāng)有上一頁(yè)"且"總頁(yè)數(shù)>2時(shí) 顯示上一頁(yè)--%>
                <c:if test="${(PageInfo.hasPreviousPage)&&(PageInfo.pages)>2}">
                    <li><a href="${pageContext.request.contextPath}/book/allbook/${num-1}">&lt; 上一頁(yè)</a></li>
                </c:if>
                <%--                循環(huán)顯示頁(yè)數(shù)--%>
                <c:forEach items="${PageInfo.navigatepageNums}" var="num">
                    <%--            只需要一個(gè)get請(qǐng)求去獲得到pageIndex--%>
                    <li><a href="${pageContext.request.contextPath}/book/allbook/${num}">${num}</a></li>
                </c:forEach>
                <%--            當(dāng)有下一頁(yè)"且"總頁(yè)數(shù)>2"且"當(dāng)前頁(yè)不是最后一頁(yè)時(shí) 顯示下一頁(yè)--%>
                <c:if test="${(PageInfo.hasPreviousPage)&&(PageInfo.pages)>2&&(PageInfo.pageNum!=PageInfo.navigateLastPage)}">
                    <li><a href="${pageContext.request.contextPath}/book/allbook/${num+1}">下一頁(yè) &gt;</a></li>
                </c:if>
                <%--            當(dāng)前頁(yè)碼+1<=總頁(yè)數(shù),則顯尾頁(yè),即在最后一頁(yè)時(shí)不顯示尾頁(yè)--%>
                <c:if test="${PageInfo.pageNum+1<=PageInfo.pages}">
                    <li><a href="${PageInfo.navigateLastPage}">尾頁(yè)</a></li>
                </c:if>
                <span style="font-size: 20px;margin-left: 20px;color: #6363ee">共${PageInfo.pages}頁(yè)</span>
<%--                <span style="font-size: 20px;margin-left: 20px;color: #6363ee">每頁(yè)顯示--%>
<%--                    <select>--%>
<%--                        <option value="${PageInfo.pageSize==5}">5</option>--%>
<%--                        <option value="${PageInfo.pageSize==10}">10</option>--%>
<%--                    </select>--%>
<%--                    條數(shù)據(jù)</span>--%>
                <span style="font-size: 20px;margin-left: 20px;color: #6363ee">每頁(yè)顯示${PageInfo.pageSize}條信息</span>
                <span style="font-size: 20px;margin-left: 20px;color: #6363ee">共${PageInfo.total}條信息</span>
            </ul>
            <form style="" action="${pageContext.request.contextPath}/book/upload" enctype="multipart/form-data" method="post">
                <table>
                    <td>
                        <input style="width: 190px" type="file" name="file">
                    </td>
                    <td style="width: 100px">
                        <input type="submit" value="點(diǎn)擊上傳">
                    </td>
                    <td>
                        <a href="${pageContext.request.contextPath}/img/idea.png">展示圖片</a>
                        &nbsp;|&nbsp;
                        <a href="${pageContext.request.contextPath}/book/download">點(diǎn)擊下載</a>
                    </td>

                </table>

            </form>
        </div>
    </div>
</div>
</body>
</html>

3. 新增書(shū)籍頁(yè)面 addBook.jsp

<%--
  Created by IntelliJ IDEA.
  User: 蠟筆小鑫
  Date: 2022/12/25
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加書(shū)籍</title>
    <link  rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>書(shū)籍列表----新增書(shū)籍</small>
                </h1>
            </div>
        </div>
    </div>
    <form action="${pageContext.request.contextPath}/book/addBook" method="post">
        <div class="form-group">
            <label for="bkname">書(shū)籍名稱(chēng)</label>
            <input type="text" class="form-control" id="bkname" name="bookname" placeholder="書(shū)籍名稱(chēng)" required>
        </div>
        <div class="form-group">
            <label for="author">作者</label>
            <input type="text" class="form-control" id="author" name="author" placeholder="作者" required>
        </div>
        <div class="form-group">
            <label for="publish">出版社</label>
            <input type="text" class="form-control" id="publish" name="publish" placeholder="出版社" required>
        </div>
        <div class="form-group">
            <label for="introduction">詳情</label>
            <input type="text" class="form-control" id="introduction" name="introduction" placeholder="書(shū)籍詳情" required>
        </div>
        <div class="form-group">
            <label for="price">價(jià)格</label>
            <input type="text" class="form-control" id="price" name="price" placeholder="價(jià)格" required>
        </div>
        <div class="select">
            <label for="booktype">書(shū)籍類(lèi)別</label>
            <input type="text" class="form-control" list="optionList" id="booktype" name="booktype" placeholder="書(shū)籍類(lèi)別" required>
            <datalist id="optionList">
                <option value="文學(xué)類(lèi)">文學(xué)類(lèi)</option>
                <option value="歷史類(lèi)">歷史類(lèi)</option>
                <option value="社會(huì)類(lèi)">社會(huì)類(lèi)</option>
                <option value="愛(ài)情類(lèi)">愛(ài)情類(lèi)</option>
                <option value="科幻類(lèi)">科幻類(lèi)</option>
                <option value="社會(huì)文學(xué)類(lèi)">社會(huì)文學(xué)類(lèi)</option>
                <option value="武俠類(lèi)">武俠類(lèi)</option>
                <option value="親情類(lèi)">親情類(lèi)</option>
                <option value="奇幻類(lèi)">奇幻類(lèi)</option>
                <option value="政治類(lèi)">政治類(lèi)</option>
                <option value="經(jīng)濟(jì)類(lèi)">經(jīng)濟(jì)類(lèi)</option>
                <option value="其他類(lèi)">其他類(lèi)</option>
            </datalist>
        </div>
        <button type="submit" class="btn btn-default btn-lg active" style="margin-left:1050px;margin-top: 30px">添加</button>
    </form>
</div>
</body>
</html>

4. 修改書(shū)籍頁(yè)面 updatebook.jsp

<%--
  Created by IntelliJ IDEA.
  User: 蠟筆小鑫
  Date: 2022/12/25
  Time: 17:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改書(shū)籍</title>
    <link  rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>書(shū)籍列表----修改書(shū)籍</small>
                </h1>
            </div>
        </div>
    </div>
    <form action="${pageContext.request.contextPath}/book/updateBook" method="get">
        <input type="hidden" name="bookid" value="${Book.bookid}">
    <div class="form-group">
        <label for="bookname">書(shū)籍名稱(chēng)</label>
        <input type="text" class="form-control" id="bookname" name="bookname" value="${Book.bookname}" placeholder="書(shū)籍名稱(chēng)" required>
    </div>
    <div class="form-group">
        <label for="author">作者</label>
        <input type="text" class="form-control" id="author" name="author" value="${Book.author}" placeholder="作者" required>
    </div>
    <div class="form-group">
        <label for="publish">出版社</label>
        <input type="text" class="form-control" id="publish" name="publish" value="${Book.publish}" placeholder="出版社" required>
    </div>
    <div class="form-group">
        <label for="introduction">詳情</label>
        <input type="text" class="form-control" id="introduction" name="introduction" value="${Book.introduction}" placeholder="書(shū)籍詳情" required>
    </div>
    <div class="form-group">
        <label for="price">價(jià)格</label>
        <input type="text" class="form-control" id="price" name="price" value="${Book.price}" placeholder="價(jià)格" required>
    </div>
    <div class="form-group">
        <label for="booktype">書(shū)籍類(lèi)別</label>
        <input type="text" class="form-control" list="optionList" id="booktype" name="booktype" value="${Book.booktype}" placeholder="書(shū)籍類(lèi)別" required>
        <datalist id="optionList">
            <option value="文學(xué)類(lèi)">文學(xué)類(lèi)</option>
            <option value="歷史類(lèi)">歷史類(lèi)</option>
            <option value="社會(huì)類(lèi)">社會(huì)類(lèi)</option>
            <option value="愛(ài)情類(lèi)">愛(ài)情類(lèi)</option>
            <option value="科幻類(lèi)">科幻類(lèi)</option>
            <option value="社會(huì)文學(xué)類(lèi)">社會(huì)文學(xué)類(lèi)</option>
            <option value="武俠類(lèi)">武俠類(lèi)</option>
            <option value="親情類(lèi)">親情類(lèi)</option>
            <option value="奇幻類(lèi)">奇幻類(lèi)</option>
            <option value="政治類(lèi)">政治類(lèi)</option>
            <option value="經(jīng)濟(jì)類(lèi)">經(jīng)濟(jì)類(lèi)</option>
            <option value="其他類(lèi)">其他類(lèi)</option>
        </datalist>
    </div>
        <button type="submit" class="btn btn-default btn-lg active " style="margin-left:1050px;margin-top: 20px">修改</button>
    </form>
</div>
</body>
</html>

?5. 登錄頁(yè) Login.jsp

<%--
  Created by IntelliJ IDEA.
  User: 蠟筆小鑫
  Date: 2022/12/30
  Time: 14:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登錄</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link  rel="stylesheet">
</head>

<body>
<form action="${pageContext.request.contextPath}/book/Login" method="get">
    <div class="box">
        <div class="content">
            <div class="login-wrapper">
                <h1 style="font-family: 華文楷體;font-weight: bolder;font-size: 50px">登錄</h1>
                <div class="login-form">
                    <div class="username form-item">
                        <span style="font-weight: bolder;font-family: 華文宋體;font-size: 15px">用戶(hù)名</span>
                        <input type="text" class="input-item" name="username" placeholder="請(qǐng)輸入用戶(hù)名">
                    </div>
                    <div class="password form-item">
                        <span style="font-weight: bolder;font-family: 華文宋體;font-size: 15px">密碼</span>
                        <input type="password" class="input-item" name="password" placeholder="請(qǐng)輸入密碼">
                    </div>
                    <span style="color: red;font-weight: bolder">${error1}</span>
                    <input type="submit" style="margin-bottom: 20px" class="login-btn" value="登錄">
                    <a class="astyle" href="${pageContext.request.contextPath}/book/toregisterPage" title="注冊(cè)賬號(hào)">沒(méi)有賬號(hào)?點(diǎn)擊注冊(cè)</a>
                </div>
                <div class="divider">
                    <span class="line"></span>
                    <span class="divider-text">其他方式登錄</span>
                    <span class="line"></span>
                </div>
                <div class="other-login-wrapper">
                    <div class="other-login-item">
                        <img src="../img/QQ.png" alt="啊!圖片去月球度假了" title="使用QQ登錄">
                    </div>
                    <div class="other-login-item">
                        <img src="../img/WeChat.png" alt="啊!圖片去月球度假了" title="使用微信登錄">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>

</html>

6. 注冊(cè)頁(yè) register.jsp

<%--
  Created by IntelliJ IDEA.
  User: 蠟筆小鑫
  Date: 2022/12/30
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/register.css">
    <title>注冊(cè)</title>
</head>

<body>
<form action="${pageContext.request.contextPath}/book/register"  method="get" >
    <div class="headbox">
        <p style="font-family: 華文新魏,serif;font-size: 40px">
        &nbsp;&nbsp;新用戶(hù)注冊(cè)
        </p>
        <h1 style="font-size: 40px">
            USER REGISTER
        </h1>
        <div class="hd_center">
            <div class="hd_form">
                <form action="${pageContext.request.contextPath}/book/register" method="get">
                    <table style="margin-top: 40px">
                        <tr>
                            <td class="td_left">用戶(hù)名：</td>
                            <td class="td_right">
                                <input type="text" name="username" placeholder="請(qǐng)輸入注冊(cè)用戶(hù)名">
                            </td>
                        </tr>
                    <tr></tr>
                    <tr></tr>
                        <tr>
                            <td class="td_left">密碼：</td>
                            <td class="td_right">
                                <input type="text" name="password" placeholder="請(qǐng)輸入注冊(cè)密碼">
                            </td>
                        </tr>
                        <tr></tr>
                        <tr></tr>
                        <tr>
                            <td></td>
                            <td colspan="2">
                                <input type="submit"value="注冊(cè)" target="_blank">
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <p style="text-align: right;">已有賬號(hào)?<a href="${pageContext.request.contextPath}/book/toLogin" target="_blank">立即登錄</a></p>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
</form>
</body>

</html>

7. css層?

?index.css

header {
    width: 1000px;
    height: 600px;
    position: relative;
    margin: 70px 60px auto;
}
.bigBox{
    width:1000px;
    height:600px;
    overflow:hidden;
    overflow-x: auto;
    white-space: nowrap;
}
.bigBox img{
    width: 100%;
    height: 100%;
}
.left{
    width: 70px;
    height: 70px;
    cursor: pointer;
    float: left;
    left: 0;
    top: 50%;
    background: url("../indexImg/left.png") ;
}
.right{
    width: 70px;
    height: 70px;
    cursor: pointer;
    float: right;
    right: 0;
    top: 50%;
    background: url("../indexImg/right.png") ;
}
#nav {
    bottom: 5px;
    left: 30%;
    margin: 10px 10px 150px 150px;
}

#nav li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ccc;
    font-size: 24px;
    border-radius: 9px;
    color: darkslategrey;
    font-family: 'Times New Roman', Times, serif;
    margin: 0 25px;
    float: left;
    cursor: pointer;
    list-style: none;
}

#nav li:hover {
    background: peru;
}

a{
    /*display: inline-block;*/
    /*padding-left: 10px;*/
    /*text-decoration: none;*/
    /*color: black;*/
    /*font-size: 30px;*/
    width: 250px;
    height: 70px;
    /*margin: 100px auto;*/
    /*text-align: center;*/
    /*line-height: 40px;*/
    /*background: green;*/
    /*border-radius: 5px 0px 0px 5px;*/
}

.texts{
    width: 250px;
    height: 70px;
    text-align: center;
    line-height: 40px;
}
h1{
    font-family: 黑體, serif;
    font-size: xx-large;
    font-weight: bold;
    margin: 30px 50px 120px 40px;
}
.threesolid{
     font-size: 30px;
     color:#fefefe;
     text-shadow:0px 1px 0px #c0c0c0,
     0px 2px 0px #b0b0b0,
     0px 3px 0px #a0a0a0,
     0px 4px 0px #909090,
     0px 5px 10px rgba(0, 0, 0, .9);
 }

@-webkit-keyframes stripe-slide {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 100% 0;
    }
}
@keyframes stripe-slide {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 100% 0;
    }
}
body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: sans-serif;
}
.btn {
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    line-height: normal;
    cursor: pointer;
    -moz-user-select: text;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px 36px 22px;
    background-color: #fff;
    color: #666;
    border: 2px solid #666;
    border-radius: 6px;
    margin-bottom: 16px;
    transition: all 0.5s ease;
}
.btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}
.btn--stripe {
    overflow: hidden;
    position: relative;
}
.btn--stripe:after {
    content: "";
    display: block;
    height: 7px;
    width: 100%;
    background-image: repeating-linear-gradient(45deg, #666, #666 1px, transparent 2px, transparent 5px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid #666;
    position: absolute;
    left: 0;
    bottom: 0;
    background-size: 7px 7px;
}
.btn--stripe:hover {
    background-color: #666;
    color: #fff;
    border-color: #000;
}
.btn--stripe:hover:after {
    background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
    border-top: 1px solid #000;
    -webkit-animation: stripe-slide 12s infinite linear forwards;
    animation: stripe-slide 12s infinite linear forwards;
}
.btn--large {
    width: 50%;
}
.btn--radius {
    border-radius: 36px;
}

register.css

header {
    width: 1000px;
    height: 600px;
    position: relative;
    margin: 70px 60px auto;
}
.bigBox{
    width:1000px;
    height:600px;
    overflow:hidden;
    overflow-x: auto;
    white-space: nowrap;
}
.bigBox img{
    width: 100%;
    height: 100%;
}
.left{
    width: 70px;
    height: 70px;
    cursor: pointer;
    float: left;
    left: 0;
    top: 50%;
    background: url("../indexImg/left.png") ;
}
.right{
    width: 70px;
    height: 70px;
    cursor: pointer;
    float: right;
    right: 0;
    top: 50%;
    background: url("../indexImg/right.png") ;
}
#nav {
    bottom: 5px;
    left: 30%;
    margin: 10px 10px 150px 150px;
}

#nav li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ccc;
    font-size: 24px;
    border-radius: 9px;
    color: darkslategrey;
    font-family: 'Times New Roman', Times, serif;
    margin: 0 25px;
    float: left;
    cursor: pointer;
    list-style: none;
}

#nav li:hover {
    background: peru;
}

a{
    /*display: inline-block;*/
    /*padding-left: 10px;*/
    /*text-decoration: none;*/
    /*color: black;*/
    /*font-size: 30px;*/
    width: 250px;
    height: 70px;
    /*margin: 100px auto;*/
    /*text-align: center;*/
    /*line-height: 40px;*/
    /*background: green;*/
    /*border-radius: 5px 0px 0px 5px;*/
}

.texts{
    width: 250px;
    height: 70px;
    text-align: center;
    line-height: 40px;
}
h1{
    font-family: 黑體, serif;
    font-size: xx-large;
    font-weight: bold;
    margin: 30px 50px 120px 40px;
}
.threesolid{
     font-size: 30px;
     color:#fefefe;
     text-shadow:0px 1px 0px #c0c0c0,
     0px 2px 0px #b0b0b0,
     0px 3px 0px #a0a0a0,
     0px 4px 0px #909090,
     0px 5px 10px rgba(0, 0, 0, .9);
 }

@-webkit-keyframes stripe-slide {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 100% 0;
    }
}
@keyframes stripe-slide {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 100% 0;
    }
}
body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: sans-serif;
}
.btn {
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    line-height: normal;
    cursor: pointer;
    -moz-user-select: text;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px 36px 22px;
    background-color: #fff;
    color: #666;
    border: 2px solid #666;
    border-radius: 6px;
    margin-bottom: 16px;
    transition: all 0.5s ease;
}
.btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}
.btn--stripe {
    overflow: hidden;
    position: relative;
}
.btn--stripe:after {
    content: "";
    display: block;
    height: 7px;
    width: 100%;
    background-image: repeating-linear-gradient(45deg, #666, #666 1px, transparent 2px, transparent 5px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid #666;
    position: absolute;
    left: 0;
    bottom: 0;
    background-size: 7px 7px;
}
.btn--stripe:hover {
    background-color: #666;
    color: #fff;
    border-color: #000;
}
.btn--stripe:hover:after {
    background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
    border-top: 1px solid #000;
    -webkit-animation: stripe-slide 12s infinite linear forwards;
    animation: stripe-slide 12s infinite linear forwards;
}
.btn--large {
    width: 50%;
}
.btn--radius {
    border-radius: 36px;
}

style.css(登錄頁(yè)樣式)

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

/*公共CSS*/
.box {
  width: 100vw;
  height: 100vh;
  background-color: rgb(29, 67, 89);
}
.box .content .login-wrapper .login-form .astyle{
  color: black;
  margin-left: 200px;
  text-decoration: none;
}
.box .content .login-wrapper .login-form .astyle:hover{
  color: #6363ee;
  font-weight: bolder;
}
.box .content .login-wrapper h1 {
  text-align: center;
}
.box .content .login-wrapper .login-form .form-item {
  margin: 20px 0;
}
.box .content .login-wrapper .login-form .form-item span {
  display: block;
  margin: 5px 20px;
  font-weight: 100;
}
.box .content .login-wrapper .login-form .form-item .input-item {
  width: 100%;
  border-radius: 40px;
  padding: 20px;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 200;
}
.box .content .login-wrapper .login-form .form-item .input-item:focus {
  outline: none;
}
.box .content .login-wrapper .login-form .login-btn {
  width: 100%;
  border-radius: 40px;
  color: #fff;
  border: 0;
  font-weight: 100;
  margin-top: 10px;
  cursor: pointer;
}
.box .content .login-wrapper .divider {
  width: 100%;
  margin: 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box .content .login-wrapper .divider span:nth-child(1) {
  flex: 1;
}
.box .content .login-wrapper .divider span:nth-child(3) {
  flex: 1;
}
.box .content .login-wrapper .divider .line {
  display: inline-block;
  max-width: 30%;
  width: 30%;
}
.box .content .login-wrapper .divider .divider-text {
  vertical-align: middle;
  margin: 0px 20px;
  line-height: 0px;
  display: inline-block;
  width: 100px;
}
.box .content .login-wrapper .other-login-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .content .login-wrapper .other-login-item {
  border: 1px solid rgb(214, 222, 228);
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}

/*一般大于手機(jī)的尺寸CSS*/
@media (min-width: 767px) {
  .box {
    background-color: rgb(29, 67, 89);
  }
  .box .content {
    width: 85vw;
    height: 90vh;
    background: url('../img/login_two.jpg') no-repeat;
    background-size: 90% 100%;
    position: absolute;
    right: 15%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: #fff;
  }
  .box .content .login-wrapper {
    width: 25vw;
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
  }
  .box .content .login-wrapper h1 {
    text-align: center;
    font-size: 45px;
    color: rgb(81, 100, 115);
    margin-bottom: 40px;
  }
  .box .content .login-wrapper .login-form {
    margin: 10px 0;
  }
  .box .content .login-wrapper .login-form .form-item span {
    color: rgb(81, 100, 115);
  }
  .box .content .login-wrapper .login-form .form-item .input-item {
    height: 60px;
    border: 1px solid rgb(214, 222, 228);
  }
  .box .content .login-wrapper .login-form .login-btn {
    height: 50px;
    background-color: rgb(59, 72, 89);
    font-size: 20px;
  }
  .box .content .login-wrapper .divider .line {
    border-bottom: 1px solid rgb(214, 222, 228);
  }
  .box .content .login-wrapper .other-login-item {
    border-radius: 20px;
  }
  .box .content .login-wrapper .other-login-item img {
    width: 40px;
    height: 40px;
  }
}
/*手機(jī)端CSS*/
@media (max-width: 768px) {
  .box .content {
    width: 100vw;
    height: 100vh;
    background: url("../img/login_bg_phone.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .box .content .login-wrapper {
    width: 70%;
    height: 60%;
    padding-top: 15%;
  }
  .box .content .login-wrapper h1 {
    font-size: 30px;
    color: #fff;
  }
  .box .content .login-wrapper .login-form .form-item {
    margin: 10px 0;
  }
  .box .content .login-wrapper .login-form .form-item span {
    color: rgb(113, 129, 141);
  }
  .box .content .login-wrapper .login-form .form-item .input-item {
    height: 30px;
    border: 1px solid rgb(113, 129, 141);
    background-color: transparent;
    color: #fff;
  }
  .box .content .login-wrapper .login-form .login-btn {
    height: 40px;
    background-color: rgb(235, 95, 93);
    font-size: 16px;
  }
  .box .content .login-wrapper .divider .line {
    border-bottom: 1px solid #fff;
  }
  .box .content .login-wrapper .divider .divider-text {
    color: #fff;
  }
  .box .content .login-wrapper .other-login-item {
    border-radius: 15px;
  }
  .box .content .login-wrapper .other-login-item img {
    width: 35px;
    height: 35px;
  }
}/*# sourceMappingURL=style.css.map */

8. js

?index.js

// 五張圖片的url
var oImg1 = "indexImg/1.jpg";
var oImg2 = "indexImg/2.jpg";
var oImg3 = "indexImg/3.jpg";
var oImg4 = "indexImg/4.jpg";
var oImg5 = "indexImg/5.jpg";
var oImg6 = "indexImg/6.jpg";
// 把5張圖片存入一個(gè)數(shù)組
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5 ,oImg6];

window.onload = function() {
    //剛加載時(shí)第一張圖片1號(hào)背景顏色
    document.getElementById("1").style.background = "peru";
    run()


}

//輪播
function run() {
    timer = setInterval(function() {
        //隨機(jī)點(diǎn)數(shù)字時(shí)能接著變化
        var pic = document.getElementById("insert").name;

        //如果為最后一張圖片則重新循環(huán)
        if (pic == 5) {
            pic = -1;
        }

        //點(diǎn)一個(gè)數(shù)字該數(shù)字背景顏色變化其余的不變
        var aLi = document.getElementsByTagName("li");
        for (var j = 0; j < aLi.length; j++) {
            aLi[j].style.backgroundColor = "#CCCCCC";
        }

        var i = parseInt(pic);
        //  圖片地址
        document.getElementById("insert").src = arr[i + 1];

        document.getElementById("insert").name = i + 1;

        //數(shù)字隨圖片變化
        switch (i) {
            case 0:
                var temp = '2';
                break;
            case 1:
                var temp = '3';
                break;
            case 2:
                var temp = '4';
                break;
            case 3:
                var temp = '5';
                break;
            case 4:
                var temp = '6';
                break;
            case -1:
                var temp = '1';
                break;
        }
        document.getElementById(temp).style.background = "peru"

    }, 5000)
}

//右箭頭
function goForward() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert");
    var aLi = document.getElementsByTagName("li");
    // 數(shù)字跟著圖片一起變
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '2';
            break;
        case "1":
            var n = '3';
            break;
        case "2":
            var n = '4';
            break;
        case "3":
            var n = '5';
            break;
        case "4":
            var n = '6';
            break;
        case "5":
            var n = '1';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向右移動(dòng)圖片
    for (var j = 0; j < arr.length; j++) {
        if (j < 5) {
            if (temp == j) {
                oBox.src = arr[j + 1];
            }
        } else {
            if (temp == 5) {
                oBox.src = arr[0];
            }
        }
    }
    // 輪到最后一張圖片時(shí)返回第一張
    if (temp < 5) {
        oBox.name = parseInt(temp) + 1;
    } else {
        oBox.name = 0;
    }
}

//左箭頭
function goBack() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert")
    var aLi = document.getElementsByTagName("li");
    // 圖片移動(dòng)時(shí)數(shù)字也跟著變
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '6';
            break;
        case "1":
            var n = '1';
            break;
        case "2":
            var n = '2';
            break;
        case "3":
            var n = '3';
            break;
        case "4":
            var n = '4';
            break;
        case "5":
            var n = '5';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向左移動(dòng)圖片

    for (var j = 0; j < arr.length; j++) {
        if (j > 0) {
            if (temp == j) {
                oBox.src = arr[j - 1];
            }
        } else {
            if (temp == 0) {
                oBox.src = arr[5];
            }
        }
    }
    // 輪到第一張圖片時(shí)返回最后一張
    if (temp > 0) {
        oBox.name = parseInt(temp) - 1;
    } else {
        oBox.name = 5;
    }
}

//指定圖片
function move(num) {
    var oBox = document.getElementById("insert");
    var temp = document.getElementById("insert").name;
    var aLi = document.getElementsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    document.getElementById(num.innerHTML).style.background = "peru"

    switch (num.innerHTML) {
        case "1":
            oBox.src = arr[0];
            oBox.name = 0;
            break;
        case "2":
            oBox.src = arr[1];
            oBox.name = 1;
            break;
        case "3":
            oBox.src = arr[2];
            oBox.name = 2;
            break;
        case "4":
            oBox.src = arr[3];
            oBox.name = 3;
            break;
        case "5":
            oBox.src = arr[4];
            oBox.name = 4;
            break;
        case "6":
            oBox.src = arr[5];
            oBox.name = 5;
            break;
    }
}

img和indexImg均為圖片,可以自行添加.

uplode是文件上傳的位置

3 圖片展示

1. index.jsp

2. 因?yàn)閿r截器的原因在這里無(wú)論點(diǎn)擊登錄還是進(jìn)入書(shū)籍頁(yè)面都會(huì)被攔截到登錄頁(yè)面 Login.jsp

3. 想要進(jìn)行注冊(cè),進(jìn)入注冊(cè)頁(yè)面 register.jsp

點(diǎn)擊注冊(cè)或立即登錄都會(huì)重新跳轉(zhuǎn)到登錄頁(yè)面Login,jsp?

4. 進(jìn)行登錄,使用的是user表里的用戶(hù)信息

5. 點(diǎn)擊登錄進(jìn)入allbook首頁(yè)(第一頁(yè))

其中包括了Controller層內(nèi)的大部分操作:新增,修改,刪除,查詢(xún)書(shū)籍,回到登錄頁(yè),注銷(xiāo)用戶(hù),分頁(yè)顯示,文件的上傳及下載

6. 新增書(shū)籍頁(yè)面 addbook.jsp

?7. 修改書(shū)籍頁(yè)面 updatebook.jsp

?

?8. 書(shū)籍查詢(xún)

9. 分頁(yè)操作?

?10.文件上傳

11. 下載

?ok ,項(xiàng)目展示到此結(jié)束

4 附上源碼文件(百度網(wǎng)盤(pán)):

鏈接：https://pan.baidu.com/s/1IrCCDYkcxbszNR7dmceEew?pwd=gbz8?
提取碼：gbz8文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-447782.html

到了這里，關(guān)于基于SSM框架簡(jiǎn)易項(xiàng)目“書(shū)籍管理系統(tǒng)”，超詳細(xì)講解，附源碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！