一、接业务，作分析
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 输入增加新书每项信息后点击“提交”。添加日期取系统时间，保存成功或者失败都跳转到图书信息管理系统首页，列表下方显示“保存成功！”或“保存失败！”
分析：添加后直接跳转到主页面，默认显示所有信息，并且给出添加结果的反馈信息
二、架构设计思路
三、项目框架实操
3.1 jsp 页面实现
查询信息的主页面、添加新信息的添加碳
3.2 配置文件实现
3.2.1 至 https://maven.apache.org/download.cgi 下载 Maven
3.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>
3.2.3 给 eclipse 配置 Maven
3.3 工程架构实现
3.3.1 创建 Maven project 的 webapp 工程
3.3.2 修工程 jdk 版本并更新 Maven 工程
3.3.3 配置 pom.xml 文件
3.3.4 配置 application.properties 文件
3.3.4 创建包创建 APP.java 文件
3.3.5 创建主包下的子包 controller、dao、pojo、service
3.3.6 在 resources 创建 mqpper.xml 子文件
四、项目细节实现
4.1 实现 pojo 中的实体类 Books.java 并封装
4.2 编写 dao 中 BooksDao 接口，写方法无方法体
1 public List<Books> Initialization();
4.3 在 service 中使用 @Service 注解，在 BooksService 包中实现 BooksDao 中的方法
1 public List<Books> Initialization(){
2 return booksDao.Initialization();
3 }
4.4 在 resources 中的子文件夹内部内部的 BookService.java 中写数据库查询方法
注：建议使用 <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>
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 }
4.6 注：
需要使用实体类 Books 的对象中的类，建议使用 @Autowired 注解
1 @Autowired
2 BooksDao booksDao;
五、总结
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="" />