devbox
算法优化者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-自定义帖子管理实现

作者：算法优化者 | 2024-01-31 08:23:52

赞

踩

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-自定义帖子管理实现

锋哥原创的Springboot+Layui python222网站实战：

python222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )共计23条视频，包括：python222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )、第2讲 架构搭建实现、第3讲 页面系统属性动态化设计实现等，UP主更多精彩视频，请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1yX4y1a7qM/

我们有些文章，比如自我介绍帖子，vip课程帖子，这种区别于正常发文文章的帖子，我们可以单独管理，设计成自定义帖子模块。

新建t_post表

  1. create table `t_post` (
  2. 	`id` int (11),
  3. 	`title` varchar (600),
  4. 	`content` text 
  5. ); 
  6. insert into `t_post` (`id`, `title`, `content`) values('2','2',NULL);
  7. insert into `t_post` (`id`, `title`, `content`) values('3','3','<p>222</p>\n');
  8. insert into `t_post` (`id`, `title`, `content`) values('5','4测试444','<p>32324444<img alt=\"\" src=\"/articleImages/20230615120852.jpg\" style=\"height:1372px; width:720px\" /></p>\n');

用Mybatis-X生成代码；

新建PostAdminController类：

  1. package com.python222.controller.admin;
  2.  
  3. import com.python222.entity.Post;
  4. import com.python222.service.PostService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.RestController;
  8.  
  9. import java.util.HashMap;
  10. import java.util.List;
  11. import java.util.Map;
  12.  
  13. /**
  14.  * 管理员-自定义帖子控制器
  15.  * @author python222小锋老师
  16.  * @site www.python222.com
  17.  */
  18. @RestController
  19. @RequestMapping(value = "/admin/post")
  20. public class PostAdminController {
  21.  
  22.     @Autowired
  23.     private PostService postService;
  24.  
  25.     /**
  26.      * 根据条件查询自定义帖子
  27.      * @return
  28.      * @throws Exception
  29.      */
  30.     @RequestMapping(value = "/list")
  31.     public Map<String,Object> list()throws Exception{
  32.         Map<String, Object> resultMap = new HashMap<>();
  33.         List<Post> postList=postService.list();
  34.         resultMap.put("code", 0);
  35.         resultMap.put("data", postList);
  36.         return resultMap;
  37.     }
  38.  
  39.     /**
  40.      * 添加或者修改自定义帖子
  41.      * @param post
  42.      * @return
  43.      */
  44.     @RequestMapping("/save")
  45.     public Map<String,Object> save(Post post){
  46.         if(post.getId()==null){
  47.             postService.save(post);
  48.         }else{
  49.             postService.updateById(post);
  50.         }
  51.         Map<String, Object> resultMap = new HashMap<>();
  52.         resultMap.put("success", true);
  53.         return resultMap;
  54.     }
  55.  
  56.     /**
  57.      * 删除自定义帖子
  58.      * @param id
  59.      * @return
  60.      * @throws Exception
  61.      */
  62.     @RequestMapping("/delete")
  63.     public Map<String,Object> delete(Integer id)throws Exception{
  64.         Map<String, Object> resultMap = new HashMap<>();
  65.         postService.removeById(id);
  66.         resultMap.put("success", true);
  67.         return resultMap;
  68.     }
  69.  
  70.     /**
  71.      * 根据id查询自定义帖子实体
  72.      * @param id
  73.      * @return
  74.      * @throws Exception
  75.      */
  76.     @RequestMapping("/findById")
  77.     public Map<String,Object> findById(Integer id)throws Exception{
  78.         Map<String, Object> resultMap = new HashMap<>();
  79.         Post post=postService.getById(id);
  80.         resultMap.put("post", post);
  81.         resultMap.put("success", true);
  82.         return resultMap;
  83.     }
  84.  
  85.  
  86.  
  87. }

前端postManage.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>自定义帖子管理</title>
  6. <link rel="stylesheet" href="/static/layui/css/layui.css"></link>
  7. <link rel="stylesheet" href="/static/css/css.css"></link>
  8. </head>
  9. <body>
  10.  
  11. <div style="padding: 20px">
  12. 	        <span class="layui-breadcrumb">
  13. 			  <a>首页</a>
  14. 			  <a><cite>自定义帖子管理</cite></a>
  15. 			</span>
  16. 	<div style="padding-top: 20px;">
  17. 		<div>
  18. 			<div>
  19. 				<button class="layui-btn layuiadmin-btn-list" data-type="batchdel" onclick="addPost()">添加</button>
  20. 			</div>
  21. 		</div>
  22. 		<div>
  23. 			<table width="100%" id="postListTable" ></table>
  24. 		</div>
  25. 	</div>
  26. </div>
  27.  
  28. <script src="/static/layui/layui.js"></script>
  29. <script src="/static/js/jquery.js"></script>
  30. <script src="/static/js/common.js"></script>
  31. <script type="text/javascript">
  32.  
  33.     layui.use(['element','form','table'], function(){
  34.         var form=layui.form;
  35.         var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  36.         $ = layui.jquery; // 使用jquery
  37.         table = layui.table;
  38.  
  39.         table.render({
  40.             elem: '#postListTable'
  41.             ,url:'/admin/post/list'
  42.             ,cols: [[
  43.                 {type:'checkbox'}
  44.                 ,{field:'id', width:100,title: '编号'}
  45.                 ,{field:'title', title: '自定义帖子名称'}
  46.                 ,{field:'action', width:300, title: '操作',align:'center',templet:formatAction}
  47.             ]]
  48.             ,page: true
  49.         });
  50.  
  51.  
  52.     });
  53.  
  54.  
  55.     function deleteOne(id){
  56.         layer.confirm('您确定要删除这条记录吗？', {
  57.             title:"系统提示"
  58.             ,btn: ['确定','取消'] //按钮
  59.         }, function(){
  60.             layer.closeAll('dialog');
  61.             $.post("/admin/post/delete",{"id":id},function(result){
  62.                 if(result.success){
  63.                     layer.msg("删除成功！");
  64.                     table.reload("postListTable",{});
  65.                 }else{
  66.                     layer.msg("删除失败，请联系管理员！");
  67.                 }
  68.             },"json");
  69.         }, function(){
  70.  
  71.         });
  72.     }
  73.  
  74.     function addPost(){
  75.         layer.open({
  76.             type: 2,
  77.             title: '添加自定义帖子',
  78.             area: ['1000px', '730px'],
  79.             content: '/admin/savePost.html' //iframe的url
  80.         });
  81.     }
  82.  
  83.     function modifyPost(id){
  84.         layer.open({
  85.             type: 2,
  86.             title: '修改自定义帖子',
  87.             area: ['1000px', '730px'],
  88.             content: '/admin/savePost.html?id='+id //iframe的url
  89.         });
  90.     }
  91.  
  92.  
  93.     function formatAction(d){
  94.         return "<a class='layui-btn layui-btn-danger layui-btn-xs' target='_blank' href='/post/"+d.id+"'><i class='layui-icon layui-icon-read'></i>帖子预览</a><button class='layui-btn layui-btn-normal layui-btn-xs' onclick='modifyPost("+d.id+")'><i class='layui-icon layui-icon-edit'></i>编辑</button><button class='layui-btn layui-btn-warm layui-btn-xs' onclick='deleteOne("+d.id+")'><i class='layui-icon layui-icon-delete' ></i>删除</button>";
  95.     }
  96.  
  97.  
  98.  
  99. </script>
  100. </body>
  101. </html>

再新建一个savePost.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>添加或者修改自定义帖子</title>
  6. <link rel="stylesheet" href="/static/layui/css/layui.css"></link>
  7. <style type="text/css">
  8.  
  9. 	table tr td{
  10. 		padding: 10px;
  11. 	}
  12.  
  13. </style>
  14. </head>
  15. <body>
  16. <div style="padding: 20px">
  17. 	<form method="post">
  18. 		<table>
  19. 			<tr>
  20. 				<td>标题：</td>
  21. 				<td><input type="text" autocomplete="off" id="title" name="title" class="layui-input" style="width: 360px"/></td>
  22. 			</tr>
  23. 			<tr>
  24. 				<td valign="top">内容：</td>
  25. 				<td>
  26. 					<textarea type="text" class="ckeditor" id="content" name="content" class="layui-input" ></textarea>
  27. 				</td>
  28. 			</tr>
  29. 			<tr>
  30. 				<td><button  class="layui-btn" onclick="submitData();return false;">提交</button></td>
  31. 				<td><font id="errorInfo" color="red"></font></td>
  32. 			</tr>
  33. 		</table>
  34. 	</form>
  35. </div>
  36. <script src="/static/ckeditor/ckeditor.js"></script>
  37. <script src="/static/layui/layui.js"></script>
  38. <script src="/static/js/jquery.js"></script>
  39. <script src="/static/js/common.js"></script>
  40. <script type="text/javascript">
  41.  
  42.     layui.use(['form'], function(){
  43.  
  44.     });
  45.  
  46.     function submitData(){
  47.         var title=$("#title").val().trim();
  48.         var content=CKEDITOR.instances.content.getData();
  49.         if(title=="") {
  50.             $("#errorInfo").text("请输入自定义帖子标题！");
  51.             $("#name").focus();
  52.             return false;
  53.         }
  54.         if(content=="") {
  55.             $("#errorInfo").text("请输入自定义帖子内容！");
  56.             $("#url").focus();
  57.             return false;
  58.         }
  59.         var id=getQueryVariable("id");
  60.         if(id){
  61.             $.post("/admin/post/save",{id:id,title:title,content:content},function(result){
  62.                 if(result.success){
  63.                     layer.alert('修改成功！',function () {
  64.                         parent.reloadPage();
  65.                     });
  66.  
  67.                 }else{
  68.                     $("#errorInfo").text(result.errorInfo);
  69.                 }
  70.             },"json");
  71.         }else{
  72.             $.post("/admin/post/save",{title:title,content:content},function(result){
  73.                 if(result.success){
  74.                     layer.alert('添加成功！',function () {
  75.                         parent.reloadPage();
  76.                     });
  77.                 }else{
  78.                     $("#errorInfo").text(result.errorInfo);
  79.                 }
  80.             },"json");
  81.         }
  82.     }
  83.  
  84.  
  85.  
  86.     function getQueryVariable(variable){
  87.         var query = window.location.search.substring(1);
  88.         var vars = query.split("&");
  89.         for (var i=0;i<vars.length;i++) {
  90.             var pair = vars[i].split("=");
  91.             if(pair[0] == variable){return pair[1];}
  92.         }
  93.         return(false);
  94.     }
  95.  
  96.     $(function(){
  97.  
  98.         var id=getQueryVariable("id");
  99.  
  100.         if(id){
  101.             $.post("/admin/post/findById",{id:id},function(result){
  102.                 if(result.success){
  103.                     var post=result.post;
  104.                     $("#title").val(post.title);
  105.                     CKEDITOR.instances.content.setData(post.content);
  106.                 }else{
  107.                     layer.alert("服务器加载有问题，请联系管理员！");
  108.                 }
  109.             },"json");
  110.         }
  111.     });
  112.  
  113.  
  114. </script>
  115. </body>
  116. </html>

自定义帖子详情查看：

新建PostController类：

  1. package com.python222.controller;
  2.  
  3. import com.python222.entity.Post;
  4. import com.python222.service.PostService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.web.bind.annotation.PathVariable;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.servlet.ModelAndView;
  10.  
  11. /**
  12.  * 自定义帖子控制器
  13.  * @author python222小锋老师
  14.  * @site www.python222.com
  15.  */
  16. @Controller
  17. @RequestMapping("/post")
  18. public class PostController {
  19.  
  20.     @Autowired
  21.     private PostService postService;
  22.  
  23.     /**
  24.      * 根据id查询自定义帖子详细信息
  25.      * @param id
  26.      * @return
  27.      * @throws Exception
  28.      */
  29.     @RequestMapping("/{id}")
  30.     public ModelAndView view(@PathVariable("id")Integer id)throws Exception{
  31.         ModelAndView mav=new ModelAndView();
  32.         Post post = postService.getById(id);
  33.         mav.setViewName("post");
  34.         mav.addObject("post",post);
  35.         return mav;
  36.     }
  37.  
  38. }

前端新建模板post.html

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title th:text="${post.title}+'-'+${application.propertyMap['k1']}"></title>
  6. <meta name="keywords" th:content="${post.title}">
  7. <meta name="description" th:content="${post.title}">
  8. <link href="/systemImages/favicon.ico" rel="SHORTCUT ICON">
  9. <link rel="stylesheet" href="/static/layui/css/layui.css"/>
  10. <link rel="stylesheet" href="/static/css/css.css"/>
  11. <link rel="stylesheet" type="text/css" href="/static/css/normalize.css" />
  12. <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  13.  
  14.  
  15.  
  16. </head>
  17. <body>
  18.  
  19.     <div class="header_top" th:include="common/head::#h" />
  20.  
  21.     <div class="header" th:include="common/menu::#m" />
  22.  
  23.     <div class="main_wrapper">
  24.         <div class="w1220 article_content">
  25.             <div class="title" th:text="${post.title}"></div>
  26.             <div class="content" th:utext="${post.content}"></div>
  27.         </div>
  28.     </div>
  29.  
  30.  
  31.     <div class="footer" th:include="common/footer::#f" />
  32.  
  33.  
  34. </body>
  35. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/49988
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号