SSM 輕量級框架構建：圖書管理系統

本文轉載自查看原文 2019-12-02 18:24 303 系統設計

一、接業務，作分析

1、大致業務要求

1.1　使用 SSM（ Spring MVC + Spring + MyBatis ）實現圖書信息管理系統， MySQL5.5 作為后台數據庫，該系統包括查詢圖書信息功能和增加圖書信息功能

1.2　查詢頁面效果圖

查詢頁面效果圖

1.3　添加新信息頁面效果圖

添加頁面效果圖

2、查詢頁面要求

2.1　打開圖書信息管理系統首頁，分頁顯示所有圖書信息，圖書信息按添加時間降序。提供查詢表單和“增加新書”超鏈接

分析：在 controller 的的初始頁面里便要給出 List 結果集。分面即是顯示從第 N 條至第 N 每條中的四條數據。降序是 order by 加個 desc

2.2　提供分別按書名、作者、出版社查詢圖書的動態條件查詢的功能，支持模糊查詢。查詢結果按添加時間降序，分頁展示

分析：兩個輸入框只有二種情況，即是全部查詢和模糊查詢兩種情況。若僅出現單個查詢條件，則默認查詢全部信息

3、添加新圖書頁面要求

3.1　點擊“增加新書”超鏈接跳轉到增加新書頁面。點擊“返回”超鏈接返回圖書信息管理系統首頁。輸入圖書信息，使用 JavaScript 驗證所有項不能為空，頁數必須是整數，價格必須是數字類型

分析：頁面的跳轉因無特別要求，則使用 <a><\a> 標簽即可，JavaScript 則要先獲取所有輸入框中的對象，再取值判斷是否合法

3.2　輸入增加新書每項信息后點擊“提交”。添加日期取系統時間，保存成功或者失敗都跳轉到圖書信息管理系統首頁，列表下方顯示“保存成功！”或“保存失敗！”

分析：添加后直接跳轉到主頁面，默認顯示所有信息，並且給出添加結果的反饋信息

二、架構設計思路

圖書系統思維導圖

三、數據庫設計

數據庫設計

四、項目框架搭建

4.1　jsp 頁面實現

4.1.1　查詢信息的主頁面

1 <div align="center">
2 共&nbsp;${pagecount}&nbsp;頁
3 ｜當前第&nbsp;${curnum }&nbsp;頁 
4 ｜<a href="index2?curnum=${curnum }&str1=${str1}&str2=${str2}&sx=0">首頁</a>
5 ｜<a href="index2?curnum=${curnum }&str1=${str1}&str2=${str2}&sx=1">上一頁</a>
6 ｜<a href="index2?curnum=${curnum }&str1=${str1}&str2=${str2}&sx=2">下一頁</a>
7 ｜<a href="index2?curnum=${curnum }&str1=${str1}&str2=${str2}&sx=4">尾頁</a>
8 </div>

查詢信息主頁面分頁代碼

4.1.2　添加新信息的添加碳

 1 <script type="text/javascript">                    
 2 function check() {
 3 var name = document.getElementById("bookname").value;
 4 var author = document.getElementById("author").value;
 5 var pubish = document.getElementById("pubish").value;
 6 var pages = document.getElementById("pages").value;
 7 var price = document.getElementById("price").value;
 8  
 9 function isInteger(obj) {
10     return typeof obj === 'number' && obj%1 === 0
11 }
12 
13 if(name.length < 1){
14     alert("書名不能為空");
15     return false;
16 }else if(author.length<1){
17     alert("作者名不能為空");
18     return false;
19 }else if(pubish.length<1){
20     alert("出版社名不能為空");
21     return false;
22 }else if(!isInteger(pages)) {
23     alert("價格必須是數字類型");
24     return false;
25 }else if(isNaN(price)) {
26     alert("價格必須是數字類型");
27     return false;
28 }
29 
30 return true;
31 }
32 </script>

添加新信息頁面 JavaScript 代碼

4.1.3　保存 jsp 頁面

注：后續將 jsp 頁面保存至 webapp \ WEB-INF \ jsp 中，此處可先至 H5 中編寫 <body></body> 大體代碼與 css 樣式

4.2　配置文件實現

4.2.1　至 https://maven.apache.org/download.cgi 下載 Maven

4.2.2　配置　Maven 中的 \ conf \ settings.xml 中的 <localRepository></localRepositroy> 與 <mirror></mirror>

1 <localRepository>D:\_wenJian\eclipse_maven\localRepository</localRepository>
2 
3 <mirror>
4 <id>alimaven</id>
5 <name>aliyun maven</name>
6 <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
7 <mirrorOf>central</mirrorOf>        
8     </mirror>

本地倉庫與鏡像 mirror

4.2.3　給 eclipse 配置 Maven

4.3　工程架構實現

4.3.1　創建 Maven project 的 webapp 工程

4.3.2　修復工程 jdk 版本並更新 Maven 工程

4.3.3　配置 pom.xml 文件

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.8.RELEASE</version>
    </parent>
    
    <properties>
        <java.version>1.8</java.version>
    </properties>
  <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>
         
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- 添加servlet依賴模塊 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>
        <!-- 添加jstl標簽庫依賴模塊 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <!--添加tomcat依賴模塊.-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <!-- 使用jsp引擎，springboot內置tomcat沒有此依賴 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>    
  </dependencies>

pom.xml

4.3.4　配置 application.properties 文件

#mysql
spring.datasource.url=jdbc:mysql://localhost:3306/j2ee?serverTimezone=UTC&characterEncoding=utf8
spring.datasource.password=root
spring.datasource.username=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

#mybatis
mybatis.mapper-locations=classpath:com/debj/mappers/*.xml

#JSP
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

application.properties

4.3.5　創建主包，創建 APP.java 文件

4.3.6　創建主包下的子包 controller、dao、pojo、service

4.3.7　在 resources 創建 mqpper.xml 子文件，位於 resources \ com \ debj \ mappers

4.4　具體細節實現

4.4.1　pojo

編寫實體類 Books.java 並封裝屬性

4.4.2　dao

在 BooksDao 接口中，寫方法

1 public List<Books> Initialization();

BooksDao 接口代碼示例

4.4.3　service

使用 @Service 注解，在 BooksService 包中實現 BooksDao 中的方法

1 public List<Books> Initialization(){ 2     return booksDao.Initialization(); 3 }

service 中代碼示例

4.4.4　resources

創建子文件夾 com \ **** \ mappers，創建 BooksMapper.xml 在此文件中編寫數據庫查詢語句

注：建議使用 <resultMap></resultMap> 標簽，即防止數據庫列名與實體類列名不一致導致錯誤。其中 column 為數據庫列名 property 為實體類屬性名

 1 <resultMap type="com.debj.pojo.Books" id="ResultMap">
 2     <result column="bookName" property="bookName" />
 3     <result column="bookAuthor" property="bookAuthor" />
 4     <result column="bookPubish" property="bookPubish" />
 5     <result column="bookPage" property="bookPage" />
 6     <result column="bookPrice" property="bookPrice" />
 7 </resultMap>
 8 
 9 <!-- 初始化方法 回到主頁面查詢全部的前三條記錄 -->
10 <select id="Initialization" resultMap="ResultMap">
11  select * from books order by createDate DESC limit 0,3 12 </select>

mappers 示例代碼

4.4.5　controller

創建 BooksController.java，使用注釋 @Controller 編寫 @GetMapping / @PostMapping 等。

 1 //初始化頁面
 2 @GetMapping("/index")  3 public String index(Model model) {  4     // 總頁數
 5     int pagecount = bookService.getPageCount();  6     pagecount = pagecount%3==0?pagecount/3:pagecount/3+1;  7     model.addAttribute("pagecount", pagecount);  8     // 初始頁數
 9     model.addAttribute("curnum","1"); 10     // 返回值
11     List = bookService.Initialization(); 12     model.addAttribute("list", List); 13         
14     return "SelectBooks"; 15 }

controller 代碼示例

4.4.6　注：

需要使用實體類 Books 的對象中的類，建議使用 @Autowired 注解

1 @Autowired 2 BooksDao booksDao;

@Autowired 示例

五、項目功能實現

5.1　JavaScript 驗證模塊

表單中添加 onsubmit="return check()" 屬性，在 <head></head> 標簽中編寫 JavaScript 驗證代碼。

5.2　添加新信息頁面判斷頁數是否為整數

5.2.1　方法一：根據輸入的數據判斷其是否為數據類型且為整型

1 var pages = document.getElementById("pages").value; 2 
3 function isInteger(obj) { 4     return typeof obj === 'number' && obj%1 === 0
5 } 6 if(!isInteger(pages)) { 7     alert("價格必須是數字類型"); 8     return false; 9 }

方法一

5.2.1　方法二：input 標簽的 type 類型設為 number 即數值類型

1 <input type="number" name="pages" id="pages" value="" />

方法二

5.3　模糊查詢

注：參考分頁具體實現

5.4　分頁具體實現

　　5.4.1　mapper 代碼實現查詢段

1 <!-- 得到Books分類的返回集 -->
2 <select id="getCSTypeBoksInfo" resultMap="ResultMap">
3 SELECT * From books where ${param1} like '%${param2}%' order by createDate DESC limit ${param3},3 4 <!-- SELECT * From books where ${param1} like ${param2} order by createDate DESC 有漏洞-->
5 </select>

mappers 分頁代碼

5.4.2　controller 中控制查詢代碼實現

 1 @RequestMapping("/index2")  2 public String getAllBooksInfoByStr(  3         @RequestParam("str1") String str1,  4 @RequestParam("str2") String str2,  5 @RequestParam("curnum") String curnum,  6 @RequestParam("sx") String sx,  7  Model model) {  8 int pagecount=0;  9 
10 // 保存參數
11 model.addAttribute("str1", str1); 12 model.addAttribute("str2", str2); 13 
14 // 返回值
15 if(str1.length()>1) { 16     // 總頁數
17 pagecount = bookService.getTypePageCount(str1,str2); 18 pagecount = pagecount%3==0?pagecount/3:pagecount/3+1; 19 model.addAttribute("pagecount", pagecount); 20 }else { 21     // 總頁數
22 pagecount = bookService.getPageCount(); 23 pagecount = pagecount%3==0?pagecount/3:pagecount/3+1; 24 model.addAttribute("pagecount", pagecount); 25 } 26 
27 // 初始頁數
28 if(sx.equals("1")){ 29 // 上一頁 
30 if(curnum.equals("1")){ 31 curnum="1"; 32 model.addAttribute("curnum", curnum); 33 }else { 34     curnum = String.valueOf(Integer.valueOf(curnum)-1); 35     model.addAttribute("curnum", curnum); 36  } 37 }else if(sx.equals("2")){ 38 // 下一頁
39 if(curnum.equals(String.valueOf(pagecount))){ 40     model.addAttribute("curnum", curnum); 41 }else { 42     curnum = String.valueOf(Integer.valueOf(curnum)+1); 43     model.addAttribute("curnum", curnum); 44  } 45 }else { 46     curnum= "1"; 47 model.addAttribute("curnum", curnum); 48 } 49 // 首尾頁
50 if(sx.equals("0")) { 51 curnum="1"; 52 model.addAttribute("curnum", curnum); 53 } 54 if(sx.equals("4")) { 55 curnum=String.valueOf(pagecount); 56 model.addAttribute("curnum", curnum); 57 } 58 int curnumm = Integer.parseInt(curnum); 59 
60 // 返回值
61 if(str1.length()>2) { 62     List = bookService.getCSTypeBoksInfo(str1,str2,(curnumm-1)*3); 63 }else { 64     List = bookService.getCSInfo((curnumm-1)*3); 65 } 66 model.addAttribute("list", List); 67 return "SelectBooks"; 68 }

Controller 分頁代碼

5.5　controller 中獲取系統時間

1 Date time = new Date(System.currentTimeMillis()); 2 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 3 String current = sdf.format(time);

獲取系統時間

六、總結

1、JavaScript 寫在 <head></head> 標簽中，form 表單中添加 onsubmit="return check()" 屬性。

既，在表單提交時，調用 JavaScript 中的返回值類型為 boolean 型的 check() 方法，此處返回類型人為設計返回類型。

2、查詢數據庫信息，為防止亂碼。

在 application.properties 中的 #mysql --> spring.datasource.url 后添加 characterEncoding=utf8 若已經有其它語句則在此句前加“&”。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 SSM整合案例：圖書管理系統圖書管理系統圖書管理系統 SSM框架實戰：簡單圖書管理與借閱系統圖書管理系統——測試與調試 python實現圖書管理系統【JavaWeb】圖書管理系統【總結】圖書管理系統(SSH) C#圖書管理系統基於java的圖書管理系統