基于 Spring Boot 博客系统开发(十)

基于 Spring Boot 博客系统开发(十)

本系统是简易的个人博客系统开发,为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发(九)👈👈

文章管理实现

主要实现功能有文章发布、文章编辑、文章删除

文章发布和编辑实现

AdminController 添加编辑页面路由

    @RequestMapping("/edit")public String edit(Model model){model.addAttribute("article",new Article());return "admin/edit";}@RequestMapping("/edit/{id}")public String edit(@PathVariable("id") Long id,Model model){Article  article = articleService.getById(id);model.addAttribute("article",article);return "admin/edit";}

ArticleController 添加文章保存或修改方法

@Controller
@RequestMapping("/article")
public class ArticleController {@Autowiredprivate IArticleService articleService;@RequestMapping("/saveOrUpdate")@ResponseBodypublic AjaxResult saveOrUpdate(Article article){if(article.getId() == null){article.setCreated(LocalDate.now());}else{article.setModified(LocalDate.now());}articleService.saveOrUpdate(article);return AjaxResult.success();}

saveOrUpdate:根据id是否为空 判断是否执行添加或者修改
当文章对象 id 不为null 说明本方法需要进行修改,否则执行添加操作

编辑页面表单

<form id="articleForm"><input type="hidden" name="id" th:value="${article.id}" id="id"/><input type="hidden" name="allowComment" value="true" id="allow_comment"/><input type="hidden" name="content"  id="content-editor"/><div class="form-group col-md-6" style="padding: 0 10px 0 0;"><input type="text" class="form-control" placeholder="请输入文章标题(必须)" th:value="${article.title}" name="title" required="required" aria-required="true"/></div><div class="form-group col-md-6" style="padding: 0 10px 0 0;"><input name="tags" id="tags" type="text" class="form-control" th:value="${article.tags}" placeholder="请输入文章标签" /></div><div class="clearfix"></div><div id="md-container" class="form-group"><textarea id="md-editor" th:text="${article.content}"></textarea></div><div class="clearfix"></div><div class="text-right"><a class="btn btn-default waves-effect waves-light" href="/admin/list">返回列表</a><button type="button" id="saveBtn" class="btn btn-primary waves-effect waves-light" >保存文章</button></div>
</form>

点击保存文章按钮事件

        $("#saveBtn").click(function(){$("#content-editor").val(mditor.value)$.ajax({type: 'post',url: '/article/saveOrUpdate',data: $("#articleForm").serialize(),async: true,dataType: 'json',success: function (result) {if(result.code == 0){alert("文章发布成功");window.location.href="/admin/list";}else{alert(result.msg)}console.log(result)}});});

点击文章编辑按钮代码

 <a th:href="${'/admin/edit/'+article.id}" class="btn btn-primary btn-sm waves-effect waves-light m-b-5"><i class="fa fa-edit"></i> <span>编辑</span></a>

点击发布文章菜单,编辑文章内容保存
在这里插入图片描述
保存成功在文章列表可查询到
在这里插入图片描述

编辑文章的回显效果
在这里插入图片描述

文章删除实现

首先,在ArticleController.java 中 添加 delete 方法

    @RequestMapping("/delete")@ResponseBodypublic AjaxResult delete(Long id){articleService.removeById(id);return AjaxResult.success();}

然后添加文章列表删除按钮代码,当点击删除按钮执行 delArticle 方法脚本

<td><a th:href="${'/admin/edit/'+article.id}" class="btn btn-primary btn-sm waves-effect waves-light m-b-5"><i class="fa fa-edit"></i> <span>编辑</span></a><a href="javascript:void(0)" th:onclick="'delArticle('+${article.id}+')'"class="btn btn-danger btn-sm waves-effect waves-light m-b-5"><i class="fa fa-trash-o"></i> <span>删除</span></a><a class="btn btn-warning btn-sm waves-effect waves-light m-b-5" th:href="${'/article/'+article.id}" ><i class="fa fa-rocket"></i> <span>预览</span></a>
</td>

delArticle 方法脚本

        function delArticle(id) {if(confirm('确定删除该文章吗?')){$.ajax({type:'post',url : '/article/delete',data: {id:id},dataType: 'json',success: function (result) {if (result.code==0) {window.alert("文章删除成功");window.location.reload();} else {window.alert(result.msg || '文章删除失败')}}});}}

点击删除,提示确认删除?,确定删除成功后重新加载当前页面

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/328689.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【考研数学】张宇《1000题》强化阶段正确率多少算合格?

张宇1000题真的很练人心态.... 基础不好&#xff0c;建议别碰1000题 基础好&#xff0c;1000题建议在两个月以内刷完 如果自己本身在基础阶段学的比较水&#xff0c;自己的薄弱点刷了一小部分题没有针对性完全解决&#xff0c;转身去刷1000题就会发现&#xff0c;会的题目刷…

算术平均数

算术平均数&#xff08;average&#xff09;是一组数据相加后除以数据的个数而得到的结果&#xff0c;是度量数据水平的常用统计量&#xff0c;在参数估计和假设检验中经常用到。比如&#xff1a;用职工平均工资来衡量职工工资的一般水平&#xff0c;用平均体重来观察某一人群体…

通信指挥类装备(多链路聚合设备)-应急通信指挥解决方案

现场通信指挥系统是一种功能全面的便携式音视频融合指挥通信平台&#xff0c;可实现现场应急救援指挥、多种通信手段融合、现场通信组网等功能&#xff0c;是现场指挥系统的延伸。 多链路聚合设备&#xff0c;是一款通信指挥类装备&#xff0c;具有 4G/5G&#xff0c;专网&…

YOLOv8训练流程-原理解析[目标检测理论篇]

关于YOLOv8的主干网络在YOLOv8网络结构介绍-CSDN博客介绍了&#xff0c;为了更好地学习本章内容&#xff0c;建议先去看预测流程的原理分析YOLOv8原理解析[目标检测理论篇]-CSDN博客&#xff0c;再次把YOLOv8网络结构图放在这里&#xff0c;方便随时查看。 ​ 1.前言 YOLOv8训练…

《ESP8266通信指南》17-结尾篇(完结撒花)

《ESP8266通信指南》16-MQTT收发通信-完整代码-&#xff08;Lua烧录代码的深度思考与串口拦截&#xff09;-CSDN博客 《ESP8266通信指南》系列的第十六篇&#xff0c;专注于MQTT收发通信的完整代码以及深度思考与串口拦截。本小节首先列出了往期内容&#xff0c;然后提出了本节…

哈希表的理解和实现

目录 1. 哈希的概念 (是什么) 2. 实现哈希的两种方式 (哈希函数) 2.1. 直接定址法 2.2. 除留余数法 2.2.1. 哈希冲突 3. 补充知识 3.1. 负载因子 3.2. 线性探测和二次探测 4. 闭散列实现哈希表 (开放定址法) 4.1. 开放定址法的实现框架 4.2. Xq::hash_table::insert…

今天遇到一个GPT解决不了的问题

问题描述 你好&#xff0c;postman的一个post请求&#xff0c;编辑器里面放了一个很长的json数据&#xff0c;报Tokenization is skipped for long lines for performance reasons. This can be configured via editor.maxTokenizationLineLength.&#xff0c;但是同样的数据&a…

家用充电桩远程监控安全管理系统解决方案

家用充电桩远程监控安全管理系统解决方案 在当今电动汽车日益普及的背景下&#xff0c;家用充电桩的安全管理成为了广大车主关注的重点问题。为了实现对充电桩的高效、精准、远程监控&#xff0c;一套完善的家用充电桩远程监控安全管理系统解决方案应运而生。本方案旨在通过先…

AI 绘画神器 Fooocus 图生图:图像放大或变化、图像提示、图像重绘或扩充、反推提示词、生成参数提取、所需模型下载

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 大家好&#xff0c;我是水滴~~ 本文讲述 Fooocus 的图生图功能&#xff0c;主要内容包括&#xff1a;图像放大或变化、图像提示、图像重绘或扩充、反推…

深入理解MySQL三大日志:redo log、binlog、undo log

前言 MySQL是一个功能强大的关系型数据库管理系统&#xff0c;它的高可靠性、高性能和易用性使得它成为众多企业和开发者的首选。在MySQL内部&#xff0c;为了保证数据的完整性、恢复能力和并发性能&#xff0c;设计了一套复杂的日志系统。其中&#xff0c;redo log、bin log和…

Qt+C++串口调试工具

程序示例精选 QtC串口调试工具 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《QtC串口调试工具》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应用推荐首选。 …

Mybatis基础操作-删除

Mybatis基础操作-删除 删除 package com.itheima.mapper;import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Mapper;Mapper //在运行时&#xff0c;会自动生成该接口的实现类对象&#xff08;代理对象&#xff09;&#xff0c;并且将该对象…

Vue3知识总结-4

Vue3知识总结-4 文章目录 Vue3知识总结-4插槽Slots渲染作用域默认内容具名插槽插槽中的数据传递具名插槽传递数据 组件声明周期声明周期示意图 组件生命周期的应用动态组件组件保持存活组件被卸载 异步组件依赖注入 插槽Slots 在某些场景中&#xff0c;可能想要为子组件传递一…

redis中的集群模式

主从复制、主从同步(解决高并发读的问题) 主从同步原理&#xff1a; 1.全量同步 slave&#xff08;从节点&#xff09;每次请求数据同步会带两个参数&#xff1a;replid和offset。 replid&#xff1a;第一次请求同步时&#xff0c;replid和master的replid不一样&#xff0c;这…

线性系统(一)

线性系统&#xff08;一&#xff09; 1.什么是线性系统2.高斯消元法3.高斯-约旦消元法4.线性方程组解的结构 链接: 线性系统&#xff08;二&#xff09; 1.什么是线性系统 线性&#xff1a;未知数只能是一次方项 非线性: 同时&#xff0c;读者也可以通过作图来更直观地感受&…

TypeScript高级类型 在鸿蒙中的使用 Partial、Required、Readonly、Pick、Record

我的工程代码在这里&#xff0c;持续更新中 欢迎交流&#xff0c;谢谢 https://github.com/MartinLi89/WanHarmony Partial <Type> 新定义 一个类型&#xff0c;将所有属性变为可选的类. class TextTS {a: string "1"b: string "2"c: string &…

即插即用篇 | YOLOv8引入轴向注意力 Axial Attention | 多维变换器中的轴向注意力

本改进已集成到 YOLOv8-Magic 框架。 我们提出了Axial Transformers,这是一个基于自注意力的自回归模型,用于图像和其他组织为高维张量的数据。现有的自回归模型要么因高维数据的计算资源需求过大而受到限制,要么为了减少资源需求而在分布表达性或实现的便捷性上做出妥协。相…

ppt通过修改幻灯片母版修改页脚

修改幻灯片母版 幻灯片母版就可以了&#xff0c;就可以修改页脚

数学建模——农村公交与异构无人机协同配送优化

目录 1.题目 2.问题1 1. 问题建模 输入数据 ​编辑 2. 算法选择 3.数据导入 3.模型构建 1. 距离计算 2. 优化模型 具体步骤 进一步优化 1. 重新定义问题 2. 变量定义 3. 优化目标 具体步骤 再进一步优化 具体实现步骤 1. 计算距离矩阵 2. 变量定义 3. 约束…

基于Django的图书管理系统

文章目录 前言一、页面展示1.登录2.前端页面3.后端页面 二、项目上传&#xff08;1&#xff09;导入数据库&#xff08;2&#xff09;导入项目&#xff08;3&#xff09;数据库密码修改&#xff08;4&#xff09;进入网站 总结 前言 本网站调用Django编写了图书管理网站&#…