代碼倉地址，大家記得點個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、注意事項
當前系統除了登錄、分頁查詢文章等部分接口，其他接口功能都是需要登錄之后才可以使用的，這就是系統的權限控制，當前查詢文章詳情、收藏、點贊功能是需要登錄得，未登錄狀態下使用是報錯的。
)
