【实战】SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0
基于SpringBoot+uniapp简单通讯聊天软件
项目介绍
JavaDog Chat 简单通讯聊天软件是基于SpringBoot+MybatisPlus+uniapp+uview+stomp等更多优秀组件及前沿技术开发,注释丰富,代码简洁,开箱即用,兼容H5+小程序+APP,及其适合入门学习!将想说却不敢说,相爱去不敢爱的思绪放置与此。
快速链接
微信公众号:JavaDog程序狗
关注公众号,发送 chat ,无任何套路即可获得
或访问https://blog.javadog.net/archives/chat
体验地址
因二维码图被和谐,最好访问https://blog.javadog.net/archives/chat进行扫码访问体验
1.网页H5
2.APP
体验账号
账号:18306390693
密码:123456
如需多个账户可自行注册
主要模块功能
️登录注册
- 用户可自主注册,并通过用户名密码进行登录
- 如忘记密码则可通过邮箱找回密码,但需要在配置文件中配置邮箱相关内容
消息
- 展示群组及好友聊天信息,并有消息提醒及未读标记
- 可通过上方放大镜进行搜索,或者扫一扫进行好友添加
- 点击查看聊天信息,可进行文字/图片/视频/语音等发送方式
好友
- 按照字母索引展示所有好友列表,并可通过放大镜搜索
- 通过右上角扫描二维码进行好友添加
- "我添加的"本人通过扫码或者搜索添加好友申请列表数据
- "添加我的"其他用户通过扫码或者搜索添加我本人申请列表数据
- 通过点击好友进行好有名片查看
群组
- 按照字母索引展示所有群组列表,并可通过放大镜搜索
- 通过右上角扫描二维码进行群组加入
- "新建群组"可根据所需进行群组的创建
- 通过点击群组进行好有名片查看
我的
- 点击头像进行头像修改
- "我的名片"展示本人所属二维码
- "修改密码"可进行密码重置
- "关于"展示本狗的博客是个webview跳转
- 点击退出并退出当前账号
️快速启动
后端chat-provider推荐IDEA打开,前端chat-uniapp推荐HbuliderX打开。
前端支撑
| 插件 | 版本 | 用途 |
|---|---|---|
| uview-ui | ^2.0.31 | 多平台快速开发的UI框架 |
| uni-simple-router | ^2.0.7 | 专为uniapp打造的路由器 |
| moment | ^2.29.4 | js工具库 |
| mescroll-uni | ^1.3.7 | 上拉加载下拉刷新插件 |
| @uni-ui/code-ui | ^1.4.8 | 二维码生成工具 |
启动前端
- 在chat-uniapp项目目录下执行
npm install
- 在HBuilderX工具下运行,选择需要运行到哪个终端
3. 如需调整环境,请在/common/config/env.js修改环境变量
后端支撑
| 插件 | 版本 | 用途 |
|---|---|---|
| jdk | 1.8 | java环境 |
| lombok | 1.18.16 | 代码简化插件 |
| maven | 3.6.3 | 包管理工具 |
| druid | 1.1.24 | JDBC组件 |
| hutool | 5.7.20 | Java工具类库 |
| mybatis-plus | 3.4.1 | 基于 MyBatis 增强工具 |
| pinyin4j | 2.5.1 | 拼音组件库 |
| mysql | 8.0 / 5.7 | 数据库 |
启动后端
- 开发工具内配置好,并将maven配置好,建议使用阿里云镜像
- 将chat-provider包下的/doc/SQL/db_chat.sql进行本地执行,并在application配置文件中修改数据库配置
- 运行启动SpringBoot项目,如见到以下日志即为启动成功。
其他辅助
️♀️原型图
本狗第一次画原型,请大佬勿喷
项目路径下/doc/原型/chat.rp
DB设计
项目路径下/doc/数据库设计/chat.pdm
版权说明
JavaDog Chat 采用 Apache License2.0协议
代码可用于个人学习等,完全开源免费
二次开发如用于毕设等二次售卖,未经审核视为侵权
【实战】SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目的更多相关文章
- 微信小程序开发入门学习(1):石头剪刀布小游戏
从今天起开始捣鼓小程序了2018-12-17 10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...
- 微信小程序开发入门学习(2):小程序的布局
概述 小程序的布局采用了和Css3中相同的 flex(弹性布局)方式,使用方法也类似(只是属性名不同而已). 水平排列 默认是从左向右水平依次放置组件,从上到下依次放置组件. 任何可视组件都需要使用样 ...
- 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」
uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...
- uniapp之uni-starter小程序多端研发框架搭建与项目实践
随着移动互联网的飞速发展,无数移动APP琳琅满目:在移动App的发展的基础上,衍生了小程序.轻应用技术,它随时可用,但又无需安装卸载.小程序是一种不需要下载安装即可使用的应用,它实现了应用" ...
- 开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
在我们开发开发H5程序或者小程序的时候,有时候需要基于内置浏览器或者微信开发者工具进行测试,这个时候可以采用默认的localhost进行访问后端接口,一般来说没什么问题,如果我们需要通过USB基座方式 ...
- 原创:从零开始,微信小程序新手入门宝典《一》
为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...
- 微信小程序室内地图导航开发-微信小程序JS加载esmap地图
一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...
- Java生鲜电商平台-优惠券功能设计与开发(小程序/APP)
Java生鲜电商平台-优惠券功能设计与开发(小程序/APP) 说明:Java生鲜电商平台-优惠券功能设计与开发(小程序/APP) 目录 1.项目背景与需求分析 2.需求目的与功能点列表 3.业务逻辑 ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- Java生鲜电商平台-关于学习生鲜电商平台的思考(小程序/APP)
Java生鲜电商平台-关于学习生鲜电商平台的思考(小程序/APP) 说明:最近群里面的一个网友问的一个问题,让我陷入了深思,他问的问题很基础也很真实,"大佬,你们是怎么学习的呢?" ...
随机推荐
- ubuntu安装samba服务
第一步 sudo apt-get install samba samba-common 安装完成 第二步 建立一个文件夹作为共享目录 sudo mkdir /home/yz/my_samba my_ ...
- Mybatis配置报错:Failed to configure a DataSource: 'url' attribute is not specified and no embe...
问题分析及解决方案 问题原因: Mybatis没有找到合适的加载类,其实是大部分spring - datasource - url没有加载成功,分析原因如下所示. DataSourceAutoConf ...
- PHP Redis - 事务
Redis 事务可以一次执行多个命令, 并有两个重要的保证: ① 事务是一个单独的隔离操作:事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的命令请求所打断. ② ...
- mermaid工具
mermaid支持:流程图.时序图.甘特-等图表的绘制:可在线编辑,保存代码.图片. mermaid :官网.在线编辑器.操作手册
- hdu4585 Treap与名次树/STL map(C/C++)
hdu4585 题目地址:https://acm.dingbacode.com/showproblem.php?pid=4585 Shaolin Time Limit: 3000/1000 MS (J ...
- Jmeter六、采样器解析
一.HTTP request sampler 默认端口:80 协议protocol:http,https,file 参数中有特殊字符,勾选编码encode send files with reques ...
- 排查占用cpu最高线程
- Vue的学习(2)
Vue.js的模板语法 1.数据绑定的最常见的方法是插值法,写法{{}} 2.输出html代码,命令为v-html 例如: <div id="app"> <p v ...
- 关于git错误:Git未能顺利结束(退出码 128)的解决办法
如图: 问题原因: 主要是:用户名.邮箱.用户密钥跟github官网上配置的不一致 https://blog.csdn.net/weixin_52517585/article/details/1269 ...
- python3GUI--实用!B站视频下载工具(附源码)
目录 一.准备工作 二.预览 1.启动 2.解析 3.下载中 4.下载完成 5.结果 三.设计流程 1.bilibili_video_spider 2.视频json的查找 四.源代码 1.Bilibi ...