/MallChatWeb

mallchat的前端项目,是一个既能购物又能聊天的电商系统。以互联网企业级开发规范的要求来实现它,电商该有的购物车,订单,支付,推荐,搜索,拉新,促活,推送,物流,客服,它都必须有。持续更新ing

Primary LanguageTypeScriptApache License 2.0Apache-2.0

MallChat 的【前端】项目,是一个既能购物又能即时聊天的电商系统。致力于打造互联网企业级项目的最佳实践。电商该有的购物车,订单,支付,推荐,搜索,拉新,促活,推送,物流,客服,它都必须有。持续更新 ing~~

项目导航

  1. 快速体验地址抹茶聊天首页
  2. 后端项目仓库MallChat
  3. 项目视频记录Bilibili 地址 全程分享项目进度,功能选型的思考,同时征集迭代建议。
  4. 项目学习文档:10w+字,保姆级教学路线,环境搭建、核心功能、基建轮子、接口压测、问题记录、一个不落。可点击抹茶项目文档查看(内含 500 人交流大群)
  5. 项目交流群:对抹茶感兴趣的,可以加入交流群。你的每一个举动,都会决定项目未来的方向。无论是提意见做产品经理,还是找 bug 做个测试人员,又或者加入开发小模块成为 contributer,都欢迎你的加入。
  6. 码云仓库https://gitee.com/Evansy/MallChatWeb (国内访问速度更快)

项目介绍

抹茶聊天是一个 IM 项目,通过 netty 实现和前端的 websocket 连接。内含微信扫描登录,成员列表,上下线动画,消息列表,消息互动,还有很多实用的小轮子列如 aop 日志,分布式锁注解,频控注解,ip 解析归属地等,持续更新中。。。

项目演示

项目启动及部署

  • 环境: node 16.18+, 包管理工具 pnpm (安装完 node 执行 npm i pnpm -g 即可);
  • 安装依赖: clone 工程之后,执行 pnpm i
  • 启动: 按 F5 即可自动执行 pnpm run dev 并且打开浏览器
  • 部署
    • 部署到本地:执行 pnpm build 构建完成后把 dist 文件夹 放到服务器,并配置 nginx 即可
    • 自动 CI/CD:通过 github actions 在代码提交到 GitHub 之后自动构建并部署到服务器, 详细参考可查看 deploy.yml

C 端项目

p92nKne.png

技术选型

前端技术

技术 说明 官网
Vue3 前端流行开发框架 https://cn.vuejs.org
Pinia vue3 官方推荐状态管理框架 https://pinia.vuejs.org
vue-router Vue 的官方路由 https://router.vuejs.org
TypeScript 让 JS 具备类型声明 https://www.typescriptlang.org/
Element Plus 缓基于 vue3 的组件库 https://element-plus.gitee.io
Alova 轻量级的请求策略库,用起来负担比 axios 小 https://alova.js.org/
vite 极速的前端打包构建工具 https://cn.vitejs.dev
pnpm 速度快、节省磁盘空间的软件包管理器 https://www.pnpm.cn

后端技术

MallChat

后端环境搭建

在项目目录下的application.yml修改自己的启动环境spring.profiles.active = test然后找到同级文件application-test.properties,填写自己的环境配置。星球成员提供一套测试环境配置,可直连

项目文档

保姆级教学路线,环境搭建、核心功能、性能优化、埋点上报、问题记录、项目亮点一个不落。点击 项目文档

更多有趣功能在持续更新中。。。

p92Qa2q.png

star 趋势图

Stargazers over time

贡献者

感谢各位贡献 PR 的小伙伴们~

公众号

微信搜索 阿斌 Java 之路 关注我的原创公众号,后台回复「抹茶」即可加入抹茶交流群,一些做过公司万人群聊,高并发的小伙伴都在里面讨论方案。公众号也会经常更新项目相关的文档,等你来撩~~

p9211Ag.png