kim09ai / react-juejin Goto Github PK

仿掘金移动版服务端渲染

JavaScript 83.87% HTML 0.49% CSS 15.63%

react-juejin's Introduction

react-juejin

一个高仿的掘金，大部分是按照掘金的ui来实现的，个别地方就根据自己想法修修改改，只做了移动端的部分，还做pc的部分就要花太多时间了，支持服务端渲染、pwa等，写这个项目主要是对近几个月所学的技术做个实践，看看有哪里还有不足，以及在实际开发的时候会踩到哪些坑，该怎么解决

运行

yarn or npm install

# development
npm run dev:client
npm run dev:server

# production
npm run build
npm start

技术栈

react
react-dom
react-router-dom
react-helmet （设置title及meta）
react-loadable
react-redux
redux-connect （异步路由跳转）
react-router-config
react-virtual-list （长列表渲染）
prop-types
@rematch/core （rematch 一个更好用的redux）
@rematch/loading （调用effects时，自动设置loading）
immer （以带副作用的方式修改数据并返回新引用的数据，不会影响原始数据）
axios
babel-polyfill
classnames
lodash-es
react-swipe
react-toastify
react-content-loader （内容占位的loading）
react-lazyload
react-swipe
swipe-js-is
husky （husky注册git hook）
lint-staged （对被提交的文件依次执行写好的任务）
webpack
eslint
express

实现的功能

公共头部
- 登录
首页
- 文章点赞
- 切换分类
文章页
- 评论列表
- 评论点赞
- 推荐文章列表
沸点页
小册
开源库
活动页
用户主页
- 关注用户
- 用户动态列表
- 用户专栏
- 用户沸点
- 用户的点赞
- 用户关注的标签

大概就是以上的功能，登录的话只支持手机登录，或者可以手动设置一个这样的cookie，再刷新页面就登录成功了

const userInfo = {
    token: data.token,
    clientId: data.clientId,
    uid: data.user.uid
}
Cookies.set('userInfo', userInfo, { path: '/' })

项目结构

├─.gitattributes
├─ecosystem.json    pm2部署配置
├─src
|  ├─app.jsx
|  ├─entry-client.js
|  ├─entry-server.js
|  ├─registerServiceWorker.js
|  ├─utils      工具函数
|  ├─store      store配置
|  ├─routes     路由配置
|  ├─models     store的model文件，创建state、reducers、effects
|  ├─containers     页面组件
|  ├─components     展示组件
|  ├─assets     需要webpack处理的资源
|  ├─api      对请求库的封装及获取数据的方法
├─server    服务端渲染
├─public    静态资源
├─build     webpack配置
|   ├─dll   生成dll的配置
├─.vscode
|    └launch.json

预览

首页

文章页

沸点

小册

开源库

活动

用户页

最后

要是感兴趣的话，可以自行看代码，大部分内容还是比较简单的，有问题的话欢迎提出了一起讨论

项目地址线上地址

react-juejin's People

Contributors

Stargazers

Watchers

react-juejin's Issues

作者大佬，你登陆手机号的正则写得有点问题，137开头的手机号码显示手机号错误，我看了下是因为正则写少了个7

非掘金站内文章无法显示

非掘金站内文章进入的是另一个页面entry
比如：https://juejin.im/entry/5be4b2026fb9a049e23180e2
正常的文章是这样的：https://juejin.im/post/5be3d54cf265da611d6624d3
接口地址：https://entry-view-storage-api-ms.juejin.im/v1/getEntryView?src=web&entryId=5be4b2026fb9a049e23180e2

<div styleName="title-wrapper">
    <Link to={`/post/${getPostId(item.originalUrl)}`} styleName="title">{item.title}</Link>
</div>

这里不能直接跳转，需要做判断，根据entrylist里的type字段，非站内文章是article,普通文章是post

Error: Cannot find module '../../dist/asyncCommonCss'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (D:\项目\practice\react-juejin-master\server\ssr\render.js:11:22)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)

请问注册功能是没有实现吗

是不是注册功能实现起来比较麻烦？

更换Code Splitting库

react-loadable已经不维护了，目前最新版本使用了react遗留的 context API，还使用了一个即将在react17中移除的生命周期函数 componentWillMount，建议使用其它Code Splitting库比如loadable-components。React官方已经将loadable-components作为服务端Code Splitting推荐库 https://reactjs.org/docs/code-splitting.html#reactlazy

你的数据api是怎么获取的呢？

跑不起来，运行报错

noConflict.js:3 Uncaught Error: Cannot find module 'core-js/es6'
at webpackMissingModule (noConflict.js:3)
at Object../node_modules/@[email protected]@@babel/polyfill/lib/noConflict.js (noConflict.js:3)
at webpack_require (bootstrap:766)
at fn (bootstrap:129)
at Object../node_modules/@[email protected]@@babel/polyfill/lib/index.js (index.js:3)
at webpack_require (bootstrap:766)
at fn (bootstrap:129)
at Module. (style.styl?c4cc:45)
at Module../src/entry-client.js (entry-client.js:27)
at webpack_require (bootstrap:766)