react-juejin
Высокая имитация Nuggets в основном реализована в соответствии с пользовательским интерфейсом Nuggets, а некоторые места изменены в соответствии с их собственными идеями, только мобильная часть, а часть ПК займет слишком много времени, поддержка рендеринга на стороне сервера, 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-loadable
- react-redux
- redux-connect (переход с асинхронной маршрутизацией)
- react-router-config
- react-virtual-list (рендеринг длинного списка)
- prop-types
- @rematch/core (повторить матч с лучшим редуксом)
- @rematch/loading (автоматически установить загрузку при вызове эффектов)
- immer (изменить данные с побочными эффектами и вернуть новые данные, на которые ссылаются, не затрагивая исходные данные)
- axios
- babel-polyfill
- classnames
- lodash-es
- react-swipe
- react-toastify
- react-content-loader (загрузка заполнителя контента)
- react-lazyload
- react-swipe
- swipe-js-is
- хаски (хаски регистрирует 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
предварительный просмотр
титульная страница
Страница статьи
точка кипения
буклет
библиотека с открытым исходным кодом
Деятельность
Страница пользователя
наконец
Если вам интересно, вы можете прочитать код самостоятельно.Большая часть контента относительно проста.Если у вас есть какие-либо вопросы, вы можете обсудить это вместе.