當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/3/17 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原文:使用IntelliJ IDEA開發SpringMVC網站（五）博客文章管理

摘要通過對博客文章的管理，實現外鍵操作。

目錄[-]

八、博客文章管理 1、查看文章 2、添加博客? ? ? ? 3、查看博文詳情 4、修改博客內容 5、刪除博客文章九、尾聲? ? ? ?? 1、如何部署 2、進一步的學習 3、ENDING

轉載請注明出處：Gaussic（一個致力于AI研究卻不得不兼顧項目的研究生）?。

注：在閱讀本文前，請先閱讀：

使用IntelliJ IDEA開發SpringMVC網站（一）開發環境

使用IntelliJ IDEA開發SpringMVC網站（二）框架配置

使用IntelliJ IDEA開發SpringMVC網站（三）數據庫配置

使用IntelliJ IDEA開發SpringMVC網站（四）用戶管理

訪問GitHub下載最新源碼：https://github.com/gaussic/SpringMVCDemo

八、博客文章管理

? ? ? ? 博客的管理與用戶的管理有許多的相似之處，但是另外多了外鍵的操作，下面做簡單的說明。

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;@Repository public?interface?BlogRepository?extends?JpaRepository<BlogEntity,?Integer>?{ }

? ? ? ? 在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;@Controller public?class?BlogController?{@AutowiredBlogRepository?blogRepository;//?查看所有博文@RequestMapping(value?=?"/admin/blogs",?method?=?RequestMethod.GET)public?String?showBlogs(ModelMap?modelMap)?{List<BlogEntity>?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"?%> <!DOCTYPE?html> <html?lang="zh-CN"> <head><meta?charset="utf-8"><meta?http-equiv="X-UA-Compatible"?content="IE=edge"><meta?name="viewport"?content="width=device-width,?initial-scale=1"><title>SpringMVC?博客管理</title><link?rel="stylesheet"?href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div?class="container"><h1>SpringMVC?博客系統-博客管理</h1><hr/><h3>所有博客?<a?href="/admin/blogs/add"?type="button"?class="btn?btn-primary?btn-sm">添加</a></h3><c:if?test="${empty?blogList}"><div?class="alert?alert-warning"?role="alert"><span?class="glyphicon?glyphicon-info-sign"?aria-hidden="true"></span>Blog表為空，請<a?href="/admin/blogs/add"?type="button"?class="btn?btn-primary?btn-sm">添加</a></div></c:if><c:if?test="${!empty?blogList}"><table?class="table?table-bordered?table-striped"><tr><th>ID</th><th>標題</th><th>作者</th><th>發布日期</th><th>操作</th></tr><c:forEach?items="${blogList}"?var="blog"><tr><td>${blog.id}</td><td>${blog.title}</td><td>${blog.userByUserId.nickname},?${blog.userByUserId.firstName}?${blog.userByUserId.lastName}</td><td><fmt:formatDate?value="${blog.pubDate?}"?pattern="yyyy-MM-dd"/></td><td><a?href="/admin/blogs/show/${blog.id}"?type="button"?class="btn?btn-sm?btn-success">詳情</a><a?href="/admin/blogs/update/${blog.id}"?type="button"?class="btn?btn-sm?btn-warning">修改</a><a?href="/admin/blogs/delete/${blog.id}"?type="button"?class="btn?btn-sm?btn-danger">刪除</a></td></tr></c:forEach></table></c:if> </div> <script?src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script?src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>

? ? ? ? 先不要急著運行代碼，我們來看看blogs.jsp與users.jsp有何不同。

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

<td>${blog.userByUserId.nickname},?${blog.userByUserId.firstName}?${blog.userByUserId.lastName}</td>

? ? ? ? 也就是說，通過blog的userByUserId對象，找到了博文的作者，并且輸出了他的昵稱以及姓名。在這里，外鍵起到了決定性的作用。下面我們運行Tomcat，瀏覽器中輸入http://localhost:8080/admin/blogs，可以看到如下界面：

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;@Controller public?class?BlogController?{@AutowiredBlogRepository?blogRepository;@AutowiredUserRepository?userRepository;//?查看所有博文@RequestMapping(value?=?"/admin/blogs",?method?=?RequestMethod.GET)public?String?showBlogs(ModelMap?modelMap)?{List<BlogEntity>?blogList?=?blogRepository.findAll();modelMap.addAttribute("blogList",?blogList);return?"admin/blogs";}//?添加博文@RequestMapping(value?=?"/admin/blogs/add",?method?=?RequestMethod.GET)public?String?addBlog(ModelMap?modelMap)?{List<UserEntity>?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"?%> <!DOCTYPE?html> <html?lang="zh-CN"> <head><meta?charset="utf-8"><meta?http-equiv="X-UA-Compatible"?content="IE=edge"><meta?name="viewport"?content="width=device-width,?initial-scale=1"><title>SpringMVC?添加博客</title><link?rel="stylesheet"?href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div?class="container"><h1>SpringMVC?添加博客</h1><hr/><form:form?action="/admin/blogs/addP"?method="post"?commandName="blog"?role="form"><div?class="form-group"><label?for="title">Title:</label><input?type="text"?class="form-control"?id="title"?name="title"?placeholder="Enter?Title:"/></div><div?class="form-group"><label?for="userByUserId.id">Author:</label><select?class="form-control"?id="userByUserId.id"?name="userByUserId.id"><c:forEach?items="${userList}"?var="user"><option?value="${user.id}">${user.nickname},?${user.firstName}?${user.lastName}</option></c:forEach></select></div><div?class="form-group"><label?for="content">Content:</label><textarea?class="form-control"?id="content"?name="content"?rows="3"?placeholder="Please?Input?Content"></textarea></div><div?class="form-group"><label?for="pubDate">Publish?Date:</label><input?type="date"?class="form-control"?id="pubDate"?name="pubDate"/></div><div?class="form-group"><button?type="submit"?class="btn?btn-sm?btn-success">提交</button></div></form:form> </div> <script?src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script?src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>

? ? ? 講解：

? ? ? ? （1）首先在作者一欄使用了選擇框，通過select來選擇該博文的作者，注意到select標簽的id和name都是userByUserId.id（id可以不同，但name必須如此），也就是說，需要通過blog的外鍵來定位到所需要選擇的作者。而在其選項組中，使用user.id來進行賦值，這樣，就能把blog和user表相關聯，是不是很方便呢？

? ? ? ? （2）Content處使用了textarea標簽，關于文中的一些標簽的用法可以參照Bootstrap中文官網（沒有Bootstrap實在不會寫前端。。），注意由于數據表的限制，請將字數保存在255以下。當然也可以把數據表中的字段改為TEXT，以支持更長的輸入。

? ? ? ? （3）發布日期的選取，采用了最簡單的H5 date控件，有興趣做成選擇框的話，可以引入Bootstrap Datetimepicker，這是一個比較好的組件，但不是本文的重點，在此使用最簡單的。點擊其右方的下三角，可以選擇日期，也可以直接輸入：

? ? ? ? 說了真么多，我們來重啟一下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"?%> <!DOCTYPE?html> <html?lang="zh-CN"> <head><meta?charset="utf-8"><meta?http-equiv="X-UA-Compatible"?content="IE=edge"><meta?name="viewport"?content="width=device-width,?initial-scale=1"><title>SpringMVC?博文詳情</title><link?rel="stylesheet"?href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div?class="container"><h1>SpringMVC?博文詳情</h1><hr/><table?class="table?table-bordered?table-striped"><tr><th>ID</th><td>${blog.id}</td></tr><tr><th>Title</th><td>${blog.title}</td></tr><tr><th>Author</th><td>${blog.userByUserId.nickname},?${blog.userByUserId.firstName}?${blog.userByUserId.lastName}</td></tr><tr><th>Content</th><td>${blog.content}</td></tr><tr><th>Publish?Date</th><td><fmt:formatDate?value="${blog.pubDate}"?pattern="yyyy年MM月dd日"/></td></tr></table> </div> <script?src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script?src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>

? ? ? ? 注意：在輸出日期的時候使用了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<UserEntity>?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"?%> <!DOCTYPE?html> <html?lang="zh-CN"> <head><meta?charset="utf-8"><meta?http-equiv="X-UA-Compatible"?content="IE=edge"><meta?name="viewport"?content="width=device-width,?initial-scale=1"><title>SpringMVC?修改博客</title><link?rel="stylesheet"?href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div?class="container"><h1>SpringMVC?修改博客</h1><hr/><form:form?action="/admin/blogs/updateP"?method="post"?commandName="blogP"?role="form"><div?class="form-group"><label?for="title">Title:</label><input?type="text"?class="form-control"?id="title"?name="title"?placeholder="Enter?Title:"?value="${blog.title}"/></div><div?class="form-group"><label?for="userByUserId.id">Author:</label><select?class="form-control"?id="userByUserId.id"?name="userByUserId.id"><c:forEach?items="${userList}"?var="user"><c:if?test="${user.id==blog.userByUserId.id}"><option?value="${user.id}"?selected="selected">${user.nickname},?${user.firstName}?${user.lastName}</option></c:if><c:if?test="${user.id!=blog.userByUserId.id}"><option?value="${user.id}">${user.nickname},?${user.firstName}?${user.lastName}</option></c:if></c:forEach></select></div><div?class="form-group"><label?for="content">Content:</label><textarea?class="form-control"?id="content"?name="content"?rows="3"placeholder="Please?Input?Content">${blog.content}</textarea></div><div?class="form-group"><label?for="pubDate">Publish?Date:</label><input?type="date"?class="form-control"?id="pubDate"?name="pubDate"value="<fmt:formatDate?value="${blog.pubDate?}"?pattern="yyyy-MM-dd"/>"/></div><input?type="hidden"?id="id"?name="id"?value="${blog.id}"/><div?class="form-group"><button?type="submit"?class="btn?btn-sm?btn-success">提交</button></div></form:form> </div> <script?src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script?src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>

? ? ? ?注：感謝某位同學的指出，這里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，訪問 http://localhost:8080/springmvcdemo?就可以看到網站。

2、進一步的學習

? ? ? ? 如果本文滿足不了你的需求，你還需要許多更高級的操作，那么就應該查查文檔了，訪問?http://projects.spring.io/spring-framework/?可以查看springmvc的詳細文檔，按照所使用的版本進行查閱。在?http://spring.io/projects?中還有許多其他的Spring框架，比如比較流行的Spring BOOT框架，以及本文中用到的Spring Data框架等。

? ? ? ? ?關于Bootstrap，在前端開發上面，離了Bootstrap我還真難寫出了像樣的前端來，當然為了成為一個出色的 Full Stack Developer，會一點HTML+CSS+JS那肯定是有必要的。我維護過PHP的項目，開發過Django的項目，SpringMVC的項目也做了不少，甚至乎用Node.js搭建博客等都有一定的涉獵，這些項目無論哪一個都離不開前端知識的支持。如果對前端不太了解，又想速成的話，建議上Bootstrap中文官網看看教程。

3、ENDING

? ? ? ? 如果你對這幾篇文章有什么問題、意見、或者建議的話，歡迎訪問我的GitHub博客提出，我會在空余時間幫助大家解答。

? ? ? ? 近日新開了個人博客，歡迎訪問：http://gaussic.top/?。

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：《你不常用的c#之二》:略谈GCHand
下一篇： javascript 参数检验（二）：参