使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理-白红宇

使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理

阅读量：6260 次

发布时间：2019-06-22

本文共 9277 字，大约阅读时间需要 30 分钟。

原文:

摘要通过对博客文章的管理，实现外键操作。

目录[-]

转载请注明出处：。

注：在阅读本文前，请先阅读：

访问GitHub下载最新源码：

八、博客文章管理

博客的管理与用户的管理有许多的相似之处，但是另外多了外键的操作，下面做简单的说明。

1、查看文章

查看文章的操作相对简单。首先在com.gaussic.repository中添加BlogRepository，方法与UserRepository类似：

package com.gaussic.repository;import com.gaussic.model.BlogEntity;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.stereotype.Repository;@Repositorypublic interface BlogRepository extends JpaRepository
     
       {}

在com.gaussic.controller中添加一个BlogController类，并添加以下方法（当然也可以写在MainController中，在较大型的项目开发中，最好对各类的操作进行一个区分，以增强代码的可读性）：

package com.gaussic.controller;import com.gaussic.model.BlogEntity;import com.gaussic.repository.BlogRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import java.util.List;@Controllerpublic class BlogController {    @Autowired    BlogRepository blogRepository;        // 查看所有博文    @RequestMapping(value = "/admin/blogs", method = RequestMethod.GET)    public String showBlogs(ModelMap modelMap) {        List
     
       blogList = blogRepository.findAll();        modelMap.addAttribute("blogList", blogList);        return "admin/blogs";    }}

接下来，在pages/admin目录下新建blogs.jsp文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
     
          
      
           
       
            
        
             
          
         SpringMVC 博客管理    
          
         
              
              
              
          
          
               
           SpringMVC 博客系统-博客管理
    
           
    
           所有博客 
            
             添加
            
    
            
           
                    
            
                         
             
              Blog表为空，请
              
               添加                
                
               
                        
                
                                             ID                标题                作者                发布日期                操作                        
                 
                                                      ${blog.id}                    ${blog.title}                    ${blog.userByUserId.nickname}, ${blog.userByUserId.firstName} ${blog.userByUserId.lastName}                    
                                                              
                  
                   详情                        
                   
                    修改                        
                    
                     删除

先不要急着运行代码，我们来看看blogs.jsp与users.jsp有何不同。

注意到，在查看博文作者的时候，使用了如下代码：

${blog.userByUserId.nickname}, ${blog.userByUserId.firstName} ${blog.userByUserId.lastName}

也就是说，通过blog的userByUserId对象，找到了博文的作者，并且输出了他的昵称以及姓名。在这里，外键起到了决定性的作用。下面我们运行Tomcat，浏览器中输入，可以看到如下界面：

2、添加博客

当然，现在数据库中是没有数据的，不用着急，我们先实现博文的添加功能。回到BlogController，添加addBlog的GET和POST操作：

package com.gaussic.controller;import com.gaussic.model.BlogEntity;import com.gaussic.model.UserEntity;import com.gaussic.repository.BlogRepository;import com.gaussic.repository.UserRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.ModelAttribute;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import java.util.List;@Controllerpublic class BlogController {    @Autowired    BlogRepository blogRepository;    @Autowired    UserRepository userRepository;    // 查看所有博文    @RequestMapping(value = "/admin/blogs", method = RequestMethod.GET)    public String showBlogs(ModelMap modelMap) {        List
     
       blogList = blogRepository.findAll();        modelMap.addAttribute("blogList", blogList);        return "admin/blogs";    }    // 添加博文    @RequestMapping(value = "/admin/blogs/add", method = RequestMethod.GET)    public String addBlog(ModelMap modelMap) {        List
      
        userList = userRepository.findAll();        // 向jsp注入用户列表        modelMap.addAttribute("userList", userList);        return "admin/addBlog";    }    // 添加博文，POST请求，重定向为查看博客页面    @RequestMapping(value = "/admin/blogs/addP", method = RequestMethod.POST)    public String addBlogPost(@ModelAttribute("blog") BlogEntity blogEntity) {        // 打印博客标题        System.out.println(blogEntity.getTitle());        // 打印博客作者        System.out.println(blogEntity.getUserByUserId().getNickname());        // 存库        blogRepository.saveAndFlush(blogEntity);        // 重定向地址        return "redirect:/admin/blogs";    }}

接下来，在pages/admin目录下新建addBlog.jsp文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
     
          
      
           
       
            
        
             
          
         SpringMVC 添加博客    
          
         
              
              
              
          
          
               
           SpringMVC 添加博客
    
           
    
           
                    
            
                         
             
              Title:            
                              
              
                           
               
                Author:            
                
                                 
                 
                                      
                  
                   ${user.nickname}, ${user.firstName} ${user.lastName}                                            
                   
                                
                    
                     Content:            
                     
                                      
                      
                                   
                       
                        Publish Date:            
                                        
                        
                                     
                         
                          提交

讲解：

（1）首先在作者一栏使用了选择框，通过select来选择该博文的作者，注意到select标签的id和name都是userByUserId.id（id可以不同，但name必须如此），也就是说，需要通过blog的外键来定位到所需要选择的作者。而在其选项组中，使用user.id来进行赋值，这样，就能把blog和user表相关联，是不是很方便呢？

（2）Content处使用了textarea标签，关于文中的一些标签的用法可以（没有Bootstrap实在不会写前端。。），注意由于数据表的限制，请将字数保存在255以下。当然也可以把数据表中的字段改为TEXT，以支持更长的输入。

（3）发布日期的选取，采用了最简单的H5 date控件，有兴趣做成选择框的话，可以引入，这是一个比较好的组件，但不是本文的重点，在此使用最简单的。点击其右方的下三角，可以选择日期，也可以直接输入：

说了真么多，我们来重启一下Tomcat，点击博客管理界面的添加按钮，添加以下内容：

注意Author是一个select选框，如下图所示，（如果选项很少效果不太好的话，请自行到用户管理界面多添加几个用户再来）：

点击提交，系统重新跳转到了博客管理界面，这里已经显示出了所添加的博客列表：

3、查看博文详情

有了前面的基础，这个就很好实现了，不多说，趁热打铁，在BlogController中添加如下方法：

// 查看博文详情，默认使用GET方法时，method可以缺省@RequestMapping("/admin/blogs/show/{id}")public String showBlog(@PathVariable("id") int id, ModelMap modelMap) {    BlogEntity blog = blogRepository.findOne(id);    modelMap.addAttribute("blog", blog);    return "admin/blogDetail";}

在pages/admin目录下新建文件blogDetail.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
     
          
      
           
       
            
        
             
          
         SpringMVC 博文详情    
          
         
              
              
              
          
          
               
           SpringMVC 博文详情
    
           
    
           
                                ID            ${blog.id}                            Title            ${blog.title}                            Author            ${blog.userByUserId.nickname}, ${blog.userByUserId.firstName} ${blog.userByUserId.lastName}                            Content            ${blog.content}                            Publish Date

注意：在输出日期的时候使用了fmt标签，请在顶部引入fmt标签。

现在重启服务器，进入博客管理页面，点击刚才添加的博文的详情按钮，查看该博文的详情：

4、修改博客内容

写完了增加和查看的操作，现在实现修改的操作，内容依旧与用户操作类似。首先，在BlogRepository中添加如下代码：

// 修改博文操作@Modifying@Transactional@Query("update BlogEntity blog set blog.title=:qTitle, blog.userByUserId.id=:qUserId," +        " blog.content=:qContent, blog.pubDate=:qPubDate where blog.id=:qId")void updateBlog(@Param("qTitle") String title, @Param("qUserId") int userId, @Param("qContent") String content,                @Param("qPubDate") Date pubDate, @Param("qId") int id);

接下来，在BlogController中添加修改博文的GET和POST方法：

// 修改博文内容，页面@RequestMapping("/admin/blogs/update/{id}")public String updateBlog(@PathVariable("id") int id, ModelMap modelMap) {    // 是不是和上面那个方法很像    BlogEntity blog = blogRepository.findOne(id);    List
     
       userList = userRepository.findAll();    modelMap.addAttribute("blog", blog);    modelMap.addAttribute("userList", userList);    return "admin/updateBlog";}// 修改博客内容，POST请求@RequestMapping(value = "/admin/blogs/updateP", method = RequestMethod.POST)public String updateBlogP(@ModelAttribute("blogP") BlogEntity blogEntity) {    // 更新博客信息    blogRepository.updateBlog(blogEntity.getTitle(), blogEntity.getUserByUserId().getId(),            blogEntity.getContent(), blogEntity.getPubDate(), blogEntity.getId());    blogRepository.flush();    return "redirect:/admin/blogs";}

新建updateBlog.jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
     
          
      
           
       
            
        
             
          
         SpringMVC 修改博客    
          
         
              
              
              
          
          
               
           SpringMVC 修改博客
    
           
    
           
                    
            
                         
             
              Title:            
                              
              
                           
               
                Author:            
                
                                 
                 
                                      
                  
                                           
                   
                    ${user.nickname}, ${user.firstName} ${user.lastName}                                        
                    
                                             
                     
                      ${user.nickname}, ${user.firstName} ${user.lastName}                                                                
                      
                                   
                       
                        Content:            
                        
                         ${blog.content}                
                         
                                      
                          
                           Publish Date:            
                           
                            "/>                
                             
                                    
                            
                                         
                             
                              提交

注：感谢某位同学的指出，这里pubDate的输出如图下图所示：

重启服务器，进入修改博客页面，做出一定的修改：

点击提交，返回博客列表页面，可以查看修改。

5、删除博客文章

删除博客的实现非常简单，在BlogController下加入以下方法：

// 删除博客文章@RequestMapping("/admin/blogs/delete/{id}")public String deleteBlog(@PathVariable("id") int id) {    blogRepository.delete(id);    blogRepository.flush();    return "redirect:/admin/blogs";}

重启服务器，随便添加一篇新的文章，然后删除之：

点击删除按钮，删除第二篇文章，将返回博客管理界面：

九、尾声

这样，整个博客的增删改查操作就完成了，而这一系列的文章也即将接近尾声。还有许多的细节是可以优化的，SpringMVC还有许多优化代码的小技巧，能让你在开发时加省力，这一点是要在我们的学习和使用中去探索和思考的，特别作为一个WEB开发人员，探索和思考的能力是宝贵的。

在此，还有一些小的事情需要交代，让我一一道来。

1、如何部署

在项目的目录下，IntelliJ IDEA生成了一个target文件夹，如下图所示：

而springmvcdemo就是生成好的项目，我们把这个项目放到Tomcat的webapps目录下，然后启动Tomcat，访问就可以看到网站。

2、进一步的学习

如果本文满足不了你的需求，你还需要许多更高级的操作，那么就应该查查文档了，访问可以查看springmvc的详细文档，按照所使用的版本进行查阅。在中还有许多其他的Spring框架，比如比较流行的Spring BOOT框架，以及本文中用到的Spring Data框架等。

关于Bootstrap，在前端开发上面，离了Bootstrap我还真难写出了像样的前端来，当然为了成为一个出色的 Full Stack Developer，会一点HTML+CSS+JS那肯定是有必要的。我维护过PHP的项目，开发过Django的项目，SpringMVC的项目也做了不少，甚至乎用Node.js搭建博客等都有一定的涉猎，这些项目无论哪一个都离不开前端知识的支持。如果对前端不太了解，又想速成的话，建议上看看教程。