鸿蒙NEXT项目实战-百得知识库03

代码仓地址，大家记得点个star

IbestKnowTeach: 百得知识库基于鸿蒙NEXT稳定版实现的一款企业级开发项目案例。 本案例涉及到多个鸿蒙相关技术知识点： 1、布局 2、配置文件 3、组件的封装和使用 4、路由的使用 5、请求响应拦截器的封装 6、位置服务 7、三方库的使用和封装 8、头像上传 9、应用软件更新等https://gitee.com/xt1314520/IbestKnowTeach

Home页面开发

设计图

需求分析

Home页面一共可以分为三块部分

1、头部-最新、热门

2、搜索框

3、内容主体

搭建Home页面布局

1、头部-最新、热门

最新、热门可以用Text文本组件，下面下划线用Divider组件

// 标题栏
Row({ space: 10 }) {Column() {Text($r('app.string.article_best_new')).textStyles()// 选中标题会出现下划线if (this.newDividerShow) {Divider().dividerStyles()}}.onClick(() => {// 展示下划线this.hotDividerShow = falsethis.newDividerShow = true// 查询最新文章数据this.isShow = falsethis.page = 1this.getArticleNewDataList(true, true)})Column() {Text($r('app.string.article_best_hot')).textStyles()// 选中标题会出现下划线if (this.hotDividerShow) {Divider().dividerStyles()}}.onClick(() => {this.newDividerShow = falsethis.hotDividerShow = true// 查询最热门文章数据this.isShow = falsethis.page = 1this.getArticleHotDataList(true, true)})}.justifyContent(FlexAlign.Start).margin({ top: 10, bottom: 20 }).width(CommonConstant.WIDTH_FULL)

2、搜索框

搜索框可以使用鸿蒙原生组件Search

// 搜索
Search({ placeholder: '请输入关键字', value: $$this.keyword }).placeholderFont({ size: 14 }).textFont({ size: 14 }).onSubmit(() => {// 处理标题this.title = encodeURIComponent(this.keyword)// 分页查询文章内容this.isShow = falsethis.page = 1this.getArticleDataList(true)}).width(CommonConstant.WIDTH_FULL).height(30)

3、内容主体

内容主体相当于我们把文章单条内容封装成一个组件，然后使用List组件进行布局嵌套使用Foreach进行循环遍历文章数组对象数据

整体大家看一条文章数据，分为三行，行使用的是Row布局，整体三行布局从上到下是列所以组件整体用Column进行包裹

封装单条文章组件（在ets下面创建component目录然后创建ArticleComponent.ets文件）

import { ArticleContentData } from '../api/ArticleContentApi.type'
import { CommonConstant } from '../contants/CommonConstant'@Componentexport struct ArticleComponent {// 文章数据@Prop articleContentData: ArticleContentDatabuild() {Column() {Row({ space: 10 }) {// 头像Image(this.articleContentData.avatarUri).width($r('app.float.common_width_tiny')).aspectRatio(1).borderRadius(10)// 姓名Text(this.articleContentData.nickname).fontSize($r('app.float.common_font_size_medium')).fontColor($r('app.color.common_gray')).width('70%').maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })}.width(CommonConstant.WIDTH_FULL)Row() {// 内容标题Text(this.articleContentData.title).fontSize($r('app.float.common_font_size_small')).width('80%').maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis })Image(this.articleContentData.coverUrl).width($r('app.float.common_width_medium')).aspectRatio(1).objectFit(ImageFit.Contain).borderRadius(5)}.width(CommonConstant.WIDTH_FULL).justifyContent(FlexAlign.SpaceBetween)// 展示阅读、点赞、收藏Row({ space: 3 }) {Text(this.articleContentData.readCount + '阅读').textStyles()Text('|').textStyles()Text(this.articleContentData.time).textStyles()Text('|').textStyles()// 文章内容标签if (this.articleContentData.contentCategory === '1') {Text('鸿蒙').textLabelStyles()} else if (this.articleContentData.contentCategory === '2') {Text('Java').textLabelStyles()} else if (this.articleContentData.contentCategory === '3') {Text('Web前端').textLabelStyles()} else if (this.articleContentData.contentCategory === '4') {Text('运维').textLabelStyles()} else {Text('未知级别').textLabelStyles()}Text('|').textStyles()// 文章难度分类标签if (this.articleContentData.difficultyCategory === '1') {Text(this.articleContentData.platformCategory === '1' ? '基础知识' : '简单面试题').textLabelStyles()} else if (this.articleContentData.difficultyCategory === '2') {Text(this.articleContentData.platformCategory === '1' ? '进阶知识' : '中等面试题').textLabelStyles()} else if (this.articleContentData.difficultyCategory === '3') {Text(this.articleContentData.platformCategory === '1' ? '高级知识' : '困难面试题').textLabelStyles()} else {Text('未知级别').textLabelStyles()}}.width(CommonConstant.WIDTH_FULL)}.padding(10).width(CommonConstant.WIDTH_FULL).height(110).margin({ top: 13 }).backgroundColor($r('app.color.common_white')).justifyContent(FlexAlign.SpaceBetween).borderRadius(10)}
}@Extend(Text)
function textStyles() {.fontColor($r('app.color.common_gray')).fontSize($r('app.float.common_font_size_tiny'))
}@Extend(Text)
function textLabelStyles() {.fontSize($r('app.float.common_font_size_tiny')).fontColor(Color.Black)
}

然后我们整体在Home页面里面展示我们的文章内容数组数据

if (this.isShow) {Refresh({ refreshing: $$this.isRefreshing }) {// 内容组件List() {ForEach(this.articleContentList, (item: ArticleContentData) => {ListItem() {ArticleComponent({ articleContentData: item }).onClick(() => {// 路由到内容详情页router.pushUrl({url: RouterConstant.VIEWS_HOME_ARTICLE_INFO, params: {"articleId": item.id}})})}})if (this.textShow) {ListItem() {Text($r('app.string.no_have_article')).fontColor($r('app.color.common_gray')).fontSize($r('app.float.common_font_size_small')).width(CommonConstant.WIDTH_FULL).textAlign(TextAlign.Center).margin({ top: 80 })}}}.width(CommonConstant.WIDTH_FULL).height(CommonConstant.HEIGHT_FULL).scrollBar(BarState.Off).onReachEnd(() => {if (!this.isLoad) {if (this.total > this.page * this.pageSize) {this.isLoad = truethis.page++if (this.newDividerShow) {// 分页查询最新文章数据this.getArticleNewDataList(false, false)}if (this.hotDividerShow) {// 分页查询最热门文章数据this.getArticleHotDataList(false, false)}} else {this.textShow = true}}})}.onRefreshing(() => {if (!this.isLoad) {this.isLoad = truethis.textShow = false// 页面恢复到1this.page = 1if (this.newDividerShow) {// 分页查询最新文章数据this.getArticleNewDataList(true, true)}if (this.hotDividerShow) {// 分页查询最热门文章数据this.getArticleHotDataList(true, true)}}})
} else {// 加载组件LoadingComponent()
}

加载组件 LoadingComponent()是我们自己进行封装的，因为我们的数据可能因为网络原因还没在服务端查询出来，界面为了不要展示长时间空白让用户误会，所以展示我们数据正在加载中

import { CommonConstant } from '../contants/CommonConstant'@Componentexport struct LoadingComponent {@State message: string = '数据正在加载中'build() {Row() {LoadingProgress().width(30).height(30).color(Color.Gray)Text(this.message).fontSize((14)).fontColor(Color.Gray)}.height("80%").width(CommonConstant.WIDTH_FULL).justifyContent(FlexAlign.Center)}}

4、整体Home页面代码

import { router } from '@kit.ArkUI'
import { RouterConstant } from '../../contants/RouterConstant'
import { CommonConstant } from '../../contants/CommonConstant'
import { ArticleComponent } from '../../components/ArticleComponent'
import articleContentApi from '../../api/ArticleContentApi'
import { LoadingComponent } from '../../components/LoadingComponent'
import { ArticleContentData } from '../../api/ArticleContentApi.type'
import { showToast } from '../../utils/Toast'@Entry@Componentexport struct Home {// 是否展示最新标题的下划线@State newDividerShow: boolean = true// 是否展示热门标题的下划线@State hotDividerShow: boolean = false// 搜索词@State keyword: string = ''// 标题@State title: string = ''// 文章数据数组@State articleContentList: ArticleContentData[] = []// 学习打卡总记录数@State total: number = 0// 当前页@State page: number = 1// 每一页大小@State pageSize: number = 7// 控制当前页面展示@State isShow: boolean = false// 定义一个状态属性，用来和Refresh组件进行双向数据绑定@State isRefreshing: boolean = false// 节流, false表示未请求, true表示正在请求isLoad: boolean = false// 是否展示文本，列表到底@State textShow: boolean = false/*** 生命周期函数*/async aboutToAppear() {// 默认获取首页最新文章内容this.getArticleNewDataList(true, false)}/*** 分页查询最新文章数据*/async getArticleNewDataList(isFlushed: boolean, isUpdate: boolean) {// 分页查询最新文章数据const articleDataList =await articleContentApi.getNewArticle({ page: this.page, pageSize: this.pageSize, title: this.title })isFlushed ? this.articleContentList = articleDataList.records :this.articleContentList.push(...articleDataList.records)this.total = articleDataList.total// 判断总数据if (this.total > this.page * this.pageSize) {this.textShow = false} else {this.textShow = true}// 页面展示this.isShow = true// 节流，防止用户重复下拉this.isLoad = falsethis.isRefreshing = false// 是否刷新if (isUpdate) {showToast("已更新")}}/*** 分页查询最热门文章数据*/async getArticleHotDataList(isFlushed: boolean, isUpdate: boolean) {// 分页查询最热门文章数据const articleDataList =await articleContentApi.getHotArticle({ page: this.page, pageSize: this.pageSize, title: this.title })isFlushed ? this.articleContentList = articleDataList.records :this.articleContentList.push(...articleDataList.records)this.total = articleDataList.total// 判断总数据if (this.total > this.page * this.pageSize) {this.textShow = false} else {this.textShow = true}// 页面展示this.isShow = true// 节流，防止用户重复下拉this.isLoad = falsethis.isRefreshing = false// 是否刷新if (isUpdate) {showToast("已更新")}}/*** 分页查询文章数据*/async getArticleDataList(isFlushed: boolean) {// 分页查询文章数据if (this.newDividerShow) {this.getArticleNewDataList(isFlushed, true)}if (this.hotDividerShow) {this.getArticleHotDataList(isFlushed, true)}}build() {Column() {// 标题栏Row({ space: 10 }) {Column() {Text($r('app.string.article_best_new')).textStyles()// 选中标题会出现下划线if (this.newDividerShow) {Divider().dividerStyles()}}.onClick(() => {// 展示下划线this.hotDividerShow = falsethis.newDividerShow = true// 查询最新文章数据this.isShow = falsethis.page = 1this.getArticleNewDataList(true, true)})Column() {Text($r('app.string.article_best_hot')).textStyles()// 选中标题会出现下划线if (this.hotDividerShow) {Divider().dividerStyles()}}.onClick(() => {this.newDividerShow = falsethis.hotDividerShow = true// 查询最热门文章数据this.isShow = falsethis.page = 1this.getArticleHotDataList(true, true)})}.justifyContent(FlexAlign.Start).margin({ top: 10, bottom: 20 }).width(CommonConstant.WIDTH_FULL)// 搜索Search({ placeholder: '请输入关键字', value: $$this.keyword }).placeholderFont({ size: 14 }).textFont({ size: 14 }).onSubmit(() => {// 处理标题this.title = encodeURIComponent(this.keyword)// 分页查询文章内容this.isShow = falsethis.page = 1this.getArticleDataList(true)}).width(CommonConstant.WIDTH_FULL).height(30)if (this.isShow) {Refresh({ refreshing: $$this.isRefreshing }) {// 内容组件List() {ForEach(this.articleContentList, (item: ArticleContentData) => {ListItem() {ArticleComponent({ articleContentData: item }).onClick(() => {// 路由到内容详情页router.pushUrl({url: RouterConstant.VIEWS_HOME_ARTICLE_INFO, params: {"articleId": item.id}})})}})if (this.textShow) {ListItem() {Text($r('app.string.no_have_article')).fontColor($r('app.color.common_gray')).fontSize($r('app.float.common_font_size_small')).width(CommonConstant.WIDTH_FULL).textAlign(TextAlign.Center).margin({ top: 80 })}}}.width(CommonConstant.WIDTH_FULL).height(CommonConstant.HEIGHT_FULL).scrollBar(BarState.Off).onReachEnd(() => {if (!this.isLoad) {if (this.total > this.page * this.pageSize) {this.isLoad = truethis.page++if (this.newDividerShow) {// 分页查询最新文章数据this.getArticleNewDataList(false, false)}if (this.hotDividerShow) {// 分页查询最热门文章数据this.getArticleHotDataList(false, false)}} else {this.textShow = true}}})}.onRefreshing(() => {if (!this.isLoad) {this.isLoad = truethis.textShow = false// 页面恢复到1this.page = 1if (this.newDividerShow) {// 分页查询最新文章数据this.getArticleNewDataList(true, true)}if (this.hotDividerShow) {// 分页查询最热门文章数据this.getArticleHotDataList(true, true)}}})} else {// 加载组件LoadingComponent()}}.padding($r('app.float.common_padding')).height(CommonConstant.HEIGHT_FULL).width(CommonConstant.WIDTH_FULL)}
}@Extend(Text)
function textStyles() {.fontSize($r('app.float.common_font_size_huge')).fontWeight(FontWeight.Medium)
}@Extend(Divider)
function dividerStyles() {.color(Color.Black).width($r('app.float.common_width_tiny')).strokeWidth(3)
}

5、数据渲染，接口封装

查询最新文章数据，这个函数里面有个 articleContentApi.getNewArticle方法，这个方法是作者封装的接口

/*** 分页查询最新文章数据*/
async getArticleNewDataList(isFlushed: boolean, isUpdate: boolean) {// 分页查询最新文章数据const articleDataList =await articleContentApi.getNewArticle({ page: this.page, pageSize: this.pageSize, title: this.title })isFlushed ? this.articleContentList = articleDataList.records :this.articleContentList.push(...articleDataList.records)this.total = articleDataList.total// 判断总数据if (this.total > this.page * this.pageSize) {this.textShow = false} else {this.textShow = true}// 页面展示this.isShow = true// 节流，防止用户重复下拉this.isLoad = falsethis.isRefreshing = false// 是否刷新if (isUpdate) {showToast("已更新")}
}

大家可以根据东林提供的接口文档，将我们的调用接口封装成方法

这是涉及到文章的所有接口

import http from '../request/Request'
import {ArticleContentData,ArticleContentHotPageParam,ArticleContentNewPageParam,ArticleContentPageParam,PageVo
} from './ArticleContentApi.type'/*** 文章接口*/
class ArticleContentApi {/*** 分页查询文章内容*/pageListArticleContent = (data: ArticleContentPageParam): Promise<PageVo<ArticleContentData>> => {return http.get('/v1/article/page?page=' + data.page + '&&pageSize=' + data.pageSize + '&&title=' + data.title +'&&contentCategory=' + data.contentCategory + '&&platformCategory=' + data.platformCategory +'&&difficultyCategory=' + data.difficultyCategory)}/*** 根据文章id查询文章详情*/getArticleContentInfo = (data: number): Promise<ArticleContentData> => {return http.get('/v1/article/info?id=' + data)}/***  用户点赞/取消点赞文章*/likeArticleContent = (data: number) => {return http.put('/v1/article/like?id=' + data)}/***  用户收藏/取消收藏文章*/collectArticleContent = (data: number) => {return http.put('/v1/article/collect?id=' + data)}/*** 查看我的点赞,最近100条*/getUserLike = (): Promise<Array<ArticleContentData>> => {return http.get('/v1/article/myLike')}/***查看我的收藏,最近100条*/getUserCollect = (): Promise<Array<ArticleContentData>> => {return http.get('/v1/article/myCollect')}/***分页查看最新文章*/getNewArticle = (data: ArticleContentNewPageParam): Promise<PageVo<ArticleContentData>> => {return http.get('/v1/article/new?page=' + data.page + '&&pageSize=' + data.pageSize + '&&title=' + data.title)}/***分页查看最热文章*/getHotArticle = (data: ArticleContentHotPageParam): Promise<PageVo<ArticleContentData>> => {return http.get('/v1/article/hot?page=' + data.page + '&&pageSize=' + data.pageSize + '&&title=' + data.title)}
}const articleContentApi = new ArticleContentApi();export default articleContentApi as ArticleContentApi;

/*** 时间*/
export interface BaseTime {/*** 创建时间*/createTime?: Date/*** 更新时间*/updateTime?: Date
}/*** 分页参数*/
export interface PageParam {/*** 当前页*/page?: number/*** 每一页展示的数据条数*/pageSize?: number
}/*** 分页响应参数*/
export interface PageVo<T> {current: number,size: number,total: number,records: Array<T>
}/*** 分页查询文章内容*/
export interface ArticleContentPageParam extends PageParam {/*** 标题*/title?: string/*** 内容分类:1鸿蒙 2 Java 3 web 4 运维*/contentCategory?: string/*** 平台分类：1学习平台 2面试题*/platformCategory?: string/*** 难度分类：1 简单 2 中等 3 困难*/difficultyCategory?: string
}/*** 分页查询最新文章内容入参*/
export interface ArticleContentNewPageParam extends PageParam {/*** 标题*/title: string}/*** 分页查询最热文章内容入参*/
export interface ArticleContentHotPageParam extends PageParam {/*** 标题*/title: string}/*** 文章内容数据*/
export interface ArticleContentData extends BaseTime {/*** 文章id*/id: number/*** 用户头像*/avatarUri: string/*** 用户昵称*/nickname: string/*** 文章标题*/title: string/*** 文章内容*/content: string/*** 阅读数*/readCount: number/*** 点赞数*/likeCount: number/*** 收藏数*/collectCount: number/*** 封面url*/coverUrl: string/*** 内容分类:1鸿蒙 2 Java 3 web 4 运维*/contentCategory: string/*** 平台分类：1学习平台 2面试题*/platformCategory: string/*** 难度分类：1 简单 2 中等 3 困难*/difficultyCategory: string/*** 用户是否点赞*/isLike: boolean/*** 用户是否收藏*/isCollect: boolean/*** 创建时间字符串格式*/time: string
}

文章详情界面布局

当我们点击文章的话会跳转到文章详情页面，携带当前点击的文章id

这边路由我们使用的是router.push()

1、新建文章详情页面

在ets/views/Home下面新建ArticleInfo.ets文件

2、设计图

3、需求分析

整个文章详情页面呈现的是使用Column布局的，里面分为多行，其他最上面标题我们可以使用Navigation组件做，鸿蒙官方推荐的，下面的文章内容按理说是渲染的html格式(富文本）的，所以我们使用RichText组件，还有点赞和收藏按理说有两种状态（未点赞、点赞，未收藏、收藏），整体文章数据也是根据路由跳转传过来的文章id进行查询的文章数据。

4、封装富文本组件

在components目录下面新建LearnRichText.ets文件

@Componentexport struct LearnRichText {// 富文本@Prop richTextContent: string = ""build() {Scroll() {RichText(`<html><body><div style="font-size:54px">${this.richTextContent}</div><body></html>`)}.layoutWeight(1)}}

5、整体代码

import { ArticleContentData } from '../../api/ArticleContentApi.type';
import { ArticleExtraInfoComponent } from '../../components/ArticleExtraInfoComponent'
import { LearnRichText } from '../../components/LearnRichText';
import { LoadingComponent } from '../../components/LoadingComponent';
import { CommonConstant } from '../../contants/CommonConstant'
import { router } from '@kit.ArkUI';
import articleContentApi from '../../api/ArticleContentApi';
import { showToast } from '../../utils/Toast';@Entry@Componentstruct ArticleInfo {// 文章数据数组@Prop articleInfo: ArticleContentData// 控制当前页面展示@State isShow: boolean = false// 文章id@State articleId: number = 1// 节流，防止用户重复点击isLoad: boolean = false/*** 生命周期函数*/async aboutToAppear() {// 获取路由传递的文章idconst param = router.getParams() as objectif (param) {this.articleId = param["articleId"] as number// 根据文章id查询文章数据this.articleInfo = await articleContentApi.getArticleContentInfo(this.articleId)// 展示数据this.isShow = true}}/*** 点赞* @param id*/async likeArticle(id: number) {// 点赞或者取消点赞if (this.articleInfo.isLike) {// 取消点赞await articleContentApi.likeArticleContent(id)this.articleInfo.isLike = falsethis.articleInfo.likeCount--this.isLoad = falseshowToast('取消点赞成功')} else {// 点赞await articleContentApi.likeArticleContent(id)this.articleInfo.isLike = truethis.articleInfo.likeCount++this.isLoad = falseshowToast('点赞成功')}}/*** 收藏* @param id*/async collectArticle(id: number) {// 收藏或者取消收藏if (this.articleInfo.isCollect) {// 取消收藏await articleContentApi.collectArticleContent(id)this.articleInfo.isCollect = falsethis.articleInfo.collectCount--this.isLoad = falseshowToast('取消收藏成功')} else {// 收藏await articleContentApi.collectArticleContent(id)this.articleInfo.isCollect = truethis.articleInfo.collectCount++this.isLoad = falseshowToast('收藏成功')}}build() {Navigation() {if (this.isShow) {Column({ space: 15 }) {Flex() {Text(this.articleInfo.title).fontSize($r('app.float.common_font_size_medium')).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis }).fontColor(Color.Black).fontWeight(FontWeight.Medium)}Row({ space: 10 }) {// 头像Image(this.articleInfo.avatarUri).width(30).aspectRatio(1).borderRadius(20)// 昵称Text(this.articleInfo.nickname).fontSize($r('app.float.common_font_size_medium')).width('80%').maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })}.width(CommonConstant.WIDTH_FULL)// 展示阅读、点赞、收藏数Row() {// 文章额外信息组件ArticleExtraInfoComponent({ articleInfo: this.articleInfo })Row({ space: 15 }) {// 点赞Image(this.articleInfo.isLike ? $r('app.media.icon_like_selected') : $r('app.media.icon_like_default')).width(15).onClick(() => {// 点赞if (!this.isLoad) {this.isLoad = truethis.likeArticle(this.articleInfo.id)}})// 收藏Image(this.articleInfo.isCollect ? $r('app.media.icon_collect_selected') :$r('app.media.icon_collect_default')).width(15).onClick(() => {// 收藏if (!this.isLoad) {this.isLoad = truethis.collectArticle(this.articleInfo.id)}})}}.width(CommonConstant.WIDTH_FULL).justifyContent(FlexAlign.SpaceBetween)}.padding($r('app.float.common_padding'))// 分割线Divider().strokeWidth((4)).color('#e6f2fe')// 内容正文LearnRichText({ richTextContent: this.articleInfo.content }).padding($r('app.float.common_padding'))} else {// 加载组件LoadingComponent()}}.height(CommonConstant.HEIGHT_FULL).width(CommonConstant.WIDTH_FULL).title($r('app.string.article_info_title')).titleMode(NavigationTitleMode.Mini).mode(NavigationMode.Stack).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])}
}

6、注意事项

当前系统除了登录、分页查询文章等部分接口，其他接口功能都是需要登录之后才可以使用的，这就是系统的权限控制，当前查询文章详情、收藏、点赞功能是需要登录得，未登录状态下使用是报错的。