后台的功能详解

文章表的字段没有分类和标签
分类和标签表中没有当前分类标签对应的文章数量

admin/article：分页显示所有文章细节

dao层按照设定的条件（如果前端传来的字段不空按照前端的条件返回所有记录，目前的显示就是不按照条件，只要status文章存在符合该条件就会返回数据，而且按照oder从高到低 id从高到低）返回所有的文章

---

service层中在mapper.queryall()语句前使用Pagehelper.startpage(pagenum,pagesize)参数都是根据前台的请求，当前的静态方法startpage只对紧跟着他的mapper的查询语句进行分页 于是分页完成。但是article表是没有种类和标签属性的 为了显示完全我们还要遍历queryAll()的结果集合，get(i)文章id去关联表取对应分类和标签 调用关联表的mapperList<Category> categoryList = articleCategoryRefMapper.listCategoryByArticleId(articleList.get(i).getArticleId());返回每个文章对应的分类集合 分类集合按照分类id升序排
然后文章对象调用set方法设置分类属性 分类集合若为空就默认新创建一个list然后设置为未分类 现在文章集合全了 返回一个new PageInfo(articleList)使用更多方法

---

再将service结果返回给conroller层 放入model中放入response对象中 前台取出来pageInfo对象 调用pageInfo.list来遍历显示 这个creteria容器是装了客户的筛选条件 现在是只有status!=null 之后的其他功能我们的筛选条件都放在容器当中

---

目前这个pageInfo中包含大量的属性，我们可以通过pageInfo.list获得对应的文章集合，c for each遍历这个集合
甚至嵌套的再去嵌套集合获取遍历每个var的分类集合

后台获取前台的方法@RequestParam(required = false, defaultValue = “1”)参数

---

最下面的123分页前端如何实现的
注意到会一直显示头和尾两个结点 当头和尾时会取消< 还有>

后端的步骤已经完事了 ，现在来看前端，paging.jsp

• 情况一：我们的页数很少 就直接显示了 <c:>这个标签是jsp的jstl知识需要掌握

 <c:when test="${pageInfo.pages <= 3 }">
    <c:set var="begin" value="1"/>
      <c:set var="end" value="${pageInfo.pages }"/>
 </c:when>

• 页数超过3个 让begin=“当前页面-1” end=“当前页面+2”
  如果加2大于尾巴 那就显示后三个
  如果-1<2那就显示前三个
  
  
• 展示上一页
  如果是第一页
  
  其他的页的上一页采用href标签进行拼接后返回上一页其中${pageUrlPrefix}对应的是控制器中显示文章的model传回来的所以最后拼接成比如pageNum4的上一页/admin/article?pageIndex=3(4-1)
  
• 下一页
  

写文章界面/admin/article/insert

真的要好好看看html


通过调数据库的所有类别 所有标签 放到model中传给前端 前端对model中的标签list 种类list${}获取 遍历然后layui是radio 还是 chekbox 把list的var 《c：for each》显示出来

---

真正提交添加的文章 admin/article//insertSubmit

后台对于前台提交文章的form表单请求转到/insertSubmit控制器
DO、BO、DTO、VO、AO、PO

• VO： 前端界面展示；value object值对象；ViewObject表现层对象；主要对应界面显示的数据对象。 （主要是和前端的字段对应）
  下面的这个类就是我们抽取的article
  
  vo的应用
  
  在提交当中 我们new 一个ARTICLE 并且通过session获得当前的user 然后setUser 再通过VO类的获得具体的属性再次set到文章属性里
• 1.通过HtmlUtil获得纯文本内容 获取摘要150字 如果超过150字那就截取

 //文章摘要
        int summaryLength = 150;
        String summaryText = HtmlUtil.cleanHtmlTag(articleParam.getArticleContent());
        if (summaryText.length() > summaryLength) {
            String summary = summaryText.substring(0, summaryLength);
            article.setArticleSummary(summary);
        } else {
            article.setArticleSummary(summaryText);
        }

• 2. 通过VO类获取种类然后set属性

//填充分类
        List<Category> categoryList = new ArrayList<>();
        if (articleParam.getArticleChildCategoryId() != null) {
            categoryList.add(new Category(articleParam.getArticleParentCategoryId()));
        }
        if (articleParam.getArticleChildCategoryId() != null) {
            categoryList.add(new Category(articleParam.getArticleChildCategoryId()));
        }

• 3. 通过VO类获取标签

 //填充标签
        List<Tag> tagList = new ArrayList<>();
        if (articleParam.getArticleTagIds() != null) {
            for (int i = 0; i < articleParam.getArticleTagIds().size(); i++) {
                Tag tag = new Tag(articleParam.getArticleTagIds().get(i));
                tagList.add(tag);
            }
        }

添加完成后return "redirect:/admin/article";

编辑 删除文章

在index.jsp页面中有删除和编辑的按钮 删除使用的是按钮点击触发ajax

<td>
  <a href="/admin/article/edit/${a.articleId}" class="layui-btn layui-btn-mini">编辑</a>
   <a href="javascript:void(0)" onclick="deleteArticle(${a.articleId})"  class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
 </td>

在js目录下有很多function()函数

//删除文章
function deleteArticle(id) {
    if(confirmDelete()==true){
        $.ajax({
            async: false,
            type: "POST",
            url:'/admin/article/delete/'+id,
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "text",
            complete:function () {
                window.location.reload();
            }
        })
    }
}

编辑文章界面

首先获取原本文章的全部信息 将文章的信息存放到model中 然后前台对model的信息进行展示

 @RequestMapping(value = "/edit/{id}")
    public ModelAndView editArticleView(@PathVariable("id") Integer id) {
        ModelAndView modelAndView = new ModelAndView();
        Article article = articleService.getArticleByStatusAndId(null, id);
        modelAndView.addObject("article", article);
        List<Category> categoryList = categoryService.listCategory();
        modelAndView.addObject("categoryList", categoryList);
        List<Tag> tagList = tagService.listTag();
        modelAndView.addObject("tagList", tagList);
        modelAndView.setViewName("Admin/Article/edit");
        return modelAndView;
    }

编辑文章提交

和正常的写文章提交一样 通过vo的param类获取需要的前台数据 然后update文章

@RequestMapping(value = "/editSubmit", method = RequestMethod.POST)
    public String editArticleSubmit(ArticleParam articleParam) {
        Article article = new Article();

分类

添加分类 /admin/category/insertSubmit

前台是一个表单

父节点是一个select标签 获取了种类list

<div class="layui-input-block">
     父节点 <span style="color: #FF5722; ">*</span>
  <select name="categoryPid" class="layui-input" required>
                            <option value="0">无</option>
                            <c:forEach items="${categoryList}" var="c">
                                <c:if test="${c.categoryPid==0}">
                                    <option value="${c.categoryId}">${c.categoryName}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </div>

右侧还可以继续编辑和删除 其中删除也是一个ajax

 <c:if test="${c.articleCount==0}">
                                    <a href="/admin/category/delete/${c.categoryId}" class="layui-btn layui-btn-danger layui-btn-mini" onclick="return confirmDelete()">删除</a>
                                </c:if>

删除分类 删除关联表中分类和文章的记录

其中前台在标签下有文章的标签后面不会显示删除按钮 只有等于0的

<c:if test="${c.articleCount==0}">
 <a href="/admin/tag/delete/${c.tagId}" class="layui-btn layui-btn-danger layui-btn-mini" onclick="return confirmDelete()">删除</a>
                            </c:if>

function confirmDelete() {
    var msg = "您确定要删除吗？";
    if (confirm(msg) == true) {
        return true;
    } else {
        return false;
    }
}

在控制器中要注意有分类的文章不要删除

@RequestMapping(value = "/delete/{id}")
    public String deleteCategory(@PathVariable("id") Integer id)  {
        //禁止删除有文章的分类
        int count = articleService.countArticleByCategoryId(id);

        if (count == 0) {
            categoryService.deleteCategory(id);
        }
        return "redirect:/admin/category";
    }

编辑分类的界面 和 提交

 @RequestMapping(value = "/edit/{id}")
    public ModelAndView editCategoryView(@PathVariable("id") Integer id)  {
        ModelAndView modelAndView = new ModelAndView();

        Category category =  categoryService.getCategoryById(id);
        modelAndView.addObject("category",category);

        List<Category> categoryList = categoryService.listCategoryWithCount();
        modelAndView.addObject("categoryList",categoryList);

        modelAndView.setViewName("Admin/Category/edit");
        return modelAndView;
    }

    /**
     * 编辑分类提交
     *
     * @param category 分类
     * @return 重定向
     */
    @RequestMapping(value = "/editSubmit",method = RequestMethod.POST)
    public String editCategorySubmit(Category category)  {
        categoryService.updateCategory(category);
        return "redirect:/admin/category";
    }
}

标签

删除标签和分类一样需要如果标签下有文章 不显示删除按钮
如果标签下没有文章 会把在关联表里把当前的标签删除

<td>
 <a href="/admin/category/edit/${c.categoryId}" class="layui-btn layui-btn-mini">编辑</a>
      <c:if test="${c.articleCount==0}">
   <a href="/admin/category/delete/${c.categoryId}" class="layui-btn layui-btn-danger layui-btn-mini" onclick="return confirmDelete()">删除</a>
   </c:if>
   </td>

套路浮出水面：
所有的添加都是先通过list获得所有展示 编辑页面
再到真正的添加提交进行 insert

所有的编辑都是先通过list获得所有展示 编辑页面
再到真正的编辑提交进行 update

删除都是有一些条件
标签 分类一样
评论需要先删除子评论

回复评论需要+1
管理员后台
博客前台