七、文章管理页面及功能实现《iVX低代码/无代码个人博客制作》

article/2025/10/14 17:02:39

注:iVX也有免费直播课《第八期直播课》

一、文章管理页页面制作

文章管理页的基本结构与首页类似,我们复制一个首页,并且重命名首页的名称为文章管理页:
在这里插入图片描述
在这里插入图片描述
我们接着删除如下图所框选部分内容:

接着重命名导航为内容:
在这里插入图片描述
删除多余的内容留下一个文本并且将文本内容更改成位置列表:
在这里插入图片描述
接着需要更改内容行的属性,使其行可以自动换行并且设置裁剪为 y 轴:
在这里插入图片描述
接着在内容行下创建一个行命名为文章:
在这里插入图片描述
设置文章的高度为包裹:
在这里插入图片描述
接着在文章中添加两个行,一个叫做左一个叫做右,左用于添加对应的左侧文章标题,右对应的添加删除和编辑按钮:
在这里插入图片描述
若想使这两个行能够在一行显示,我们需要设置左右两行的宽度总和为 100%,左行设置宽度为80%,右行设置宽度为 20%,并且由于行自带高度还需要设置高度为包裹:
在这里插入图片描述

此时由于文章文本并没有占据整行,在此需要设置这个文本的宽度为 100%,使其占满整行内容:
在这里插入图片描述
接着设置左行的文本内容为文章标题,设置文本宽度为100%:
在这里插入图片描述
接着在右行设置两个按钮,一个用于文章删除一个用于文章编辑:
在这里插入图片描述
统一设置他们的圆角取消、宽度100%,以及文本更改:
在这里插入图片描述

二、文章删除功能实现

删除文章一般并不是真正的在数据库中对数据进行删除,我们一般使用一个字段标记内容是否删除,在此我们在文章中设置一个字段为“是否删除”:
在这里插入图片描述
接着更改数据库值,0为正常,1为删除:
在这里插入图片描述
接着创建一个服务命名为删除文章,根据传递过来的ID值更改是否删除列的值:
在这里插入图片描述
接着在服务中接收一个参数命名为删除ID,随后在逻辑中选择对应的数据库,随后选择数据库进行有条件的字段更新,设置对应的是否删除为1即可,如果更新成功返回1表示成功否则直接返回失败原因即可:
在这里插入图片描述

三、获取当前作者文章

此时要删除文章数据我们还需要获取当前作者的文章数据,新建一个服务,通过传递一个昵称来获取当前用户的文章内容(最好直接判断当前登录用户):
在这里插入图片描述
此时直接通过传递一个昵称获取跟昵称对应的发布作者文章即可。

接着我们直接更改当前页面的事件即可:
在这里插入图片描述
接着我们创建一个 for 循环把文章行放入其中:
在这里插入图片描述
设置循环创建的数据来源为当前页面中的文章数据:
在这里插入图片描述
接着给文本绑定内容:
在这里插入图片描述
随后给予删除按钮事件,点击后调用服务即可:
在这里插入图片描述
那么此时完成后还需要对应的在当前页面做出响应,直接在当前页面循环文章的文章数据对象数组中删除对应 ID 的一行数据即可,所以此时在完成删除动作后,判断是否成功,如果成功就删除对象数组的内容即可:
在这里插入图片描述
此时我们预览页面成功的查看到元素,接着直接点击删除查看是否有效果:
在这里插入图片描述
点击删除后内容空白,成功完成:
在这里插入图片描述
接着到数据库中更改当前删除的标记为0,咱们此时需要重新给予获取当前用户的文章一个条件,还需要判断文章是否删除,此时更改获取服务:
在这里插入图片描述

四、文章编辑页及功能制作

接着我们复制一个文章发布页作为文章编辑页:
在这里插入图片描述
重命名该页,并且更新发布按钮为更新:
在这里插入图片描述
接着创建一个编辑ID变量存储选择编辑的文章:
在这里插入图片描述
回到管理页,当我们点击了编辑后,跳转到文章编辑页时应该给予编辑ID为点击的文章ID,并且跳转页面:
在这里插入图片描述
随后在文章编辑页创建一个变量存储详情数据,并且给予对应的列名:
在这里插入图片描述
接着给予当前编辑页显示时间,显示时直接调用之前编写的详情服务,传入对应ID之后用详情对象数组存储对应的返回值即可:
在这里插入图片描述
接着我们为页面中的容器绑定值:
在这里插入图片描述
接着创建一个服务为更新内容,接收标题、内容和ID为参数,通过ID进行内容更新:
在这里插入图片描述
最后给更新事件添加服务,传入对应参数即可:
在这里插入图片描述
最后我们更改标题:
在这里插入图片描述
点击更新之后成功更新:在这里插入图片描述
最后首页显示内容已更改:
在这里插入图片描述


http://chatgpt.dhexx.cn/article/AH3Peel8.shtml

相关文章

五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、详情页制作 在之前的章节中,我们已经制作完毕了登录、注册、首页等内容,在这一节中,我们编写详情页以及详情页功能制作。 详情页页面如下: 详情页头部也就是一个头部栏&…

三、登录页制作《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、登录页实现 本节需要做的登录页如下: 该页面我们复习可以的值,首先设置整个页面页面的垂直和水平对其为居中,随后一个容器包裹对应的登录区域,此时我们创建一个页面命名为…

一、首页、详情页、文章编辑页制作《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、首页制作 首页预览如下: 首先在博客页创建一个相对应项目: 接着选择前台,创建一个页面,命名为首页: 接着更改当前屏幕为小屏尺寸: 接着我们分…

二、文章发布页制作及后台实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、文章编辑页制作 当首页制作完毕后,需要显示内容就需要有文章数据,此时我们创建一个文章编辑页增加对应的数据。 那么我们创建一个页面,命名为文章发布页: 接着我们查看标…

二、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、菜单思路参考及制作 在 CSDN 首页中的菜单部分为一串横排的内容,并且可以进行拖动: 首先咱们添加一个行,命名为菜单: 接着肯定是需要设置上下的内边…

四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、博客详情页分析 博客详情页大体分为顶部标题、发布时间、作者信息、博文内容,底部的评论我们在此不必做悬浮内容,咱们直接放到博文之下进行显示即可;顶部标题需要…

博客中GIF动画超简单制作

前言: 在写博客的时候图片和视频是非常通俗易懂的,比文字表述更为清晰,有时候演示过程用动画效果更好,毕竟图片只是静态的,看不出整个过程。而录制成视频,体积大,保存发送也比较麻烦,最重要的事博客中不支持这种格式,所以制作成GIF动画,方便、占用空间又小、博客也支…

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、头部导航栏思路参考 首先我们可以查看CSDN的博客首页,从中查看一下布局: 在以上首页中,我们可以得知其顶部为一个整行,这个行内容左侧为一个logo&am…

《博客页面制作》教程

《博客页面制作》教程 一、《博客页面制作》第一部分 效果图&#xff1a; 参考代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>博客制作-第一部分</title><style type"text/css"&g…

Perfetto —— 靠谱的trace利器

最近踩到的坑&#xff0c;报了一个cst的测试项fail&#xff0c;帧率不符合预期&#xff0c;对应的测项进程是android.view.cts 肯定是要抓sytrace看看了 但是&#xff0c;试了systrace和atrace去抓&#xff0c;只抓了launcher的绘制&#xff0c;并没有android.view.cts的绘制…

perfetto使用简介

perfetto使用简介 文章目录 perfetto使用简介一、使用方法1.1 打开perfetto的设置界面1.1.1 adb指令1.1.2 系统设置 1.2 打开录制跟踪记录功能1.3 打开跟踪记录功能后&#xff0c;运行需要调试的APP1.4 运行完操作之后点击,可点击下拉菜单停止跟踪记录1.5 导出trace文件 二、打…

Android性能优化之Perfetto

Perfetto 一. 通过System Tracing抓取 1. System Tracing Overview System Tracing即系统跟踪界面&#xff0c;用户可以通过如下两种方式进入系统跟踪界面&#xff1a; &#xff08;1&#xff09;设置 – 其他设置 – 开发者选项 – 系统跟踪&#xff08;Realme GT Neo 闪速…

[ES6] 01. Intro to ES6 and traceur compiler

---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript. Tracer is a way to compile that next version of JavaScript back into JavaScript of today, meaning …

Android性能优化工具

一、性能优化工具基础 1.1 概述 在Android开发中&#xff0c;开发者可通过"系统跟踪"观察Android设备的运行情况并生成跟踪报告&#xff0c;在此基础上进行分析优化。Android 平台提供了多种获取跟踪信息的工具&#xff1a; Android Studio CPU 性能剖析器Systrace…

搭建Babel运行环境,Traceur ES6模板,块级作用域,let和const命令

搭建Babel运行环境 Babel&#xff08;http://babeljs.io/&#xff09;可用于将使用ES6语法的脚本转化为ES5语法的脚本&#xff0c;基本功能的安装步骤如下&#xff1a; 1、安装node解释器和npm包管理工具 2、安装babel解释器 npm install -g babel &#xff08;建议这个过程完…

ES6转ES5,Traceur使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Traceur 使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Rxjava:interval的使用

以固定的时间间隔不断发射数据。 测试&#xff1a; Test public void testSimple(){Observable.interval(1, TimeUnit.SECONDS).subscribe(new Action1<Long>() {Overridepublic void call(Long aLong) {System.out.println("aLong " aLong);}});for (;;){…

FlinkSql系列6之 Interval Join

FlinkSql系列6之 Interval Join 前言 本次我们来学习flinksql的Interval Join,这个方式主要是针对两个流在一定时间区间内的join,支持事件时间和处理时间&#xff0c;而且这个流每次只会产生一条数据&#xff0c;是一个完全的追加流。 一、Interval Join是什么&#xff1f; I…

Flink Interval Join使用以及源码解析

1、Interval Join 概述 在之前的Join算子中&#xff0c;一般使用的是coGroup算子&#xff0c;因为一个算子可以提供多种语义&#xff0c;但是也是有一些弊端的。因为coGroup只能实现在同一个窗口的两个数据流之间进行join&#xff0c;在实际的计算过程中&#xff0c;往往会遇到…