HarmonyOS学习第六周（实践版）（二）

 打卡页

打卡页应该分为两种状态，未登录状态和登录状态，未登录状态提示用户登录，登录状态则可以查询打卡圈（即自己和别人的打卡环境）
这个页面紧张分为“英语打卡圈”标题和下半部分，以是上面是雷同的，下面为封装的自界说组件。
未登录状态：

未登录状态部分很简单，紧张就是提示用户前往登录，因此点击“去登录”后要举行跳转，跳转到登录页。代码如下：

2. unLoginBuilder() {
3.     Column({ space: 30 }) {
4.       Image($r("app.media.ic_unLogin_bg"))
5.         .width(177)
6.         .height(177)
7.       Text('未登录暂⽆数据')
8.         .fontSize(14)
9.         .fontColor('#999999')
10.       Button('去登录')
11.         .fontColor(Color.White)
12.         .fontSize(14)
13.         .width(100)
14.         .height(34)
15.         .backgroundColor('#43C6A0')
16.         .onClick(() => router.pushUrl({ url: 'pages/LoginPage' }))
17.     }

复制代码

登录状态

登录后的页面，很显着是一个list列表，每个打卡信息用卡片的情势显现，因此我们要封装一个卡片组件，除此之外，我们可以看到右侧有两个按钮，一个回到顶部和一个革新按钮。
我们要怎么获取这些信息呢，这就必要用到接口了，通过接口从后端调取数据然厥后举行渲染。封装的函数如下：

2. async getPostInfoPage(){
3.     let response = await getAllPost(this.page,10)
4.     response.data.data.records.forEach(post=>this.postInfoList.push(new PostInfo(post)))
5.     this.total=response.data.data.total
6.     this.page++
7.   }

复制代码

调用getAllPost接口， 传入的page是页数，10是每页包罗多少条打卡信息。获取之后通过foreach转换为PostInfo格式，PostInfo是封装好的，专门用来存储打卡卡片信息的一个数据格式。然后存在postInfoList列表中，用于后续的渲染。

2. export class PostInfo {
3.   id: number;
4.   postText: string;
5.   rightCount: number;
6.   answeredCount: number;
7.   timeUsed: number;
8.   createTime: string;
9.   likeCount: number;
10.   nickname: string;
11.   avatarUrl: string
12.   isLike: boolean;
13.   constructor(post:{id: number, postText: string, rightCount: number, answeredCount: number, timeUsed: number, createTime: string, likeCount: number, nickname: string, avatarUrl: string, isLike: boolean}) {
14.     this.id = post.id;
15.     this.postText = post.postText;
16.     this.rightCount = post.rightCount;
17.     this.answeredCount = post.answeredCount;
18.     this.timeUsed = post.timeUsed;
19.     this.createTime = post.createTime;
20.     this.likeCount = post.likeCount;
21.     this.nickname = post.nickname;
22.     this.avatarUrl = post.avatarUrl;
23.     this.isLike = post.isLike;
24.   }
25. }

复制代码

卡片组件

通过前面那么多次的报告，信赖各人可以很快看出来这个卡片的布局，分为三部分，上面为Image +text +blank +text，中心就是一个text，下面则是和前面统计页面雷同的卡片页面，可以复用我们前面封装的组件信息。值得留意的是在卡片右边尚有一个小小的点赞按钮。

点赞

点赞的UI是不难，必要留意的是他的逻辑，第一、一个人只能点赞一次，再点一次会取消点赞，因此我们必要一个boolean变量来记录。第二、多个差异用户点赞的话，他的点赞数应该是累加的，必要我们上传到数据库，要不我们永世只能看到0和1.（代码中的cancelLike和Like就是两个接口，用于记录此用户是否点赞过这个卡片）

2. Column({ space: 10 }) {
3.       Row({ space: 10 }) {
4.         Image(this.post.avatarUrl)
5.           .height(40)
6.           .width(40)
7.           .borderRadius(20)
8.         Text(this.post.nickname)
9.           .height(40)
10.           .fontSize(14)
11.           .fontWeight(FontWeight.Bold)
12.         Blank()
13.         Text(this.post.createTime)
14.           .height(40)
15.           .fontSize(14)
16.           .fontColor('#999999')
17.           .fontWeight(FontWeight.Medium)
18.       }.width('100%')
20.       Text(this.post.postText)
21.         .width('100%')
22.       Row() {
23.         Column() {
24.           StatItem({
25.             icon: $r('app.media.ic_timer_white'),
26.             name: '⽤时',
27.             fontColor: Color.White
28.           }) {
29.             Text(convertMillisecondsToTime(this.post.timeUsed))
30.               .statTextStyle()
31.           }
33.           StatItem({
34.             icon: $r('app.media.ic_accuracy_white'),
35.             name: '准确率',
36.             fontColor: Color.White
37.           }) {
38.             Text((this.post.answeredCount === 0 ? 0 : this.post.rightCount / this.post.answeredCount * 100).toFixed(0) + '%')
39.               .statTextStyle()
40.           }
42.           StatItem({
43.             icon: $r('app.media.ic_count_white'),
44.             name: '个数',
45.             fontColor: Color.White
46.           }) {
47.             Text(this.post.answeredCount.toString())
48.               .statTextStyle()
49.           }
50.         }
51.         .padding(10)
52.         .borderRadius(10)
53.         .layoutWeight(1)
54.         .backgroundImage($r('app.media.img_post_bg'))
55.         .backgroundImageSize(ImageSize.Cover)
57.         Column() {
58.           Text(this.post.likeCount.toString())
59.             .fontSize(12)
60.             .fontWeight(FontWeight.Medium)
61.             .fontColor(this.post.isLike ? '#3ECBA1' : '#000000')
62.           Image(this.post.isLike ? $r('app.media.ic_post_like_selected') : $r('app.media.ic_post_like'))
63.             .width(26)
64.             .height(26)
65.             .onClick(() => {
66.               //todo：点赞/取消点赞
67.               if(this.post.isLike){
68.                 this.post.isLike=false
69.                 this.post.likeCount--
70.                 cancelLike(this.post.id)
71.               }else{
72.                 this.post.isLike=true
73.                 this.post.likeCount++
74.                 like(this.post.id)
75.               }
76.             })
77.         }.width(50)
78.       }.width('100%')
79.       .alignItems(VerticalAlign.Bottom)
80.     }

复制代码

 
回到顶部 

2. Column({ space: 20 }) {
3.         Button({ type: ButtonType.Circle }) {
4.           Image($r('app.media.ic_top'))
5.             .height(14)
6.             .width(14)
7.         }
8.         .height(40)
9.         .width(40)
10.         .backgroundColor(Color.Black)
11.         .opacity(0.5)
12.         .onClick(() => {
13.           //返回顶部
14.           this.scroller.scrollToIndex(0)
15.         })

复制代码

UI不必多说，就是一个按钮组件中放置了一个Image，紧张是回到顶部的逻辑是怎么样的呢。这里我们必要用的一个新的api：scroll可滚动的容器组件，当子组件的布局尺寸高出父组件的尺寸时，内容可以滚动。此中有个scrollToIndex属性，作用是滑动到指定Index，仅实用与grid和list布局，恰恰我们就是list布局，因此只要我们填入0，他就可以滑动到索引为0的地方，也就是列表的最上方，如许就实现了回到顶部的功能。

革新

这个逻辑比力简单，将全部信息重置为初始状态，然后重新获取一次列表，就实现了革新功能。

2. async refresh(){
3.     this.isLoading=true
4.     this.postInfoList=[]
5.     this.page=1
6.     this.total=0
7.     await this.getPostInfoPage()
8.     this.isLoading=false
9.   }

复制代码

登录页

这个页面中有一个很显着和其他页面差异的地方是，他的左上角有一个返回按钮，由于登录页面一样寻常不是一个长期使用的页面，一样寻常我们最开始使用登录一次，后续就可以使用了。因而只是一个临时界面，一样寻常由打卡圈界面、个人界面大概打卡弹窗跳转而来，以是返回按钮使用到了router路由中的back函数，如许就可以跳转回刚才的界面。

2. Image($r('app.media.ic_back'))
3.         .backStyle()
4.         .alignSelf(ItemAlign.Start)
5.         .onClick(() => {
6.           //返回上⼀⻚⾯
7.           router.back()
8.         })

复制代码

 输入手机号码和验证码是用到两个TextInput组件，这也是很常用的组件，不外多赘述。这个获取验证码按钮是接纳调取后端接口，直接返回一个验证码并表如今TextInput中，登录也是接纳了调用后端接口的方式，将手机号和验证码发给后端举行登录。

2. Button('获取验证码')
3.             .buttonStyle(Color.White, Color.Black)
4.             .onClick(async () => {
5.               //获取验证码
6.              let response = await sendCode(this.phone)
7.               this.code = response.data.data
8.             })

复制代码

2. Button('⽴即登录')
3.           .buttonStyle(Color.Black, Color.White)
4.           .width('100%')
5.           .margin({ top: 50 })
6.           .onClick(async () => {
7.             //登录
8.             let response = await login(this.phone,this.code)
9.             this.token = response.data.data
10.             }

复制代码

 

个人页

个人页比力简单，退出登录则将信息重置，未登录则点击跳转到登录页面，在这就不讲啦。

调用接口

这个项目中前后端交互的方式是大部分学前端同砚比力认识的axios，起首你要先下载第三方库axios。Axios 是一个基于 Promise 的 HTTP 客户端，它可以让你更方便地举行 HTTP 哀求和处理惩罚相应，支持异步利用，并提供了简便的 API 接口。
起首，我们先创建一个axios实例

2. export const instance = axios.create({
3.   baseURL: 'http://192.168.0.103:3000',
4.   timeout: 2000
5. })

复制代码

baseUrl的作用是用变量名取代背面长串的url，由于每个api都是拼接在baseurl之后的，前半部分都是雷同的。timeout是超时时长，高出这个时间则视为哀求超时，必要查抄网络大概url是否精确等。
哀求拦截器

2. // 添加请求拦截器
3. instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
4.   // 通过AppStorage获取token
5.   const token = AppStorage.Get('token')
6.   if (token) {
7.     // 若token存在，则将其添加到请求头
8.     config.headers['token'] = token
9.   }
10.   return config;
11. }, (error: AxiosError) => {
12.   //若出现异常，则提示异常信息
13.   promptAction.showToast({ message: error.message })
14.   return Promise.reject(error);
15. });

复制代码

 每个代码块的作用已用表明卸载了代码块之前，这里先容一下token，我对token的认知是：token是一个用于标识用户身份的代码串。当一个用户注册后，后端就会给其赋予一个token，每次用户哀求利用时，就会在哀求头中带上token，后端吸取后通过剖析token，就可以知道是哪个用户举行了利用。

相应拦截器

2. // 添加响应拦截器
3. instance.interceptors.response.use((response: AxiosResponse) => {
4.   // 若服务器返回的是正常数据，不做任何处理
5.   if (response.data.code === 200) {
6.     return response
7.   } else {
8.     //若服务器返回的是异常数据，则提示异常信息
9.     promptAction.showToast({ message: response.data.message })
10.     return Promise.reject(response.data.message)
11.   }
12. }, (error: AxiosError) => {
13.   //若出现异常，则提示异常信息
14.   promptAction.showToast({ message: error.message })
15.   return Promise.reject(error);
16. });

复制代码

API

下面展示一个get哀求和一个post哀求
Get

get哀求一样寻常用于哀求数据

2. //获取验证码
3. export function sendCode(phone: string) {
4.   return instance.get('/word/user/code', { params: { phone: phone } });
5. }

复制代码

比如这个获取验证码的哀求，我们转达手机号给后端，后端return给我们一个验证码。instance是刚刚我们创建的axios实例。
Post

post哀求一样寻常用于发送数据

2. //登录
3. export function login(phone: string, code: string) {
4.   return instance.post('/word/user/login', { phone: phone, code: code });
5. }

复制代码

比如这个登录哀求，我们必要转达手机号和验证码给后端，后端举行验证，乐成则登录，失败则返回错误信息。

不管是post照旧get大概其他哀求，我们都可以看到一个形如“/word/user/login”的字符串，这个就是拼接到前面实例中的baseUrl之后形成完备的url，使得哀求得以乐成发送。