前言
最近在学习React,为了在学习的同时巩固一下所学内容,决定仿一个《快看漫画》的网页;由于学习进度及时间问题,我只实现了网站的部分功能:登录与退出、对应漫画关注/取关、关键词搜索等。
项目写了一个星期,写的时候觉着自己写了好多呀;写完之后就发现怎么才这么点。。。但是就这么一点点我也厚着脸皮写文章了,希望能给新手起到参考作用;同时虚心向各路大佬请教。
——by不会写文章的前端小白
详细介绍
1. 技术栈与组件库
- react-reudx: 解决组件间通信
- redux-thunk: 异步操作中间件
- reac-router-dom: SPA单页面开发
- axios: 异步获取数据
- react-transition-group: 实现简单动画样式
- immutable.js: 让数据类型不可变
- styled-components: 样式编写库
2. 目录列表
├── ...
├── ...
├── ...
├── public
│ ├── api // 模拟数据存放目录
├── src // 开发目录
│ ├── common // 公共组件
│ ├── pages // 页面
│ │ ├── detail // 详情页
│ │ ├── home // 首页
│ │ ├── login // 登录页
│ ├── statics // 静态图片资源
│ ├── store // 总存储仓库目录
├── App.js
├── index.js
├── style.js // 样式文件
├── ...
├── ...
├── ...
3. 功能介绍
'登录/退出' 功能:
通过设置登录状态(true or false)来判断是否登录,同时通过ref属性取到用户名,传给User组件将用户名渲染到页面。

'关注/取消关注' 功能:
点击关注时获取相应漫画id并集合成数组;点击取消关注时获取当前项漫画id,通过indexOf找到对应id后dispatch出漫画信息,再将对应漫画项移除。

对应漫画'关注/取消关注'按钮显示:
{
//this.followItem获取当前已关注列表,this.list.id为当前项漫画id
isLogin && this.checkFollowed(this.followItem, this.list.id) ?
<Follow
className="btn other"
onClick={() => cancleFollowed(this.list.id, this.followItem)}
>
取消关注
</Follow> :
<Follow
className="btn other"
onClick={() => followCartoon(this.props.list, this.list.id, isLogin)}
>
关注
</Follow>
}
----------------------------------------------------------------------
checkFollowed(newList, id) {
const arr = [];
for(let i = 0; i < newList.length; i ++) {
// 集合已关注漫画项id
arr.push(newList[i].id)
}
// 若当前项漫画id存在于id集合中 返回true 显示'取消关注'
if(arr.indexOf(id) >= 0) return true;
}
点击'取消关注'移除对应漫画项:
// 派发action,传入当前项漫画id及'已关注'漫画数组
cancleFollowed(id, list) {
dispatch(actionCreators.cancleFollowed(id, list));
}
-----------------------------------------------------------------------------
export const cancleFollowed = (id, list) => {
return dispatch => {
const arr = [];
for (let i = 0; i < list.length; i++) {
// 判断当前项漫画是否存在于'已关注'列表
// 若有则移除当前项并将新列表数组派发给reducer
// reducer接受新列表数组并更新state,完成漫画取关
if (list[i].id !== id) {
arr.push(list[i]);
}
}
dispatch(searchFollowed(arr));
}
};
关键词搜索功能:
可以通过漫画名及作者来搜索相应漫画(当然都是假数据),页面上显示的漫画我都做了其他的我就没做了哈。
这部分逻辑与'关注/取关'相似,也是通过获取input的value值,用indexOf()方法判断是否存在于关键词列表里(事先写好的假数据,包括作品名和作者);再dispatch出对应项id,根据id集合对应漫画项信息,然后就可以渲染到界面上。

结束语
写这篇文章的目的就是记录一下我的学习情况,鼓励自己继续往下学,还想要整理一下我的思路(其实挺乱的吧),对这个项目感兴趣的小伙伴可以去查看我的项目地址(贴在下面啦)。
本人前端新手,希望各位小(da)伙(lao)伴多给我一点意见,感谢!
欢迎交流٩(๑❛ᴗ❛๑)۶
微信:LYX0_0TXRY
QQ:295510545
附上我的项目地址:Lesta
