Обновление: теперь поддерживаетсяэтот новый элемент чатаохватывать
vue-chat
представлять
Это мой завершенный проект. Функции продукта и страницы относятся к QQ, WeChat и TIM. Они не совсем одинаковы, и некоторые из них являются моими собственными идеями. Пишите и спереди, и сзади. Это похоже на очень хороший проект входа с полным стеком, с различными взаимодействиями и различной бизнес-логикой, не причудливой, а практичной.
Это будет очень полезно для изучения node (koa) и vue.Сейчас он с открытым исходным кодом, и он будет продолжать улучшаться в будущем 😄 Добро пожаловать звездочка
更新： electronic-vue-chat: Адрес проекта настольной версии Electron vue-chat.
Пишем реактивную версию 😄
Стек технологий:
Front-end vue, vue-router, vuex, vue-cli и axios, scss, использовал rem для мобильной адаптации и не использовал сторонние компоненты. Серверная часть использует koa2, а инструмент сборки gulp используется для автоматического обновления внутреннего кода для запуска. База данных использует mysql, механизм аутентификации jwt на основе токенов и socket.io для двусторонней связи;
гитхаб-адрес
онлайн-адрес
Нажмите, чтобы посмотреть онлайн
Приглашаем всех зарегистрироваться и войти, добавить этот групповой чат 😄 Название группы поиска: группа общения проекта
Вы также можете добавить меня в друзья, имя пользователя: hxvin
Вы также можете зарегистрировать два аккаунта и общаться с самим собой в двух разных браузерах 😂
Дисплей проекта
- Состав системы
todo
2018.01.13 старт
- Авторизоваться
- регистр
- выход
- Такие компоненты, как всплывающие окна, подсказки и т. д.
- Ответ робота в смарт-чате
- Личный чат
- Групповой чат
2018.02.01
- Карточка профиля пользователя
- Добавление друзей и проверка запросов на добавление в друзья
- Уведомление о запросе в друзья
- удалить друга
- Напоминание о непрочитанных сообщениях
2018.02.10 Tucao, я должен восхищаться пользовательским интерфейсом QQ и WeChat, там довольно много функциональных деталей. . . . .
- Поиск пользователей, групп
- Создать группу
- групповая карта данных
- Добавить группу
- выйти из группы
- Изменить примечания
2018.02.11
- Опубликовать онлайн
- редактировать личную информацию
2018.03.02
- Получите напоминание красной точкой в нижней части запроса на добавление в друзья.
2018.03.20 Исправлено множество ошибок :-)
-
Мигрируйте в электронную настольную версию, поддерживают среду Mac и Win.
(версия Electron будет открыта после защиты)
С открытым исходным кодом:Адрес проекта электронной настольной версии
2018.03.25
- Отображение адресной книги
- чат смайликов
- Общайтесь и отправляйте фотографии
- Поддержка улучшения кода чата, md-грамматики
- Пользователь загружает аватар
- Оптимизация производительности, Redis для кэширования
- Реализовать реактивную версию
Загрузите в локальную среду разработки и запустите
Для этой разработки я использовал три ветки git, а именно главную ветку, ветку разработки и онлайн-ветку.
(Обратите внимание, что если вы хотите испытать общение и чат soket.io после перехода в локальную область, откройте учетную запись в каждом из двух браузеров, вы не можете использовать один и тот же браузер, потому что я использую localstorage для кэширования информации об учетной записи)
Разветвите или скачайте этот проект
Затем войдите в папку этого проекта, потяните файл airchat.sql vue-chat/server/init/sql на свой клиент msyql и запустите его для создания базы данных (я использую macSequel ProЭто очень полезно, конечно, вы можете сгенерировать базу данных и другими способами)
npm i
npm run dev
cd server
npm i
Затем выполните одну из следующих двух команд, просто посмотрите на выбор; (если вы хотите изменить внутренний код для немедленного сохранения и обновления, используйте первую; если вы хотите использовать хром для отладки, используйте вторую )
npm run start
npm run dev
Упакуйте его так, чтобы каждый мог использовать ваш продукт (не обязательно)
Перед упаковкой и запуском нужно внести некоторые изменения в код ветки master. Как его модифицировать и как упаковать онлайн в будущем, смотрите в статье, которую я написал отдельноупаковка vue-chat и примечания к запуску, Надеюсь, это поможет вам.
По старой привычке, комментарии к коду более подробные, и я восполню комментарии как можно скорее без комментариев; Я напишу несколько блогов позже, чтобы подробно представить этот проект, надеясь лучше помочь новичкам (пожалуйста, пропустите это или дайте некоторые рекомендации и предложения 😄)
Если это будет полезно для вас, я надеюсь дать старт и поощрить меня продолжать обновлять ^ ^
каталог разработки
├── LICENSE
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── dist //打包后的静态资源
│ ├── index.html
│ └── static
├── index.html
├── package-lock.json
├── package.json
├── server // 后端代码
│ ├── config.js
│ ├── controllers
│ ├── gulpfile.js
│ ├── index.js
│ ├── init //数据库初始化(sql文件也在这)
│ ├── middlewares
│ ├── models
│ ├── package-lock.json
│ ├── package.json
│ ├── routes
│ └── utils
├── src //前端代码
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.js
│ ├── pages
│ ├── router
│ ├── store //vuex在这
│ └── utils
└── static
Материал
подвела
Схема адаптации мобильного веб-терминала
упаковка vue-chat и примечания к запуску
Как отлаживать веб-страницы для мобильных устройств
Локальный клиент mysql подключается к базе данных centos
Статьи находятся вмой блогДобро пожаловать в мой блог 😄
третья сторона (спасибо здесь)
англоязычная документация socket.io
китайская документация socket.io