Интервью, чтобы построить авианосец, работать, чтобы завинтить винты, новый технический сотрудник интервью компании требует стека реагировать технологии.
В: Вы использовали React? О: Нет, использовал только Vue. Спросите еще раз: можете ли вы начать разработку через неделю? Ответ: Да (уверенно)...
Нан Муронг, Бэй Цяофэн, 18 ладоней, покоряющих драконов, и звезды движутся. Поворочавшись, я начал изучать React. Тем не менее, React...Orz в настоящее время не используется в проектах компании, но для улучшения реального боевого опыта я все еще создаю ReactFM в свободное время Ниже приводится введение в проект.
предисловие
Для большинства инженеров-разработчиков, на самом деле, частные проекты больше связаны с улучшением их реального боевого опыта, так что же за проекты разрабатываются и как повысить эффективность разработки? У меня тоже часто возникают такие сомнения, почему другие всегда могут делать проекты, до которых они не додумаются, а у меня нет никаких идей. Я думаю, это должно быть ваше отношение к контактной информации неправильное. У меня есть следующие предложения.
- Используйте поиск Google
- Обратите внимание на фронтенд популярный стек технологий
- Интеграция в интерфейсное сообщество (наггетс, zhihu, Sifu и т. Д.), Обратите внимание на проекты с открытым исходным кодом, и следуйте в блогах некоторых активных разработчиков
Для повышения эффективности, поскольку многие предприятия в настоящее время переходят от традиционных методов разработки к методам разделения внешнего и внутреннего интерфейса, рабочая нагрузка на разработку переднего плана больше, чем у традиционных методов разработки. Несомненно, когда мы сами разрабатываем частные проекты, нам необходимо самим выполнять front-end работу и писать интерфейсные сервисы, а значит, цикл разработки соответственно удлиняется. Я думаю, что это нужно учитывать, исходя из соображений проекта и личных обстоятельств.Если у вас есть собственный облачный хост и нет опыта разработки интерфейсов Restful, вы можете самостоятельно выполнить переднюю и заднюю часть, чтобы улучшить свой реальный боевой опыт; если вы у вас нет собственного хоста и проект относительно небольшой и ожидаемый Объем запросов будет не очень большим, и можно использовать серверные облачные сервисы.Например, этот проект основан наLeancloudРеализуется сервисом хранения данных.
адрес проекта
Скриншот проекта
предварительный просмотр
доступfm.huzerui.com/, или отсканируйте QR-код для предварительного просмотра (лучше всего на мобильных устройствах)
тестовый аккаунт
- Username: petalFM
- Password: petalFM
стек технологий
- Рамка:react
- Государственное управление:redux
- Пакет:Webpack,Babel
- язык:ES2015, Less
- библиотека:
- React Router V4
- Material-UI
- Проверка кода:ESLint
- Поддержка значков:Iconfont
Каталог проекта Описание
.
|-- config // webpack配置目录
|-- database // 数据库备份目录
|-- media // readme描述资源
|-- src // 源码目录
| |-- components // 公共组件
| |-- pages // 页面组件
| |-- Login // 登陆页面
| |-- Guide // 标签定制页
| |-- Index // 主页
| |-- Search // 搜索页
| |-- Admin // 后台数据录入页（仅管理员可见）
| |-- Dislike // 用户不兴趣歌曲页
| |-- router // 路由定义
| |-- services // 后端服务目录
| |-- avinit.js // leancloudSDK初始化
| |-- config.js // 数据库相关配置
| |-- songServices.js // 歌曲相关服务
| |-- userServices.js // 用户相关服务
| |-- index.js // 后端数据库服务入口
| |-- store // 状态管理目录
| |-- index.js // 加载各种store模块
| |-- types // 定义触发状态改变类型
| |-- reducers // 状态生成器
| |-- Utils // 工具函数
| |-- index.js // 程序入口文件
|-- .gitignore // Git提交忽略文件规则
|-- LICENSE // 授权协议
|-- README.md // 项目说明
|-- package.json // 配置项目相关信息
.
Местная операция или вторичное развитие
Поскольку серверное облако включило имя домена безопасности WEB, проект нельзя запускать непосредственно после проекта локального клона.Решение заключается в следующем:
Предварительная работа:
git clone https://github.com/alex1504/PetalFM.gitnpm install- Шаг 3: вleancloud.cn/Зарегистрируйте учетную запись и создайте приложение Leancloud в фоновом режиме.
- Шаг 4: Импортируйте базу данных в базу данных корневого каталога в фоновом режиме приложения Leancloud и создайте свою учетную запись администратора в таблице _User (имя пользователя и пароль должны состоять из 4-8 цифр, букв или _)
- Шаг 5: Изменить
/src/services/config.jsКонфигурация выглядит следующим образом:
export const APP_ID = 'YOUR APP_ID FOUND IN LEANCLOUD APP SETTING';
export const APP_KEY = 'YOUR APP_KEY FOUND IN LEANCLOUD APP SETTING';
export const SUPER_USER_OBJECT_ID = 'YOUR SUPERUSER ACCOUNT OBJECT ID';
Только администраторы могут видеть вход и через интерфейс поиска Admin запись песни, и установить категорию песни.
Разработка:
- Шаг 6: Выполнить
npm run devзапустить проект - Шаг 7: Выполнить
npm run buildупаковать проект,/dist/Папка для пакета файлов проекта
развертывать:
- Шаг 9: В процессе разработки webpack-dev-server будет
/api/запрос переадресованhttp://music.163.com/api(Если вам нужно добавить другие механизмы переадресации, измените конфигурацию прокси-сервера в package.json, см. полную конфигурациюhttp-proxy), Так что помогите серверному интерфейсу nginx или nodejs пробросить при развёртывании на сервер, иначе сервисы поиска и входа не вступят в силу.
Суммировать
В процессе разработки проекта вы столкнетесь с множеством проблем, решите проблемы и постоянно набирайтесь опыта. Чтобы изучить развитие предыдущего апплета, сделайте небольшую программу под названием APP (карманная гитара), которой движет личный интерес к развитию идей. Начните учиться с небольшой стартовой документации по программе, интерфейс APP заимствован из других небольших программ, после формирования интерфейса источник данных не найден, затем с помощью nodejs написал рептилию начальный ввод данных, разрешил регулярное сканирование в актуальном состоянии и инкапсулирует службы интерфейса, и даже сделать простую внутреннюю страницу ввода данных, в целом, это интересный опыт.
Если вам нравится этот проект, вы можете его пометить или разветвить, спасибо за вашу поддержку.