前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >html静态网页生成器_网页后端制作

html静态网页生成器_网页后端制作

作者头像
全栈程序员站长
发布2022-11-03 10:39:55
2.5K0
发布2022-11-03 10:39:55
举报
文章被收录于专栏:全栈程序员必看

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

一、文章编辑页制作

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

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

在这里插入图片描述
在这里插入图片描述

接着我们查看标题部分:

在这里插入图片描述
在这里插入图片描述

此部分为左右两边,左侧为标题提示输入和一个标题的文本输入框,右侧是一个发布按钮,此时我们创建左右两行:

在这里插入图片描述
在这里插入图片描述

由于左右两行需要在同一行显示,那么此时我们就需要设置左右两行的宽度为 50%,使其不占满超过100%的宽度居于一行,并且需要设置高度为包裹:

在这里插入图片描述
在这里插入图片描述

接着在左侧添加一个文本以及一个输入框:

在这里插入图片描述
在这里插入图片描述

那么右侧就是一个发布按钮,发布按钮更改完对应的属性后如下:

在这里插入图片描述
在这里插入图片描述

接着我们创建一个行命名为编辑器,并且设置这个行的高度为撑开:

在这里插入图片描述
在这里插入图片描述

接着在这个行内创建一个富文本编辑器,再将富文本编辑器的高度设置100%即可:

在这里插入图片描述
在这里插入图片描述

二、数据库创建

现在我们的页面制作完毕后,那么接下来就需要创建数据库存储我们发布的内容;此时点击后台创建一个数据库:

在这里插入图片描述
在这里插入图片描述

此时我们可以重命名当前数据库为文章数据:

在这里插入图片描述
在这里插入图片描述

接着,我们点击数据库,在数据库中添加文章字段,我们需要添加的字段有 文章标题、文章内容、文章阅读、文章点赞以及点赞用户列表;在这里存储文章点赞用户列表是为了方便对要点赞或者登录后的用户访问文章后判断是否已经点赞,若已经 点赞,那么就显示已点赞。

此时我们在数据库中添加上述的几个字段:

在这里插入图片描述
在这里插入图片描述

此时我们需要注意,店在哪用户列表的字段类型为 json,为json 的原因是存储了对应的数据是一个数组数据,存储到数据库的内容是字符串的“文本形式”。

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

接着,我们创建一个服务命名为文章数据提交:

在这里插入图片描述
在这里插入图片描述

随后我们编辑当前的文章数据提交服务,首先需要确定要接受的值:

在这里插入图片描述
在这里插入图片描述

其他值例如阅读数、点赞数这些都是存在默认值,那么此时我们不需要接受值的传入。那么接着选择对应的数据库提交值即可:

在这里插入图片描述
在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述

四、点击按钮事件设定

接着我们给对应的发布按钮增加事件,只要发布按钮点击后,直接使用服务,服务对应的提交数据,但是此时我们发现,我们的发布作者暂时还未知道是什么:

在这里插入图片描述
在这里插入图片描述

那么此时我们直接创建一个变量,命名为用户昵称,默认值为“匿名”,只要用户未登录,发布的用户都统一昵称为匿名即可:

在这里插入图片描述
在这里插入图片描述

接着编写提交按钮的回调判断即可:

在这里插入图片描述
在这里插入图片描述

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

接着我们预览当前页面,随后复制一段内容进行提交:

在这里插入图片描述
在这里插入图片描述

点击发布后成功提交内容:

在这里插入图片描述
在这里插入图片描述

并且在数据库中也找到了对应的内容:

在这里插入图片描述
在这里插入图片描述

此时该功能成功完成。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/180057.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月20日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、文章编辑页制作
  • 二、数据库创建
  • 三、文章数据提交服务创建
  • 四、点击按钮事件设定
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档