Web前端应用开发项目式教程（基于uni-app框架） 课件 任务5　制作文章发布页

任务5制作文章发布页Web前端应用开发项目式教程（基于uni-app框架）

目录CONTENTS015.5任务实施5.7学习自评Part15.1任务描述5.2任务效果5.4知识储备5.8课后练习5.9任务拓展5.3学习目标5.6任务测试

本任务我们来制作“启嘉校园”项目的文章发布页。文章发布页中用户可以编辑文章标题和内容，并为文章添加图片、插入话题，文章发布成功后自动跳转回社区首页，刚发布的文章在文章列表中置顶显示。

5.1任务描述

5.2任务效果“文章发布页”效果图

5.3学习目标能力目标素养目标知识目标通过搭建文章发布页结构，把一个页面分成5个区域逐步开发，培养开发者的全局思维。通过制作上传图片区域解决H5端无法限制上传数量问题，培养学习者敢于挑战、勇于探索的创新精神。掌握uni.chooseImage选择图片方法的使用。掌握uni-apptextarea多行输入框组件的使用。能够使用uni.chooseImage方法实现本地相册获取图片或拍照。能够使用textarea组件实现显示已输入字数和字数上限的多行输入框。能够使用uni.navigateTo方法在页面跳转时传递话题参数。能够使用正则表达式完成文章信息验证。能够通过操作数组对象实现图片删除功能。

5.4知识储备

元素遮罩层是指将一个元素覆盖在另一个元素上，从而实现遮罩的效果。实现元素遮罩层时，通常需要使用CSS中的position属性来控制元素的位置，//CSS代码14..overlay{15.position:absolute;16.top:0;17.left:0;18.width:100%;19.height:100%;20.background-color:rgba(0,0,0,0.5);21.z-index:1000;22.}23..content{24.position:relative;25.z-index:999;26.}5.4.1元素遮罩层overlay元素是一个全屏的遮罩层，使用position:absolute定位将其覆盖在content元素上。为overlay元素设置一个较高的z-index值以确保能够位于content元素上方。

5.4知识储备5.4.2正则表达式

本书将在多处使用正则表达式，以下是一些常用正则表达式的案例：01.//匹配手机号码02./^1[3-9]\d{9}$/03.//匹配身份证号码04./^\d{17}[\dXx]$/05.//匹配电子邮件地址06./^[\w.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z]{2,}$/07.//匹配URL地址08./^(https?:\/\/)?([a-z\d-]+\.)+[a-z]{2,}(\/[^\s]*)?$/i09.//匹配IPv4地址10./^((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.){3}(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/11.//匹配日期格式（YYYY-MM-DD）12./^\d{4}-\d{2}-\d{2}$/

5.5任务实施5.5.1页面结构分析与搭建新建页面文件：在/pages/community/目录下新建名为“publish-article”的Vue文件，在新建文件时勾选“创建同名目录”，文件最终路径为“/pages/community/publish-article/publish-article.vue”。文章发布页结构分析

5.5任务实施5.5.2制作导航栏区域新建组件文件：

在/components目录下新建组件文件，文件命名为“nav-bar”，勾选“创建同名目录”，创建文件，文件最终路径为“/components/nav-bar/nav-bar.vue”。设计图分析运行效果图导航栏区域包含返回按钮和页面标题，与小程序胶囊按钮垂直居中，单击返回按钮可返回上级页面。各个小程序平台胶囊按钮的高度不同，因此实现垂直居中效果需要根据小程序胶囊按钮高度来设置导航栏高度，可以使用JavaScript动态获取小程序胶囊按钮的高度。

5.5任务实施5.5.3制作文字信息区域文字信息区域运行效果

在正文文本输入框右下角显示已输入字数与字数上限提示，用户输入的字数达500后禁止继续输入。

使用uni-app中textarea多行输入框可以实现文章正文内容的输入，通过CSS伪类选择器动态插入已输入文字数量

5.5任务实施5.5.4制作上传图片区域新建组件文件：

在/components目录下新建组件文件，文件命名为“image-upload”，勾选“创建同名目录”，创建文件，文件最终路径为“/components/image-upload/image-upload.vue”。上传图片区域分析1.上传图片区域包含上传按钮和图片预览两部分。2.图片预览分为上传中和上传成功两种状态。3.上传中状态下显示上传进度的百分比，上传成功状态下显示上传成功图标。4.删除图片按钮在图片预览右上角显示，上传图片按钮在图片列表最右侧。5.用户可上传图片数量最多为9张，当图片列表宽度超过屏幕宽度时出现横向滚动条。设计图分析

5.5任务实施5.5.4制作上传图片区域上传图片区域运行效果

实现上传图片的主要逻辑是通过操作数组，记录上传的图片信息，上传图片时向数组内追加图片数据，删除图片时从数组内移除相应数据。1.使用imageList数组记录上传的图片信息，通过判断该数组长度限制用户上传图片数量最多为9张。2.通过遍历上传的图片信息，返回未超过上传大小限制的图片数量，判断其与上传图片总量是否一致，不一致则说明有图片超出大小限制，终止上传流程。3.通过splice方法删除imageList数组中指定位置的数据，实现删除图片操作。

5.5任务实施5.5.5制作选择话题区域

要求：

当用户从社区首页的综合推荐或我的关注分类下进入文章发布页时，无自动选中话题；当用户从社区首页的表白墙和专业交流分类下进入文章发布页时，分别自动选中表白墙和专业交流话题。选择话题区域运行效果实现：在跳转地址中添加type参数，传递分类信息索引。判断this.active值是否大于等于零，大于0时自动选中话题。

5.5任务实施5.5.6制作发布按钮区域要求：

进行文章发布时，用户编辑的文章内容须符合以下验证规则：标题和正文不允许为空；标题长度最大为40个字符；正文长度最大为500个字符；图片正在上传中禁止发布文章；话题为必选项。实现：发布按钮区域运行效果Template部分JavaScript部分

5.6任务测试测试条目是否通过比对开发页面和设计图，核对字号、颜色、间距等设计参数

各个子组件能够在发布页中正常引入且可正常展示页面效果

图片超过数量或大小限制时能够取消上传并做出相应提示

图片上传中和上传完成效果能够正常显示

图片上传成功后能够进行图片的预览与删除操作

话题能够根据社区首页的传值自动选中并可自由切换

发布文章时，用户编辑的文章内容若符合验证规则，提示发布成功并跳转回社区首页；不符合验证规则，做出相应错误提示

5.7自学评价评价内容是否了解/掌握是否能够使用uni.chooseImage方法实现本地相册获取图片或拍照

是否能够使用textarea组件实现显示已输入字数和字数上限的多行输入框

是否能够使用uni.navigateTo方法在页面跳转时传递话题参数

是否能够使用正则表达式完成文章信息验证

是否能够通过操作数组对象实现图片删除功能

5.8课后练习？1.选择题（1）在制作元素遮罩层时，使用以下哪个属性可以设置元素的层级？A.indexB.positionC.z-indexD.line-height（2）以下哪个选项是手机号正则表达式的正确写法？A./^1[3-9]\d{9}$/B./1[3-9]\d{9}/C./1[3-9]\d{10}/D./^[1-9]\d{10}$/（3）在启嘉校园文章发布页中，以下哪个变量表示设备状态栏高度？A.phoneBarHeightB.statusBarHeightC.navHeightD.titleBarHeight2.填空题（1）匹配邮政编码（中国大陆）的正则表达式是_____。（2）在从社区首页跳转到文章发布页时，通过在跳转地址中添加_____参数，传递分类信息索引。3.简答题（1）简述通过操作数组对象实现图片