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

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

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

一、文章编辑页制作

当首页制作完毕后,需要显示内容就需要有文章数据,此时我们创建一个文章编辑页增加对应的数据。

那么我们创建一个页面,命名为文章发布页:

在这里插入图片描述
接着我们查看标题部分:
在这里插入图片描述
此部分为左右两边,左侧为标题提示输入和一个标题的文本输入框,右侧是一个发布按钮,此时我们创建左右两行:
在这里插入图片描述
由于左右两行需要在同一行显示,那么此时我们就需要设置左右两行的宽度为 50%,使其不占满超过100%的宽度居于一行,并且需要设置高度为包裹:
在这里插入图片描述
接着在左侧添加一个文本以及一个输入框:
在这里插入图片描述
那么右侧就是一个发布按钮,发布按钮更改完对应的属性后如下:
在这里插入图片描述
接着我们创建一个行命名为编辑器,并且设置这个行的高度为撑开:
在这里插入图片描述
接着在这个行内创建一个富文本编辑器,再将富文本编辑器的高度设置100%即可:
在这里插入图片描述

二、数据库创建

现在我们的页面制作完毕后,那么接下来就需要创建数据库存储我们发布的内容;此时点击后台创建一个数据库:
在这里插入图片描述
此时我们可以重命名当前数据库为文章数据:
在这里插入图片描述
接着,我们点击数据库,在数据库中添加文章字段,我们需要添加的字段有 文章标题、文章内容、文章阅读、文章点赞以及点赞用户列表;在这里存储文章点赞用户列表是为了方便对要点赞或者登录后的用户访问文章后判断是否已经点赞,若已经 点赞,那么就显示已点赞。

此时我们在数据库中添加上述的几个字段:
在这里插入图片描述
此时我们需要注意,店在哪用户列表的字段类型为 json,为json 的原因是存储了对应的数据是一个数组数据,存储到数据库的内容是字符串的“文本形式”。

三、文章数据提交服务创建

接着,我们创建一个服务命名为文章数据提交:
在这里插入图片描述

随后我们编辑当前的文章数据提交服务,首先需要确定要接受的值:
在这里插入图片描述
其他值例如阅读数、点赞数这些都是存在默认值,那么此时我们不需要接受值的传入。那么接着选择对应的数据库提交值即可:
在这里插入图片描述

在这里,我们依次把对应的数据进行提交,在点赞用户列表处添加了“[]”表示空数组内容,也就是默认为空的意思。

接着,我们创建一个回调事件,只要返回的条件是成功的,那么就返回1表示正确,否则其余情况直接返回失败原因即可:
在这里插入图片描述

四、点击按钮事件设定

接着我们给对应的发布按钮增加事件,只要发布按钮点击后,直接使用服务,服务对应的提交数据,但是此时我们发现,我们的发布作者暂时还未知道是什么:
在这里插入图片描述
那么此时我们直接创建一个变量,命名为用户昵称,默认值为“匿名”,只要用户未登录,发布的用户都统一昵称为匿名即可:
在这里插入图片描述
接着编写提交按钮的回调判断即可:
在这里插入图片描述

只要返回结果的值为1,那么就是表示成功提交,否则直接弹出返回结果,也就是对应的失败原因即可。

接着我们预览当前页面,随后复制一段内容进行提交:
在这里插入图片描述
点击发布后成功提交内容:
在这里插入图片描述
并且在数据库中也找到了对应的内容:
在这里插入图片描述
此时该功能成功完成。


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

相关文章

二、博客首页完成《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;往往会遇到…

mysql datesub interval_Mysql之INTERVAL与DATE_SUB与EXTRACT函数的使用

1. INTERVAL INTERVAL代表的是时间间隔 MySQL中的时间间隔类型有如下几种: 1.1 利用INTERVAL做时间的加减法 示例: 加法:SQL>SELECT DATE 2018-11-01 + INTERVAL 10 11 DAY_HOUR; 结果:2018-11-11 11:00:00 减法:SQL> select date 2018-11-11 11:00:00 -INTERVAL 10 11…

ORACLE中的INTERVAL

ORACLE中的INTERVAL 关于INTERVALINTERVAL类型INTERVAL YEAR TO MONTHINTERVAL DAY TO SECOND 关于INTERVAL oracle中提供了两种日期时间类型&#xff0c;分别是DATE和TIMESTAMP用来存储时间点的数据&#xff0c;同时还提供了INTERVAL来存储一段时间的数据。例如你2022年11月1…

Flink SQL之Interval Joins

1.Interval Joins&#xff08;区间Join&#xff09; 区间是双流join的优化&#xff0c;基于处理时间或事件时间&#xff0c;在一定时间区间内数据&#xff0c;相同的key进行join&#xff08;支持 Batch\Streaming&#xff09;。Interval Join 可以让一条流去 Join 另一条流中前…

MySQL INTERVAL 关键字指南

在本教程中&#xff0c;我们将了解 MySQL INTERVAL 关键字及其值以对日期和时间算术执行操作。那么&#xff0c;让我们开始吧&#xff01; 另请阅读&#xff1a;MySQL 中的 While 循环 – 完整参考 MySQL INTERVAL 简介 在 MySQL 中&#xff0c;INTERVAL 关键字用于添加或减…