极客Go云监工 — 基于Ant Design的Web React实现

Posted 2022-11-24 东月之神

前言

玩客云接口的破解和后端api都已经分析了，那些都是看不见的，而展现在用户面前的是前端的web或者微信的小程序。
由于一开始还不会小程序就先用react写了一个前端，写的比较乱，将就能用，也没有系统做过前端，借此机会来动手实践下。主要是不想用很重的app来实现，毕竟稍微看下，操作下就行，不需要非常好的用户体验。好了，我们还是具体看下吧。

框架

• React

使用的react框架，本来想用vue的，其实都差不多

• Antd/Antd-mobile

感觉蚂蚁的antd比较好看，就使用了这个框架

效果介绍

• 行情
  
  该页面主要是链克的产量和链克的一些排行榜

• 账号
  
  展示所有添加的账号的详情，包括添加账号功能，删除账号，提取链克等功能

• 链克
  
  显示近期和全部链克产量，并显示近7天的趋势图

• 我的
  主要是绑定邮箱，关于我们，退出登录等功能
  

• 登录注册
  当然少不了登录注册的功能，这里就不贴图了

源码目录

源码结构比较简单，使用了react脚手架来新建的工程，然后就可以在内部添加我们需要的代码了。我们主要看下各个页面实现：

src
  - component 各个页面和组件
  - image     图片资源
  - router    路由规则
  - store     存储的数据
  - style     css各个样式
  - utils     工具类，包括网络请求等

• 闪页，广告等 (component/SplashView.jsx)

• 主页 (component/Home.jsx)
  使用了底部4个Tab的方式，类似支付宝的底部功能，点击可以进入到各个页面中。

• 行情页面（component/LTKMarket.jsx）

• 账号页面 (component/AccountInfoView.jsx)

• 链克页面 (component/LTKInfo.jsx)

• 我的页面 (component/Settings.jsx)

• 登录页面 (component/Login.jsx)

• 注册页面 (component/Register.jsx)

• 关于页面 (component/About.jsx)

• 支持页面 (component/Tipping.jsx)

• 帮助页面 (component/Help.jsx)

本以为挺少的内容，没想到写出来页面也挺多的。基本上代码都在上面了，如果要参考修改，可以查看github源码，记得给个star

github源码