一.完成了User的CRUD

写法和之前的CRUD是一样的User(userid,username,password,age)把之前的CRUD拿过来,把名称和sql修改一下就可以完成了

二.Images的修改与删除

2.1 富文本框

由于html中原生的textarea功能太弱,无法完成一些字体,颜色等功能,因此我们在开的时候经常会使用富文本框

UEditor, CKEditor,wangEditor 市面用得比较多的富文本框

使用是的wangEditor,要学习的话可以去看它的官网 -> http://www.wangeditor.com/

主要是完成文本框的展示

<div id="intro"></div> <input type="hidden" name="intro" id="txtIntro" /> ... <script type="text/javascript" src="/js/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor //获取到咱们的编辑器位置 var editor = new E('#intro') //获到取相应的元素(提交的intro元素) //监听编辑器的修改事件(html就是编辑器中的内容) editor.customConfig.onchange = function (html) { //console.debug(html) //把富文框的内容放进去 txtIntro.val(html); }; // 创建对应的编辑器 editor.create(); </script>

2.2 修改的回显功能

①.单选框的回显

需要保存的是被选中的那一个input加上checked属性 <div class="form-group"> <label for="isenabled">是否启用:</label> <label class="radio-inline"> <input type="radio" name="isenabled" id="isenabled" value="true" <c:if test="${img.isenabled}"> checked </c:if> >是 </label> <label class="radio-inline"> <input type="radio" name="isenabled" id="isenabled" value="false" <c:if test="${!img.isenabled}"> checked </c:if> >否 </label> </div>

②.富文本框数据的回显

var E = window.wangEditor var editor = new E('#intro'); var $text1 = $('#txtIntro'); editor.customConfig.onchange = function(html) { // 监控变化，同步更新到 textarea $text1.val(html); } editor.create(); // 初始化 文本编辑器的内容 editor.txt.html('${img.intro}') // 初始化对应的内容 $text1.val(editor.txt.html());

2.3 删除功能

删除数据的时候同时也要删除相应的文件(图片) file.delete()

@RequestMapping("/delete") public String delete(Integer id,HttpServletRequest req){ //注意:在咱们删除功能前还要先把图片删除了 //1.拿到咱们的Image数据 Images images = imageService.findOne(id); if(images!=null){ //2.拿到真实的路径 String realPath = req.getServletContext().getRealPath(""); //3.拿到文件路径 String filePath = images.getStorepath(); //4.获取到文件 File file = new File(realPath+filePath); //5.删除文件 file.delete(); } imageService.delete(id); return "redirect:/images/query"; }

三.主页面的轮播图展示

会去从后台拿到所有图片把图片在相应的轮播位置进行循环注意: 咱们循环的时候要保证第一个图片有.active样式的 <!-- varStatus[LoopTagSupport]:每次循环的状态(包含下标，次数,...) --> <c:forEach items="${imgs}" var="img" varStatus="s"> <div class="item <c:if test="${s.index==0}"> active </c:if> "> <img src="${img.storepath}" style="max-height: 500px;width:100%;" alt="码农"> <div class="carousel-caption"> ${img.intro} </div> </div> </c:forEach>

四.分页

一个系统，由于数据量都会比较多，所以开发的时候都会做分页功能的真分页(limit)与假分页(内存中) 真分页:匀速，用户体验还可以，用得多一点假分页:每一次非常慢(后面就快)，还会占内存

4.1 创建分页对象 PageList

把分页的所有数据封装给传给前端哪些属性（当前页，每页条数,首页，尾页，上一下，下一页，总页数，总条数，当前页数据）当前页，每页条数 -> 前台传过来总条数,当前页数据 -> 数据库中查出来上一页，下一页，总页数 -> 计算出来的 /** * 分页对象 * @author Administrator * */ public class PageList<T> { //当前页 -> 前台传过来 private int currentPage = 1; //每页条数 -> 前台传过来/自己定义 private int pageSize = 10; //首页(第一页) private int firstPage = 1; //上一页 计算出来 currentPage>1?currentPage-1:1 private int prevPage; //下一页 计算出来 currentPage<lastPage?currentPage+1:lastPage private int nextPage; //尾页 == 总页数 private int lastPage; //总页数 计算出来 totalCount%pageSize==0?totalCount/pageSize:totalCount/pageSize+1 private int totalPage; //总条数 -> 数据库中查询出来 private int totalCount; //当前页的数据 -> 数据库中查询出来 private List<T> data = new ArrayList<>(); public PageList(){} /** * @param currentPage:前台传过来 * @param pageSize:前台传过来 * @param totalCount:数据库中查询 * @param data:数据库中查询 */ public PageList(int currentPage, int pageSize, int totalCount, List<T> data) { this.currentPage = currentPage; this.pageSize = pageSize; this.totalCount = totalCount; this.data = data; //计算上一页 当前页>1 ? 当前页-1 : 1 this.prevPage = this.currentPage>1 ? this.currentPage-1 : 1; //计算总页数 总条数%每页条数==0？ 总条数/每页条数:总条数/每页条数+1 this.totalPage = this.totalCount%this.pageSize==0?this.totalCount/this.pageSize:this.totalCount/this.pageSize+1; this.lastPage = this.totalPage; //最后一页就是总页数 //计算下一页 当前页<总页数？当前页+1:总页数; this.nextPage = this.currentPage<this.totalPage?this.currentPage+1:this.totalPage; } //getter,setter省略 }

4.2 创建SQL条件对象 SqlCondition

接收前台传过来的分页条件(currentPage,pageSize) public class SqlCondition { //当前页 private int currentPage = 1; //每页条数 private int pageSize = 10; //getter,setter省略 }

4.3 在dao中添加了相应的方法

根据条件查询到数据，封装成PageList对象 返回 /** * 最后返回的是PageList对象，里面都要有值 * PageList(int currentPage, int pageSize, int totalCount, List<T> data) */ @Override public PageList<Images> queryAll(SqlCondition condition) { //①.拿到当前页与每页条数 int currentPage = condition.getCurrentPage(); int pageSize = condition.getPageSize(); //一.查询总条数 //1.1 准备查询总条数的sql String sql = "select count(*) from t_image"; //1.2执行sql拿到总条数 Integer totalCount = jdbcTemplate.queryForObject(sql, Integer.class); //二.查询当前页的数据 //2.1 计算当前页是从第几条数据开始的 int beginIndex = (currentPage-1) * pageSize; //2.2 准备相应的SQL String dataSql = "select * from t_image limit "+beginIndex+","+pageSize; //2.3 执行查询功能 List<Images> data= jdbcTemplate.query(dataSql, new BeanPropertyRowMapper<>(Images.class)); //三.创建PageList对象并且返回 PageList pageList = new PageList(currentPage,pageSize,totalCount,data); return pageList; }

4.4 前端展示数据

controller中的修改 @RequestMapping("/query") public String query(SqlCondition condition,Model model){ model.addAttribute("pageList",imageService.queryAll(condition)); return "main"; } 页面中的展示(循环的是pageList.data) <c:forEach items="${pageList.data}" var="img"> ... </c:forEash> 分页条把值加上 -> ?currentPage=1 <!--分页--> <nav class="navbar-right"> <ul class="pagination" id="paging"> <li> <span>当前第${pageList.currentPage}页</span> </li> <li> <a href="/images/query?currentPage=1"> <span aria-hidden="true">首页</span> </a> </li> <li> <a href="/images/query?currentPage=${pageList.prevPage}" aria-label="上一页"> <span aria-hidden="true">上一页</span> </a> </li> <li> </li> <li> <a href="/images/query?currentPage=${pageList.nextPage}" aria-label="下一页"> <span aria-hidden="true">下一页</span> </a> </li> <li> <a href="/images/query?currentPage=${pageList.lastPage}" aria-label="尾页"> <span aria-hidden="true">尾页</span> </a> </li> <li> <span>总页数：共${pageList.totalPage}页</span> <span>总数据：共${pageList.totalCount}条</span> </li> </ul> </nav>