Web前端应用开发项目式教程（基于uni-app框架） 课件 任务8　实现文章发布与文章分页功能

任务8

实现文章发布与文章分页功能Web前端应用开发项目式教程（基于uni-app框架）

目录CONTENTS018.5任务实施8.7学习自评Part18.1任务描述8.2任务效果8.4知识储备8.8课后练习8.9任务拓展8.3学习目标8.6任务测试本任务将实现启嘉校园社区模块的文章发布和文章列表分页功能。用户通过点击社区首页的文章发布快捷按钮可以进入文章发布页编辑和发布文章，文章发布成功后自动跳转回社区首页，用户新发布的文章在社区首页文章列表中置顶显示。社区首页文章列表分页方式采用的是移动端最为常用的“下拉刷新”和“上拉加载”，用户可以通过滑动文章列表刷新或查看更多文章。开发过程中，功能实现的技术选型和方案设计一定要符合行业技术发展现状，发挥新技术优势，避免用过时的技术，这样才能让软件产品的生命力更持久。

8.1任务描述

8.2任务效果扫码查看效果图

8.3学习目标能力目标素养目标知识目标通过对uni.uploadFile文件上传方法的学习，培养学习者乐于探究、勇于创新的精神。通过完成“专业交流”版块的开发，增强学习者职业认同感。通过合理选择图片储存方式，培养学习者服务意识。了解图片、视频等文件托管储存的优点和实现原理。掌握uni.uploadFile文件上传方法的使用。掌握uni-app页面通讯方法的使用。能够使用uni.uploadFile方法实现图片上传功能。能够使用组件通讯方法在页面间传递数据。

8.4知识储备8.4.1常见的分页方式

分页是在软件产品中以列表的形式呈现内容时经常使用的功能，当列表中的内容较多时，软件将分页加载不同的数据，如新闻列表分页、商品列表分页、图片列表分页等。下面将介绍目前比较常用的几种分页方式。1.瀑布流分页

瀑布流式布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载并附加至当前尾部。2.常规数字分页

常规数字分页对内容的形式更具有控制感，有较强的检索功能，同时便于内容的快速定位，直观的数据展现。数字分页一般在列表内容相对固定或者比较重要，需要较强的检索能力时去使用。

8.4知识储备8.4.1常见的分页方式1.瀑布流分页（1）自动瀑布流

自动瀑布流分页多用于资讯类、社交类产品，快速浏览内容和发现内容的场景，瀑布流下方没有太多无关信息。其特点是当列表下滑到底部时会自动加载下一页，例如微博的自动加载。（2）手动瀑布流

当列表底部存在更多有价值的内容时，不适合自动加载下一页，这时需要用户手动触发“加载更多”事件，来获取更多的内容，例如“人人都是产品经理”的手动加载更多。（3）自动瀑布流和手动瀑布流相结合

当列表底部内容过多时，采用的一种折中方案，如果说用户是长期关注阅读某网站信息或者本身网站内容不是很多时，前几次分页使用自动加载已经足够展示最近的信息，同时保证用户浏览的流畅，之后便采用手动点击加载更多的形式，保证底部内容不被用户忽略。例如pmtoo网站采用的是自动和手动加载结合使用的形式。

8.4知识储备8.4.1常见的分页方式2.常规数字分页（1）箭头和圆点分页

箭头和圆点分页通常用于展示型内容，内容大小固定且内容较少时使用。这两种形式通常情况下会一起使用，箭头方便用户进行切换，圆点标识数量和当前的位置。例如，网站轮播图。（2）下拉刷新和上拉加载

下拉刷新和上拉加载适用于移动端中的列表分页，效果与上文所讲的瀑布流分页相似，只不过触发条件从用户在PC端滚动鼠标滚轮变为在移动端滑动屏幕，当列表滑动触顶时用户下拉则刷新列表第一页内容，当列表滑动触底时用户上滑则加载列表下一页内容，当所有页加载完成时列表底部提示用户无更多内容。

在实际产品设计中，可能会根据列表内容和使用场景结合几种分页优点去设计分页，以带来最佳的用户交互体验。启嘉校园项目属于移动端，内容检索性较弱，采用的便是下拉刷新和上拉加载的分页形式。

8.4知识储备8.4.2uni.uploadFile文件上传uni-app使用uploadFile方法进行文件上传。文件上传时客户端要发起一个POST请求，其中content-type设为multipart/form-data类型。

文件上传时先获取到上传资源的临时路径，如上传图片，先通过uni.chooseImage方法获取到一个本地资源的临时文件路径，然后再通过uploadFile方法将其上传到指定服务器中。下表是uni.uploadFile参数说明（部分），详情见教材参数名类型必填说明平台差异说明urlString是开发者服务器url

filesArray是（files和filePath选其一）需要上传的文件列表。使用files时，filePath和name不生效App、H5（2.6.15+）fileTypeString见平台差异说明文件类型，image/video/audio仅支付宝小程序，且必填fileFile否要上传的文件对象仅H5（2.6.15+）支持filePathString是（files和filePath选其一）要上传文件资源的路径

8.4知识储备8.4.2

uni.uploadFile文件上传注意事项：App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要重复调用本API接口，所以跨端的写法就是循环调用uni.uploadFile方法。在App平台中选择和上传非图像、视频格式文件，参考：/article/35547。网络请求的超时时间可以统一在manifest.json中配置[networkTimeout](#networktimeout)。支付宝小程序开发工具上传文件后返回的http状态码为字符串形式，支付宝小程序真机返回的状态码为数字形式，二者返回值类型不同。

8.4知识储备8.4.2

uni.uploadFile文件上传files参数files参数是一个file对象的数组，file对象的结构下表参数名类型必填说明nameString否multipart提交时，表单的项目名，默认为filefileFile否要上传的文件对象，仅H5（2.6.15+）支持uriString是文件的本地地址success返回参数说明见下表参数类型说明dataString开发者服务器返回的数据statusCodeNumber开发者服务器返回的HTTP状态码

8.4知识储备8.4.2

uni.uploadFile文件上传文件上传功能实现的部分代码（完整代码见教材）

如果希望返回一个uploadTask对象，需要至少传入success/fail/complete参数中的一个，如果没有上述参数，则会返回封装后的Promise对象。例如：

8.4知识储备8.4.2

uni.uploadFile文件上传uploadTask对象的方法列表onProgressUpdate返回参数说明方法参数说明abort

中断上传任务onProgressUpdatecallback监听上传进度变化onHeadersReceivedcallback监听HTTPResponseHeader事件。会比请求完成事件更早,仅微信小程序平台支持offProgressUpdatecallback取消监听上传进度变化事件，仅微信小程序平台支持offHeadersReceivedcallback取消监听HTTPResponseHeader事件，仅微信小程序平台支持参数类型说明progressNumber上传进度百分比totalBytesSentNumber已经上传的数据长度，单位BytestotalBytesExpectedToSendNumber预期需要上传的数据总长度，单位Bytes

8.4知识储备8.4.2

uni.uploadFile文件上传uploadTask对象的使用，参见下面的示例代码uni.chooseImage({ success:(chooseImageRes)=>{ consttempFilePaths=chooseImageRes.tempFilePaths; constuploadTask=uni.uploadFile({ url:'/upload',//仅为示例，非真实的接口地址 filePath:tempFilePaths[0], name:'file', formData:{ 'user':'test' }, success:(uploadFileRes)=>{ console.log(uploadFileRes.data); } });

uploadTask.onProgressUpdate((res)=>{ console.log('上传进度'+gress); console.log('已经上传的数据长度'+res.totalBytesSent); console.log('预期需要上传的数据总长度'+res.totalBytesExpectedToSend);

//测试条件，取消上传任务。 if(gress>50){ uploadTask.abort(); } }); }});

8.4知识储备8.4.3

uni-app页面间通讯

自HBuilderX2.0.0起支持uni.$emit、uni.$on、uni.$once、uni.$off方法，使用这些方法可以方便的进行页面间通讯，触发的事件都是App全局级别的，跨任意组件、页面、nvue、vue等。

自HBuilderX2.0.0起支持uni.$emit、uni.$on、uni.$once、uni.$off方法，使用这些方法可以方便的进行页面间通讯，触发的事件都是App全局级别的，跨任意组件、页面、nvue、vue等。uni.$emit(eventName,OBJECT)方法触发全局的自定义事件，附加参数都会传给监听器回调函数，参数说明见表参数类型说明eventNameString事件名OBJECTObject触发事件携带的附加参数

8.4知识储备8.4.3

uni-app页面间通讯uni.$on(eventName,callback)方法

监听全局的自定义事件，事件由uni.$emit触发，回调函数会接收事件触发函数的传入参数，参数说明见表：示例代码如下：参数类型说明eventNameString事件名callbackFunction事件的回调函数

8.4知识储备8.4.3

uni-app页面间通讯uni.$once(eventName,callback)方法

监听全局的自定义事件，事件由uni.$emit触发，但仅触发一次，在第一次触发之后移除该监听器，参数说明见表示例代码如下：参数类型说明eventNameString事件名callbackFunction事件的回调函数

8.4知识储备8.4.3

uni-app页面间通讯uni.$off([eventName,callback])方法

移除全局自定义事件监听器，参数说明见表注意事项：如果uni.$off没有传入参数，则移除App级别的所有事件监听器。如果只提供了事件名（eventName），则移除该事件名对应的所有监听器。如果同时提供了事件与回调，则只移除这个事件回调的监听器。提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器。参数类型说明eventNameArray＜String＞事件名callbackFunction事件的回调函数

8.5任务实施8.5.1发布社区文章

在文章发布页，用户可以编辑文章并发布，可编辑的文章内容有标题、正文、图片和话题，其中标题、正文和话题为必填项，标题最大长度为16，正文最大长度为500，标题和正文内容不得包含敏感词汇；图片最多上传9张，单张图片大小限制为2MB；话题分为“专业交流”和“表白墙”两种，用户可以选择其中一种；用户点击发布按钮验证文章内容是否合规，合规则发布文章，否则弹出违规提示，文章发布成功后返回社区首页。对发布文章的内容进行检查时，可以使用自定义的敏感词库，也可以调用微信小程序的安全检测接口，从而避免用户受不良信息的干扰和误导。逻辑分析接口分析代码实现

8.5任务实施8.5.1发布社区文章逻辑分析

文章内容大致可以分为三类，分别为文本（标题和正文）、图片和话题。对这三类内容进行编辑的逻辑如下：文章标题和正文通过文本框进行编辑，可以使用v-model指令进行数据双向绑定，获取用户输入内容。用户上传图片时使用uni.chooseImage获取相机和相册权限，然后调用后端上传图片接口将图片上传到服务器，上传前注意验证单张图片大小和图片总数是否超出限制，如超出则进行相应提示，上传成功后服务器返回给前端图片地址，前端将图片地址保存到图片数组中。用户删除图片时调用后端删除图片接口，成功后将图片文件从服务器中删除，同时前端将被删除的图片地址从图片数组中删除。用户可以选择的话题为“专业交流”和“表白墙”。通过接口获取数据并使用数组进行储存，用户选择的话题可以使用变量作为记录话题的索引。用户发布文章时首先验证图片是否在上传中，上传中禁止发布文章，否则验证文章标题和正文文本字数是否超过限制以及是否插入话题，验证通过后调用后端发布文章接口。

8.5任务实施8.5.1发布社区文章接口分析

实现发布文章功能需要四个接口，分别为上传图片接口、删除图片接口、获取话题接口和发布文章接口，接口详情如下：上传图片接口API地址：{{HOST_API}}/article-imageAPI请求方式：POSTAPI请求：见表参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明file[文件类型]

Header请求参数Body请求参数

8.5任务实施8.5.1发布社区文章删除图片接口API地址：{{HOST_API}}/common/delete-fileAPI请求方式：POSTAPI请求：见表Header请求参数Body请求参数参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明urlString资源url地址获取话题接口API地址：{{HOST_API}}/article-classify/topic-listAPI请求方式：GETAPI请求：见表参数字段名数据类型说明tokenText认证令牌Header请求参数

8.5任务实施8.5.1发布社区文章发布文章接口API地址：{{HOST_API}}/IntactArticleAPI请求方式：POSTAPI请求：见表Header请求参数Body请求参数参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明familyIdString文章类型titleString文章标题contentString文章内容imageLinkString文章图片连接

8.5任务实施8.5.1发布社区文章代码实现

由于图片上传功能在商品发布页也会使用到，因此将图片上传功能封装成组件使用，新建名为“image-upload”的组件，文件最终路径为“components/image-upload/image-upload.vue”。

在/api目录下创建名为“community”的目录，用于存放社区相关页面接口调用方法文件。在/api/community目录下新建“publish-article.js”和“issue-community.js”文件。

在publish-article.js中，编写获取话题接口和发布文章接口的方法，部分如下：

8.5任务实施8.5.1发布社区文章

在api/common/index.js中，编写删除图片的方法，代码如下左侧代码中我们没有编写调用上传图片接口的方法，这是因为图片属于文件类型，使用专门用来上传文件的uni.uploadFile方法进行上传更加方便。封装上传图片组件，部分代码如下：

8.5任务实施8.5.1发布社区文章

上传图片组件封装完成后，继续来实现发布文章业务逻辑，在publish-article.vue中，调用getTopicListApi和postArticesApi方法获取话题列表和发布文章，部分代码如下

8.5任务实施8.5.2获取文章列表获取文章列表

用户发布的文章在社区首页以列表的形式呈现，文章列表分为综合推荐、我的关注、专业交流和表白墙四类，点击文章分类选项卡可以切换文章列表，文章列表默认展示第一页数据。当用户发布文章成功后返回社区首页时，文章列表中第一条显示用户刚发布的文章。

用户下拉文章列表到顶部时可刷新文章列表，上拉文章列表到底部时列表可加载下一页，分页加载中时列表底部显示“正在加载中”，所有页加载完成时列表底部显示“已加载全部内容”。逻辑分析接口分析代码实现

8.5任务实施8.5.2获取文章列表逻辑分析

用户进入社区首页分为两种场景，一种为主动进入（直接打开或从其它页面点击底部导航栏跳转）社区首页；一种为用户发布文章成功后自动返回社区首页，两种场景下文章列表渲染规则有所不同。具体实现逻辑如下：

用户主动进入社区首页时，文章分类导航栏默认选中“综合推荐”类，调用后端获取文章列表接口，获取“综合推荐”分类下第一页文章数据，然后赋值到文章列表数组中。

用户发布文章自动返回社区首页时，文章分类选项卡自动选中用户进入文章发布页时的文章类别，然后调用后端获取文章列表接口，获取当前分类下的第一页文章数据赋值到文章列表数组中，同时将用户刚刚发布的文章移动到数组第一项。

实现文章列表分页，使用移动端常用的下拉刷新和上拉加载，相关逻辑如下：

当用户下拉列表到顶部时，列表顶部出现橡皮筋效果，同时调用后端获取文章列表接口，获取当前分类下的第一页文章数据赋值到文章列表数组中。下拉刷新本质上是获取最新的一页列表数据，即重新加载列表第一页数据。

当用户上拉列表到底部时，列表底部显示“正在加载中”，同时调用后端获取文章列表接口，获取当前分类下的下一页文章数据赋值到文章列表数组中。当所有列表内容加载完成后用户再次上拉列表到底部时，列表底部显示“已加载全部内容”。

8.5任务实施8.5.2获取文章列表接口分析实现获取文章列表功能需要两个接口，分别为获取文章分类接口和获取文章列表接口，接口详情如下：获取文章分类接口API地址：{{HOST_API}}/article-classify/label-listAPI请求方式：POSTAPI请求：见表Header请求参数参数字段名数据类型说明tokenText认证令牌

8.5任务实施8.5.2获取文章列表获取文章列表接口API地址：{{HOST_API}}/IntactArticle/:familyIdAPI请求方式：GETAPI请求：见表Header请求参数参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明pageText页数Query请求参数参数字段名数据类型说明familyIdString分类id路径参数

8.5任务实施8.5.2获取文章列表代码实现

在/api/community目录下新建community.js文件，编写调用获取文章分类接口和获取文章列表接口的方法，关键代码如下：uni-app插件市场为开发者提供了很多项目中常用的组件，比如：轮播图组件、图片上传组件、分页组件等，在开发时为了提高开发效率，可以在能够实现业务需求的前提下直接选择插件市场中使用率较高的组件使用，除此之外我们也可以自己封装组件。

8.5任务实施8.5.2获取文章列表

分页功能在很多包含列表的页面中都会使用到，我们可以将其封装为组件以便在遇到其它页面或项目的同类功能时使用。新建名为“custom-scroll-view”的组件，文件最终路径为“components/custom-scroll-view/custom-scroll-view.vue”

分页组件本质上只